: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);
  padding-right:34px}
.fcback .vi{font-size:14.5px; font-weight:700; line-height:1.28}
.fcback .pos{font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.3}
.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}
.qhead{display:flex; align-items:center; gap:11px; flex-wrap:nowrap; min-width:0}
.qprompt{flex:1 1 auto; min-width:0}
.q .qhead{grid-column:1}
.q .opts{grid-column:2}
.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; max-width:100%}
.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}
/* Điện thoại: xếp dọc câu hỏi → đáp án → giải thích.
   Khối @media này BẮT BUỘC đứng sau mọi rule ".q ..." ở trên. Trước đây nó nằm
   ngay dưới .q, nên ".q .fb{grid-column:2}" (cùng độ ưu tiên, đứng sau) vẫn thắng
   trên máy hẹp; grid chỉ có 1 cột nên trình duyệt sinh thêm một cột ngầm, cột chữ
   Hán bị bóp còn 0px và chữ tràn ra đè lên khung đáp án (lỗi đã gặp trên iPhone). */
@media (max-width:640px){
  .q{grid-template-columns:minmax(0,1fr); align-items:start; gap:10px 0}
  .q .qhead, .q .opts, .q .fb{grid-column:1}
  .qhead{gap:9px}
}
.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 ----
   Bảng rộng 560px+ (nhiều cột thanh mẫu/vận mẫu) nên trên điện thoại luôn phải
   cuộn ngang. Trước đây cuộn được nhưng mép phải bị cắt cụt không có dấu hiệu gì,
   sinh viên tưởng bảng bị lỗi/thiếu cột. Thêm gợi ý "vuốt ngang" (chỉ hiện ở màn
   hẹp) + bóng mờ hai mép báo còn nội dung để cuộn (ẩn dần khi đã cuộn hết). */
.tonehint{display:none; align-items:center; gap:5px; font-size:11.5px; font-weight:800;
  color:var(--faint); letter-spacing:.01em; margin:0 0 6px}
@media (max-width:640px){ .tonehint{display:flex} }
.tonewrap{
  position:relative; overflow-x:auto; margin-top:6px; padding-bottom:4px; -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0)) left,
    linear-gradient(to left, var(--card) 30%, rgba(255,255,255,0)) right,
    linear-gradient(to right, rgba(58,33,48,.14), rgba(58,33,48,0) 100%) left,
    linear-gradient(to left, rgba(58,33,48,.14), rgba(58,33,48,0) 100%) right;
  background-repeat:no-repeat;
  background-color:var(--card);
  background-size:24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment:local, local, scroll, scroll;
}
.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 ---- */
/* 212px từng đủ khi cặp chỉ có 1 âm tiết mỗi bên; nay MINPAIRS toàn từ 2 âm tiết
   (dònghóng, hěn máng…) nên card cần tối thiểu ~420px mới đủ chỗ cho cả hai bên
   + nút loa mà không bị ngắt dòng giữa chữ. */
.pairgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,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%}
/* Hán ngữ mặc định được phép ngắt dòng giữa hai chữ (办 / 公), và cụm "hěn máng"
   cũng có thể tách ở dấu cách nếu cột quá hẹp — khoá cả hai lại thành một khối. */
.pside .han{white-space:nowrap}
.pside .py{font-size:17px; font-weight:700; white-space:nowrap}
.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 ---- */
/* 170px: đủ cho "phiên âm + chữ Hán" nằm trọn một dòng ở màn hình rộng.
   Để 126px như trước thì máy tính xếp 5–6 cột hẹp, chữ bị ngắt giữa từ (哥/哥, tā de → 他/的). */
.readgrid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,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}
/* chữ Hán luôn liền khối — không bao giờ tách 哥 / 哥 sang hai dòng */
.rdc .t .zh{font-family:"Noto Serif SC",serif; font-size:12.5px; color:var(--faint); margin-left:5px;
  white-space:nowrap; display:inline-block}
.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}
  .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}
  .readgrid2{grid-template-columns:1fr}
  .utitle h2{font-size:20px}
  .stepname{font-size:14.5px}
}
/* Mỗi cặp trong "phân biệt âm dễ nhầm" giờ đều là từ 2 âm tiết (dònghóng, hěn máng…),
   không còn đủ chỗ xếp hai bên cạnh nhau dưới ~520px dù đã khoá nowrap — xếp dọc
   thành 2 dòng thay vì để chữ tràn ra ngoài card. */
@media (max-width:520px){
  .pairgrid{grid-template-columns:1fr}
  .pcard{grid-template-columns:1fr; grid-template-rows:auto auto; gap:2px; padding:8px 10px}
  .pcard .sep{display:none}
  .pside.b{justify-content:flex-start; border-top:1px dashed var(--line); padding-top:7px; margin-top:1px}
}
/* 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:7px 10px;
  font-weight:700; transition:.15s; text-align:center; min-height:52px; display:grid; place-items:center}
.hvi .han{font-size:26px; line-height:1.15}
/* nghĩa tiếng Việt dài hơn âm Hán Việt — cho phép xuống dòng, không cắt chữ */
.hvi .hvt{font-family:"Baloo 2",sans-serif; font-size:14.5px; letter-spacing:.02em;
  line-height:1.25; white-space:normal; overflow-wrap:anywhere}
.hvi .spk{display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:800; color:var(--faint); margin-top:2px}
.hvi.done .spk{color:inherit; opacity:.7}
.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}
}