/* Trí Lữ modern surface. Opt-in pages only; all learning state stays in its owner. */
html[data-tl-modern] {
  --modern-scene:url('/anh-art/nen-web-sang-1672.webp');
  --modern-wash:rgba(248,246,237,.28);
  --modern-brand-glow:0 0 18px rgba(190,142,67,.15);
}
html[data-tl-modern][data-mode="dark"],html[data-tl-modern][data-theme="dark"] {
  --modern-scene:url('/anh-art/nen-web-toi-1672.webp');
  --modern-wash:rgba(4,17,29,.30);
  --modern-brand-glow:0 0 16px rgba(255,218,161,.35);
}
html[data-tl-modern] body {
  color:var(--tl-ink);font-family:var(--tl-font-ui);font-size:var(--tl-text-body);
  background-color:var(--tl-paper-soft);background-image:linear-gradient(var(--modern-wash),var(--modern-wash)),var(--modern-scene);
  background-position:center top;background-size:cover;background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
html[data-tl-modern] :is(button,input,select,textarea) {font-family:var(--tl-font-ui)}
html[data-tl-modern] :is(button,select,input:not([type="checkbox"]):not([type="radio"]),summary) {min-height:var(--tl-control-min)}
html[data-tl-modern] button {min-width:var(--tl-control-min)}
html[data-tl-modern] :focus-visible {outline:3px solid var(--tl-focus);outline-offset:4px}
html[data-tl-modern] :is(h1,h2,h3,h4) {text-shadow:none}
html[data-tl-modern] ruby rt {min-height:0;font-size:max(11px,.5em);color:var(--tl-ink-soft)}

/* One clear surface for selecting an exam. Keep existing disclosure/score state. */
/* The legacy exam theme sets its background with !important. This exception is
   restricted to the explicit exam profile and does not alter other routes. */
html[data-tl-modern="exam"][data-mode] body.exam-room {
  background:linear-gradient(var(--modern-wash),var(--modern-wash)),var(--modern-scene) center top/cover fixed!important;
}
html[data-tl-modern="exam"][data-mode] body.exam-room header.tl {
  width:calc(100% - 36px);max-width:1120px;margin:18px auto 26px;padding:0;
  position:relative;inset:auto;border-radius:var(--tl-radius-panel);
  background:var(--tl-glass)!important;border:1px solid var(--tl-glass-border)!important;
  backdrop-filter:blur(var(--tl-blur))!important;-webkit-backdrop-filter:blur(var(--tl-blur))!important;
  box-shadow:var(--tl-shadow)!important;
}
html[data-tl-modern="exam"] body.exam-room header.tl::before {display:none}
html[data-tl-modern="exam"] body.exam-room header.tl .hd {min-height:68px;padding:12px 68px 12px 22px}
html[data-tl-modern="exam"] body.exam-room header.tl a {min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
html[data-tl-modern="exam"] body.exam-room #chonDe.exam-library {
  width:calc(100% - 36px)!important;max-width:960px!important;
  padding:clamp(22px,4vw,52px)!important;background:var(--tl-glass);border-color:var(--tl-glass-border);
  border-radius:var(--tl-radius-surface);box-shadow:var(--tl-shadow);
  backdrop-filter:blur(var(--tl-blur));-webkit-backdrop-filter:blur(var(--tl-blur));
}
html[data-tl-modern="exam"] body.exam-room .exam-library-heading {margin-bottom:var(--tl-space-5)}
html[data-tl-modern="exam"] body.exam-room .exam-library-heading h1 {font-family:var(--tl-font-ui);font-size:clamp(32px,5vw,52px);font-weight:700;letter-spacing:-.035em}
html[data-tl-modern="exam"] .exam-group>summary {min-height:76px;font-size:20px;font-weight:600;padding:16px 0;gap:18px}
html[data-tl-modern="exam"] .exam-group-arrow {display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);color:var(--tl-seal);background:var(--tl-paper-soft)}
html[data-tl-modern="exam"] .exam-group[open]>summary {color:var(--tl-seal)}
html[data-tl-modern="exam"] .exam-level>summary {font-family:var(--tl-font-ui);font-size:18px}
html[data-tl-modern="exam"] .exam-group-content {padding-left:var(--tl-space-4)}
html[data-tl-modern="exam"] .exam-count {font-size:14px;color:var(--tl-ink-soft)}
html[data-tl-modern="exam"] body.exam-room .exam-library .de-card {padding:var(--tl-space-4) 0}
html[data-tl-modern="exam"] .exam-source-link {text-underline-offset:5px}

/* Hán tự keeps its real characters, compounds, stroke and quiz engines. */
html[data-tl-modern="kanji"] {
  --cream:var(--tl-paper-soft);--paper:var(--tl-paper);--ink:var(--tl-ink);
  --gold:var(--tl-sepia);--gold-deep:var(--tl-sepia);--sumi:var(--tl-seal);
  --sans:var(--tl-font-ui);--jp:var(--tl-font-jp);--mono:var(--tl-font-mono);
}
html[data-tl-modern="kanji"] body {padding-right:0}
html[data-tl-modern="kanji"] body>.wrap {
  width:calc(100% - 36px);max-width:1040px;margin:18px auto 72px;
  padding:26px clamp(20px,4vw,52px);background:var(--tl-glass);
  border:1px solid var(--tl-glass-border);border-radius:var(--tl-radius-surface);
  box-shadow:var(--tl-shadow);backdrop-filter:blur(var(--tl-blur));-webkit-backdrop-filter:blur(var(--tl-blur));
}
html[data-tl-modern="kanji"] .nav-top {min-height:68px;margin:0 0 26px;padding:0 50px 18px 0;border-bottom:1px solid var(--tl-hair);gap:12px}
html[data-tl-modern="kanji"] .brand {min-height:44px}
html[data-tl-modern="kanji"] .brand-name {font-size:24px;text-shadow:var(--modern-brand-glow)}
html[data-tl-modern="kanji"] .brand-jp {font-size:10px;letter-spacing:.14em;color:var(--tl-ink-soft)}
html[data-tl-modern="kanji"] .back {min-height:44px;display:inline-flex;align-items:center;font-size:11px;border-radius:var(--tl-radius-control);border-color:var(--tl-hair);background:var(--tl-paper-soft)}
html[data-tl-modern="kanji"] .eyebrow {font-size:11px;line-height:1.6;letter-spacing:.13em;color:var(--tl-ink-soft)}
html[data-tl-modern="kanji"] .wrap>.bcrumb,html[data-tl-modern="kanji"] .wrap>.eyebrow {display:none}
html[data-tl-modern="kanji"] h1 {display:block;font-family:var(--tl-font-ui);font-size:clamp(28px,4.5vw,46px);font-style:normal;line-height:1.18;letter-spacing:-.035em;font-weight:700;color:var(--tl-ink)}
html[data-tl-modern="kanji"] h1::after {display:none}
html[data-tl-modern="kanji"] .lede {font-size:16px;color:var(--tl-ink-soft);line-height:1.65;margin-bottom:26px}
html[data-tl-modern="kanji"] .sec-head {gap:12px;margin:26px 0 18px}
html[data-tl-modern="kanji"] .sec-head h2 {font-family:var(--tl-font-ui);font-size:24px;font-style:normal;letter-spacing:-.02em}
html[data-tl-modern="kanji"] .sec-head h2 .jp {font-size:14px;color:var(--tl-ink-soft)}
html[data-tl-modern="kanji"] .kcard {
  grid-template-columns:220px minmax(0,1fr);gap:26px;padding:26px 0;margin:0;
  border:0;border-top:1px solid var(--tl-hair);border-radius:0;background:transparent;box-shadow:none;
}
html[data-tl-modern="kanji"] .kcard .kno {top:28px;right:0;font-size:11px}
html[data-tl-modern="kanji"] .kbox {background:var(--tl-paper-soft);border:1px solid var(--tl-hair);border-radius:var(--tl-radius-panel)}
html[data-tl-modern="kanji"] .kbox .glyph {font-family:var(--tl-font-shodo);font-size:132px;color:var(--tl-ink)}
html[data-tl-modern="kanji"] .kbox svg path[stroke="rgba(27,58,107,1)"] {stroke:var(--tl-ink)}
html[data-tl-modern="kanji"][data-mode="dark"] .kcard {background:transparent!important}
html[data-tl-modern="kanji"] .kinfo .hv {font-family:var(--tl-font-ui);font-size:28px;font-style:normal;letter-spacing:-.02em;font-weight:700;color:var(--tl-seal)}
html[data-tl-modern="kanji"] .kinfo .mean {font-size:18px;color:var(--tl-ink);margin:6px 0 18px}
html[data-tl-modern="kanji"] :is(.krow,.kmnemo,.kety,.witem) {font-size:16px}
html[data-tl-modern="kanji"] :is(.krow .lab,.kmnemo .lab,.kety .lab,.kwords .lab) {font-size:11px;letter-spacing:.08em;color:var(--tl-ink-soft)}
html[data-tl-modern="kanji"] .krow b.jp {font-size:20px}
html[data-tl-modern="kanji"] .kmeta {gap:8px;margin:12px 0 18px}
html[data-tl-modern="kanji"] .pill {background:transparent;border:0;border-radius:0;padding:0 12px 0 0;font-size:14px;color:var(--tl-ink-soft)}
html[data-tl-modern="kanji"] :is(.kmnemo,.kety) {background:transparent;border-left:2px solid var(--tl-seal);border-radius:0;padding:8px 0 8px 18px;line-height:1.65}
html[data-tl-modern="kanji"] .wlist {grid-template-columns:1fr;gap:0}
html[data-tl-modern="kanji"] .witem {min-height:52px;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 0;border-bottom:1px solid var(--tl-hair)}
html[data-tl-modern="kanji"] .witem .wjp {font-size:22px}
html[data-tl-modern="kanji"] .witem .wvi {color:var(--tl-ink-soft)}
html[data-tl-modern="kanji"] :is(.ktool,.tl-spk,.done-btn,.btn,.btn-sm) {min-height:44px;min-width:44px;padding:10px 14px;font-size:13px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:var(--tl-paper-soft);color:var(--tl-ink);box-shadow:none}
html[data-tl-modern="kanji"] .tl-spk {flex:none;padding:0;width:44px;height:44px;font-size:16px}
html[data-tl-modern="kanji"] .ktool:hover {background:var(--tl-wash);color:var(--tl-seal)}
html[data-tl-modern="kanji"] .ktools {gap:8px}
html[data-tl-modern="kanji"] #kh-lbar {position:static;top:auto;padding:12px 0;margin:0;border:0;border-bottom:1px solid var(--tl-hair);border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
html[data-tl-modern="kanji"] #kh-lbar>div {border:0;box-shadow:none;border-radius:0;background:transparent;padding:0;min-height:44px}
html[data-tl-modern="kanji"] #kh-lbar .all {background:var(--tl-paper-soft);color:var(--tl-ink);border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);padding:10px 12px;font-size:11px}
html[data-tl-modern="kanji"] .modern-intro-open {display:inline-flex;align-items:center;justify-content:space-between;gap:18px;margin:6px 0 10px;padding:0;border:0;background:transparent;color:var(--tl-ink-soft);font-size:14px;cursor:pointer}
html[data-tl-modern="kanji"] .modern-intro-open::after {content:'↗';font-size:18px;color:var(--tl-seal)}
html[data-tl-modern="kanji"] .modern-intro-dialog {width:min(560px,calc(100% - 32px));max-height:80svh;margin:auto;padding:26px;border:1px solid var(--tl-glass-border);border-radius:var(--tl-radius-surface);color:var(--tl-ink);background:var(--tl-glass-strong);box-shadow:var(--tl-shadow);backdrop-filter:blur(var(--tl-blur))}
html[data-tl-modern="kanji"] .modern-intro-dialog::backdrop {background:rgba(5,18,30,.48);backdrop-filter:blur(5px)}
html[data-tl-modern="kanji"] .modern-intro-dialog header {display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}
html[data-tl-modern="kanji"] .modern-intro-dialog h2 {font-family:var(--tl-font-ui);font-size:22px;font-style:normal;margin:0}
html[data-tl-modern="kanji"] .modern-intro-dialog button {min-width:44px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:var(--tl-paper-soft);color:var(--tl-ink);cursor:pointer}
html[data-tl-modern="kanji"] .modern-intro-dialog .intro {font-family:var(--tl-font-ui);font-size:16px;line-height:1.7;margin:0;padding:0;background:transparent;border:0;border-radius:0}
html[data-tl-modern="kanji"] .modern-intro-dialog .gtable {display:block;max-width:100%;overflow-x:auto;font-size:14px}
html[data-tl-modern="kanji"] :is(.qcard,.q-block,.quiz-section) {background:transparent;box-shadow:none;border-color:var(--tl-hair);border-radius:0}
html[data-tl-modern="kanji"] :is(.note,.tcard,.rulecard,.radcard) {background:transparent;box-shadow:none;border-color:var(--tl-hair);border-radius:var(--tl-radius-control)}
html[data-tl-modern="kanji"] :is(.mod-t,.tcard h4,.rulecard h4) {font-family:var(--tl-font-ui);font-style:normal;font-weight:600}
html[data-tl-modern="kanji"] :is(.mod-d,.rulecard p,.tcard p) {font-size:16px;color:var(--tl-ink-soft)}

@media(max-width:600px) {
  html[data-tl-modern="exam"] body.exam-room header.tl {margin:10px auto 18px;width:calc(100% - 20px)}
  html[data-tl-modern="exam"] body.exam-room #chonDe.exam-library {width:calc(100% - 20px)!important;padding:22px!important}
  html[data-tl-modern="exam"] .exam-group>summary {min-height:70px;font-size:18px}
  html[data-tl-modern="kanji"] body>.wrap {width:calc(100% - 20px);margin:10px auto 38px;padding:20px}
  html[data-tl-modern="kanji"] .nav-top {padding-right:38px;flex-wrap:wrap}
  html[data-tl-modern="kanji"] .brand img {width:38px;height:38px}
  html[data-tl-modern="kanji"] .brand-name {font-size:22px}
  html[data-tl-modern="kanji"] .brand-jp {display:none}
  html[data-tl-modern="kanji"] .back {font-size:10px;padding:8px;letter-spacing:.03em}
  html[data-tl-modern="kanji"] .kcard {grid-template-columns:minmax(0,1fr);gap:22px;padding:22px 0}
  html[data-tl-modern="kanji"] .kwrite {width:100%;max-width:220px;margin:0 auto}
  html[data-tl-modern="kanji"] .ktools {flex-wrap:nowrap;gap:6px}
  html[data-tl-modern="kanji"] .ktool {padding:10px 8px;font-size:12px;letter-spacing:0;white-space:nowrap}
  html[data-tl-modern="kanji"] .sec-head {margin-top:22px;margin-bottom:12px}
  html[data-tl-modern="kanji"] .nav-top {margin-bottom:18px}
  html[data-tl-modern="kanji"] .witem .wvi {flex:1;min-width:100px}
}
@media(prefers-reduced-transparency:reduce) {
  html[data-tl-modern] {--tl-glass:#faf9f4;--tl-paper:#faf9f4;--tl-paper-soft:#f0eee7;--tl-blur:0px}
  html[data-tl-modern][data-mode="dark"],html[data-tl-modern][data-theme="dark"] {--tl-glass:#102333;--tl-paper:#102333;--tl-paper-soft:#182c3c}
}
@media(prefers-reduced-motion:reduce) {
  html[data-tl-modern] *,html[data-tl-modern] *::before,html[data-tl-modern] *::after {animation:none;transition:none;scroll-behavior:auto}
}
@media print {
  html[data-tl-modern] body {background:#fff;color:#111}
  html[data-tl-modern="kanji"] body>.wrap {width:100%;margin:0;padding:0;background:#fff;box-shadow:none;border:0;backdrop-filter:none}
}