:root{
  --paper:#FFEFF5; --card:#FFFFFF; --card-2:#FFF6FA;
  --ink:#3A2130; --muted:#8B6076; --faint:#B78FA4; --line:#FBD8E6;
  --red:#F1467E; --red-deep:#D62C6A; --gold:#FFAE1F; --jade:#17C29A; --indigo:#6C7BFF;
  --accent:#F1467E; --accent-ink:#FFFFFF; --accent-soft:#FFE1EC;
  --gold-soft:#FFF1D6; --jade-soft:#D8F8EF;
  --t1:#F1467E; --t2:#E08A00; --t3:#0FA783; --t4:#5A6BF0;
  --good:#0FA783; --good-bg:#D8F8EF; --bad:#F1467E; --bad-bg:#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;
  --shadow:0 1px 2px rgba(120,40,80,.06), 0 12px 30px -18px rgba(160,50,105,.45);
  --r:22px;
}
@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; --red-deep:#FF9CBF; --gold:#FFC24A; --jade:#3FDCB0; --indigo:#96A3FF;
    --accent:#FF7FAC; --accent-ink:#2C0B1B; --accent-soft:#482435;
    --gold-soft:#42311A; --jade-soft:#123A31;
    --t1:#FF7FAC; --t2:#FFC24A; --t3:#3FDCB0; --t4:#96A3FF;
    --good:#3FDCB0; --good-bg:#123A31; --bad:#FF7FAC; --bad-bg:#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;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -20px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --paper:#1E1019; --card:#2B1724; --card-2:#371E2E;
  --ink:#FFEAF3; --muted:#D0A2B9; --faint:#A47B90; --line:#4A2739;
  --red:#FF7FAC; --red-deep:#FF9CBF; --gold:#FFC24A; --jade:#3FDCB0; --indigo:#96A3FF;
  --accent:#FF7FAC; --accent-ink:#2C0B1B; --accent-soft:#482435;
  --gold-soft:#42311A; --jade-soft:#123A31;
  --t1:#FF7FAC; --t2:#FFC24A; --t3:#3FDCB0; --t4:#96A3FF;
  --good:#3FDCB0; --good-bg:#123A31; --bad:#FF7FAC; --bad-bg:#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;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -20px rgba(0,0,0,.95);
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
.han{font-family:"Noto Serif SC","Songti SC",serif; font-weight:700}
.py{font-family:"Noto Sans SC","Noto Sans",system-ui,sans-serif; font-weight:500}
h1,h2,h3,h4{margin:0; text-wrap:balance}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
: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}

/* ---------- masthead ---------- */
.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:290px; line-height:1; color:rgba(255,255,255,.09); pointer-events:none; user-select:none}
.masthead-in{max-width:1180px; margin:0 auto; padding:32px 20px 34px; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:end; position:relative}
.eyebrow{font-size:11.5px; letter-spacing:.18em; 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(40px,6.4vw,62px); line-height:1; letter-spacing:.05em}
.title-py{font-family:"Noto Sans SC",sans-serif; font-size:clamp(14px,2vw,18px); color:#FBD9A6; letter-spacing:.12em}
.title-vi{font-size:clamp(15px,2vw,17.5px); color:rgba(255,255,255,.9); margin-top:8px; max-width:56ch}
.chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:15px}
.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)}
.themebtn{border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff; border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600; white-space:nowrap}
.themebtn:hover{background:rgba(255,255,255,.26)}
@media (max-width:640px){ .masthead-in{grid-template-columns:1fr; align-items:start} .mh-glyph{font-size:200px; top:-30px} }

/* ---------- layout ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 20px 110px}
.cols{display:grid; grid-template-columns:252px minmax(0,1fr); gap:38px; margin-top:30px; align-items:start}
@media (max-width:920px){ .cols{grid-template-columns:1fr; gap:22px} }
.rail{position:sticky; top:18px; z-index:40; display:flex; flex-direction:column; gap:13px}
@media (max-width:920px){ .rail{position:static} }
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:17px; box-shadow:var(--shadow)}
.panel h3{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); font-weight:800; margin-bottom:12px}
.xp{display:flex; align-items:center; gap:13px}
.xp .big{font-family:"Baloo 2",sans-serif; font-size:34px; font-weight:800; line-height:1; color:var(--accent); 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)}
.reset{margin-top:13px; font-size:12.5px; color:var(--faint); text-decoration:underline; text-underline-offset:3px}
.reset:hover{color:var(--bad)}
.navlist{display:flex; flex-direction:column; gap:1px}
.navlist a{display:flex; gap:9px; align-items:center; text-decoration:none; padding:7px 9px; border-radius:10px; font-size:13.8px; color:var(--muted); font-weight:500}
.navlist a:hover{background:var(--card-2); color:var(--ink)}
.navlist a.on{background:var(--accent-soft); color:var(--accent); font-weight:700}
.navnum{font-size:11px; font-weight:800; width:19px; height:19px; border-radius:6px; display:grid; place-items:center; background:var(--card-2); color:var(--faint); font-variant-numeric:tabular-nums; flex:none}
.navlist a.on .navnum{background:var(--accent); color:var(--accent-ink)}
.navlist a.full .navnum{background:var(--jade); color:#fff}
.navlist a span.nm{flex:1}
.navdot{font-size:11px; color:var(--jade); font-weight:700}

/* ---------- sections ---------- */
section{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px 26px; margin-bottom:20px; box-shadow:var(--shadow); scroll-margin-top:14px; position:relative; overflow:hidden}
section.cleared{border-color:var(--jade)}
.shead{display:flex; gap:13px; align-items:center; margin-bottom:4px}
.snum{font-family:"Baloo 2",sans-serif; font-size:15px; font-weight:800; color:var(--accent-ink); background:var(--accent); border-radius:10px; min-width:30px; height:30px; display:grid; place-items:center; flex:none; font-variant-numeric:tabular-nums}
section.cleared .snum{background:var(--jade)}
.shead h2{font-size:22px; font-weight:700; font-family:"Baloo 2",sans-serif; flex:1}
.shead h2 .zh{font-family:"Noto Serif SC",serif; color:var(--faint); font-weight:500; font-size:15px; margin-left:7px}
.ring{flex:none; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}
.ring svg{width:34px; height:34px; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:4.5; stroke-linecap:round}
.ring .bg{stroke:var(--card-2)}
.ring .fg{stroke:var(--gold); transition:stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1)}
section.cleared .ring .fg{stroke:var(--jade)}
.lede{color:var(--muted); font-size:14.5px; margin:0 0 18px 43px; max-width:64ch}
@media (max-width:600px){ .lede{margin-left:0} .shead h2{font-size:19px} }
.hint{font-size:13px; color:var(--faint); margin-top:14px}
.doneb{border:2px dashed var(--line); border-radius:12px; padding:10px 18px; font-size:14px; font-weight:700; color:var(--muted); margin-top:16px}
.doneb:hover{border-color:var(--jade); color:var(--jade)}
.doneb.on{border-style:solid; background:var(--jade-soft); border-color:var(--jade); color:var(--jade)}

/* ---------- tape ---------- */
.tape{border:1px solid var(--line); border-radius:14px; background:var(--card-2); padding:13px 15px; display:grid; gap:11px; margin-bottom:18px}
.tape-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12.5px; color:var(--muted)}
.tape-id{font-weight:800; letter-spacing:.07em; text-transform:uppercase; font-size:11px; color:var(--faint)}
.tape-id em{font-style:normal; color:var(--accent)}
.tape-seg{font-variant-numeric:tabular-nums} .tape-seg b{color:var(--ink)}
.tape-row{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.tbtn{border:1px solid var(--line); background:var(--card); border-radius:10px; padding:7px 13px; font-size:13px; font-weight:700; color:var(--muted); transition:.15s}
.tbtn:hover{border-color:var(--accent); color:var(--accent)}
.tbtn.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tbtn.play{min-width:56px; text-align:center}
.rates{display:flex; gap:4px; margin-left:auto}
.rates button{border:1px solid var(--line); background:var(--card); border-radius:9px; padding:6px 9px; font-size:12px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums}
.rates button.on{background:var(--gold-soft); border-color:var(--gold); color:var(--gold)}
.tape-bar{position:relative; height:26px; border-radius:9px; background:var(--card); border:1px solid var(--line); overflow:hidden; cursor:pointer}
.tick{position:absolute; top:6px; bottom:6px; background:var(--line); border-radius:2px; min-width:2px; pointer-events:none}
.tick.on{background:var(--gold); top:4px; bottom:4px}
.head{position:absolute; top:0; bottom:0; width:2px; background:var(--red); pointer-events:none; transition:left .1s linear}

/* ---------- flashcards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:11px}
.cardwrap{position:relative}
.mini{position:absolute; top:7px; right:7px; width:27px; height:27px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--muted); display:grid; place-items:center; z-index:2}
.mini:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.mini svg{width:12px; height:12px; fill:currentColor}
.fc{perspective:900px; height:132px; width:100%; padding:0}
.fcin{display:block; position:relative; width:100%; height:100%; transition:transform .5s cubic-bezier(.3,.8,.3,1); transform-style:preserve-3d}
.fc.flip .fcin{transform:rotateY(180deg)}
.fcface{position:absolute; inset:0; backface-visibility:hidden; border:1px solid var(--line); border-radius:14px; display:grid; place-content:center; text-align:center; padding:10px; background:var(--card-2)}
.fcface .han{font-size:40px; line-height:1.1}
.fcface .py{font-size:13px; color:var(--muted); margin-top:8px}
.fcback{transform:rotateY(180deg); background:var(--gold-soft); border-color:var(--gold)}
.fcback .vi{font-size:14.5px; font-weight:700}
.fcback .pos{font-size:11.5px; color:var(--muted); margin-top:6px}
.fc:hover .fcface{border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){ .fcin{transition:none} }

/* ---------- game ---------- */
.game{border:1px solid var(--line); border-radius:16px; background:var(--card-2); padding:20px; text-align:center}
.gstage{display:grid; gap:16px; justify-items:center}
.gbig{width:96px; height:96px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; box-shadow:0 8px 22px -10px var(--accent)}
.gbig svg{width:38px; height:38px; fill:currentColor}
.gbig:hover{transform:scale(1.05)} .gbig{transition:transform .15s}
.gbig.playing{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 22px -10px var(--accent)}50%{box-shadow:0 8px 34px -6px var(--accent)}}
@media (prefers-reduced-motion:reduce){ .gbig.playing{animation:none} }
.gq{font-size:14px; color:var(--muted); font-weight:600}
.gopts{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.gopt{border:2px solid var(--line); background:var(--card); border-radius:14px; min-width:78px; padding:12px 16px; font-weight:700; transition:.15s}
.gopt .han{font-size:30px; line-height:1.15}
.gopt .py{font-size:17px}
.gopt .tn{display:block; font-size:10.5px; color:var(--faint); font-weight:700; letter-spacing:.06em; margin-top:3px}
.gopt:hover:not(:disabled){border-color:var(--accent); transform:translateY(-2px)}
.gopt:disabled{cursor:default}
.gopt.right{border-color:var(--good); background:var(--good-bg); color:var(--good)}
.gopt.wrong{border-color:var(--bad); background:var(--bad-bg); color:var(--bad)}
.gopt.dim{opacity:.4}
.gpips{display:flex; gap:5px; justify-content:center; flex-wrap:wrap}
.pip{width:9px; height:9px; border-radius:50%; background:var(--line)}
.pip.ok{background:var(--jade)} .pip.no{background:var(--bad)} .pip.now{background:var(--gold); transform:scale(1.35)}
.gdone{font-family:"Baloo 2",sans-serif; font-weight:800; font-size:19px; color:var(--jade)}

/* ---------- quiz ---------- */
.q{border-top:1px solid var(--line); padding:13px 0; display:grid; grid-template-columns:212px minmax(0,1fr); gap:8px 22px; align-items:center}
.q:first-of-type{border-top:none}
@media (max-width:640px){ .q{grid-template-columns:1fr} .q .fb{grid-column:1} }
.qhead{display:flex; align-items:center; gap:11px; flex-wrap:nowrap; min-width:0}
.qprompt{flex:1 1 auto; min-width:0}
.q .fb{grid-column:2}
.qprompt .big{font-family:"Noto Sans SC",sans-serif; font-size:23px; font-weight:700}
.qprompt .bighan{font-family:"Noto Serif SC",serif; font-size:27px; font-weight:700}
.opts{display:flex; gap:8px; flex-wrap:wrap}
.opt{border:1.5px solid var(--line); background:var(--card-2); border-radius:11px; padding:9px 15px; font-size:14.5px; font-weight:600; transition:.15s}
.opt .py{font-size:16px}
.opt:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.opt:disabled{cursor:default}
.opt.right{background:var(--good-bg); border-color:var(--good); color:var(--good); font-weight:800}
.opt.wrong{background:var(--bad-bg); border-color:var(--bad); color:var(--bad); text-decoration:line-through}
.opt.dim{opacity:.42}
.fb{font-size:13.5px; margin-top:2px; color:var(--muted); display:none}
.fb.show{display:block}
.fb b{color:var(--ink)}
.speak{border:1px solid var(--line); background:var(--card); border-radius:999px; width:32px; height:32px; display:grid; place-items:center; flex:none; color:var(--faint)}
.speak:hover{border-color:var(--accent); color:var(--accent)}
.speak svg{width:14px; height:14px; fill:currentColor}

/* ---------- tones ---------- */
.tonegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:11px; margin-bottom:18px}
.tonecard{border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--card-2); border-top:4px solid var(--tc)}
.tonecard .lbl{font-size:11px; letter-spacing:.11em; text-transform:uppercase; font-weight:800; color:var(--tc)}
.tonecard .ex{font-family:"Noto Sans SC",sans-serif; font-size:26px; font-weight:700; margin:6px 0 2px; color:var(--tc)}
.tonecard .desc{font-size:12.5px; color:var(--muted)}
.tonecard .val{font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums; margin-top:4px}
.t1{--tc:var(--t1)} .t2{--tc:var(--t2)} .t3{--tc:var(--t3)} .t4{--tc:var(--t4)}
.pairs{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
.pair{border:1px solid var(--line); background:var(--card-2); border-radius:11px; padding:9px 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:"Noto Sans SC",sans-serif; font-size:17px}
.pair .a{color:var(--t4); font-weight:700} .pair .b{color:var(--t1); font-weight:700}
.pair .sep{color:var(--faint); font-size:14px; font-family:"Be Vietnam Pro",sans-serif}

/* ---------- matching ---------- */
.match{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:64px; max-width:560px}
.mcol{display:flex; flex-direction:column; gap:8px; position:relative; z-index:2}
.mcol h4{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:800; margin-bottom:2px}
.mi{border:1.5px solid var(--line); background:var(--card-2); border-radius:11px; padding:6px;
  min-height:50px; display:grid; place-items:center; transition:border-color .15s, background .15s, transform .12s;
  touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:grab}
.mi .han{font-size:25px; line-height:1.2} .mi .py{font-size:16px}
.mi:hover:not(.done){border-color:var(--accent)}
.mi.sel{border-color:var(--gold); background:var(--gold-soft); color:var(--gold); cursor:grabbing}
.mi.drop{border-color:var(--gold); background:var(--gold-soft); transform:scale(1.04)}
.mi.done{border-color:var(--jade); background:var(--jade-soft); color:var(--jade); cursor:default}
.mi.miss{border-color:var(--bad); background:var(--bad-bg); animation:shake .32s}
/* đường kẻ nối các cặp đã ghép */
.mlines{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible}
.mline{fill:none; stroke:var(--jade); stroke-width:2.5; stroke-linecap:round}
.mline.live{stroke:var(--gold); stroke-width:2.5; stroke-dasharray:7 6}
.mdot{fill:var(--jade)}
.mhint{font-size:12.5px; color:var(--faint); margin:0 0 11px}
@media (max-width:640px){
  .match{gap:36px}
  .mi{min-height:52px}
}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){ .mi.miss{animation:none} }

/* ---------- read grid ---------- */
.readgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:7px}
.rd{border:1px solid var(--line); background:var(--card-2); border-radius:10px; padding:9px 6px; text-align:center; font-family:"Noto Sans SC",sans-serif; font-size:16px; font-weight:500}
.rd:hover{border-color:var(--accent); color:var(--accent)}
.rd.done{border-color:var(--jade); background:var(--jade-soft); color:var(--jade)}

/* ---------- writing studio ---------- */
.hzpick{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.hzc{width:52px; height:52px; border:2px solid var(--line); border-radius:15px; background:var(--card);
  font-family:"Noto Serif SC",serif; font-weight:700; font-size:25px; color:var(--ink); position:relative; transition:.15s}
.hzc:hover{border-color:var(--accent); transform:translateY(-2px)}
.hzc.on{border-color:var(--accent); background:var(--accent); color:var(--accent-ink); box-shadow:0 6px 16px -8px var(--accent)}
.hzc.traced{border-color:var(--jade)} .hzc.traced.on{background:var(--jade); border-color:var(--jade); color:#fff}
.hzc i{position:absolute; top:-5px; right:-4px; font-size:12px; font-style:normal; line-height:1}
.hzc.traced::after{content:"✓"; position:absolute; bottom:1px; right:5px; font-size:10px; font-weight:800; color:var(--jade)}
.hzc.traced.on::after{color:#fff}

.hz{border:1.5px solid var(--line); border-radius:20px; background:var(--card-2); padding:18px; display:grid; gap:14px; min-width:0}
.hz > *{min-width:0}
.hzhead{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.hzbig{width:64px; height:64px; border-radius:20px; background:var(--accent); color:var(--accent-ink); flex:none;
  display:grid; place-items:center; font-family:"Noto Serif SC",serif; font-weight:700; font-size:38px; line-height:1}
.hzfacts{flex:1; min-width:180px; display:flex; gap:6px; flex-wrap:wrap; align-content:flex-start}
.fact{font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--muted)}
.fact b{color:var(--ink)} .fact .han{font-size:14px; color:var(--accent)}
.hzparts{flex-basis:100%; font-size:13px; color:var(--muted)}

.hztabs{display:flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px}
.hztab{flex:1; border-radius:11px; padding:9px 6px; font-size:13px; font-weight:700; color:var(--faint); transition:.15s; white-space:nowrap}
.hztab:hover:not(:disabled){color:var(--accent)}
.hztab.on{background:var(--accent); color:var(--accent-ink)}
.hztab:disabled{opacity:.38; cursor:not-allowed}

.pips{display:flex; gap:6px; justify-content:center; flex-wrap:wrap}
.pipn{width:27px; height:27px; border-radius:50%; border:2px solid var(--line); background:var(--card);
  display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums}
.pipn.now{border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.pipn.ok{border-color:var(--jade); background:var(--jade); color:#fff}

.stage{display:grid; place-items:center}
canvas.pad{width:100%; max-width:380px; aspect-ratio:1; border-radius:18px; background:var(--card); border:1px solid var(--line); touch-action:none; display:block}
.hz[data-mode="learn"] canvas.pad{cursor:default}
.hz[data-mode="trace"] canvas.pad, .hz[data-mode="quiz"] canvas.pad{cursor:crosshair}
.hz[data-mode="quiz"] canvas.pad{border:2px dashed var(--line)}

.hzctl{display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:center}
.hzstep{font-size:13px; font-weight:700; color:var(--muted); width:100%; text-align:center; font-variant-numeric:tabular-nums}
.hzstep em{font-style:normal; color:var(--accent); font-family:"Noto Serif SC",serif; font-size:15px}
.wbtn{border:1.5px solid var(--line); background:var(--card); border-radius:11px; padding:8px 14px; font-size:13px; font-weight:700; color:var(--muted)}
.wbtn:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.wbtn:disabled{opacity:.4; cursor:not-allowed}
.wbtn.cta{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.wbtn.hint{background:var(--gold-soft); border-color:var(--gold); color:var(--gold)}

.strip{display:flex; gap:6px; overflow-x:auto; padding:2px; justify-content:center; flex-wrap:wrap}
.strip canvas{width:52px; height:52px; flex:none; border:1px solid var(--line); border-radius:11px; background:var(--card)}

/* ---------- teacher plan ---------- */
details.plan{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden}
details.plan summary{list-style:none; cursor:pointer; padding:17px 26px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-weight:700}
details.plan summary::-webkit-details-marker{display:none}
details.plan summary .k{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:800}
details.plan summary .arrow{color:var(--faint); font-size:13px; font-weight:600}
details.plan[open] summary{border-bottom:1px solid var(--line)}
.planbody{padding:20px 26px 24px}
.planbody .step{display:grid; grid-template-columns:64px 1fr; gap:16px; padding:13px 0; border-top:1px dashed var(--line)}
.planbody .step:first-child{border-top:none}
.planbody .step .t{font-family:"Baloo 2",sans-serif; font-size:15px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums}
.planbody .step h4{margin-bottom:3px; font-size:15.5px; font-weight:700}
.planbody .step p{margin:0; font-size:14px; color:var(--muted)}
.why{margin-top:18px; padding:16px 18px; border-radius:14px; background:var(--gold-soft); font-size:14px}
.why b.k{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:7px}
.why ul{margin:0; padding-left:18px} .why li{margin:4px 0}

.foot{text-align:center; color:var(--faint); font-size:12.5px; margin-top:32px; line-height:1.8}
.tag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:3px 10px; border-radius:999px}
#confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:60; display:none}
.audiowarn{position:fixed; left:12px; right:12px; bottom:14px; z-index:95; background:var(--bad);
  color:#fff; border-radius:14px; padding:12px 15px; font-size:13.5px; line-height:1.5; font-weight:600;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6); max-width:520px; margin:0 auto}

/* ============================================================
   BỔ SUNG — băng gốc, bốn phần lớn, cỡ chữ, màn hình điện thoại
   ============================================================ */

/* ---- cỡ chữ đọc: nút A− A A+ đổi biến này ---- */
:root{ --z:1 }
body{ zoom:var(--z) }

/* phiên âm: dùng bản Latin của Noto Sans — Noto Sans SC đặt dấu ngang
   (thanh 1) quá cao và rời hẳn khỏi nguyên âm */
.py, .pyk .k, .tcell .p, .rdc .t, .scard .v{
  font-family:"Noto Sans","Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:600; font-variant-ligatures:none}

/* ---- bốn phần lớn ---- */
section.unit{padding:0; overflow:hidden}
.cols > *{min-width:0}
.unit[data-unit="1"], .navunit[data-navunit="1"]{--uc:var(--u1); --ucs:var(--u1s)}
.unit[data-unit="2"], .navunit[data-navunit="2"]{--uc:var(--u2); --ucs:var(--u2s)}
.unit[data-unit="3"], .navunit[data-navunit="3"]{--uc:var(--u3); --ucs:var(--u3s)}
.unit[data-unit="4"], .navunit[data-navunit="4"]{--uc:var(--u4); --ucs:var(--u4s)}
.unit[data-unit="5"], .navunit[data-navunit="5"]{--uc:var(--u5); --ucs:var(--u5s)}
.unit[data-unit="6"], .navunit[data-navunit="6"]{--uc:var(--u6); --ucs:var(--u6s)}
.uhead{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:19px 22px 17px; border-bottom:1px solid var(--line);
  border-top:3px solid var(--uc,var(--accent));
  background:linear-gradient(180deg,var(--ucs,var(--card-2)),var(--card))}
.ubadge{width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:19px;
  background:var(--uc,var(--accent)); color:#fff}
.unit.done .ubadge{background:var(--jade); color:#fff}
.utitle h2{font-family:"Baloo 2",sans-serif; font-size:26px; font-weight:700; line-height:1.18;
  color:var(--uc,var(--ink))}
.utitle .uzh{font-family:"Noto Serif SC",serif; color:var(--faint); font-weight:500; font-size:15px; margin-left:8px}
.utitle .usub{display:block; font-size:13px; color:var(--muted); margin-top:2px}
.umeter{display:flex; align-items:center; gap:10px}
.umeter .ucount{font-size:13px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.unit.done .ucount{color:var(--jade)}
.utrack{width:74px; height:7px; border-radius:99px; background:var(--card-2); border:1px solid var(--line); overflow:hidden}
.utrack span{display:block; height:100%; width:0; background:var(--uc,var(--accent)); transition:width .45s cubic-bezier(.2,.8,.2,1)}
.unit.done .utrack span{background:var(--jade)}
.ufold{border:1px solid var(--line); background:var(--card); border-radius:9px; padding:5px 10px;
  font-size:11.5px; font-weight:700; color:var(--muted); white-space:nowrap}
.ufold:hover{border-color:var(--accent); color:var(--accent)}

/* ---- từng bước bên trong một phần ---- */
details.step{border-bottom:1px solid var(--line)}
details.step:last-child{border-bottom:none}
details.step > summary{list-style:none; cursor:pointer; display:grid;
  grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center; padding:14px 22px}
details.step > summary::-webkit-details-marker{display:none}
details.step > summary:hover{background:var(--card-2)}
details.step[open] > summary{background:var(--card-2)}
.stepn{font-size:11.5px; font-weight:800; color:var(--faint); background:var(--card-2);
  border:1px solid var(--line); border-radius:7px; padding:3px 7px; font-variant-numeric:tabular-nums}
details.step[open] .stepn, details.step:hover .stepn{background:var(--card)}
.step.ok .stepn{background:var(--jade); border-color:var(--jade); color:#fff}
.stepname{font-size:15.5px; font-weight:600; line-height:1.3}
.stepname em{font-style:normal; font-family:"Noto Serif SC",serif; color:var(--faint); font-weight:500; font-size:13px; margin-left:7px}
.stepname small{display:block; font-size:12.5px; color:var(--faint); font-weight:400; margin-top:1px}
.sprog{font-size:12px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums;
  background:var(--card-2); border:1px solid var(--line); border-radius:99px; padding:3px 9px; white-space:nowrap}
.step.ok .sprog{background:var(--jade-soft); border-color:var(--jade); color:var(--jade)}
.schev{color:var(--faint); font-size:12px; transition:transform .18s}
details.step[open] .schev{transform:rotate(180deg)}
.sbody{padding:4px 22px 24px; animation:slidein .22s ease}
@keyframes slidein{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .sbody{animation:none} }
.sbody > .lede{margin-left:0; margin-top:6px}
@media (max-width:640px){
  /* đầu mỗi phần xuống hai dòng: tiêu đề trên, thanh tiến độ dưới */
  .uhead{padding:15px 15px 13px; gap:11px; column-gap:12px;
    grid-template-columns:auto 1fr; grid-template-areas:"badge title" "meter meter"}
  .ubadge{grid-area:badge; align-self:start}
  .utitle{grid-area:title}
  .umeter{grid-area:meter; justify-content:space-between}
  .utrack{flex:1; width:auto; min-width:60px}
  details.plan summary .arrow{white-space:nowrap}
  details.step > summary{padding:12px 15px; gap:9px; grid-template-columns:auto 1fr auto}
  .schev{display:none}
  .sbody{padding:2px 15px 20px}
}

/* ---- thanh điều khiển trên cùng ---- */
.tools{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.tool{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}
.tool: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-radius:999px; padding:5px 11px; font-size:13px; font-weight:700; line-height:1}
.zoomer button:hover{background:rgba(255,255,255,.24)}
.zoomer .zlbl{font-size:11.5px; color:rgba(255,255,255,.85); padding:0 5px; font-variant-numeric:tabular-nums;
  min-width:42px; text-align:center; font-weight:600}

/* ---- huy hiệu nguồn băng ---- */
.srcbadge{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--indigo);
  background:var(--card-2); border:1px solid var(--line); border-radius:999px; padding:4px 11px}
.srcbadge svg{width:12px; height:12px; fill:currentColor}
.secsrc{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 15px}

/* ---- nút loa dùng chung ---- */
.sp{display:inline-grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); border:1px solid transparent; transition:transform .13s, background .13s}
.sp svg{width:15px; height:15px; fill:currentColor}
.sp:hover{background:var(--accent); color:var(--accent-ink)}
.sp.on{background:var(--accent); color:var(--accent-ink); animation:sppulse .6s ease-in-out infinite}
.sp.lg{width:40px; height:40px} .sp.lg svg{width:19px; height:19px}
@keyframes sppulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@media (prefers-reduced-motion:reduce){ .sp.on{animation:none} }

/* ---- bảng âm tiết bốn thanh ---- */
.tonewrap{overflow-x:auto; margin-top:6px; padding-bottom:4px; -webkit-overflow-scrolling:touch}
.tonetab{width:100%; min-width:560px; border-collapse:separate; border-spacing:0 7px}
.tonetab th{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
  font-weight:800; text-align:center; padding:0 4px 2px}
.tonetab th:first-child{text-align:left; padding-left:6px}
.tonetab td{padding:0 3px}
.tonetab tr.row td{background:var(--card-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.tonetab tr.row td:first-child{border-left:1px solid var(--line); border-radius:13px 0 0 13px; padding-left:12px}
.tonetab tr.row td:last-child{border-right:1px solid var(--line); border-radius:0 13px 13px 0; padding-right:8px}
.tonetab tr.row.ok td{background:var(--jade-soft); border-color:var(--jade)}
.rowlbl{display:flex; align-items:center; gap:9px; padding:9px 0}
.rowlbl .syl{font-family:"Noto Sans",sans-serif; font-weight:700; font-size:15px; color:var(--muted); min-width:34px}
.tcell{width:100%; display:grid; gap:1px; justify-items:center; padding:8px 4px; border-radius:11px;
  border:1.5px solid transparent; background:transparent}
.tcell .p{font-size:19px; font-weight:700; line-height:1.5}
.tcell .n{font-size:9.5px; font-weight:800; letter-spacing:.08em; color:var(--faint)}
.tcell:hover{border-color:currentColor; background:var(--card)}
.tcell.on{background:var(--card); border-color:currentColor}
.tcell.t1{color:var(--t1)} .tcell.t2{color:var(--t2)} .tcell.t3{color:var(--t3)} .tcell.t4{color:var(--t4)}
.tcell.ex{color:var(--ink)}
.tcell.ex .p{font-family:"Noto Serif SC",serif; font-size:21px}
.tcell.empty{opacity:.28; pointer-events:none}
.rowgo{border:1px solid var(--line); background:var(--card); border-radius:9px; padding:6px 11px;
  font-size:11.5px; font-weight:700; color:var(--muted); white-space:nowrap}
.rowgo:hover{border-color:var(--accent); color:var(--accent)}
.rowgo.on{background:var(--jade); border-color:var(--jade); color:#fff}

/* ---- bảng thanh mẫu / vận mẫu ---- */
.pyboard{display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:8px; margin:2px 0 6px}
.pyk{display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius:12px;
  background:var(--card-2); border:1px solid var(--line); transition:transform .12s}
.pyk .k{font-size:19px; color:var(--ink); font-weight:700}
.pyk .r{font-size:11px; color:var(--faint); font-weight:600}
.pyk:hover{border-color:var(--accent); transform:translateY(-1px)}
.pyk.on{background:var(--accent-soft); border-color:var(--accent)}
.pyk.on .k{color:var(--accent)}
.grouplbl{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  font-weight:800; margin:18px 0 9px}
.grouplbl:first-child{margin-top:2px}

/* ---- cặp tối thiểu ---- */
.pairgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:9px; margin-bottom:18px}
.pcard{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px;
  background:var(--card-2); border:1px solid var(--line); border-radius:13px; padding:9px 11px}
.pside{display:flex; align-items:center; gap:7px; border-radius:9px; padding:4px 5px; width:100%}
.pside .py{font-size:17px; font-weight:700}
.pside:hover{background:var(--card)}
.pside.a .py{color:var(--jade)} .pside.b .py{color:var(--red)}
.pside.b{justify-content:flex-end}
.pcard .sep{font-size:12px; color:var(--faint); font-weight:700}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin:2px 0 14px}
.legend .sw{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px}

/* ---- biến điệu ---- */
.sandhilist{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:9px; margin-bottom:18px}
.scard{display:flex; align-items:center; gap:11px; background:var(--card-2);
  border:1px solid var(--line); border-radius:13px; padding:10px 12px}
.scard .txt{flex:1; min-width:0}
.scard .h{font-family:"Noto Serif SC",serif; font-weight:700; font-size:20px; line-height:1.25; margin-bottom:2px}
.scard .kv{font-size:12px; display:flex; gap:6px; align-items:baseline}
.scard .kv .k{font-size:9px; font-weight:800; letter-spacing:.04em; color:var(--faint); min-width:52px; flex:none}
.scard .kv .v{font-weight:600}
.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}

/* ---- ô đọc nhanh ---- */
.readgrid2{display:grid; grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); gap:8px}
.rdc{display:flex; align-items:center; gap:7px; background:var(--card-2); border:1px solid var(--line);
  border-radius:11px; padding:7px 9px}
.rdc .t{flex:1; min-width:0; text-align:left; font-size:16px; font-weight:700; padding:2px 0; line-height:1.5}
.rdc .t .zh{font-family:"Noto Serif SC",serif; font-size:12.5px; color:var(--faint); margin-left:5px}
.rdc.done{background:var(--jade-soft); border-color:var(--jade)}
.rdc.done .t{color:var(--jade); text-decoration:line-through; text-decoration-thickness:1.5px}

/* ---- câu hỏi ---- */
.qhead .sp{margin-left:auto}
.qretry{display:flex; justify-content:flex-end; margin-top:12px}

/* ---- hàng thoại ---- */
.dlgrow{display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:center;
  background:var(--card-2); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.dlgrow .who{font-weight:800; color:var(--faint); font-size:14px}
.dlgrow .h{font-family:"Noto Serif SC",serif; font-weight:700; font-size:30px; line-height:1.2}
.dlgrow .p{font-size:14.5px; color:var(--muted)}
.dlgrow .v{font-size:13px; color:var(--faint); font-style:italic}

/* ---- thanh điều hướng bên trái ---- */
.navpanel > summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:10px}
.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:13px}

/* ---- mục lục: mỗi chặng một hàng, bài luyện nằm trong tab phụ ---- */
.navunit{position:relative; z-index:1; margin-bottom:3px}
.navunit:hover, .navunit:focus-within, .navunit.pinned{z-index:53}
.navmain{display:flex; align-items:center; gap:10px; text-decoration:none;
  padding:9px 10px; border-radius:13px; border:1.5px solid transparent; transition:.15s}
.navmain i{font-style:normal; width:24px; height:24px; 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:12.5px; font-weight:800}
.navmain .nmv{flex:1; min-width:0; font-size:15px; font-weight:700; line-height:1.25;
  color:var(--uc,var(--ink))}
.navmain .nmv em{display:block; font-style:normal; font-family:"Noto Serif SC",serif;
  font-size:11px; color:var(--faint); font-weight:500; margin-top:1px}
.navmain .navcnt{flex:none; font-size:11.5px; font-weight:800; color:var(--muted);
  font-variant-numeric:tabular-nums}
.navmain:hover, .navmain.on, .navunit.pinned .navmain{background:var(--ucs,var(--card-2)); border-color:var(--uc,var(--accent))}
.navunit.full .navmain i::after{content:"✓"}
.navunit.full .navmain i{font-size:0; background:var(--jade)}
.navunit.full .navmain i::after{font-size:12px}
.navunit.full .navcnt{color:var(--jade)}

.navflyout{position:absolute; left:calc(100% + 11px); top:-8px; z-index:52; width:300px;
  background:var(--card); border:1.5px solid var(--uc,var(--accent)); border-radius:17px; padding:9px;
  box-shadow:0 22px 46px -20px rgba(120,30,70,.55), 0 2px 8px rgba(0,0,0,.07);
  display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateX(-7px); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s}
.navunit:hover .navflyout, .navunit:focus-within .navflyout, .navunit.pinned .navflyout{
  opacity:1; visibility:visible; transform:none; pointer-events:auto}
@media (prefers-reduced-motion:reduce){ .navflyout{transition:none} }
.navflyout::after{content:""; position:absolute; left:-14px; top:0; width:14px; height:100%}
.navflyout::before{content:""; position:absolute; left:-7px; top:24px; width:12px; height:12px;
  background:var(--card); border-left:1.5px solid var(--uc,var(--accent)); border-bottom:1.5px solid var(--uc,var(--accent));
  transform:rotate(45deg); border-radius:0 0 0 3px}
.navflyout .nfh{font-size:10px; letter-spacing:.15em; text-transform:uppercase; font-weight:800;
  color:var(--faint); padding:4px 8px 6px}
.navflyout .strow:hover{background:var(--ucs,var(--accent-soft))}
.navflyout .strow:hover .stn{color:var(--uc,var(--accent))}
.navchevm{display:none}

/* trên điện thoại tab phụ mở xuống dưới thay vì bay sang phải */
@media (max-width:920px){
  .navflyout{position:static; width:auto; opacity:1; visibility:visible; transform:none;
    pointer-events:auto; box-shadow:none; background:transparent; border:none;
    border-left:2px solid var(--uc,var(--accent)); border-radius:0;
    margin:3px 0 7px 15px; padding:2px 0 2px 7px; display:none}
  .navflyout::before{display:none}
  .navflyout .nfh{display:none}
  .navunit.pinned .navflyout{display:grid}
  .navflyout .strow{padding:6px 8px}
  .navflyout .strow .stbar{margin-top:5px}
  .navchevm{display:block; flex:none; color:var(--faint); font-size:11px; transition:transform .18s}
  .navunit.pinned .navchevm{transform:rotate(180deg)}
}

/* ============================================================
   MÀN HÌNH ĐIỆN THOẠI
   ============================================================ */
@media (max-width:920px){
  .cols{grid-template-columns:1fr; gap:16px}
  .rail{position:static; flex-direction:row; flex-wrap:wrap; gap:10px}
  .rail .panel{flex:1 1 260px}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .hz{padding:14px}
  .hzhead{gap:10px}
  .hzbig{width:52px; height:52px; font-size:32px; border-radius:16px}
  .hztabs{flex-wrap:wrap; padding:4px; gap:6px}
  .hztab{flex:1 1 calc(50% - 6px); white-space:normal; font-size:12.5px; padding:8px 6px; line-height:1.25}
  .masthead-in{padding:16px 15px 18px; gap:11px}
  .chip{font-size:11.5px; padding:4px 10px}
  .chips{gap:6px; margin-top:11px}
  .eyebrow{font-size:10.5px}
  .title-han{font-size:clamp(34px,10vw,48px)}
  .title-vi{font-size:14px}
  .mh-glyph{font-size:150px; top:-16px; right:-16px}
  .wrap{padding:0 12px 80px}
  .cols{margin-top:16px}
  .rail{flex-direction:column}
  .rail .panel{flex:1 1 auto}
  .tonetab{min-width:520px}
  .pairgrid{grid-template-columns:1fr 1fr; gap:7px}
  .pcard{padding:8px 9px; gap:3px}
  .pside{gap:5px; padding:3px}
  .pside .py{font-size:15px}
  .sandhilist{grid-template-columns:1fr}
  .readgrid2{grid-template-columns:1fr 1fr}
  .dlgrow{grid-template-columns:22px 1fr auto; gap:9px; padding:12px 13px}
  .dlgrow .h{font-size:26px}
  .pyk{padding:8px 12px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .tonegrid{grid-template-columns:1fr 1fr; gap:8px}
  .tonecard{padding:11px 12px}
  .foot{font-size:12px}
}
@media (max-width:420px){
  .tonegrid{grid-template-columns:1fr}
  .pairgrid, .readgrid2{grid-template-columns:1fr}
  .utitle h2{font-size:20px}
  .stepname{font-size:14.5px}
}
/* vùng bấm đủ lớn cho ngón tay */
@media (pointer:coarse){
  .sp{width:38px; height:38px}
  .sp.lg{width:46px; height:46px}
  .tbtn, .opt, .gopt, .rowgo, .tool{min-height:40px}
  .mi{min-height:46px}
}

/* ============================================================
   v7 — BẢN LUYỆN Ở NHÀ CHO SINH VIÊN
   Năm chặng · bỏ mã bước con · tab phụ khi rê chuột · ghi âm tự so
   ============================================================ */

/* tab phụ phải tràn ra ngoài viền chặng nên bỏ overflow:hidden,
   bù lại bo góc riêng cho đầu chặng và bài luyện cuối */
section.unit{overflow:visible}
.uhead{position:relative; border-radius:var(--r) var(--r) 0 0}
details.step:last-child > summary{border-radius:0 0 var(--r) var(--r)}
details.step:last-child[open] > summary{border-radius:0}
.ubadge{font-family:"Baloo 2",sans-serif; font-size:19px; font-weight:800}
.utime{font-size:11.5px; font-weight:800; color:var(--gold); background:var(--gold-soft);
  border:1px solid var(--gold); border-radius:99px; padding:3px 10px; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.unit.done .utime{color:var(--jade); background:var(--jade-soft); border-color:var(--jade)}

/* ---- bỏ mã A1/A2: bài luyện chỉ còn chấm tròn ---- */
.stepdot{width:11px; height:11px; border-radius:50%; background:var(--card);
  border:3px solid var(--line); flex:none; transition:.15s}
details.step[open] .stepdot, details.step > summary:hover .stepdot{border-color:var(--accent); background:var(--accent)}
.step.ok .stepdot{border-color:var(--jade); background:var(--jade)}


/* ---- CHIP GỢI Ý + TAB PHỤ ---- */
.subtrig{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:11.5px;
  font-weight:700; color:var(--faint); background:var(--card); border:1px dashed var(--line);
  border-radius:99px; padding:3px 11px; line-height:1.5}
.subtrig b{color:var(--muted); font-variant-numeric:tabular-nums}
.uhead:hover .subtrig, .uhead:focus-within .subtrig, .uhead.pinned .subtrig{
  border-style:solid; border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.uhead:hover .subtrig b, .uhead.pinned .subtrig b{color:var(--accent)}

.subtab{position:absolute; left:20px; top:calc(100% - 8px); z-index:45; width:min(340px, calc(100% - 40px));
  background:var(--card); border:1px solid var(--accent); border-radius:17px;
  box-shadow:0 22px 46px -20px rgba(120,30,70,.6), 0 2px 8px rgba(0,0,0,.07);
  padding:9px; display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.985); pointer-events:none;
  transition:opacity .17s ease, transform .17s ease, visibility .17s}
.uhead:hover .subtab, .uhead:focus-within .subtab, .uhead.pinned .subtab{
  opacity:1; visibility:visible; transform:none; pointer-events:auto}
@media (prefers-reduced-motion:reduce){ .subtab{transition:none} }
.subtab::before{content:""; position:absolute; left:38px; top:-7px; width:12px; height:12px;
  background:var(--card); border-left:1px solid var(--accent); border-top:1px solid var(--accent);
  transform:rotate(45deg); border-radius:3px 0 0 0}
.subtab .sth{font-size:10px; letter-spacing:.15em; text-transform:uppercase; font-weight:800;
  color:var(--faint); padding:4px 8px 6px; display:flex; justify-content:space-between; gap:8px}
.subtab .sth em{font-style:normal; font-family:"Noto Serif SC",serif; letter-spacing:.04em; text-transform:none; color:var(--faint)}
.strow{display:block; text-decoration:none; color:var(--ink); padding:7px 8px; border-radius:12px}
.strow:hover{background:var(--accent-soft)}
.strow .r1{display:flex; align-items:center; gap:9px}
.strow .sti{width:19px; height:19px; border-radius:6px; background:var(--card-2); border:1px solid var(--line);
  display:grid; place-items:center; font-size:10px; font-weight:800; color:var(--faint); flex:none}
.strow.full .sti{background:var(--jade); border-color:var(--jade); color:#fff}
.strow .stn{flex:1; min-width:0; font-size:13.5px; font-weight:600; line-height:1.35}
.strow:hover .stn{color:var(--accent)}
.strow .stn em{display:block; font-style:normal; font-family:"Noto Serif SC",serif; font-size:11px;
  color:var(--faint); font-weight:500; margin-top:1px}
.strow .stprog{font-size:11.5px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; flex:none}
.strow.full .stprog{color:var(--jade)}
.strow .stbar{height:4px; border-radius:99px; background:var(--card-2); overflow:hidden; margin:6px 0 0 28px}
.strow .stbar span{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--red)); transition:width .4s cubic-bezier(.2,.8,.2,1)}
.strow.full .stbar span{background:var(--jade)}
@media (max-width:640px){ .subtab{left:12px; width:calc(100% - 24px)} .subtab::before{left:26px} }

/* ---- ô mẹo phát âm bay theo con trỏ ---- */
#tipbox{position:fixed; z-index:90; max-width:310px; background:var(--card);
  border:1px solid var(--gold); border-radius:14px; padding:10px 13px; font-size:13px; line-height:1.5;
  color:var(--ink); box-shadow:0 18px 40px -20px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.08);
  opacity:0; visibility:hidden; transform:translateY(-5px); transition:opacity .14s, transform .14s, visibility .14s;
  pointer-events:none}
#tipbox.on{opacity:1; visibility:visible; transform:none}
#tipbox .tk{display:block; font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:800; color:var(--gold); margin-bottom:4px}
[data-tip]{cursor:help}

/* ---- thẻ mở đầu ---- */
.startcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:19px 24px; margin-bottom:20px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center}
@media (max-width:640px){ .startcard{grid-template-columns:1fr; padding:16px 17px} }
.sc-k{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:800; color:var(--faint)}
.startcard h3{font-family:"Baloo 2",sans-serif; font-size:19px; font-weight:700; margin:5px 0 6px}
.startcard p{margin:0; font-size:14px; color:var(--muted); max-width:70ch}
.sc-go{background:var(--accent); color:var(--accent-ink); border-radius:14px; padding:12px 20px;
  font-size:14.5px; font-weight:700; white-space:nowrap; box-shadow:0 8px 20px -10px var(--accent); transition:.15s}
.sc-go:hover{transform:translateY(-2px)}

/* ---- mẹo luyện trong từng bài ---- */
.tnote{border-left:4px solid var(--gold); background:var(--gold-soft); border-radius:0 13px 13px 0;
  padding:11px 14px; margin:15px 0 0; font-size:13px; line-height:1.55}
.tnote b.k{display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:4px}

/* ---- ô ghi âm tự so ---- */
.rec{border:1.5px dashed var(--indigo); border-radius:16px; background:var(--card-2);
  padding:14px 16px; margin:16px 0 4px; display:grid; gap:10px}
.rec.recording{border-style:solid; border-color:var(--red); background:var(--bad-bg)}
.rec-h{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.rec-k{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--indigo)}
.rec.recording .rec-k{color:var(--red)}
.rec-task{font-size:13px; color:var(--muted)}
.rec-row{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.rbtn{border:1.5px solid var(--line); background:var(--card); border-radius:11px; padding:8px 14px;
  font-size:13px; font-weight:700; color:var(--muted); transition:.15s}
.rbtn b{font-family:"Noto Sans",sans-serif; color:var(--ink); font-weight:700; margin-left:4px}
.rbtn:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.rbtn:disabled{opacity:.38; cursor:not-allowed}
.rbtn.model{border-color:var(--indigo); color:var(--indigo)}
.rbtn.model:hover{background:var(--indigo); color:#fff} .rbtn.model:hover b{color:#fff}
.rbtn.go{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.rbtn.go b{color:var(--accent-ink)}
.rbtn.go:hover:not(:disabled){filter:brightness(1.06); color:var(--accent-ink)}
.rec.recording .rbtn.go{animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(241,70,126,.5)}50%{box-shadow:0 0 0 9px rgba(241,70,126,0)}}
@media (prefers-reduced-motion:reduce){ .rec.recording .rbtn.go{animation:none} }
.rbtn.ghost{border-style:dashed; color:var(--faint)}
.rec-note{font-size:12.5px; color:var(--muted); line-height:1.5; min-height:1em}
.rec-note.warn{color:var(--bad); font-weight:600}

/* ---- tự kiểm tra ---- */
.reqlist{display:grid; gap:7px; margin-bottom:14px}
.req{display:grid; grid-template-columns:24px 1fr auto; gap:11px; align-items:center; text-align:left;
  border:1.5px solid var(--line); background:var(--card-2); border-radius:12px; padding:11px 13px;
  text-decoration:none; color:var(--ink); transition:.15s; width:100%}
.req:hover{border-color:var(--accent)}
.req .rn{width:24px; height:24px; border-radius:8px; background:var(--card); border:1px solid var(--line);
  display:grid; place-items:center; font-size:11.5px; font-weight:800; color:var(--faint)}
.req .rt{font-size:14px; font-weight:600; line-height:1.4}
.req .rt em{font-style:normal; font-family:"Noto Serif SC",serif; color:var(--faint); font-size:12.5px; margin-left:7px}
.req .rg{font-size:11px; font-weight:800; color:var(--accent); white-space:nowrap; padding:4px 6px; border-radius:7px}
.req .rg:hover{background:var(--accent-soft)}
.req.chk.on{border-color:var(--jade); background:var(--jade-soft)}
.req.chk.on .rn{background:var(--jade); border-color:var(--jade); color:#fff; font-size:0}
.req.chk.on .rn::after{content:"✓"; font-size:13px}
.req.chk.on .rt{color:var(--jade)}

/* ---- bảng quy tắc biến điệu ---- */
.board{border-radius:18px; padding:20px 18px; margin:2px 0 18px; text-align:center;
  background:linear-gradient(160deg,#1E4038,#16302B); border:7px solid #A9793F; box-shadow:inset 0 0 46px rgba(0,0,0,.4)}
.board .bt{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:800;
  color:rgba(255,255,255,.5); margin-bottom:12px}
.board .bl{display:grid; gap:9px; justify-items:center}
.board .br{font-family:"Noto Serif SC",serif; font-size:clamp(17px,3.4vw,23px); font-weight:700; color:#FFF8E7;
  letter-spacing:.05em; text-shadow:0 1px 0 rgba(255,255,255,.25)}
.board .br.py{font-family:"Noto Sans",sans-serif; color:#FFD98A; font-weight:700}
.board .br.sym{font-family:"Noto Sans",sans-serif; color:#9FE8CE; letter-spacing:.28em}
.board .bn{font-size:12.5px; color:rgba(255,255,255,.55); margin-top:12px}

/* ---- luyện ghép vần ---- */
.spellbox{border:1px solid var(--line); border-radius:17px; background:var(--card-2); padding:17px; display:grid; gap:14px}
.spellq{display:flex; align-items:center; justify-content:center; gap:13px; flex-wrap:wrap}
.spellq .sq{font-size:13.5px; color:var(--muted); font-weight:600}
.slots{display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap}
.slot{min-width:74px; height:58px; border-radius:14px; border:2px dashed var(--line); background:var(--card);
  display:grid; place-items:center; font-family:"Noto Sans",sans-serif; font-size:23px; font-weight:700; color:var(--faint)}
.slot.set{border-style:solid; border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.slot.eq{border:none; background:none; min-width:26px; font-size:20px; color:var(--faint)}
.slot.out{min-width:110px; border-color:var(--gold); color:var(--gold); background:var(--gold-soft); border-style:solid}
.slot.ok{border-color:var(--good); color:var(--good); background:var(--good-bg)}
.slot.bad{border-color:var(--bad); color:var(--bad); background:var(--bad-bg); animation:shake .32s}
.spellrow{display:grid; gap:6px}
.spellrow .lb{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:800; color:var(--faint)}
.spellpick{display:flex; flex-wrap:wrap; gap:6px}
.sk{border:1.5px solid var(--line); background:var(--card); border-radius:11px; padding:7px 13px;
  font-family:"Noto Sans",sans-serif; font-size:16px; font-weight:700; color:var(--ink); transition:.14s}
.sk:hover:not(:disabled){border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.sk.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.sk:disabled{opacity:.35; cursor:default}

/* ---- mục lục: bỏ mã bước con, đổi sang chấm ---- */
.navnum.dot{background:transparent; border:none; width:19px}
.navnum.dot::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--line); display:block}
.navlist a.on .navnum.dot::before{background:var(--accent)}
.navlist a.full .navnum.dot::before{background:var(--jade)}
.navlist a.full .navnum.dot, .navlist a.on .navnum.dot{background:transparent}

/* ---- in bảng ô vuông luyện viết: quy tắc cũ trỏ vào #uD đã không còn ---- */

/* ============================================================
   ĐIỆN THOẠI — bản gọn cho luyện tập
   ============================================================ */
@media (max-width:920px){
  .rail{gap:10px}
  .rail .panel{padding:14px 15px}
  .rail .panel h3{margin-bottom:9px}
}
@media (max-width:640px){
  /* --- đầu trang --- */
  .masthead-in{padding:14px 14px 15px; gap:10px}
  .mh-glyph{font-size:118px; top:-8px; right:-10px; color:rgba(255,255,255,.075)}
  .eyebrow{font-size:10px; letter-spacing:.14em}
  .title-row{gap:9px; margin-top:5px}
  .title-han{font-size:clamp(30px,9vw,42px)}
  .title-py{font-size:13px}
  .chips{gap:5px; margin-top:9px}
  .chip{font-size:11px; padding:3px 9px}
  .tools{gap:6px; margin-top:2px}
  .tool, .zoomer{font-size:12.5px}
  .tool{padding:7px 12px}

  /* --- thẻ mở đầu --- */
  .startcard{padding:14px 15px; gap:12px}
  .startcard h3{font-size:16.5px; margin:4px 0 0}
  .sc-go{width:100%; text-align:center; padding:13px 16px}

  /* --- tiến độ: một dải mỏng thay cho cả thẻ --- */
  .rail > .panel:not(.navpanel){display:flex; flex-wrap:wrap; align-items:center;
    gap:5px 11px; padding:11px 14px}
  .rail > .panel:not(.navpanel) h3{display:none}
  .rail > .panel:not(.navpanel) .xp{flex:1 1 auto; gap:10px}
  .rail > .panel:not(.navpanel) .xp .big{font-size:24px}
  .rail > .panel:not(.navpanel) .xp .sub{font-size:11.5px}
  .rail > .panel:not(.navpanel) .bar{flex:1 1 100%; margin-top:3px}
  .rail > .panel:not(.navpanel) .reset{flex:none; margin-top:0; font-size:12px}

  /* --- đầu mỗi chặng --- */
  .uhead{padding:13px 14px 12px}
  .ubadge{width:33px; height:33px; font-size:16px; border-radius:10px}
  .utitle h2{font-size:18.5px; line-height:1.2}
  .utitle .uzh{font-size:12.5px; margin-left:6px}
  .utime{font-size:10.5px; padding:2px 8px}
  .ucount{font-size:12px}
  .ufold{font-size:11px; padding:5px 9px}
  .subtrig{font-size:11px; padding:2px 9px}

  /* --- tên bài luyện: bỏ dòng phụ cho đỡ rối --- */
  .stepname{font-size:15px}
  .stepname em{font-size:12px; margin-left:5px}
  .stepname small{display:none}
  .sprog{font-size:11.5px; padding:3px 8px}
  .sbody{padding:2px 14px 18px}

  /* --- câu lệnh --- */
  .lede{font-size:14px; margin-bottom:13px}
  .grouplbl{margin:15px 0 7px}
  .secsrc{margin-bottom:12px}

  /* --- băng gốc: nút to, dễ bấm --- */
  .tape{padding:11px 12px; gap:9px}
  .tape-row{gap:6px}
  .tbtn{padding:9px 12px; font-size:13.5px}
  .rates{margin-left:0; width:100%; justify-content:flex-end}
  .tape-bar{height:30px}

  /* --- vùng bấm cho ngón tay --- */
  .sp{width:40px; height:40px}
  .sp svg{width:17px; height:17px}
  .opt, .gopt, .sk, .tbtn, .wbtn, .rbtn{min-height:44px}
  .hzc{width:48px; height:48px; font-size:23px}

  .foot{font-size:11.5px; margin-top:24px}
}
@media (max-width:420px){
  .tools .tool{padding:7px 10px}
  .startcard h3{font-size:15.5px}
}

@media print{
  .subtab, .subtrig, #tipbox, .tnote, .board, .rec, .startcard{display:none!important}
  section#u3{display:block!important}
  #u3 > details.step:not(#d1){display:none!important}
}

/* ================================================================
   CHẶNG 4 · NHÌN HÌNH NHỚ TỪ — thẻ hình, quiz hình, ghép Hán Việt
   ================================================================ */
.pic{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px;
  background:var(--card-2); border:1px solid var(--line)}
:root[data-theme="dark"] .pic{filter:brightness(.9) saturate(.95)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pic{filter:brightness(.9) saturate(.95)} }

/* ---- thẻ hình lật ---- */
.pcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:13px}
.pcw{position:relative}
.pc{perspective:1000px; height:264px; width:100%; padding:0; display:block}
.pcin{display:block; position:relative; width:100%; height:100%;
  transition:transform .55s cubic-bezier(.3,.8,.3,1); transform-style:preserve-3d}
.pc.flip .pcin{transform:rotateY(180deg)}
.pcf{position:absolute; inset:0; backface-visibility:hidden; border:1px solid var(--line);
  border-radius:16px; background:var(--card-2); overflow:hidden; display:flex; flex-direction:column}
.pc:hover .pcf{border-color:var(--u4)}
.pcf .pic{border:none; border-radius:0; flex:none; height:62%; aspect-ratio:auto}
.pcbot{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:7px 8px 9px; text-align:center}
.pcbot .han{font-size:27px; line-height:1.05}
.pcbot .py{font-size:13px; color:var(--muted)}
.pcb{transform:rotateY(180deg); background:var(--u4s); border-color:var(--u4);
  justify-content:center; align-items:center; text-align:center; padding:14px 12px; gap:5px}
.pcb .hv{font-family:"Baloo 2",sans-serif; font-size:23px; font-weight:800; color:var(--u4); letter-spacing:.02em; line-height:1.1}
.pcb .vi{font-size:14.5px; font-weight:700; line-height:1.3}
.pcb .cg{font-size:11.5px; color:var(--muted); line-height:1.45; margin-top:3px}
.pcb .cg b{color:var(--ink); font-weight:700}
.pcw .mini{top:9px; right:9px}
@media (prefers-reduced-motion:reduce){ .pcin{transition:none} }
@media (max-width:420px){ .pcards{grid-template-columns:repeat(2,1fr); gap:10px} .pc{height:236px} }

/* ---- quiz hình (dùng chung p2 · p3 · p4) ---- */
.picq{border:1px solid var(--line); border-radius:16px; background:var(--card-2); padding:20px}
.pqstage{display:grid; gap:16px; justify-items:center}
.pqpips{display:flex; gap:5px; justify-content:center; flex-wrap:wrap}
.pqq{font-size:13.5px; color:var(--muted); font-weight:600; text-align:center}
.pqask{display:grid; justify-items:center; gap:9px}
.pqask .pic{width:196px; height:196px; border-radius:16px}
.pqask .askhan{font-family:"Noto Serif SC",serif; font-weight:700; font-size:66px; line-height:1.05}
.pqask .askpy{font-size:17px; color:var(--muted); font-weight:600}
.pqask .askhv{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--u4)}
.pqbig{width:92px; height:92px; border-radius:50%; background:var(--u4); color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 22px -10px var(--u4); transition:transform .15s}
.pqbig:hover{transform:scale(1.05)}
.pqbig svg{width:36px; height:36px; fill:currentColor}
.pqbig.playing{animation:pulse 1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .pqbig.playing{animation:none} }
.pqopts{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.pqopt{border:2px solid var(--line); background:var(--card); border-radius:14px; padding:13px 19px;
  font-weight:700; transition:.15s; min-width:78px; min-height:76px; display:grid; place-items:center}
.pqopt .han{font-size:36px; line-height:1.1}
.pqopt:hover:not(:disabled){border-color:var(--u4); transform:translateY(-2px)}
.pqopt:disabled{cursor:default}
.pqopt.right{border-color:var(--good); background:var(--good-bg); color:var(--good)}
.pqopt.right .py{color:var(--good)}
.pqopt.wrong{border-color:var(--bad); background:var(--bad-bg); color:var(--bad)}
.pqopt.dim{opacity:.42}
/* lựa chọn là ảnh */
.pqopts.imgs{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; width:100%; max-width:560px}
@media (max-width:560px){ .pqopts.imgs{grid-template-columns:repeat(2,1fr)} }
.pqopts.imgs .pqopt{padding:6px; min-width:0}
.pqopts.imgs .pqopt .pic{border:none}
.pqdone{font-family:"Baloo 2",sans-serif; font-weight:800; font-size:19px; color:var(--jade); text-align:center}

/* ---- ghép chữ Hán · âm Hán Việt ---- */
.hvgame{border:1px solid var(--line); border-radius:16px; background:var(--card-2); padding:18px}
.hvcols{display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:520px; margin:0 auto}
.hvcol{display:flex; flex-direction:column; gap:7px}
.hvh{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:var(--faint); text-align:center; margin-bottom:2px}
.hvi{border:1.5px solid var(--line); background:var(--card); border-radius:11px; padding:6px 10px;
  font-weight:700; transition:.15s; text-align:center; height:50px; display:grid; place-items:center}
.hvi .han{font-size:26px; line-height:1.1}
.hvi .hvt{font-family:"Baloo 2",sans-serif; font-size:15.5px; letter-spacing:.03em}
.hvi:hover:not(.done){border-color:var(--u4)}
.hvi.sel{border-color:var(--u4); background:var(--u4s); color:var(--u4)}
.hvi.done{border-color:var(--good); background:var(--good-bg); color:var(--good); cursor:default; opacity:.72}
.hvi.miss{border-color:var(--bad); background:var(--bad-bg); color:var(--bad); animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){ .hvi.miss{animation:none} }
.hvtop{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  max-width:520px; margin:0 auto 12px; font-size:12.5px; color:var(--muted)}
.hvtop b{color:var(--ink)}

/* ================================================================
   NỘP BÀI
   ================================================================ */
.submitcard{background:var(--card); border:2px solid var(--accent); border-radius:var(--r);
  box-shadow:var(--shadow); padding:22px 26px; margin:26px 0 8px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center}
@media (max-width:700px){ .submitcard{grid-template-columns:1fr; padding:18px 17px; gap:16px} }
.submitcard.sent{border-color:var(--jade); background:var(--jade-soft)}
.submitcard.locked{border-color:var(--line); border-style:dashed}
.submitcard.locked .subgo{background:var(--card-2); color:var(--faint); box-shadow:none}
.sub-k{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:800; color:var(--faint)}
.submitcard h3{font-family:"Baloo 2",sans-serif; font-size:21px; font-weight:800; margin:5px 0 5px}
.submitcard p{margin:0 0 13px; font-size:14px; color:var(--muted); max-width:62ch}
.subbar{height:9px; border-radius:99px; background:var(--card-2); border:1px solid var(--line); overflow:hidden}
.subbar 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)}
.submitcard.sent .subbar span{background:var(--jade)}
.substats{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:11px; font-size:12.5px; color:var(--muted)}
.substats b{color:var(--ink); font-variant-numeric:tabular-nums; font-size:14.5px; font-family:"Baloo 2",sans-serif}
.sub-r{display:flex; flex-direction:column; align-items:stretch; gap:9px; min-width:190px}
.subgo{background:var(--accent); color:var(--accent-ink); border-radius:14px; padding:15px 24px;
  font-size:15.5px; font-weight:800; white-space:nowrap; text-align:center;
  box-shadow:0 10px 24px -12px var(--accent); transition:.15s}
.subgo:hover:not(:disabled){transform:translateY(-2px)}
.subgo:disabled{opacity:.55; transform:none; cursor:default; box-shadow:none}
.submitcard.sent .subgo{background:var(--jade); box-shadow:none}
.submsg{font-size:12px; color:var(--muted); text-align:center; line-height:1.5}
.submitcard.sent .submsg{color:var(--good); font-weight:600}

/* ================================================================
   ĐĂNG NHẬP · GIÁM SÁT LỚP HỌC — thêm cho việc theo dõi luyện ở nhà
   ================================================================ */

/* ---------- màn đăng nhập ---------- */
.loginmask{position:fixed; inset:0; z-index:900; display:flex; justify-content:center; align-items:flex-start;
  overflow-y:auto; padding:min(14vh,150px) 20px 40px; background:radial-gradient(120% 120% at 50% -10%, rgba(241,70,126,.16), var(--paper) 60%)}
@media (max-width:640px){ .loginmask{padding-top:190px} }
.loginmask[hidden]{display:none}
.lcard{width:100%; max-width:420px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:28px 26px 24px; position:relative; overflow:hidden}
.lcard::before{content:"你好"; position:absolute; right:-18px; top:-30px; font-family:"Noto Serif SC",serif;
  font-weight:900; font-size:120px; color:var(--accent-soft); line-height:1; pointer-events:none; z-index:0}
.lcard > *{position:relative; z-index:1}
.lhead-k{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--faint)}
.lcard h2{font-family:"Baloo 2",sans-serif; font-size:22px; font-weight:800; margin:5px 0 4px}
.lcard .lsub{font-size:13.5px; color:var(--muted); margin:0 0 20px; max-width:40ch}
.lfield{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.lfield label{font-size:12.5px; font-weight:700; color:var(--muted); display:flex; gap:7px; align-items:baseline; flex-wrap:wrap}
.lhint{font-weight:500; font-size:11.5px; color:var(--faint)}
.lfield input{font:inherit; font-size:15px; padding:11px 13px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--card-2); color:var(--ink); width:100%}
.lfield input:focus{border-color:var(--accent); outline:none}
.lfield input.bad{border-color:var(--bad)}
.lerr{font-size:12.5px; color:var(--bad); min-height:1.4em; margin:-6px 0 12px}
.lgo{width:100%; background:var(--accent); color:var(--accent-ink); border-radius:14px; padding:13px 16px;
  font-size:15px; font-weight:700; text-align:center; box-shadow:0 8px 20px -10px var(--accent); transition:.15s}
.lgo:hover{transform:translateY(-2px)}
.lgo:disabled{opacity:.6; transform:none; cursor:default}
.lnote{font-size:11.5px; color:var(--faint); margin-top:14px; line-height:1.6}
.lcancel{display:block; text-align:center; font-size:12.5px; color:var(--faint);
  text-decoration:underline; text-underline-offset:3px; margin-top:12px}
.lcancel:hover{color:var(--muted)}
.lwho{display:none; align-items:center; gap:10px; background:var(--card-2); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; margin-bottom:16px}
.lwho.on{display:flex}
.lwho .av{width:34px; height:34px; border-radius:10px; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-weight:800; font-size:14px; flex:none}
.lwho .lw-t{flex:1; min-width:0}
.lwho .lw-name{font-weight:700; font-size:13.5px}
.lwho .lw-sub{font-size:11.5px; color:var(--muted)}
.lwho .lw-x{font-size:12px; color:var(--faint); text-decoration:underline; text-underline-offset:2px; flex:none}

/* ---------- danh tính trên đầu trang ---------- */
.idbar{display:flex; align-items:center; gap:8px}
.idchip{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:5px 13px 5px 6px; color:#fff}
.idchip .av{width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--accent-deep,#D62C6A);
  display:grid; place-items:center; font-weight:800; font-size:11px; flex:none}
.idchip .idt{font-size:12.5px; font-weight:600; line-height:1.25}
.idchip .idt b{font-weight:800}
.idchip .idt small{display:block; font-size:10.5px; opacity:.85; font-weight:500}
.idswitch{font-size:11.5px; color:rgba(255,255,255,.78); text-decoration:underline; text-underline-offset:2px; white-space:nowrap}
.idswitch:hover{color:#fff}
.teacherbtn{border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff;
  border-radius:999px; padding:9px 15px; font-size:12.5px; font-weight:700; white-space:nowrap}
.teacherbtn:hover{background:rgba(255,255,255,.26)}

/* ---------- đồng bộ tiến độ ---------- */
.syncrow{display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line)}
.syncdot{width:8px; height:8px; border-radius:50%; background:var(--faint); flex:none}
.syncdot.ok{background:var(--jade)}
.syncdot.wait{background:var(--gold); animation:pulse2 1s ease-in-out infinite}
.syncdot.off{background:var(--bad)}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.35}}
.syncmsg{font-size:11.5px; color:var(--muted); flex:1; line-height:1.35}
.syncbtn{font-size:11.5px; font-weight:700; color:var(--accent); text-decoration:underline; text-underline-offset:2px; white-space:nowrap}

/* ================================================================
   BÁO CÁO LỚP (GIÁO VIÊN)
   ================================================================ */
.tgate{max-width:380px; margin:60px auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:26px}
.tgate h2{font-family:"Baloo 2",sans-serif; font-size:19px; margin:6px 0 4px}
.tgate p{font-size:13.5px; color:var(--muted); margin:0 0 16px}

.tdash-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:30px 0 22px}
.tdash-top h1{font-family:"Baloo 2",sans-serif; font-size:26px; font-weight:800}
.tdash-top .th-sub{font-size:13px; color:var(--muted); margin-top:3px}
.tdash-actions{display:flex; gap:8px; flex-wrap:wrap}
.tbtn2{border:1px solid var(--line); background:var(--card); border-radius:11px; padding:9px 15px;
  font-size:13px; font-weight:700; color:var(--muted)}
.tbtn2:hover{border-color:var(--accent); color:var(--accent)}
.tbtn2.pri{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}

.tgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
@media (max-width:800px){ .tgrid{grid-template-columns:repeat(2,1fr)} }
.tstat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow)}
.tstat .tv{font-family:"Baloo 2",sans-serif; font-size:28px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1}
.tstat .tl{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.3}

.tpanel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:20px 22px; margin-bottom:20px}
.tpanel h3{font-family:"Baloo 2",sans-serif; font-size:16px; font-weight:700; margin-bottom:2px}
.tpanel .tp-sub{font-size:12.5px; color:var(--muted); margin-bottom:16px}

.ubar-row{display:grid; grid-template-columns:150px 1fr 54px; align-items:center; gap:12px; margin-bottom:10px}
.ubar-row:last-child{margin-bottom:0}
.ubar-lbl{font-size:13px; font-weight:600; color:var(--ink)}
.ubar-lbl small{display:block; font-size:11px; color:var(--faint); font-weight:500}
.ubar-track{height:12px; border-radius:99px; background:var(--card-2); border:1px solid var(--line); overflow:hidden}
.ubar-fill{height:100%; border-radius:99px}
.ubar-pct{font-size:12.5px; font-weight:700; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}

.medal{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; font-size:14px; flex:none}
.medal.g{background:linear-gradient(150deg,#FFE29A,#E8A400); box-shadow:0 2px 6px -1px rgba(180,120,0,.5)}
.medal.s{background:linear-gradient(150deg,#F1F3F6,#B9C1CC); box-shadow:0 2px 6px -1px rgba(70,80,95,.4)}
.medal.b{background:linear-gradient(150deg,#F0BE95,#B87333); box-shadow:0 2px 6px -1px rgba(120,70,20,.5)}

.tboard{display:flex; flex-direction:column; gap:8px}
.trow{display:grid; grid-template-columns:32px minmax(0,1fr) auto auto; align-items:center; gap:16px;
  padding:10px 12px; border-radius:12px; background:var(--card-2); border:1px solid var(--line)}
.trow .trank{font-family:"Baloo 2",sans-serif; font-weight:800; color:var(--faint); text-align:center; font-size:14px}
.trow .tname{font-weight:700; font-size:14px}
.trow .tname small{display:block; font-weight:500; color:var(--muted); font-size:11.5px}
.trow .ttime{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.trow.top1{border-color:var(--gold); background:var(--gold-soft)}

.ttablewrap{overflow-x:auto}
table.tstudents{width:100%; border-collapse:collapse; font-size:13px; min-width:640px}
table.tstudents th{text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
  font-weight:800; padding:0 10px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
table.tstudents th[data-key]{cursor:pointer; user-select:none}
table.tstudents th[data-key]:hover{color:var(--accent)}
table.tstudents th.sorted{color:var(--accent)}
table.tstudents td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle}
table.tstudents tr:last-child td{border-bottom:none}
table.tstudents td.tn{font-weight:700}
table.tstudents td.tn small{display:block; font-weight:500; color:var(--muted); font-size:11.5px}
table.tstudents td.tsub{white-space:nowrap; font-variant-numeric:tabular-nums}
table.tstudents td.tsub b{color:var(--good); font-size:14px}
table.tstudents td.tsub small{display:block; color:var(--muted); font-size:11px}
.tpct-cell{display:flex; align-items:center; gap:8px; min-width:110px}
.tpct-track{flex:1; height:8px; border-radius:99px; background:var(--card-2); border:1px solid var(--line); overflow:hidden}
.tpct-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--red))}
.tstatus{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap}
.tstatus.done{background:var(--good-bg); color:var(--good)}
.tstatus.going{background:var(--gold-soft); color:#B0790A}
.tstatus.none{background:var(--card-2); color:var(--faint)}
.tempty{text-align:center; padding:40px 20px; color:var(--muted); font-size:14px}
.tempty b{display:block; font-size:16px; color:var(--ink); margin-bottom:6px; font-family:"Baloo 2",sans-serif}

@media (max-width:640px){
  .tdash-top h1{font-size:21px}
  .tgrid{grid-template-columns:1fr 1fr; gap:10px}
  .tstat{padding:13px 14px}
  .tstat .tv{font-size:22px}
  .ubar-row{grid-template-columns:104px 1fr 40px; gap:8px}
  .idchip .idt small{display:none}
}
[hidden]{display:none!important}

/* ================================================================
   ĐIỆN THOẠI — thu gọn đầu trang, bảng lớp đổi thành thẻ
   ================================================================ */
@media (max-width:640px){
  /* đầu trang: gom danh tính + nút vào một dải gọn, bỏ hai chip giới thiệu */
  .masthead-in{padding:16px 14px 18px}
  .masthead .chips{display:none}
  .mh-glyph{font-size:150px; top:-18px; right:-14px}
  .tools{gap:6px; margin-top:12px; width:100%}
  .idbar{width:100%; gap:6px}
  .idchip{flex:1; min-width:0; padding:4px 10px 4px 5px}
  .idchip .idt{min-width:0; overflow:hidden}
  .idchip .idt b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .idchip .idt small{display:block; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .idswitch{font-size:11px}
  .teacherbtn{padding:8px 12px; font-size:12px}
  .tools .tool, .tools .zoomer{font-size:12px}

  /* chặng 4 · quiz hình */
  .picq{padding:14px 12px}
  .pqask .pic{width:min(64vw,220px); height:min(64vw,220px)}
  .pqask .askhan{font-size:58px}
  .pqopts.imgs{gap:9px}
  .pqopt{min-height:66px}
  .pqopt .han{font-size:32px}
  .hvgame{padding:14px 11px}
  .hvcols{gap:9px}
  .hvi{height:48px; padding:5px 6px}
  .hvi .han{font-size:23px}
  .hvi .hvt{font-size:13.5px}

  /* nộp bài */
  .submitcard{margin:20px 0 6px}
  .submitcard h3{font-size:18.5px}
  .substats{gap:5px 14px; font-size:12px}
  .sub-r{min-width:0}
  .subgo{padding:14px 18px}

  /* ---- báo cáo lớp trên điện thoại ---- */
  .tdash-top{margin:20px 0 16px; gap:10px}
  .tdash-top h1{font-size:19px}
  .tdash-actions{width:100%}
  .tdash-actions .tbtn2{flex:1 1 auto; text-align:center; padding:10px 12px; font-size:12.5px}
  .tgrid{gap:9px}
  .tpanel{padding:15px 14px}
  .tpanel h3{font-size:15px}

  /* bảng vinh danh: tên trên, chỉ số xuống dòng dưới */
  .trow{grid-template-columns:30px minmax(0,1fr); gap:10px; padding:10px}
  .trow .tname{font-size:13.5px}
  .trow .ttime{grid-column:2; font-size:12.5px; margin-top:-4px}
  .trow .ttime + .ttime{margin-top:-6px}

  /* biểu đồ: nhãn nằm trên thanh */
  .ubar-row{grid-template-columns:1fr auto; gap:4px 10px}
  .ubar-lbl{grid-column:1; font-size:13px}
  .ubar-lbl small{display:none}
  .ubar-pct{grid-column:2; grid-row:1}
  .ubar-track{grid-column:1 / -1; grid-row:2}

  /* bảng sinh viên -> thẻ xếp dọc, không cần kéo ngang */
  .ttablewrap{overflow:visible}
  table.tstudents{min-width:0; display:block}
  table.tstudents thead{display:none}
  table.tstudents tbody{display:block}
  table.tstudents tr{display:block; border:1px solid var(--line); border-radius:14px;
    background:var(--card-2); padding:12px 13px; margin-bottom:10px}
  table.tstudents td{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
    padding:5px 0; border-bottom:1px dashed var(--line); text-align:right}
  table.tstudents td::before{content:attr(data-l); text-align:left; font-size:11px; font-weight:800;
    letter-spacing:.05em; text-transform:uppercase; color:var(--faint)}
  table.tstudents td:last-child{border-bottom:none}
  table.tstudents td.tn{display:block; text-align:left; font-size:15px; padding-bottom:9px}
  table.tstudents td.tn::before{content:none}
  table.tstudents td.tn small{font-size:12px}
  .tpct-cell{min-width:0}
  table.tstudents td.tsub{text-align:right}
  table.tstudents td.tsub b,
  table.tstudents td.tsub span{grid-column:2; text-align:right}
  table.tstudents td.tsub small{display:block; grid-column:2; text-align:right; margin-left:0}
}