/* Khung chung */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0;font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}img{max-width:100%}[hidden]{display:none!important}

/* Layout: a school "vở ô li" notebook — kid side is one sheet of grid paper with a red margin line; parent side is a calm report card. */
:root{
  --paper:#F4F7FE; --surface:#FFFFFF; --surface-2:#EEF2FC;
  --grid:#E1E7F7; --grid-major:#BCC9EE; --line:#D3DBF0;
  --ink:#1D2647; --ink-soft:#58628C;
  --pen:#D63A2A; --pen-soft:#FCE3DF;
  --sun:#F5A60F; --sun-soft:#FFF0C9;
  --leaf:#2A9450; --leaf-soft:#DBF2E2;
  --sky:#3563D9; --sky-soft:#E2E9FC;
  --pot:#C8693F;
  --n1:#D8EEDD; --n2:#EBDCC3; --n5:#CFDEF6; --n10:#F6D9A8; --n20:#C4E4EC; --n50:#F2CFDC;
  --sp-bg1:#060A23; --sp-bg2:#1B2163; --sp-orange:#FF6A1F; --sp-deep:#C2410C; --sp-yellow:#FFC93C; --sp-white:#FFFFFF; --sp-blue:#3F7BFF; --sp-mint:#3DDC97; --sp-teal:#1F9E6E; --sp-lilac:#B9B4FF; --sp-soft:#D5DBFF; --sp-ring:#FFD9A8; --sp-glass:rgba(255,255,255,.1); --sp-line:rgba(255,255,255,.22); --sp-field:rgba(255,255,255,.08); --sp-ok:#7CF0B5; --sp-err:#FFB4A0;
  --cb-l:#F0DCBC; --cb-d:#B5835A; --cb-last:rgba(255,205,40,.42); --cb-sel:#1E5BFF; --cb-dot:rgba(30,91,255,.5); --cb-chk:rgba(240,50,50,.55); --cb-wp:#FFFFFF; --cb-bp:#26262D; --cb-edge:#1B1B1F; --cb-bline:#8A8A96;
  --g1:#FF5B5B; --g2:#FFB020; --g3:#FFE14D; --g4:#3DDC84; --g5:#3FC5FF; --g6:#6E8BFF; --g7:#C468FF;
  --hero:#1D2647; --hero-ink:#FFFFFF; --hero-soft:#C9D3F5; --hero-grid:#2C3866; --on-accent:#FFFFFF;
  --display:"Baloo 2","Nunito",system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#11162A; --surface:#1A2140; --surface-2:#222B50;
  --grid:#232C4F; --grid-major:#34416E; --line:#2F3A63;
  --ink:#E9EDFB; --ink-soft:#A6B0D6;
  --pen:#FF6D58; --pen-soft:#45231F;
  --sun:#FFC24A; --sun-soft:#3E3317;
  --leaf:#5BCB7E; --leaf-soft:#1C3A28;
  --sky:#7C9DFF; --sky-soft:#232F5C;
  --pot:#D9825A;
  --n1:#2A4A35; --n2:#4A3C29; --n5:#2B3F66; --n10:#5A4320; --n20:#1F4652; --n50:#57293A;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#11162A; --surface:#1A2140; --surface-2:#222B50;
  --grid:#232C4F; --grid-major:#34416E; --line:#2F3A63;
  --ink:#E9EDFB; --ink-soft:#A6B0D6;
  --pen:#FF6D58; --pen-soft:#45231F;
  --sun:#FFC24A; --sun-soft:#3E3317;
  --leaf:#5BCB7E; --leaf-soft:#1C3A28;
  --sky:#7C9DFF; --sky-soft:#232F5C;
  --pot:#D9825A;
  --n1:#2A4A35; --n2:#4A3C29; --n5:#2B3F66; --n10:#5A4320; --n20:#1F4652; --n50:#57293A;
  color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 40px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0}
.wrap{max-width:1040px;margin:0 auto}

/* header */
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:18px 14px}
.brand{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.01em;margin-right:auto;position:relative}
.brand::after{content:"";position:absolute;left:0;right:6px;bottom:2px;height:3px;background:var(--pen);border-radius:2px;transform:rotate(-1.2deg)}
.brand small{font-family:var(--body);font-weight:700;font-size:13px;color:var(--ink-soft);margin-left:6px}
.starchip{display:flex;align-items:center;gap:6px;background:var(--sun-soft);border-radius:999px;padding:6px 14px;font-weight:800;font-variant-numeric:tabular-nums}
.tabs{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px}
.tabs button{border:0;background:none;padding:7px 16px;border-radius:999px;font-weight:700;color:var(--ink-soft)}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}

/* notebook sheet */
.sheet{position:relative;background-color:var(--surface);
  background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px);
  background-size:100% 32px,32px 32px,100% 8px;border:1px solid var(--line);border-radius:18px;padding:24px 22px 26px 58px;overflow:hidden}
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:40px;width:2px;background:var(--pen);opacity:.55}
@media (max-width:520px){.sheet{padding:18px 14px 22px 34px}.sheet::before{left:22px}}

/* home */
.hero{display:grid;grid-template-columns:1fr 170px;gap:16px;align-items:center}
.eyebrow{margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pen)}
.hero h1{font-size:clamp(28px,5vw,40px)}
.lede{margin:8px 0 0;font-size:18px;color:var(--ink-soft)}
.lede b{color:var(--ink)}
.tree svg{width:100%;height:auto;display:block}
.assign{margin-top:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--sky-soft);border:2px dashed var(--sky);border-radius:14px;padding:10px 14px;font-weight:700}
.assign.done{background:var(--leaf-soft);border-color:var(--leaf)}
@media (max-width:560px){.hero{grid-template-columns:1fr 110px}}

.section-title{font-family:var(--display);font-size:22px;margin:26px 0 12px}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.topic{text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:18px;padding:16px;display:flex;gap:14px;align-items:center;transition:transform .15s,border-color .15s}
.topic:hover{transform:translateY(-2px);border-color:var(--ink-soft)}
.topic .ic{flex:none;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:32px}
.topic h3{font-size:20px}
.topic p{margin:2px 0 0;font-size:14px;color:var(--ink-soft)}
.t-count .ic{background:var(--sun-soft)} .t-mult .ic{background:var(--sky-soft)} .t-clock .ic{background:var(--leaf-soft)}
.t-money .ic{background:var(--n10)} .t-spell .ic{background:var(--pen-soft)} .t-mix .ic{background:var(--surface-2)}

/* play */
.playbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ghost{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-weight:700}
.dots{display:flex;gap:6px;margin-left:auto}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--grid-major)}
.dots i.cur{background:var(--sky);transform:scale(1.25)}
.dots i.ok{background:var(--leaf)} .dots i.miss{background:var(--sun)}
.ptopic{font-weight:800;color:var(--ink-soft)}
.qhead{display:flex;gap:12px;align-items:flex-start}
.qnum{flex:none;font-family:var(--display);font-weight:800;color:var(--pen);font-size:18px;padding-top:4px}
.qtext{margin:0;font-size:clamp(20px,3.4vw,26px);font-weight:700;line-height:1.35;flex:1;min-width:0}
.speak{flex:none;border:2px solid var(--line);background:var(--surface);border-radius:50%;width:48px;height:48px;font-size:22px}
.visual{margin:20px 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.groups{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.grp{display:flex;flex-wrap:wrap;gap:4px;max-width:250px;justify-content:center;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px}
.op{font-family:var(--display);font-size:36px;color:var(--pen)}
.it{position:relative;font-size:clamp(26px,6vw,36px);line-height:1;display:inline-block;animation:pop .35s both}
.it.gone>span{opacity:.28;filter:grayscale(1)}
.it.gone::after{content:"";position:absolute;left:4%;right:4%;top:48%;height:4px;background:var(--pen);border-radius:2px;transform:rotate(-38deg)}
.eq{font-family:var(--display);font-size:clamp(28px,6vw,40px);font-weight:800;font-variant-numeric:tabular-nums;background:var(--surface);padding:0 14px;border-radius:10px}
.plates{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.plate{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-content:center;width:132px;min-height:92px;padding:10px;border-radius:50%/42%;background:var(--surface);border:3px solid var(--grid-major)}
.plate .it{font-size:26px}
.clock svg{width:min(240px,62vw);height:auto;display:block}
.shop{display:flex;align-items:center;gap:14px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px 20px}
.shop .big{font-size:64px;line-height:1}
.tag{font-family:var(--display);font-weight:800;font-size:28px;background:var(--sun-soft);border-radius:10px;padding:2px 12px;transform:rotate(-3deg)}
.pic{font-size:84px;line-height:1}
.word{font-family:var(--display);font-size:clamp(34px,8vw,52px);font-weight:700;background:var(--surface);padding:0 16px;border-radius:12px}
.blank{display:inline-block;min-width:1.4em;text-align:center;border-bottom:4px dotted var(--pen);color:var(--pen)}
.blank.filled{border-bottom-style:solid;color:var(--leaf)}

.answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.choice{min-height:64px;border:3px solid var(--line);background:var(--surface);border-radius:16px;font-family:var(--display);font-weight:700;font-size:clamp(22px,4vw,28px);padding:6px 10px;transition:transform .1s,border-color .15s}
.choice:hover:not(:disabled){border-color:var(--sky);transform:translateY(-2px)}
.choice.right{border-color:var(--leaf);background:var(--leaf-soft)}
.choice.wrong{border-color:var(--pen);background:var(--pen-soft);animation:shake .4s}
.choice:disabled{cursor:default}
.choice.wrong:disabled{opacity:.6}

.moneybox{grid-column:1/-1;display:flex;flex-direction:column;gap:12px}
.wallet{display:flex;flex-wrap:wrap;gap:10px}
.note{width:112px;height:60px;border:2px solid var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:4px 12px;position:relative;overflow:hidden}
.note span{font-family:var(--display);font-weight:800;font-size:22px;line-height:1}
.note small{font-size:12px;font-weight:700;color:var(--ink-soft)}
.note::after{content:"";position:absolute;right:8px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:2px solid var(--ink-soft);opacity:.35}
.n1000{background:var(--n1)} .n2000{background:var(--n2)} .n5000{background:var(--n5)} .n10000{background:var(--n10)}
.tray{min-height:84px;border:2px dashed var(--grid-major);border-radius:14px;background:var(--surface);padding:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tray .note{width:84px;height:46px;animation:pop .25s both}
.tray .note span{font-size:17px}
.tray .empty{color:var(--ink-soft);font-weight:600}
.payrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.payrow .sum{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;margin-right:auto}

.primary{border:0;background:var(--ink);color:var(--surface);border-radius:14px;padding:12px 20px;font-weight:800;font-size:17px}
.primary.big{font-size:20px;padding:14px 26px}

.feedback:empty{display:none}
.feedback{margin-top:16px}
.fb{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-radius:16px;padding:12px 16px;background:var(--surface);border:2px solid var(--line)}
.fb .txt{flex:1;min-width:180px}
.fb b{font-family:var(--display);font-size:22px;display:block}
.fb p{margin:2px 0 0;color:var(--ink-soft);font-weight:600}
.fb.ok{border-color:var(--leaf);background:var(--leaf-soft)}
.fb.hint{border-color:var(--sun);background:var(--sun-soft)}
.fb.reveal{border-color:var(--sky);background:var(--sky-soft)}
.stamp{flex:none;width:56px;height:56px;border-radius:50%;border:3px solid var(--pen);color:var(--pen);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:30px;transform:rotate(-12deg);animation:stamp .4s both}

/* result */
.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding-block:20px}
.result .grade{font-family:var(--display);font-weight:800;color:var(--pen);font-size:clamp(28px,6vw,40px);border:4px solid var(--pen);border-radius:14px;padding:4px 18px;transform:rotate(-4deg);animation:stamp .5s both}
.result .stars{font-size:40px;letter-spacing:4px}
.result p{margin:0;font-size:18px;color:var(--ink-soft)}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* parent */
.ph{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ph h1{font-size:clamp(26px,4vw,34px);margin-right:auto}
.sample{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--sun-soft);border-radius:12px;padding:8px 12px;font-size:14px;font-weight:700}
.sample button{border:1px solid var(--ink-soft);background:var(--surface);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:640px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.tile .lbl{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.tile .val{font-family:var(--display);font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.tile .val small{font-size:16px;color:var(--ink-soft);font-weight:700}
.meter{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--leaf);border-radius:99px}
.cols{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-top:12px}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}
.card h2{font-size:20px;margin-bottom:10px}
.chart svg{width:100%;height:auto;display:block}
.skill{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.skill:last-child{border-bottom:0}
.skill .nm{font-weight:700}
.bar{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px}
.pct{font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;min-width:40px;text-align:right}
.chip{display:inline-block;font-size:12px;font-weight:800;border-radius:999px;padding:2px 9px}
.c-good{background:var(--leaf-soft);color:var(--leaf)} .c-mid{background:var(--sun-soft);color:var(--ink)} .c-bad{background:var(--pen-soft);color:var(--pen)} .c-na{background:var(--surface-2);color:var(--ink-soft)}
.skill .meta{display:flex;gap:8px;align-items:center}
@media (max-width:420px){.skill{grid-template-columns:90px 1fr auto}.skill .chip{display:none}}
.alert{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-left:5px solid var(--pen)}
.alert .txt{flex:1;min-width:200px}
.alert p{margin:2px 0 0;color:var(--ink-soft)}
.mist{list-style:none;margin:0;padding:0}
.mist li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
.mist li:last-child{border-bottom:0}
.mist .tp{grid-row:span 2;align-self:start}
.mist .q{font-weight:700;min-width:0}
.mist .a{font-size:14px;color:var(--ink-soft)}
.mist .a s{color:var(--pen)} .mist .a b{color:var(--leaf)}
.form{display:grid;gap:12px}
.form label{font-weight:700;font-size:14px;display:grid;gap:4px}
.form select{font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.form .row{justify-content:flex-start}
.muted{color:var(--ink-soft);font-size:14px;margin:0}

/* gate */
.modal{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);display:grid;place-items:center;padding:20px;z-index:20}
.mbox{background:var(--surface);border-radius:18px;padding:22px;max-width:360px;width:100%;display:grid;gap:12px}
.mbox input{font:inherit;font-size:22px;padding:8px 12px;border-radius:10px;border:2px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
.mbox .err{color:var(--pen);font-weight:700;margin:0}
.mbox .row{justify-content:flex-end}

.n20000{background:var(--n20)} .n50000{background:var(--n50)}
.t-compare .ic{background:var(--n5)} .t-measure .ic{background:var(--n1)} .t-sentence .ic{background:var(--n2)}
.topic .tx{min-width:0}
.lv{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:800;color:var(--ink-soft);letter-spacing:.05em;text-transform:uppercase}
.pips{display:inline-flex;gap:3px}.pips i{width:16px;height:6px;border-radius:3px;background:var(--grid-major)}.pips i.on{background:var(--leaf)}
.review{margin-top:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface);border:2px solid var(--sun);border-radius:18px;padding:14px 16px}
.review .ic{width:52px;height:52px;border-radius:14px;background:var(--sun-soft);display:grid;place-items:center;font-size:28px;flex:none}
.review .txt{flex:1;min-width:180px}.review h3{font-size:20px}.review p{margin:2px 0 0;color:var(--ink-soft);font-weight:600}
.review-tag{display:inline-block;font-family:var(--body);font-size:12px;font-weight:800;background:var(--sun-soft);border-radius:999px;padding:2px 10px;margin-left:8px;vertical-align:middle}
.rods{display:flex;gap:4px;align-items:flex-end;flex-wrap:wrap;justify-content:center}
.rod{display:block;width:12px;height:80px;border-radius:4px;background:repeating-linear-gradient(var(--sky) 0 7px,var(--sky-soft) 7px 8px)}
.units{display:grid;grid-template-columns:repeat(3,14px);gap:3px;margin-left:4px}
.unit{display:block;width:14px;height:14px;border-radius:3px;background:var(--sun)}
.plate.empty{font-family:var(--display);font-size:28px;font-weight:800;color:var(--ink-soft);min-height:70px;width:100px}
.cmpbox{display:inline-grid;place-items:center;width:58px;height:58px;border:3px dashed var(--pen);border-radius:12px;font-family:var(--display);font-weight:800;font-size:32px;color:var(--pen);background:var(--surface)}
.cmpbox.sm{width:1.3em;height:1.3em;font-size:1em;vertical-align:middle;line-height:1}
.cmpbox.filled{border-style:solid;border-color:var(--leaf);color:var(--leaf)}
.ruler{width:100%;max-width:560px}.ruler svg{width:100%;height:auto;display:block}
.visual:empty{display:none}
.orderbox{grid-column:1/-1;display:flex;flex-direction:column;gap:12px}
.built{min-height:72px;background:var(--surface);border-bottom:3px solid var(--ink-soft);border-radius:12px 12px 0 0;padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.built.right{border-bottom-color:var(--leaf);background:var(--leaf-soft)}
.built .empty{color:var(--ink-soft);font-weight:600}
.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:56px}
.tile{border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);border-radius:12px;padding:8px 14px;font-family:var(--display);font-weight:700;font-size:22px;animation:pop .2s both}
.tile:hover:not(:disabled){border-color:var(--sky)}
.tile:disabled{cursor:default}
.levelup{display:flex;flex-direction:column;gap:6px;align-items:center}.levelup span{background:var(--leaf-soft);color:var(--ink);border-radius:999px;padding:6px 16px;font-weight:800}
.who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.who .eyebrow{margin:0;flex:1;min-width:140px}
.avatar{flex:none;width:52px;height:52px;border-radius:50%;background:var(--sun-soft);display:grid;place-items:center;font-size:30px;box-shadow:0 0 0 2px var(--line)}
.ghost.sm{padding:4px 12px;font-size:13px}
.fl{display:grid;gap:6px;font-weight:700}
.gender{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gopt{border:2px solid var(--line);background:var(--paper);border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:800}
.gopt span{font-size:34px;line-height:1.2}
.gopt[aria-pressed="true"]{border-color:var(--sky);background:var(--sky-soft)}
/* ===== Boy theme: navy + safety orange, heavy italic type, comic-print offset shadows ===== */
body[data-kid="boy"]{ --paper:#E4EBFA; --surface:#FFFFFF; --surface-2:#E1E8F8; --grid:#D9E2F6; --grid-major:#A9BBE8; --line:#9DAED8;
  --ink:#0B1633; --ink-soft:#43507A; --pen:#FF5B1A; --pen-soft:#FFE2D4; --sun:#FFC107; --sun-soft:#FFF0BF;
  --leaf:#0E9F62; --leaf-soft:#D2F4E5; --sky:#1E5BFF; --sky-soft:#DCE5FF; --pot:#FF5B1A;
  --hero:#0B1633; --hero-ink:#FFFFFF; --hero-soft:#AFBCE6; --hero-grid:#1C2A57; --display:"Be Vietnam Pro","Baloo 2",system-ui,sans-serif }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body[data-kid="boy"]{ --paper:#060B1C; --surface:#0F1934; --surface-2:#172347; --grid:#16224A; --grid-major:#283A70; --line:#34477F;
  --ink:#EEF2FF; --ink-soft:#A9B5DE; --pen:#FF7A3D; --pen-soft:#45200F; --sun:#FFCC33; --sun-soft:#3B300E;
  --leaf:#2FD38A; --leaf-soft:#0F3A28; --sky:#5B8CFF; --sky-soft:#162858; --pot:#FF7A3D;
  --hero:#13235A; --hero-ink:#FFFFFF; --hero-soft:#AFBCE6; --hero-grid:#22357A; color-scheme:dark; }}
:root[data-theme="dark"] body[data-kid="boy"]{ --paper:#060B1C; --surface:#0F1934; --surface-2:#172347; --grid:#16224A; --grid-major:#283A70; --line:#34477F;
  --ink:#EEF2FF; --ink-soft:#A9B5DE; --pen:#FF7A3D; --pen-soft:#45200F; --sun:#FFCC33; --sun-soft:#3B300E;
  --leaf:#2FD38A; --leaf-soft:#0F3A28; --sky:#5B8CFF; --sky-soft:#162858; --pot:#FF7A3D;
  --hero:#13235A; --hero-ink:#FFFFFF; --hero-soft:#AFBCE6; --hero-grid:#22357A; color-scheme:dark; }
[data-kid="boy"] h1,[data-kid="boy"] h2,[data-kid="boy"] h3,[data-kid="boy"] .brand{font-weight:900;letter-spacing:-.02em}
[data-kid="boy"] .brand{font-style:italic;text-transform:uppercase;font-size:24px}
[data-kid="boy"] .brand::after{height:5px;background:var(--pen);transform:skewX(-20deg)}
[data-kid="boy"] .section-title{text-transform:uppercase;font-style:italic;font-size:24px;display:flex;align-items:center;gap:10px}
[data-kid="boy"] .section-title::before{content:"";width:22px;height:10px;background:var(--pen);transform:skewX(-20deg)}
[data-kid="boy"] .sheet{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:14px}
[data-kid="boy"] .home-hero{background-color:var(--hero);background-image:linear-gradient(var(--hero-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px);background-size:28px 28px;color:var(--hero-ink);box-shadow:6px 6px 0 var(--pen)}
[data-kid="boy"] .home-hero::before{background:var(--pen);opacity:1;width:4px}
[data-kid="boy"] .home-hero h1{font-style:italic;font-size:clamp(28px,5vw,42px)}
[data-kid="boy"] .home-hero .lede{color:var(--hero-soft)} [data-kid="boy"] .home-hero .lede b{color:var(--sun)}
[data-kid="boy"] .home-hero .eyebrow{color:var(--sun)}
[data-kid="boy"] .home-hero .assign{color:var(--ink)}
[data-kid="boy"] .avatar{border-radius:10px;background:var(--sun);box-shadow:3px 3px 0 var(--pen);transform:rotate(-4deg)}
[data-kid="boy"] .topic,[data-kid="boy"] .review{border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink)}
[data-kid="boy"] .topic:hover{transform:translate(-2px,-2px);border-color:var(--ink);box-shadow:6px 6px 0 var(--sky)}
[data-kid="boy"] .topic:active,[data-kid="boy"] .choice:active:not(:disabled),[data-kid="boy"] .primary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
[data-kid="boy"] .topic .ic{border:2px solid var(--ink);border-radius:10px;transform:rotate(-5deg)}
[data-kid="boy"] .topic h3{font-size:19px}
[data-kid="boy"] .pips i{width:18px;height:8px;border-radius:1px;transform:skewX(-20deg)} [data-kid="boy"] .pips i.on{background:var(--pen)}
[data-kid="boy"] .primary{background:var(--pen);color:var(--on-accent);border:3px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);font-weight:900;text-transform:uppercase;letter-spacing:.03em;font-family:var(--display);font-style:italic}
[data-kid="boy"] .ghost{border:2px solid var(--ink);font-weight:800}
[data-kid="boy"] .starchip{background:var(--sun);color:#0B1633;border:2px solid var(--ink);border-radius:8px;transform:skewX(-8deg)}
[data-kid="boy"] .tabs{border:2px solid var(--ink);border-radius:10px} [data-kid="boy"] .tabs button{border-radius:7px}
[data-kid="boy"] .choice{border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);font-family:var(--display);font-weight:900}
[data-kid="boy"] .choice:hover:not(:disabled){border-color:var(--sky);box-shadow:5px 5px 0 var(--sky)}
[data-kid="boy"] .choice.right{border-color:var(--leaf);box-shadow:4px 4px 0 var(--leaf)}
[data-kid="boy"] .choice.wrong{border-color:var(--pen);box-shadow:4px 4px 0 var(--pen)}
[data-kid="boy"] .tile{border:3px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);font-family:var(--display);font-weight:800}
[data-kid="boy"] .wallet .note{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
[data-kid="boy"] .fb{border-width:3px;border-radius:12px}
[data-kid="boy"] .qnum{font-style:italic;font-weight:900;background:var(--pen);color:var(--on-accent);padding:2px 10px;border-radius:6px;transform:skewX(-8deg)}
[data-kid="boy"] .dots i{border-radius:2px;transform:skewX(-15deg)} [data-kid="boy"] .dots i.cur{background:var(--pen);transform:skewX(-15deg) scale(1.25)}
[data-kid="boy"] .result .grade{border-radius:6px;font-style:italic}
/* ===== categories with Cơ bản / Nâng cao ===== */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.cat{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.cat-h{display:flex;align-items:center;gap:10px}
.cat-h .ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:var(--surface-2)}
.cat-h h3{font-size:21px}
.mode{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:2px solid var(--line);background:var(--paper);border-radius:12px;padding:9px 12px;transition:transform .12s,border-color .12s}
.mode:hover{border-color:var(--sky);transform:translateY(-1px)}
.mode .mt{display:flex;align-items:center;gap:10px;width:100%}
.mode .mt b{font-family:var(--display);font-size:17px;margin-right:auto}
.mode .md{font-size:13px;color:var(--ink-soft);font-weight:600;line-height:1.35}
.mode .lv{margin-top:0}
.mode.adv{background:var(--sky-soft)}
.mode.adv .mt b::after{content:" ★";color:var(--sun)}
.ask{margin:4px 0 0;font-weight:800;color:var(--ink-soft);align-self:flex-start}
.answers.long{grid-template-columns:1fr}
.answers.long .choice{font-family:var(--body);font-size:clamp(17px,2.6vw,20px);text-align:left;padding:12px 16px;min-height:54px}
.note.static{cursor:default;width:112px;height:60px}
.tape{width:100%;max-width:520px;display:grid;gap:10px}
.tr{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px}
.tl{font-weight:800;text-align:right;font-size:15px}
.tb{display:flex;align-items:center;min-width:0}
.ts{height:30px;border:3px solid var(--sky);border-right-width:0;background:var(--sky-soft);display:grid;place-items:center;font-weight:800;font-size:14px;min-width:24px}
.ts:last-of-type{border-right-width:3px}
.ts.d{border-style:dashed;background:var(--surface)}
.tq{margin-left:8px;font-family:var(--display);font-weight:800;font-size:22px;color:var(--pen)}
.cal{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:10px;width:100%;max-width:340px}
.cal-h{font-family:var(--display);font-weight:800;text-align:center;font-size:18px;color:var(--pen)}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-variant-numeric:tabular-nums}
.cal-g b{font-size:12px;color:var(--ink-soft);padding:2px 0}
.cal-g span{padding:4px 0;border-radius:6px;font-weight:700;font-size:14px}
.cal-g span.mk{background:var(--sun);color:#1D2647;font-weight:900}
.scale{width:300px;max-width:100%;display:flex;flex-direction:column;align-items:center}
.pans{display:flex;justify-content:space-between;width:100%;gap:10px}
.pan{flex:1;min-height:76px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:4px;border-bottom:6px solid var(--ink-soft);border-radius:0 0 40px 40px;padding:4px}
.pan .big{font-size:52px;line-height:1}
.kg{background:var(--surface);border:2px solid var(--ink);border-radius:6px 6px 2px 2px;padding:2px 7px;font-weight:900;font-size:14px}
.beam{width:92%;height:6px;background:var(--ink);border-radius:3px}
.stand{width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-bottom:34px solid var(--ink-soft)}
.jugs{display:flex;gap:14px;align-items:flex-end}
.jug{width:58px;border:3px solid var(--ink-soft);border-top-width:0;border-radius:4px 4px 12px 12px;background:linear-gradient(transparent 18%,var(--sky-soft) 18%);display:grid;place-items:center;position:relative}
.jug::before{content:"";position:absolute;top:-10px;left:14px;width:24px;height:10px;border:3px solid var(--ink-soft);border-bottom:0;border-radius:6px 6px 0 0}
.jug span{font-weight:900;font-size:16px}
.hund{display:block;width:44px;height:44px;border-radius:3px;background:var(--sky-soft);border:2px solid var(--sky);background-image:linear-gradient(var(--sky) 1px,transparent 1px),linear-gradient(90deg,var(--sky) 1px,transparent 1px);background-size:4.2px 4.2px}
.seq{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.sq{font-size:clamp(28px,6vw,40px);line-height:1}
.sq.num{font-family:var(--display);font-weight:800;background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:2px 12px;font-size:clamp(22px,4.5vw,30px);font-variant-numeric:tabular-nums}
.seq .cmpbox{width:52px;height:52px;font-size:28px}
.puzzle{display:grid;gap:6px;font-family:var(--display);font-weight:800;font-size:clamp(24px,5vw,32px);background:var(--surface);padding:10px 20px;border-radius:12px}
.pchart{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:12px;width:100%;max-width:480px;display:grid;gap:6px}
.pc-t{font-weight:800;text-align:center;margin-bottom:4px}
.pc-r{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:8px;border-bottom:1px dashed var(--line);padding-bottom:4px}
.pc-l{font-weight:800}
.pc-i{font-size:22px;letter-spacing:2px;overflow-wrap:anywhere}
.pc-k{font-size:13px;color:var(--ink-soft);font-weight:700;text-align:right}
.bag{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:200px;padding:14px;border:3px solid var(--ink-soft);border-top-style:dashed;border-radius:6px 6px 24px 24px;background:var(--surface);font-size:30px}
.say{font-family:var(--display);font-size:clamp(22px,4.5vw,30px);font-weight:700;background:var(--surface);padding:6px 16px;border-radius:12px;text-align:center}
.passage{background:var(--surface);border:2px solid var(--line);border-left:6px solid var(--sun);border-radius:12px;padding:14px 18px;max-width:640px;width:100%}
.passage h4{margin:0 0 6px;font-family:var(--display);font-size:20px;text-align:center}
.passage p{margin:0;font-size:18px;line-height:1.7;text-indent:1.5em}
.orderbox.vert .built,.orderbox.vert .pool{flex-direction:column;align-items:stretch}
.orderbox.vert .tile{font-family:var(--body);font-weight:700;font-size:17px;text-align:left;display:flex;gap:10px;align-items:center}
.tile em{font-style:normal;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-size:13px}
.skill .nm small{display:block;font-size:12px;color:var(--ink-soft);font-weight:700}
[data-kid="boy"] .cat{border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink)}
[data-kid="boy"] .cat-h h3{font-style:italic}
[data-kid="boy"] .cat-h .ic{border:2px solid var(--ink);border-radius:10px;transform:rotate(-5deg);background:var(--sun-soft)}
[data-kid="boy"] .mode{border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink)}
[data-kid="boy"] .mode:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--sky);border-color:var(--ink)}
[data-kid="boy"] .mode:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
[data-kid="boy"] .mode.adv{background:var(--hero);color:var(--hero-ink)}
[data-kid="boy"] .mode.adv .md{color:var(--hero-soft)}
[data-kid="boy"] .mode.adv .lv{color:var(--hero-soft)}
[data-kid="boy"] .mode .mt b{font-style:italic;font-weight:900;text-transform:uppercase;font-size:15px;letter-spacing:.03em}
[data-kid="boy"] .answers.long .choice{font-family:var(--body);font-weight:800}
/* ===== rewards, games, study clock ===== */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.starchip.tk{background:var(--sky-soft)}
.starchip.clk{background:var(--surface);border:1px solid var(--line);min-width:84px;justify-content:center}
.starchip.clk.paused{opacity:.6}
.starchip.clk.goal{background:var(--leaf-soft);border-color:var(--leaf)}
.playground{margin-top:14px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px 16px;display:grid;gap:12px}
.pg-h{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pg-h .ic{width:52px;height:52px;border-radius:14px;background:var(--sky-soft);display:grid;place-items:center;font-size:28px;flex:none}
.pg-h .txt{flex:1;min-width:180px}.pg-h h3{font-size:21px}.pg-h p{margin:2px 0 0;color:var(--ink-soft);font-weight:600}
.ticket{font-family:var(--display);font-weight:800;font-size:22px;background:var(--sun-soft);border-radius:10px;padding:4px 12px;font-variant-numeric:tabular-nums}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media (max-width:480px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:12px 8px;border:2px solid var(--line);background:var(--paper);border-radius:14px;transition:transform .12s}
.gcard:hover{transform:translateY(-2px)}
.gcard .gi{font-size:36px;line-height:1.15}.gcard b{font-family:var(--display);font-size:18px}.gcard small{color:var(--ink-soft);font-weight:700;font-size:12px}
.gcard.locked{opacity:.55}.gcard .lock{position:absolute;top:6px;right:8px;font-size:15px}
.pg-msg{margin:0;font-weight:700;color:var(--pen)}
.reward{display:flex;gap:12px;align-items:center;flex-wrap:wrap;text-align:left;background:var(--surface-2);border-radius:14px;padding:12px 16px;max-width:560px;width:100%}
.reward.got{background:var(--sun-soft);border:2px solid var(--sun)}
.rbig{font-size:40px;line-height:1}.reward .txt{flex:1;min-width:180px}.reward b{font-family:var(--display);font-size:20px}
.result .reward p{margin:2px 0 0;color:var(--ink-soft);font-size:15px}
.gclock{margin-left:auto;font-family:var(--display);font-weight:800;font-size:20px;background:var(--sun-soft);border-radius:10px;padding:2px 12px;font-variant-numeric:tabular-nums}
.gclock.low{background:var(--pen-soft);color:var(--pen)}
.sheet.game{padding:16px}.sheet.game::before{display:none}
.gwrap{position:relative;min-height:320px}
#gover{position:absolute;inset:-8px;display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 72%,transparent);z-index:3;border-radius:12px;padding:12px}
.gbox{background:var(--surface);border:3px solid var(--ink);border-radius:16px;padding:18px 20px;max-width:360px;text-align:center;display:grid;gap:10px}
.gbox b{font-family:var(--display);font-size:22px;line-height:1.25}.gbox p{margin:0;color:var(--ink-soft);font-weight:600}
.tet{display:flex;gap:12px;justify-content:center;align-items:flex-start}
.tcv{border-radius:8px;border:3px solid var(--ink);display:block;touch-action:none;max-width:100%;background:var(--hero)}
.tet-side{display:grid;gap:8px;width:92px;flex:none}
.tbox{background:var(--surface-2);border-radius:10px;padding:6px 8px;display:grid;justify-items:center;gap:2px}
.tbox span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.tbox b{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.tbox canvas{border-radius:6px;display:block}
.pad{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.pad button{width:54px;height:58px;border-radius:14px;border:3px solid var(--ink);background:var(--surface);font-size:26px;font-weight:900;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.pad button:active{background:var(--sky-soft);transform:translateY(2px)}
.center{text-align:center;margin-top:8px}
@media (hover:none){.kbhint{display:none}}
.caro-info,.mem-info{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;max-width:440px;margin:0 auto 10px;font-weight:800}
.caro-info #cmsg{font-weight:700;color:var(--ink-soft);text-align:center;flex:1;min-width:150px}
.you{color:var(--pen)}.cpu{color:var(--sky)}
.caro{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;max-width:440px;margin:0 auto;background:var(--grid-major);padding:3px;border-radius:10px}
.cc{aspect-ratio:1;border:0;background:var(--surface);border-radius:4px;font-family:var(--display);font-weight:900;font-size:clamp(18px,5vw,30px);line-height:1;padding:0;display:grid;place-items:center;min-width:0}
.cc.x{color:var(--pen)}.cc.o{color:var(--sky)}.cc.last{box-shadow:inset 0 0 0 2px var(--sun)}.cc.win{background:var(--sun-soft);animation:pop .3s both}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:400px;margin:0 auto}
.mc{aspect-ratio:1;position:relative;border:3px solid var(--ink);border-radius:12px;padding:0;background:var(--surface);overflow:hidden;min-width:0}
.mc .back{position:absolute;inset:0;background-color:var(--sky);background-image:radial-gradient(var(--sky-soft) 18%,transparent 19%);background-size:16px 16px}
.mc .face{display:none;place-items:center;height:100%;font-size:clamp(28px,8vw,44px)}
.mc.up .back{display:none}.mc.up .face{display:grid;animation:pop .25s both}
.mc.done{border-color:var(--leaf);background:var(--leaf-soft)}
.legend{display:flex;gap:14px;font-size:13px;font-weight:700;color:var(--ink-soft);margin:-4px 0 6px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.tile .sub{font-size:13px;color:var(--ink-soft);font-weight:700;margin-top:6px}
.tblwrap{overflow-x:auto}
table.log{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.log th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:6px 8px;border-bottom:2px solid var(--line)}
.log td{padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
[data-kid="boy"] .home-hero .ghost{color:var(--ink)}
[data-kid="boy"] .playground{border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--pen)}
[data-kid="boy"] .playground h3{font-style:italic;text-transform:uppercase}
[data-kid="boy"] .gcard{border:3px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink)}
[data-kid="boy"] .gcard b{font-style:italic;font-weight:900}
[data-kid="boy"] .ticket{background:var(--sun);color:#0B1633;border:2px solid var(--ink);transform:skewX(-8deg)}
[data-kid="boy"] .starchip.tk{background:var(--sky);color:#FFFFFF}
[data-kid="boy"] .starchip.clk{border:2px solid var(--ink);color:var(--ink)}
[data-kid="boy"] .gclock{border:2px solid var(--ink);transform:skewX(-8deg)}
/* ===== clearer home: missions, subject tabs, status ===== */
.home-hero .hero{grid-template-columns:1fr 130px}
.home-hero .hero h1{font-size:clamp(24px,4.4vw,34px)}
@media (max-width:560px){.home-hero .hero{grid-template-columns:1fr 92px}}
.today{margin-top:14px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px 16px;display:grid;gap:10px}
.today-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.today-h h2{font-size:22px;margin-right:auto}
.mcount{font-weight:800;background:var(--surface-2);border-radius:999px;padding:3px 12px;font-variant-numeric:tabular-nums}
.mcount.all{background:var(--leaf-soft);color:var(--leaf)}
.missions{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ms{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--paper);border:2px solid var(--line)}
.ms .ck{flex:none;width:30px;height:30px;border-radius:50%;border:3px solid var(--grid-major);display:grid;place-items:center;font-weight:900;color:var(--surface)}
.ms.done{background:var(--leaf-soft);border-color:var(--leaf)}
.ms.done .ck{background:var(--leaf);border-color:var(--leaf)}
.ms .mtx{flex:1;min-width:0;display:grid}
.ms .mtx small{font-size:12px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.ms .mtx b{font-family:var(--display);font-size:18px;line-height:1.2}
.ms.done .mtx b{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--leaf)}
.okt{font-weight:800;color:var(--leaf)}
.primary.sm{padding:8px 16px;font-size:15px}
.tline{display:grid;gap:6px;font-weight:700;color:var(--ink-soft)}
.tline b{color:var(--ink);font-variant-numeric:tabular-nums}
.tbar{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--leaf);border-radius:99px;transition:width .4s}
.mfoot{margin:0;font-size:14px;font-weight:700;color:var(--ink-soft)}
.subtabs{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.subtabs button{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 8px;display:grid;justify-items:center;gap:2px;text-align:center}
.subtabs button span{font-family:var(--display);font-weight:800;font-size:18px}
.subtabs button small{font-size:12px;font-weight:700;color:var(--ink-soft)}
.subtabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink)}
.subtabs button[aria-selected="true"] span,.subtabs button[aria-selected="true"] small{color:var(--surface)}
.tabpane{margin-top:12px}
.tabsum{display:grid;gap:6px;margin-bottom:12px;font-weight:700;color:var(--ink-soft)}
.tabsum b{color:var(--ink)}
.key{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}
.key span{display:inline-flex;align-items:center;gap:6px}
.key i{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font-style:normal;font-size:11px;font-weight:900}
.k-done{background:var(--leaf);color:var(--surface)}
.k-new{border:2px dashed var(--grid-major)}
.cat{position:relative}
.cat.today{border-color:var(--leaf)}
.badge-ok{margin-left:auto;font-size:12px;font-weight:800;background:var(--leaf);color:var(--surface);border-radius:999px;padding:3px 10px;white-space:nowrap}
.mode .mt{gap:8px}
.mck{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--grid-major);display:grid;place-items:center;font-size:12px;font-weight:900;color:var(--surface)}
.mode.done{border-color:var(--leaf)!important}
.mode.done .mck{background:var(--leaf);border-color:var(--leaf)}
.st{margin-top:4px;font-size:12px;font-weight:800;color:var(--ink-soft);background:var(--surface);border-radius:999px;padding:2px 9px}
.st-done{background:var(--leaf-soft);color:var(--leaf)}
.st-new{background:transparent;border:2px dashed var(--grid-major);color:var(--ink-soft)}
.mode.adv .st{background:var(--surface)}
.mode.adv .st-done{background:var(--leaf-soft)}
.mode.adv .st-new{background:transparent}
/* parent */
.psec{font-family:var(--display);font-size:20px;margin:26px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.form input{font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
table.prog{width:100%;border-collapse:collapse;font-size:14px}
.prog th,.prog td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prog thead th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.prog tbody th{font-weight:800;white-space:nowrap}
.prog tr.pgrp th{background:var(--surface-2);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:5px 8px}
.prog td small{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
.pc{display:inline-block;border-radius:8px;padding:2px 8px;font-size:13px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.pc-good{background:var(--leaf-soft);color:var(--leaf)}.pc-mid{background:var(--sun-soft);color:var(--ink)}.pc-bad{background:var(--pen-soft);color:var(--pen)}
.pc-few{background:var(--surface-2);color:var(--ink)}.pc-none{border:2px dashed var(--grid-major);color:var(--ink-soft)}
.pkey{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.danger{margin-top:8px;padding-top:12px;border-top:2px dashed var(--line);display:grid;gap:10px}
.dz{display:grid;gap:4px}.dz small{color:var(--ink-soft);font-size:13px}
.dbtn{justify-self:start;border-color:var(--pen)!important;color:var(--pen)}
.confirm{background:var(--pen-soft);border:2px solid var(--pen);border-radius:12px;padding:12px;display:grid;gap:8px}
.confirm p{margin:0;font-size:14px}.confirm .row{justify-content:flex-start}
.dsolid{border:0;background:var(--pen);color:#FFFFFF;border-radius:12px;padding:10px 18px;font-weight:800}
.okmsg{background:var(--leaf-soft)}
[data-kid="boy"] .today{border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink)}
[data-kid="boy"] .today-h h2{font-style:italic;text-transform:uppercase}
[data-kid="boy"] .ms{border-radius:8px}
[data-kid="boy"] .ms .ck{border-radius:6px;transform:rotate(-4deg)}
[data-kid="boy"] .subtabs button{border:3px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink)}
[data-kid="boy"] .subtabs button span{font-style:italic;font-weight:900;text-transform:uppercase;font-size:16px}
[data-kid="boy"] .subtabs button[aria-selected="true"]{background:var(--pen);box-shadow:3px 3px 0 var(--ink)}
[data-kid="boy"] .subtabs button[aria-selected="true"] span,[data-kid="boy"] .subtabs button[aria-selected="true"] small{color:#FFFFFF}
[data-kid="boy"] .cat.today{border-color:var(--leaf);box-shadow:5px 5px 0 var(--leaf)}
[data-kid="boy"] .mode.adv .st{background:var(--surface);color:var(--ink-soft)}
[data-kid="boy"] .mode.adv .st-done{background:var(--leaf-soft);color:var(--leaf)}
[data-kid="boy"] .mode.adv .st-new{background:transparent;color:var(--hero-soft);border-color:var(--hero-soft)}
.vmsg{margin:10px 0 0;background:var(--sun-soft);border-radius:10px;padding:8px 12px;font-weight:700;font-size:14px}
.vwarn{margin:0;background:var(--sun-soft);border-radius:10px;padding:10px 12px;font-weight:700}
.vguide{font-size:14px}.vguide summary{cursor:pointer;font-weight:800;color:var(--sky)}
.vguide ul{margin:8px 0;padding-left:18px;display:grid;gap:6px}.vguide p{margin:0}
.form .chk{display:flex;align-items:center;gap:8px;font-weight:700}
.form .chk input{width:20px;height:20px;accent-color:var(--leaf)}
/* ===== geometry & english visuals ===== */
.answers.pics{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice.pic{min-height:116px;min-width:0;display:grid;place-items:center;gap:2px;padding:8px}
.choice.pic .gsv{width:84px;height:84px}
.choice.pic small{font-family:var(--body);font-size:14px;font-weight:700;color:var(--ink-soft)}
.pe{font-size:52px;line-height:1.1}
.pe.row{font-size:30px;letter-spacing:2px}
.bigshape{display:grid;justify-items:center;gap:4px}
.bigshape .gsv{width:150px;height:150px}
.bigshape small{font-weight:800;color:var(--ink-soft)}
.scene{width:100%;max-width:440px;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:8px}
.scene svg{width:100%;height:auto;display:block}
.bigpic{font-size:clamp(84px,18vw,120px);line-height:1.1}
.bigpic.sm{font-size:clamp(60px,12vw,80px)}
.word.en{letter-spacing:.06em}
.eq.en{font-size:clamp(22px,4.5vw,32px)}
.listen{display:inline-flex;align-items:center;gap:10px;border:3px solid var(--ink);background:var(--sky);color:#FFFFFF;border-radius:999px;padding:12px 26px;font-size:30px;font-weight:900;box-shadow:4px 4px 0 var(--ink)}
.listen span{font-family:var(--display);font-size:22px}
.listen:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.lw{font-family:var(--display);font-size:30px;font-weight:800;background:var(--surface);border-radius:10px;padding:2px 14px}
.subtabs{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.subtabs{grid-template-columns:repeat(2,1fr)}}
/* ===== splash ===== */
body.splashing{overflow:hidden}
#splash,.sp-screen{position:fixed;inset:0;z-index:60;overflow:auto;color:var(--sp-white);background:radial-gradient(120% 90% at 75% 5%,var(--sp-bg2),var(--sp-bg1) 62%);display:grid;place-items:center;
  padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:max(20px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));transition:opacity .45s ease .45s}
.sp-stars{position:absolute;inset:0;pointer-events:none}
.sp-stars span{position:absolute;border-radius:50%;background:var(--sp-white);animation:sptw 2.6s ease-in-out infinite}
@keyframes sptw{0%,100%{opacity:.2}50%{opacity:1}}
.sp-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:center;max-width:1000px;width:100%}
.sp-art svg{width:100%;height:auto;display:block;overflow:visible}
.sp-rocket{animation:spfloat 3.2s ease-in-out infinite}
@keyframes spfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.sp-flame{transform-box:fill-box;transform-origin:50% 0;animation:spflick .16s ease-in-out infinite alternate}
@keyframes spflick{from{transform:scaleY(.82)}to{transform:scaleY(1.12)}}
.sp-twk{transform-box:fill-box;transform-origin:center;animation:sptwk 2.2s ease-in-out infinite}
@keyframes sptwk{0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1);opacity:1}}
.sp-orbit{transform-box:fill-box;transform-origin:center;animation:sporb 9s ease-in-out infinite}
@keyframes sporb{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.sp-shoot{animation:spshoot 4s ease-in infinite;opacity:0}
@keyframes spshoot{0%,70%{opacity:0;transform:translate(0,0)}75%{opacity:1}100%{opacity:0;transform:translate(-160px,60px)}}
.sp-eyebrow{margin:0;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-yellow);font-size:14px}
.sp-title{font-family:"Be Vietnam Pro","Baloo 2",system-ui,sans-serif;font-weight:900;font-style:italic;font-size:clamp(42px,8vw,80px);line-height:1;letter-spacing:-.025em;margin:10px 0 14px;text-wrap:balance;color:var(--sp-white)}
.sp-title::after{content:"";display:block;width:120px;height:8px;margin-top:14px;background:var(--sp-orange);transform:skewX(-20deg)}
.sp-sub{margin:0 0 20px;font-size:clamp(16px,2.3vw,20px);line-height:1.5;color:var(--sp-soft);max-width:30em}
.sp-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.sp-chip{background:var(--sp-glass);border:1px solid var(--sp-line);border-radius:999px;padding:7px 14px;font-weight:700;font-size:15px}
.sp-chip b{color:var(--sp-yellow);font-variant-numeric:tabular-nums}
.sp-go{font-family:"Be Vietnam Pro","Baloo 2",system-ui,sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(19px,2.6vw,24px);color:var(--sp-white);background:var(--sp-orange);border:3px solid var(--sp-white);border-radius:14px;padding:16px 30px;box-shadow:6px 6px 0 var(--sp-yellow);cursor:pointer;transition:transform .12s,box-shadow .12s}
.sp-go:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--sp-yellow)}
.sp-go:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--sp-yellow)}
.sp-go:focus-visible{outline:3px solid var(--sp-yellow);outline-offset:4px}
#splash.launch{opacity:0;pointer-events:none}
#splash.launch .sp-rocket{animation:splaunch .9s cubic-bezier(.55,0,.8,.2) forwards}
@keyframes splaunch{to{transform:translateY(-900px)}}
#splash.launch .sp-text{opacity:0;transition:opacity .3s}
@media (max-width:720px){.sp-inner{grid-template-columns:1fr;text-align:center;gap:8px}.sp-art{max-width:300px;width:78%;margin:0 auto}.sp-title::after{margin-left:auto;margin-right:auto}.sp-stats{justify-content:center}.sp-sub{margin-left:auto;margin-right:auto}}
/* ===== more games ===== */
.arc-info{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-weight:800;margin-bottom:8px;font-variant-numeric:tabular-nums}
canvas.arc{display:block;margin:0 auto;border-radius:10px;border:3px solid var(--ink);background:var(--hero);touch-action:none;max-width:100%}
canvas.arc.tall{width:100%;max-width:360px;aspect-ratio:3/4;height:auto}
.pad.cross{display:grid;grid-template-columns:repeat(3,58px);grid-template-areas:". u ." "l d r";gap:6px;justify-content:center}
.pad.cross .k-U{grid-area:u}.pad.cross .k-L{grid-area:l}.pad.cross .k-D{grid-area:d}.pad.cross .k-R{grid-area:r}
.g48{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--hero);padding:8px;border-radius:12px;max-width:360px;margin:0 auto;touch-action:none;border:3px solid var(--ink)}
.t48{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:clamp(20px,6vw,30px);background:var(--hero-grid);color:var(--ink);font-variant-numeric:tabular-nums;min-width:0}
.t48.v2{background:var(--sky-soft)}.t48.v4{background:var(--sun-soft)}.t48.v8{background:var(--g2);color:#1D2647}.t48.v16{background:var(--g1);color:#FFFFFF}.t48.v32{background:var(--pen);color:#FFFFFF}
.t48.v64{background:var(--g7);color:#FFFFFF}.t48.v128{background:var(--g6);color:#FFFFFF;font-size:clamp(17px,5vw,26px)}.t48.v256{background:var(--g5);color:#1D2647;font-size:clamp(17px,5vw,26px)}.t48.v512{background:var(--g4);color:#1D2647;font-size:clamp(17px,5vw,26px)}
.t48.v1024,.t48.v2048,.t48.v4096{background:var(--g3);color:#1D2647;font-size:clamp(14px,4vw,22px)}
.holes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:380px;margin:8px auto 0;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.hole{aspect-ratio:1;border-radius:22px;border:3px solid var(--ink);background:radial-gradient(ellipse 72% 34% at 50% 80%,var(--hero) 0 96%,transparent 100%),var(--leaf);position:relative;overflow:hidden;padding:0;min-width:0}
.hole .mole{position:absolute;left:0;right:0;bottom:-70%;font-size:clamp(34px,10vw,52px);line-height:1;transition:bottom .12s ease-out}
.hole.up .mole{bottom:22%}
.hole.hit{background:radial-gradient(ellipse 72% 34% at 50% 80%,var(--hero) 0 96%,transparent 100%),var(--sun)}
/* ===== chess ===== */
.clevel{display:grid;gap:12px;max-width:360px;margin:12px auto;text-align:center}
.clevel h3{font-size:24px}.clevel .primary{font-size:22px;padding:14px}
.chess-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;max-width:480px;margin:0 auto 6px;font-weight:800}
.clv{background:var(--surface-2);border-radius:999px;padding:3px 12px;font-size:14px}
.cstatus{font-weight:800;font-size:15px;text-align:right;flex:1;min-width:160px}
.cstatus.warn{color:var(--pen)}
.cboard{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;max-width:480px;margin:0 auto;border:4px solid var(--cb-edge);border-radius:8px;overflow:hidden;touch-action:manipulation}
.sq{position:relative;border:0;padding:0;min-width:0;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(24px,8.6vw,44px);line-height:1;font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans","Arial Unicode MS",serif;cursor:pointer}
.sq.l{background:var(--cb-l)}.sq.d{background:var(--cb-d)}
.sq.last{box-shadow:inset 0 0 0 100px var(--cb-last)}
.sq.sel{box-shadow:inset 0 0 0 4px var(--cb-sel),inset 0 0 0 100px var(--cb-last)}
.sq.tgt::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:var(--cb-dot);pointer-events:none}
.sq.tgt.cap::after{width:84%;height:84%;background:transparent;border:4px solid var(--cb-dot)}
.sq.chk{box-shadow:inset 0 0 0 100px var(--cb-chk)}
.sq.hint{animation:chint 1s ease-in-out infinite}
@keyframes chint{0%,100%{box-shadow:inset 0 0 0 0 var(--cb-last)}50%{box-shadow:inset 0 0 0 100px var(--cb-last)}}
.pz{position:relative;z-index:1;width:88%;height:88%;pointer-events:none;overflow:visible}
.pz *{stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.pz.pw *{fill:var(--cb-wp);stroke:var(--cb-edge)}
.pz.pb *{fill:var(--cb-bp);stroke:var(--cb-bline)}
.pz .dt{fill:none!important;stroke-width:1.8}
.pz.pw .dt{stroke:var(--cb-edge)}.pz.pb .dt{stroke:var(--cb-wp)}
.pz.pw circle.dt{fill:var(--cb-edge)!important}.pz.pb circle.dt{fill:var(--cb-wp)!important}
.coord{position:absolute;font-family:var(--body);font-size:10px;font-weight:800;opacity:.8;pointer-events:none}
.coord.cr{left:3px;top:2px}.coord.cf{right:3px;bottom:1px}
.sq.l .coord{color:var(--cb-d)}.sq.d .coord{color:var(--cb-l)}
.ccaps{min-height:30px;max-width:480px;margin:4px auto;font-size:24px;line-height:1.2;text-align:center;font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",serif;letter-spacing:1px}
.ccaps .pz{width:26px;height:26px;vertical-align:middle}
.cctl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.cctl button:disabled{opacity:.45;cursor:default}
/* ===== account screens ===== */
.sp-screen{z-index:65}
.auth-card{position:relative;width:100%;max-width:440px;background:var(--sp-glass);border:1px solid var(--sp-line);border-radius:20px;padding:26px 22px;display:grid;gap:14px;color:var(--sp-white);backdrop-filter:blur(6px)}
.auth-card.wide{max-width:640px}.auth-card.center{text-align:center;justify-items:center}
.auth-title{font-family:"Be Vietnam Pro","Baloo 2",system-ui,sans-serif;font-weight:900;font-style:italic;font-size:clamp(30px,6vw,42px);line-height:1.05;margin:0;color:var(--sp-white);letter-spacing:-.02em}
.auth-sub{margin:0;color:var(--sp-soft);font-size:16px;line-height:1.5}
.auth-sub b{color:var(--sp-yellow)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--sp-field);border-radius:12px;padding:4px;gap:4px}
.auth-tabs button{border:0;background:transparent;color:var(--sp-soft);font-weight:800;padding:10px;border-radius:9px}
.auth-tabs button[aria-selected="true"]{background:var(--sp-white);color:var(--sp-bg1)}
.auth-form{display:grid;gap:12px}
.auth-form label,.fl.light{display:grid;gap:6px;font-weight:700;color:var(--sp-soft);font-size:14px}
.auth-form input{font:inherit;font-size:17px;padding:12px 14px;border-radius:12px;border:2px solid var(--sp-line);background:var(--sp-field);color:var(--sp-white);width:100%}
.auth-form input::placeholder{color:var(--sp-soft);opacity:.6}
.auth-form input:focus{outline:none;border-color:var(--sp-yellow)}
.auth-form .sp-go,.auth-card>.sp-go{width:100%;font-size:20px;padding:14px}
.auth-form .gopt{background:var(--sp-field);border-color:var(--sp-line);color:var(--sp-white)}
.auth-form .gopt[aria-pressed="true"]{border-color:var(--sp-yellow);background:var(--sp-glass)}
.auth-msg{margin:0;font-weight:700;color:var(--sp-err);font-size:15px}
.auth-msg.ok{color:var(--sp-ok)}
.linkbtn{background:none;border:0;color:var(--sp-soft);text-decoration:underline;font-weight:700;justify-self:center;padding:6px}
.sp-text .linkbtn{display:block;margin-top:14px}
.rcode{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:clamp(22px,6vw,30px);font-weight:800;letter-spacing:.08em;text-align:center;background:var(--sp-white);color:var(--sp-bg1);border-radius:12px;padding:14px;user-select:all;-webkit-user-select:all}
.ghost.light{background:transparent;color:var(--sp-white);border-color:var(--sp-line)}
.auth-card .row{justify-content:center}
.chk.light{display:flex;gap:10px;align-items:center;font-weight:700;color:var(--sp-white)}
.chk.light input{width:22px;height:22px;accent-color:var(--sp-orange)}
.sp-go:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.kid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.kid-btn{display:grid;justify-items:center;gap:6px;padding:16px 10px;border-radius:16px;border:2px solid var(--sp-line);background:var(--sp-field);color:var(--sp-white);font-family:"Be Vietnam Pro","Baloo 2",sans-serif;font-weight:800;font-size:18px}
.kid-btn span{font-size:52px;line-height:1}
.kid-btn.last{border-color:var(--sp-yellow)}
.kid-btn:hover{border-color:var(--sp-white)}
.kid-btn.add{border-style:dashed}
.ld-rocket{font-size:56px;animation:spfloat 1.4s ease-in-out infinite}
.starchip.sync{background:var(--surface);border:1px solid var(--line);min-width:0;padding:6px 10px}
.starchip.sync[data-s="error"],.starchip.sync[data-s="offline"]{background:var(--sun-soft)}
.kidlist{display:grid;gap:6px}
.kidrow{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.kidrow .kn{font-weight:800}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes stamp{from{transform:scale(2) rotate(-12deg);opacity:0}to{transform:rotate(-12deg);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= Lớp 6 ================= */
.frc{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .12em;font-size:.82em}
.frc i{font-style:normal;padding:0 .18em}
.frc i:first-child{border-bottom:2px solid currentColor}
.eq.m6{font-size:clamp(22px,4.6vw,32px);padding:6px 16px;line-height:1.5;text-align:center}
.letter{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-weight:900;font-size:44px;line-height:1}
.scene{display:grid;justify-items:center;gap:4px;width:100%;max-width:520px}
.scene svg{width:100%;height:auto}
.ch-t{font-weight:800;font-size:15px;color:var(--ink-soft)}
.say.sm{font-size:clamp(17px,3vw,21px);font-weight:600;line-height:1.55;max-width:640px;font-family:var(--body)}
.say.sm small{display:block;font-size:13px;color:var(--ink-soft);margin-top:4px;font-style:italic}
.say.left{text-align:left}
.say.en{font-family:var(--body);font-size:clamp(18px,3.2vw,23px);font-weight:700;line-height:1.5}
.passage.en p{text-indent:0}
.enw{font-family:var(--body);font-weight:700}
.enw u{text-decoration-thickness:3px;text-underline-offset:4px;color:var(--pen)}
.posbox{display:grid;justify-items:center;gap:4px}
.posbox .col{display:flex;flex-direction:column;align-items:center;line-height:1}
.posbox .row1{display:flex;gap:6px;align-items:flex-end}
.posbox .inbox{border:4px solid var(--ink-soft);border-top-style:dashed;border-radius:0 0 12px 12px;padding:6px 14px 2px}
.posbox small{color:var(--ink-soft);font-size:13px}
.big1{font-size:56px;line-height:1.05}
.ruler{width:100%;max-width:420px;height:auto}
.kid-btn .kgr{display:block;font-size:12px;opacity:.75;font-weight:700}
.grades .gopt span{font-family:var(--display);font-weight:900;font-size:28px}

/* giao diện gọn hơn cho học sinh lớp 6 */
body[data-grade="6"]{--display:"Be Vietnam Pro",system-ui,sans-serif}
body[data-grade="6"] .subtabs{grid-template-columns:repeat(5,1fr)}
@media (max-width:640px){body[data-grade="6"] .subtabs{grid-template-columns:repeat(2,1fr)}body[data-grade="6"] .subtabs button:last-child{grid-column:1/-1}}
body[data-grade="6"] .qtext{font-size:clamp(18px,2.8vw,22px);font-weight:600}
body[data-grade="6"] .choice{font-size:clamp(18px,3vw,22px);min-height:56px}
body[data-grade="6"] .answers.long .choice{font-size:clamp(16px,2.4vw,18px);font-weight:600}
body[data-grade="6"] .hero h1{font-size:clamp(26px,4.4vw,36px)}
body[data-grade="6"] .tree{transform:scale(.82);transform-origin:center}
body[data-grade="6"][data-kid="boy"] .primary{font-style:normal;text-transform:none;letter-spacing:0}
body[data-grade="6"][data-kid="boy"] .subtabs button span{font-style:normal;text-transform:none}
body[data-grade="6"][data-kid="boy"] .choice{box-shadow:3px 3px 0 var(--ink)}