/* ============ DESIGN TOKENS ============ */
:root{
  --paper:#FFEFF5; --card:#FFFFFF; --card-2:#FFF6FA;
  --ink:#3A2130; --muted:#8B6076; --faint:#B78FA4; --line:#FBD8E6;
  --red:#F1467E; --gold:#FFAE1F; --jade:#17C29A; --indigo:#6C7BFF;
  --gold-soft:#FFF1D6; --jade-soft:#D8F8EF;
  --good:#0FA783; --good-bg:#D8F8EF; --bad:#F1467E; --bad-bg:#FFE1EC;
  --shadow:0 1px 2px rgba(120,40,80,.06), 0 12px 30px -18px rgba(160,50,105,.45);
  --r:20px; --z:1;
  --accent:#F1467E; --accent-ink:#FFFFFF; --accent-soft:#FFE1EC;
  --u1:#E8286A; --u2:#C77A06; --u3:#0E9B7B; --u4:#4E5FE6; --u5:#9333EA; --u6:#0E7FA8;
  --u1s:#FFE3EE; --u2s:#FFF2D9; --u3s:#DBF7EF; --u4s:#E6E9FF; --u5s:#F5E8FF; --u6s:#DCF1FA;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1E1019; --card:#2B1724; --card-2:#371E2E;
    --ink:#FFEAF3; --muted:#D0A2B9; --faint:#A47B90; --line:#4A2739;
    --red:#FF7FAC; --gold:#FFC24A; --jade:#3FDCB0; --indigo:#96A3FF;
    --gold-soft:#42311A; --jade-soft:#123A31;
    --good:#3FDCB0; --good-bg:#123A31; --bad:#FF7FAC; --bad-bg:#482435;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -20px rgba(0,0,0,.95);
    --accent:#FF7FAC; --accent-ink:#2C0B1B; --accent-soft:#482435;
    --u1:#FF7FAC; --u2:#FFC24A; --u3:#3FDCB0; --u4:#96A3FF; --u5:#D9A6FF; --u6:#5CC6EE;
    --u1s:#4A2436; --u2s:#43321B; --u3s:#123B32; --u4s:#272D55; --u5s:#3B2553; --u6s:#12384A;
  }
}
:root[data-theme="dark"]{
  --paper:#1E1019; --card:#2B1724; --card-2:#371E2E;
  --ink:#FFEAF3; --muted:#D0A2B9; --faint:#A47B90; --line:#4A2739;
  --red:#FF7FAC; --gold:#FFC24A; --jade:#3FDCB0; --indigo:#96A3FF;
  --gold-soft:#42311A; --jade-soft:#123A31;
  --good:#3FDCB0; --good-bg:#123A31; --bad:#FF7FAC; --bad-bg:#482435;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -20px rgba(0,0,0,.95);
  --accent:#FF7FAC; --accent-ink:#2C0B1B; --accent-soft:#482435;
  --u1:#FF7FAC; --u2:#FFC24A; --u3:#3FDCB0; --u4:#96A3FF; --u5:#D9A6FF; --u6:#5CC6EE;
  --u1s:#4A2436; --u2s:#43321B; --u3s:#123B32; --u4s:#272D55; --u5s:#3B2553; --u6s:#12384A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Noto Sans","Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:60px;
}
.hz{font-family:"Noto Serif SC",serif}
/* Pinyin / phonetic text must ALWAYS use the Latin font stack (never CJK fallback) */
.py, .pyk .k, .tcell, .tcell .p, .rdc .t, .scard .v, .vf-py, .vf-back .py, .qz-py, .dlg-py, .fk-py, .sy-py,
.lc-opt .p, .mt-chip .p, .wo-tok .p, .tq-opt .p, .sh-line .p, .vrow .p, .pytable td.snd .pcell,
.lc-opt .h.py, .qz .opt .py, .qz .q-hz.py{
  font-family:"Noto Sans","Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:600; font-variant-ligatures:none;
}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:8px}
.disp{font-family:"Baloo 2","Be Vietnam Pro",sans-serif; font-weight:700; letter-spacing:-.005em}

/* ============ LAYOUT SHELL (kiểu Bài 2) ============ */
#page{ zoom:var(--z) }
#confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:60; display:none}

.masthead{background:linear-gradient(125deg,#FF5FA2 0%,#F1467E 42%,#FF7E6B 100%); color:#fff; position:relative; z-index:910; overflow:hidden}
.masthead::after{content:""; position:absolute; inset:auto 0 0 0; height:7px;
  background:repeating-linear-gradient(90deg,#FFD166 0 14px, #FFF0F6 14px 20px, #7ED9C4 20px 26px, #FFF0F6 26px 32px)}
.mh-glyph{position:absolute; right:-24px; top:-56px; font-family:"Noto Serif SC",serif; font-weight:900;
  font-size:270px; line-height:1; color:rgba(255,255,255,.09); pointer-events:none; user-select:none}
.masthead-in{max-width:1180px; margin:0 auto; padding:26px 20px 30px; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:end; position:relative}
.eyebrow{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#FBD9A6; font-weight:700}
.title-row{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:8px}
.title-han{font-family:"Noto Serif SC",serif; font-weight:900; font-size:clamp(36px,6vw,54px); line-height:1; letter-spacing:.04em}
.title-py{font-family:"Noto Sans","Be Vietnam Pro",sans-serif; font-weight:600; font-size:clamp(13px,1.8vw,16.5px); color:#FBD9A6; letter-spacing:.08em}
.chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:13px}
.chip{font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.22)}
.tools{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.tool,.teacherbtn{border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff;
  border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer}
.tool:hover,.teacherbtn:hover{background:rgba(255,255,255,.28)}
.zoomer{display:inline-flex; align-items:center; gap:2px; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.14); border-radius:999px; padding:3px}
.zoomer button{color:#fff; border:none; background:none; border-radius:999px; padding:5px 11px; font-size:13px; font-weight:700; line-height:1; cursor:pointer}
.zoomer button:hover{background:rgba(255,255,255,.24)}
.zoomer button:disabled{opacity:.4; cursor:default}
.zoomer .zlbl{font-size:11.5px; color:rgba(255,255,255,.85); padding:0 5px; font-variant-numeric:tabular-nums; min-width:38px; text-align:center; font-weight:600}
@media (max-width:640px){ .masthead-in{grid-template-columns:1fr; align-items:start; padding:16px 15px 18px} .mh-glyph{font-size:150px; top:-18px; right:-14px} .chips{display:none} .title-han{font-size:clamp(32px,10vw,44px)} }

.wrap{max-width:1180px; margin:0 auto; padding:0 20px 90px}
.cols{display:grid; grid-template-columns:250px minmax(0,1fr); gap:30px; margin-top:-30px; position:relative; z-index:2; align-items:start}
@media (max-width:920px){ .cols{grid-template-columns:minmax(0,1fr); gap:16px; margin-top:16px} }
.cols > *{min-width:0}
main{min-width:0}
.rail{min-width:0}
.unit,.step,.step-body{min-width:0}
.rail{position:sticky; top:16px; z-index:40; display:flex; flex-direction:column; gap:12px}
@media (max-width:920px){ .rail{position:static; flex-direction:row; flex-wrap:wrap} .rail .panel{flex:1 1 260px} }
@media (max-width:640px){ .rail{flex-direction:column} .rail .panel{flex:1 1 auto} }
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.panel h3{margin:0 0 11px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); font-weight:800}
.xp{display:flex; align-items:center; gap:12px}
.xp .big{font-family:"Baloo 2",sans-serif; font-size:32px; font-weight:800; line-height:1; color:var(--red); font-variant-numeric:tabular-nums}
.xp .sub{font-size:12.5px; color:var(--muted); line-height:1.35}
.bar{height:9px; border-radius:99px; background:var(--card-2); border:1px solid var(--line); overflow:hidden; margin-top:12px}
.bar span{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--red)); transition:width .5s cubic-bezier(.2,.8,.2,1)}
.rail-btn{width:100%; border:none; background:var(--red); color:#fff; font-size:13.5px; font-weight:700;
  padding:11px 14px; border-radius:13px; cursor:pointer; margin-top:13px}
.reset{width:100%; border:none; background:var(--card-2); color:var(--muted); font-size:12.5px; font-weight:700;
  padding:9px 14px; border-radius:13px; cursor:pointer; margin-top:8px}
.reset:hover{color:var(--bad)}

.navpanel > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between}
.navpanel > summary::-webkit-details-marker{display:none}
.navpanel > summary h3{margin-bottom:0}
.navchev{color:var(--faint); font-size:12px; transition:transform .18s}
.navpanel[open] .navchev{transform:rotate(180deg)}
.navpanel[open] > summary{margin-bottom:12px}
.navlist{display:flex; flex-direction:column; gap:2px}
.navlist a{display:flex; align-items:center; gap:10px; text-decoration:none; padding:8px 8px; border-radius:12px;
  color:var(--muted); border:1.5px solid transparent}
.navlist a:hover{background:var(--card-2); color:var(--ink)}
.navlist a.done{border-color:var(--jade)}
.navnum{width:23px; height:23px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--uc,var(--accent)); color:#fff; font-family:"Baloo 2",sans-serif; font-size:11.5px; font-weight:800}
.navlist a.done .navnum{background:var(--jade)}
.navlist a.done .navnum::before{content:"✓"; font-size:11px}
.nm{flex:1; min-width:0; font-size:13.8px; font-weight:700; line-height:1.25; color:var(--ink)}
.nm em{display:block; font-style:normal; font-family:"Noto Serif SC",serif; font-size:11px; color:var(--faint); font-weight:500; margin-top:1px}
.navlist a[data-u="1"] .navnum{background:var(--u1)} .navlist a[data-u="2"] .navnum{background:var(--u2)}
.navlist a[data-u="3"] .navnum{background:var(--u3)} .navlist a[data-u="4"] .navnum{background:var(--u4)}
.navlist a[data-u="5"] .navnum{background:var(--u5)} .navlist a[data-u="6"] .navnum{background:var(--u6)}
.navlist a.done[data-u] .navnum{background:var(--jade)}

.startcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:16px 20px; margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.startcard .sc-k{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--faint)}
.startcard h3{font-family:"Baloo 2",sans-serif; font-size:18px; font-weight:700; margin:5px 0 0}
.sc-go{background:var(--red); color:#fff; border:none; border-radius:13px; padding:11px 18px; font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap}

main{max-width:none; margin:0; padding:0}
section.unit{margin-bottom:18px; scroll-margin-top:16px}
.unit[data-unit="1"]{--uc:var(--u1); --ucs:var(--u1s)} .unit[data-unit="2"]{--uc:var(--u2); --ucs:var(--u2s)}
.unit[data-unit="3"]{--uc:var(--u3); --ucs:var(--u3s)} .unit[data-unit="4"]{--uc:var(--u4); --ucs:var(--u4s)}
.unit[data-unit="5"]{--uc:var(--u5); --ucs:var(--u5s)} .unit[data-unit="6"]{--uc:var(--u6); --ucs:var(--u6s)}
details.step{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  margin-bottom:12px; overflow:hidden; border-top:3px solid var(--uc,var(--accent));
}
details.step > summary{
  list-style:none; cursor:pointer; padding:17px 20px; display:flex; align-items:center; gap:13px;
  font-weight:800; font-size:15.5px; font-family:"Baloo 2",sans-serif;
  background:linear-gradient(180deg,var(--ucs,var(--card-2)),var(--card));
}
details.step > summary::-webkit-details-marker{display:none}
details.step > summary .ico{
  width:36px;height:36px;border-radius:12px;background:var(--uc,var(--accent)); color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;
}
details.step > summary .chev{margin-left:auto; color:var(--faint); transition:transform .2s; font-size:13px}
details.step[open] > summary .chev{transform:rotate(90deg)}
details.step > summary .badge{
  font-size:10.5px; font-weight:800; color:var(--muted); background:var(--card);
  border:1px solid var(--line); padding:4px 10px; border-radius:99px; white-space:nowrap;
  font-family:"Be Vietnam Pro",sans-serif;
}
details.step > summary .badge.ok{color:var(--good); background:var(--good-bg); border-color:var(--good)}
.step-body{padding:4px 20px 22px; animation:slidein .22s ease}
@keyframes slidein{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .step-body{animation:none} }
.step-hint{font-size:12.5px; color:var(--muted); margin:-4px 0 14px; line-height:1.55}
@media (max-width:640px){ details.step > summary{padding:13px 15px; font-size:14px; gap:10px} details.step > summary .ico{width:30px;height:30px;font-size:14px;border-radius:10px} .step-body{padding:2px 15px 18px} }

h3.unit-h{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
  margin:22px 2px 8px; font-weight:800; font-family:"Be Vietnam Pro",sans-serif;
}
h3.unit-h .tagn{color:var(--uc,var(--red))}
.goal{
  background:var(--gold-soft); border-left:4px solid var(--gold); border-radius:0 12px 12px 0; padding:11px 14px; font-size:12.5px;
  color:var(--ink); line-height:1.6; margin:-2px 0 14px;
}
.goal b{color:var(--uc,var(--red))}

/* ============ BUTTONS ============ */
.btn{
  border:none; background:var(--accent,var(--red)); color:var(--accent-ink,#fff); font-weight:700; font-size:13.5px;
  padding:11px 16px; border-radius:13px; cursor:pointer; transition:transform .12s, filter .12s;
}
.btn:hover:not(:disabled){filter:brightness(1.05)}
.btn.ghost{background:var(--card-2); color:var(--muted); border:1px solid var(--line)}
.btn.jade{background:var(--jade); color:#fff}
.btn.sm{padding:8px 12px; font-size:12px; border-radius:10px}
.btn:disabled{opacity:.55; cursor:default}

/* ============ ORIGINAL-TAPE PLAYER ============ */
.apbar{background:var(--card-2); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; margin-bottom:14px}
.apbar .apt{font-size:11.5px; font-weight:800; color:var(--muted); margin-bottom:9px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.apbar .apt .tag{background:var(--uc,var(--indigo)); color:#fff; border-radius:99px; padding:2px 9px; font-size:10px; font-weight:800; letter-spacing:.04em}
.apbar audio{width:100%; accent-color:var(--uc,var(--red)); height:36px; display:block; border-radius:10px}
.aptools{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}
.aptools button{
  border:1px solid var(--line); background:var(--card); color:var(--muted);
  font-size:11.5px; font-weight:700; padding:7px 11px; border-radius:99px; cursor:pointer; transition:.15s;
}
.aptools button:hover{border-color:var(--uc,var(--accent)); color:var(--uc,var(--accent))}
.aptools button.on{background:var(--uc,var(--red)); color:#fff; border-color:var(--uc,var(--red))}

/* segment play button (cắt từ băng gốc) */
.seg{
  border:1px solid var(--line); background:var(--card); color:var(--uc,var(--red));
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:13px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; padding:0; transition:transform .13s, background .13s;
}
.seg:hover{transform:scale(1.06)}
.seg:active,.seg.playing{background:var(--uc,var(--red)); color:#fff; border-color:var(--uc,var(--red))}
.seg.lg{width:40px;height:40px;font-size:15px}
.seg.xs{width:26px;height:26px;font-size:11px;margin-left:2px}

/* ============ VOCAB CARDS ============ */
.vf-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:8px}
.vf{
  background:var(--card-2); border-radius:14px; padding:12px 12px 12px; min-height:110px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  cursor:pointer; position:relative; border:1px solid var(--line); gap:4px;
}
.vf .hz{font-size:24px; font-weight:700}
.vf .vf-py{font-size:12px; color:var(--muted)}
.vf .vf-back{display:none; font-size:12.5px; color:var(--ink); line-height:1.4}
.vf.flip .vf-front{display:none}
.vf.flip .vf-back{display:block}
.vf .vf-tag{position:absolute; top:6px; left:8px; font-size:9px; font-weight:800; color:var(--faint)}
.vf .seg{position:absolute; top:5px; right:5px; width:28px;height:28px;font-size:12px}
.vf-row.hidepy .vf-py{visibility:hidden}
.rowtools{display:flex; gap:8px; margin:0 0 12px; flex-wrap:wrap}

/* ============ LISTEN-AND-CHOOSE ============ */
.lc{background:var(--card-2); border-radius:14px; padding:14px; margin-bottom:10px}
.lc .lc-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.lc .lc-n{font-size:11px; font-weight:800; color:var(--faint); flex:none}
.lc .lc-hint{font-size:12px; color:var(--muted)}
.lc-opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px}
.lc-opt{
  border:1px solid var(--line); background:var(--card); border-radius:11px; padding:10px 8px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.lc-opt .h{font-size:19px; font-weight:700}
.lc-opt .p{font-size:11px; color:var(--muted)}
.lc-opt.correct{border-color:var(--good); background:var(--good-bg)}
.lc-opt.wrong{border-color:var(--bad); background:var(--bad-bg)}
.lc-opt:disabled{cursor:default}
.lc .fb{font-size:12px; margin-top:9px; color:var(--muted); display:none; line-height:1.55}
.lc .fb.show{display:block}

/* ============ MATCHING ============ */
.mt{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px}
.mt-col{display:flex; flex-direction:column; gap:8px}
.mt-chip{
  border:1px solid var(--line); background:var(--card-2); border-radius:11px; padding:10px 11px;
  cursor:pointer; font-size:13px; text-align:left; display:flex; align-items:center; gap:7px; min-height:44px;
}
.mt-chip .h{font-size:17px; font-weight:700}
.mt-chip .p{font-size:11px; color:var(--muted)}
.mt-chip.sel{border-color:var(--red); background:var(--gold-soft)}
.mt-chip.paired{border-color:var(--good); background:var(--good-bg); color:var(--good); cursor:default}
.mt-chip.miss{border-color:var(--bad); background:var(--bad-bg)}

/* ============ TONE PATTERN QUIZ ============ */
.tq{background:var(--card-2); border-radius:14px; padding:14px; margin-bottom:10px}
.tq .tq-head{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.tq .tq-w{font-size:12px; color:var(--muted)}
.tq-opts{display:flex; gap:8px; flex-wrap:wrap}
.tq-opt{
  border:1px solid var(--line); background:var(--card); border-radius:99px; padding:9px 15px;
  cursor:pointer; font-size:13px; font-weight:700; color:var(--ink);
}
.tq-opt.correct{border-color:var(--good); background:var(--good-bg); color:var(--good)}
.tq-opt.wrong{border-color:var(--bad); background:var(--bad-bg); color:var(--bad)}
.tq .fb{font-size:12px; margin-top:9px; color:var(--muted); display:none; line-height:1.55}
.tq .fb.show{display:block}

/* ============ PHONETICS TABLES ============ */
.pytable{width:100%; border-collapse:collapse; font-size:12.5px; margin:10px 0 16px; overflow-x:auto; display:block}
.pytable table{border-collapse:collapse; width:100%; min-width:520px}
.pytable th,.pytable td{border:1px solid var(--line); padding:7px 6px; text-align:center; white-space:nowrap}
.pytable th{background:var(--card-2); color:var(--muted); font-size:11px}
.pytable td.empty{background:transparent; color:var(--faint)}
.pytable td.hi{background:var(--gold-soft); font-weight:700}
.pytable td.snd{padding:0}
.pytable td.snd .pcell{
  display:block; width:100%; border:none; background:none; color:inherit; font:inherit;
  padding:8px 7px; cursor:pointer; border-radius:8px; -webkit-tap-highlight-color:transparent;
}
.pytable td.snd .pcell::after{content:"\2009\266A"; font-size:9px; color:var(--faint); vertical-align:super}
.pytable td.snd .pcell:hover{background:var(--accent-soft)}
.pytable td.snd .pcell.playing{background:var(--red); color:#fff}
.pytable td.snd .pcell.playing::after{color:#fff}
.pytable th.rowh{padding:0}
.pytable th.rowh .rowplay{
  display:flex; align-items:center; justify-content:center; gap:4px; width:100%;
  border:none; background:none; color:inherit; font:inherit; font-weight:700;
  padding:8px 6px; cursor:pointer; border-radius:8px; -webkit-tap-highlight-color:transparent;
}
.pytable th.rowh .rowplay:hover{background:var(--accent-soft)}
.pytable th.rowh .rowplay .pl{font-size:10px; color:var(--faint)}
.pytable th.rowh .rowplay.playing{background:var(--red); color:#fff}
.tabnote{font-size:11.5px; color:var(--muted); margin:2px 0 10px; line-height:1.6}
.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px}

.rule-card{background:var(--card-2); border-radius:14px; padding:14px; margin-bottom:10px; font-size:13px; line-height:1.7}
.rule-card b{color:var(--red)}
.rule-ex{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:12.5px}
.rule-ex span{white-space:nowrap}
.rule-ex .py{color:var(--muted)} .rule-ex .arrow{color:var(--faint)}
.rule-ex b.py{color:var(--red)}

.ipa-card{background:var(--card-2); border-radius:14px; padding:14px; margin-bottom:10px}
.ipa-card .row{display:flex; gap:12px; align-items:flex-start; margin-bottom:10px}
.ipa-card .row:last-child{margin-bottom:0}
.ipa-card .sym{
  flex:none; width:46px; height:46px; border-radius:12px; background:var(--card);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:var(--red);
  border:1px solid var(--line);
}
.ipa-card .desc{font-size:12.5px; color:var(--muted); line-height:1.6}
.ipa-card .desc b{color:var(--ink)}

/* ============ SYLLABLE / TONE TABLE ============ */
.vrow{
  display:flex; align-items:center; gap:10px; background:var(--card-2); border-radius:12px;
  padding:9px 12px; margin-bottom:8px; flex-wrap:wrap;
}
.vrow .p{font-size:13.5px}
.vrow .h{font-size:16px; font-weight:700}
.vrow .m{font-size:11.5px; color:var(--muted); margin-left:auto}
.trow{display:flex; align-items:center; gap:8px; background:var(--card-2); border:1px solid var(--line);
  border-radius:12px; padding:7px 10px; margin-bottom:8px; flex-wrap:wrap}
.trow-play{flex:none; border:1px solid var(--line); background:var(--card); color:var(--uc,var(--red));
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:11px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent}
.trow-play:hover{border-color:var(--red)}
.trow-play.playing{background:var(--red); color:#fff; border-color:var(--red)}
.tcells{display:flex; gap:4px; flex-wrap:wrap}
.tcell{font-size:13.5px; border-radius:9px; padding:5px 8px; border:1px solid transparent;
  background:none; color:var(--faint); cursor:default; -webkit-tap-highlight-color:transparent}
button.tcell{cursor:pointer; background:var(--card); border-color:var(--line); color:var(--muted)}
button.tcell:hover{border-color:var(--red); color:var(--red)}
button.tcell.on{color:var(--red); font-weight:800; background:var(--gold-soft); border-color:var(--gold)}
button.tcell.playing{background:var(--red); color:#fff; border-color:var(--red)}
.tcell.none{text-decoration:line-through; opacity:.5}
.trow .m{font-size:11.5px; color:var(--muted); margin-left:auto; display:flex; align-items:center; gap:6px}
.trow .m .hz{font-size:15px; color:var(--ink)}
.scard .h{display:flex; align-items:center; gap:8px; justify-content:space-between}
.scard .ctx{font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--faint)}
.scard.chg{border-color:var(--jade)}

/* ============ SANDHI CARDS ============ */
.sgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:14px}
.scard{
  background:var(--card-2); border-radius:14px; padding:12px; border:1px solid var(--line);
  display:flex; flex-direction:column; gap:7px;
}
.scard .h{font-size:20px; font-weight:700}
.scard .h .hz{font-size:20px}
.scard .kv{font-size:12px; display:flex; gap:6px; align-items:baseline}
.scard .kv .k{font-size:9px; font-weight:800; color:var(--faint); min-width:52px; flex:none}
.scard .kv.write .v{color:var(--muted)}
.scard .kv.read .v{color:var(--jade); font-weight:700}
.scard .chg{background:var(--jade-soft); border-radius:5px; padding:0 3px}

/* ============ QUIZ ============ */
.qz{background:var(--card-2); border-radius:14px; padding:14px; margin-bottom:10px}
.qz .q-hz{font-size:17px; font-weight:700; margin-bottom:2px}
.qz .q-py{font-size:12.5px; color:var(--muted); margin-bottom:10px}
.qz .opts{display:flex; flex-direction:column; gap:8px}
.qz .opt{
  text-align:left; border:1px solid var(--line); background:var(--card); border-radius:11px;
  padding:10px 12px; cursor:pointer; font-size:13.5px; display:flex; align-items:center; gap:8px;
}
.qz .opt .qz-py{color:var(--muted); font-size:11.5px}
.qz .opt.correct{border-color:var(--good); background:var(--good-bg); color:var(--good)}
.qz .opt.wrong{border-color:var(--bad); background:var(--bad-bg); color:var(--bad)}
.qz .opt:disabled{cursor:default}
.qz .why{margin-top:10px; font-size:12px; color:var(--muted); background:var(--card); border-radius:10px; padding:9px 11px; display:none; line-height:1.55}
.qz .why.show{display:block}
.exscore{
  font-size:11.5px; color:var(--muted); margin:8px 2px 18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.exscore b{color:var(--red)}
.exscore.ok b{color:var(--good)}

/* ============ DIALOGUES ============ */
.dlg{background:var(--card-2); border-radius:14px; padding:14px 16px; margin-bottom:10px}
.dlg .ln{display:flex; gap:9px; margin-bottom:10px; align-items:flex-start}
.dlg .ln:last-child{margin-bottom:0}
.dlg .who{font-weight:800; color:var(--red); flex:none; width:16px; line-height:30px}
.dlg .txt{padding-top:4px}
.dlg .txt .hz{font-size:15.5px}
.dlg .txt .dlg-py{display:block; font-size:12px; color:var(--muted); margin-top:1px}
.dlg .txt .vi{display:block; font-size:11.5px; color:var(--faint); margin-top:2px}

.matchrow{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.mchip{
  background:var(--card-2); border:1px solid var(--line); border-radius:99px; padding:7px 13px;
  font-size:13px; display:inline-flex; gap:6px; align-items:center; white-space:nowrap;
}
.mchip .py{color:var(--muted); font-size:11px}

/* ============ WORD ORDER ============ */
.wo{background:var(--card-2); border-radius:14px; padding:14px; margin-bottom:10px}
.wo .wo-q{font-size:12.5px; color:var(--muted); margin-bottom:10px; line-height:1.55}
.wo-bank,.wo-slot{display:flex; flex-wrap:wrap; gap:7px; min-height:44px; align-items:flex-start}
.wo-slot{
  background:var(--card); border:1px dashed var(--line); border-radius:11px; padding:8px; margin-bottom:8px;
}
.wo-tok{
  border:1px solid var(--line); background:var(--card); border-radius:10px; padding:7px 11px;
  cursor:pointer; display:inline-flex; flex-direction:column; align-items:center; gap:0;
}
.wo-slot .wo-tok{background:var(--gold-soft)}
.wo-tok .h{font-size:16px; font-weight:700}
.wo-tok .p{font-size:10px; color:var(--muted)}
.wo .fb{font-size:12px; margin-top:9px; display:none; padding:8px 10px; border-radius:9px; line-height:1.55}
.wo .fb.show{display:block}
.wo .fb.ok{background:var(--good-bg); color:var(--good)}
.wo .fb.bad{background:var(--bad-bg); color:var(--muted)}
.wo-act{display:flex; gap:8px; margin-top:4px; flex-wrap:wrap}

/* ============ FREE WRITING ============ */
.fillline{background:var(--card-2); border-radius:14px; padding:14px 16px; margin-bottom:10px}
.fillline .ln{display:flex; gap:8px; margin-bottom:9px; align-items:center; flex-wrap:wrap}
.fillline .ln:last-child{margin-bottom:0}
.fillline .who{font-weight:800; color:var(--red); flex:none; width:16px}
.fillline input.fk{
  flex:1; min-width:140px; border:1px solid var(--line); border-radius:9px; padding:7px 10px;
  font-size:13px; background:var(--card); color:var(--ink);
}
.fillline .fixed{font-size:13.5px}
.fillline .fixed .hz{font-size:14.5px}
.fillline .fixed .fk-py{display:block; font-size:11px; color:var(--muted)}
.fk-fb{font-size:12px; margin-top:8px; padding:8px 10px; border-radius:9px; display:none; line-height:1.5; background:var(--card); color:var(--muted)}
.fk-fb.show{display:block}

/* ============ SHADOWING (ghi âm) ============ */
.sh{background:var(--card-2); border-radius:14px; padding:14px; margin-bottom:10px}
.sh-line{display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.sh-line:last-child{border-bottom:none}
.sh-line .t{flex:1; min-width:150px}
.sh-line .t .hz{font-size:15px}
.sh-line .t .p{display:block; font-size:11px; color:var(--muted)}
.sh-line .rec{border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:9px; padding:7px 11px; font-size:12px; font-weight:700; cursor:pointer}
.sh-line .rec.on{background:var(--bad); color:#fff; border-color:var(--bad)}
.sh-line .rec.has{color:var(--jade); border-color:var(--jade)}
.sh-note{font-size:11.5px; color:var(--faint); margin-top:10px; line-height:1.6}

/* ============ HANZI WRITING WIDGET ============ */
.hztabs{display:flex; gap:6px; margin-bottom:12px}
.hztab{
  flex:1; border:none; background:var(--card-2); color:var(--muted); font-weight:700; font-size:12.5px;
  padding:9px 6px; border-radius:11px; cursor:pointer;
}
.hztab.active{background:var(--red); color:#fff}
.hzprog{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px}
.hzp-b{font-size:11px; font-weight:800; letter-spacing:.02em; color:var(--muted);
  background:var(--card-2); border:1px solid var(--line); border-radius:99px; padding:5px 11px}
.hzp-b.ok{color:#fff; background:var(--jade); border-color:var(--jade)}
.hzpick{margin-bottom:12px}
.hzg{margin-bottom:10px}
.hzg-h{font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.hzg-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:6px}
.hzpick button{
  position:relative; border:1px solid var(--line); background:var(--card); border-radius:11px;
  padding:7px 4px 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px;
  -webkit-tap-highlight-color:transparent; min-height:52px;
}
.hzpick button .hz{font-size:19px; line-height:1.1}
.hzpick button .py{font-size:10px; color:var(--muted); line-height:1.2}
.hzpick button .tick{
  position:absolute; top:-5px; right:-5px; width:17px; height:17px; border-radius:50%;
  background:var(--jade); color:#fff; font-size:10px; font-weight:800; line-height:17px; display:none
}
.hzpick button.done{border-color:var(--jade); background:var(--jade-soft)}
.hzpick button.done .tick{display:block}
.hzpick button.half{border-color:var(--gold)}
.hzpick button.half .tick{display:block; background:var(--gold); color:#5a3c00}
.hzpick button.active{border-color:var(--red); background:var(--gold-soft); box-shadow:0 0 0 2px var(--accent-soft)}
.hzinfo .hzi-head{display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; margin-bottom:5px}
.hzinfo .hzi-head .hz{font-size:20px; color:var(--ink); font-weight:700}
.hzinfo .hzi-mean{font-size:11.5px; color:var(--muted)}
.hzinfo .hzi-str{font-size:11px; color:var(--faint); line-height:1.9}
.hzinfo .hzi-n{display:inline-block; background:var(--card-2); border:1px solid var(--line);
  border-radius:7px; padding:2px 6px; margin:0 3px 2px 0; white-space:nowrap}
.hzinfo .hzi-n.now{background:var(--jade-soft); border-color:var(--jade); color:var(--good); font-weight:800}
.hzstage{display:flex; flex-direction:column; align-items:center; gap:11px}
.hzbar{display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:center; min-height:22px}
.hzdot{width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  color:var(--faint); font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
.hzdot.ok{background:var(--red); border-color:var(--red); color:#fff}
.hzdot.now{border-color:var(--jade); color:var(--jade); box-shadow:0 0 0 3px var(--jade-soft)}
.hzcount{font-size:11px; color:var(--faint); font-weight:700; margin-left:4px}
.hzmsg{font-size:12.5px; line-height:1.6; text-align:center; min-height:20px; color:var(--muted); max-width:340px}
.hzmsg.ok{color:var(--good)}
.hzmsg.bad{color:var(--bad)}
.hzctrl .btn.on{background:var(--indigo); color:#fff; border-color:var(--indigo)}
.hzcanvas-wrap{position:relative; width:min(300px,84vw); height:min(300px,84vw); background:var(--card-2); border-radius:16px; overflow:hidden; border:1px solid var(--line)}
.hzcanvas-wrap canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none}
.hzctrl{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.hzinfo{font-size:12px; color:var(--muted); text-align:center; line-height:1.5}

/* ============ SUBMIT / RESULT ============ */
.sumcard{background:var(--card-2); border-radius:14px; padding:16px; text-align:center; margin-bottom:12px}
.sumcard .big{font-size:34px; font-weight:800; color:var(--red)}
.sumcard .lbl{font-size:12px; color:var(--muted)}
.scoretbl{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:14px}
.scoretbl th,.scoretbl td{border-bottom:1px solid var(--line); padding:9px 6px; text-align:left}
.scoretbl th{color:var(--faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em}
.scoretbl td.n{text-align:right; font-weight:700; white-space:nowrap}
.scoretbl td.n.ok{color:var(--good)}
.scoretbl td.n.no{color:var(--muted)}
.done-card{background:linear-gradient(135deg,var(--jade),#4fe0bd); color:#fff; border-radius:16px; padding:20px; text-align:center; margin-bottom:12px}
.done-card h3{margin:6px 0 2px}
.done-card p{margin:0; font-size:13px; opacity:.9}

/* ============ MODAL ============ */
.modal-mask{
  position:fixed; inset:0; background:rgba(20,10,16,.45); display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:50; overflow:auto;
}
.modal-mask[hidden]{display:none}
.modal{background:var(--card); border-radius:var(--r); padding:22px; max-width:360px; width:100%; box-shadow:var(--shadow); max-height:88vh; overflow:auto}
.modal h2{margin:0 0 6px; font-size:17px}
.modal p.sub{margin:0 0 16px; font-size:12.5px; color:var(--muted); line-height:1.55}
.modal label{display:block; font-size:11px; font-weight:800; color:var(--faint); margin:10px 0 4px}
.modal input{width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-size:13.5px; background:var(--card-2); color:var(--ink)}
.modal .row2{display:flex; gap:8px}
.modal .row2 > div{flex:1}
.modal .go{width:100%; margin-top:16px; padding:12px}
.modal .cancel{display:block; text-align:center; margin-top:10px; font-size:12px; color:var(--muted); text-decoration:underline; cursor:pointer; background:none; border:none; width:100%}
.modal .err{color:var(--bad); font-size:11.5px; margin-top:8px; display:none}
.modal .err.show{display:block}

/* ============ TEACHER PANEL ============ */
.gv-fab{
  position:fixed; right:16px; bottom:16px; z-index:40; border:none; background:var(--indigo); color:#fff;
  width:46px;height:46px;border-radius:99px; font-size:17px; cursor:pointer; box-shadow:var(--shadow);
}
.gv-tbl{width:100%; border-collapse:collapse; font-size:12px; margin-top:12px}
.gv-tbl th,.gv-tbl td{border-bottom:1px solid var(--line); padding:7px 6px; text-align:left}
.gv-tbl th{color:var(--muted); font-size:10.5px}
.gv-empty{font-size:12.5px; color:var(--muted); padding:14px 0}
.chk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:7px; margin-top:10px}
.chk-item{display:flex; align-items:center; gap:6px; font-size:12px; background:var(--card-2); border-radius:9px; padding:6px 8px}
.chk-item .lb{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chk-item .tm{font-size:9.5px; color:var(--faint)}
.rw-track{margin-top:14px}
.rw-track .rw-h{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--uc,var(--accent)); margin-bottom:7px}
.rw-track .chk-item{margin-bottom:5px}
.rw-ok{font-size:11px; color:var(--good); font-weight:700}
.rw-no{font-size:11px; color:var(--bad); font-weight:700}

footer.ft{max-width:980px; margin:24px auto 0; padding:0 16px; font-size:11.5px; color:var(--faint); text-align:center; line-height:1.7}

@media (max-width:420px){
  .mh-h1{font-size:19px} .mh-h1 .hz{font-size:22px}
  .vf-row{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .mt{grid-template-columns:1fr 1fr; gap:6px}
  .mt-chip{padding:9px 8px; font-size:12px}
}

/* ============ ĐIỆN THOẠI ============ */
@media (max-width:640px){
  .wrap{padding:0 12px 80px}
  .step-body{padding:2px 12px 16px}
  .goal,.rule-card,.qz,.lc,.tq,.wo,.ipa-card{border-radius:13px}
  .sgrid{grid-template-columns:repeat(auto-fill,minmax(142px,1fr)); gap:8px}
  .vf-row{gap:8px}
  /* vùng chạm tối thiểu 40px cho mọi nút bấm nghe */
  .seg{width:38px; height:38px; font-size:15px}
  .seg.lg{width:44px; height:44px; font-size:17px}
  .trow-play{width:36px; height:36px; font-size:12px}
  .pytable{font-size:13.5px}
  .pytable td.snd .pcell{padding:11px 9px}
  .pytable th.rowh .rowplay{padding:11px 7px}
  .pytable table{min-width:560px}
  .scroller{position:relative; overscroll-behavior-x:contain}
  .trow{gap:7px}
  .tcell{padding:7px 9px; font-size:14px}
  .trow .m{width:100%; margin-left:0; justify-content:flex-end}
  .lc-opt,.tq-opt,.qz .opt,.wo-tok{min-height:44px}
  .hztab{padding:11px 4px; font-size:12px}
  .hzg-row{grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:5px}
  .hzpick button{min-height:50px}
  .btn.sm{padding:10px 13px}
  .modal{padding:18px; border-radius:16px}
  .modal input{padding:11px; font-size:16px}   /* 16px: chặn iOS tự phóng khi gõ */
  .fk{font-size:16px !important}
  .rail .panel{padding:13px}
  .zoomer button{padding:9px 14px}      /* vùng chạm đủ lớn cho A− / A+ */
  .teacherbtn,.tool{padding:9px 14px}
  footer.ft{padding:0 14px}
}
/* Máy cảm ứng (kể cả điện thoại xoay ngang, máy tính bảng): vùng chạm đủ lớn */
@media (pointer:coarse){
  .zoomer button{padding:9px 14px}
  .teacherbtn,.tool{padding:9px 14px}
  .seg{width:38px; height:38px; font-size:15px}
  .seg.lg{width:44px; height:44px; font-size:17px}
  .seg.xs{width:30px; height:30px; font-size:12px}
  .trow-play{width:36px; height:36px}
  .tcell{padding:7px 9px}
  .pytable td.snd .pcell{padding:11px 9px}
  .pytable th.rowh .rowplay{padding:11px 7px}
  .lc-opt,.tq-opt,.qz .opt,.wo-tok,.mt-chip{min-height:44px}
  .hztab{padding:11px 6px}
  .modal input{font-size:16px}
  .fk{font-size:16px !important}
}
@media (max-width:380px){
  .pytable{font-size:12.5px}
  .sgrid{grid-template-columns:1fr 1fr}
  .vf-row{grid-template-columns:1fr 1fr}
}