/* Ôn thi giữa kì SSA101 — hợp mệnh Thổ: đất / nâu / đỏ cam (SSA = Sao Hoả), không dùng xanh lá. Không phông ngoài (tải nhanh, offline được). */
:root{
  --bg:#FBF6EE;--card:#FFFFFF;--ink:#2B1D14;--mute:#7A6657;--line:#E6D9C7;
  --brand:#C0472B;--brand-d:#8E2F19;--brand-soft:#FBE6DC;--gold:#B8860B;--gold-soft:#F7ECCB;
  --ok:#2F7D4F;--ok-soft:#E1F1E6;--bad:#B3261E;--bad-soft:#FBE3E0;--warn-soft:#FFF1D6;
  --r:14px;--shadow:0 1px 2px rgba(60,30,10,.06),0 6px 18px rgba(60,30,10,.06);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#17110D;--card:#241A14;--ink:#F3E8DA;--mute:#B5A290;--line:#3C2D23;
  --brand:#E8704D;--brand-d:#F2A27B;--brand-soft:#3A2018;--gold:#E0B34A;--gold-soft:#3A2F14;
  --ok:#6CC38B;--ok-soft:#173222;--bad:#FF8A80;--bad-soft:#401C19;--warn-soft:#3A2D12;--shadow:none}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
a{color:var(--brand-d)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;max-width:980px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand b{display:block;font-size:17px;line-height:1.2}.brand small{display:block;color:var(--mute);font-size:12px}
.dot{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F2A27B,#C0472B 55%,#6E2415);box-shadow:inset -4px -4px 8px rgba(0,0,0,.25);flex:none}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.lang button{border:0;background:none;padding:6px 10px;font-size:12px;font-weight:600;color:var(--mute)}
.lang button[aria-pressed=true]{background:var(--brand);color:#fff}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--card);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom));overflow-x:auto}
.tabs a{flex:1 0 auto;min-width:62px;display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 6px;text-decoration:none;color:var(--mute);font-size:11px;border-radius:10px}
.tabs a i{font-style:normal;font-size:19px;line-height:1.2}
.tabs a.on{color:var(--brand-d);background:var(--brand-soft);font-weight:700}
main{max-width:980px;margin:0 auto;padding:6px 16px 24px;outline:none}
.foot{max-width:980px;margin:0 auto;padding:0 16px 16px;color:var(--mute);font-size:12px}
h1{font-size:24px;line-height:1.25;margin:10px 0 4px}h2{font-size:19px;margin:22px 0 8px}h3{font-size:16px;margin:14px 0 6px}
.sub{color:var(--mute);margin:0 0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:12px 0;box-shadow:var(--shadow)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid .card{margin:0}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:9px 14px;font-weight:600;text-decoration:none;color:var(--ink);min-height:44px}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}.btn.p:hover{background:var(--brand-d)}
.btn.s{min-height:36px;padding:5px 10px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 11px;font-size:14px;min-height:34px}
.chip[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.tag{display:inline-block;font-size:12px;font-weight:700;border-radius:6px;padding:1px 7px;background:var(--gold-soft);color:var(--gold);vertical-align:middle}
.tag.h{background:var(--ok-soft);color:var(--ok)}.tag.l{background:var(--bad-soft);color:var(--bad)}.tag.m{background:var(--warn-soft);color:var(--gold)}
.vi{color:var(--mute)}.en+.vi{margin-top:2px}
.note{background:var(--warn-soft);border-left:4px solid var(--gold);border-radius:8px;padding:10px 12px;margin:10px 0;font-size:15px}
.board{font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;background:#F4F1EA;color:#1d2a44;border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-size:17px;line-height:1.7}
@media (prefers-color-scheme:dark){.board{background:#2A2622;color:#DCE4F5}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}.stat b{display:block;font-size:24px;line-height:1.1}.stat span{font-size:13px;color:var(--mute)}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:var(--brand)}
.term{border-bottom:1px solid var(--line);padding:10px 0}.term:last-child{border-bottom:0}.term b{display:block}
details{margin:8px 0}summary{cursor:pointer;font-weight:600;padding:6px 0}
/* câu hỏi */
.q{font-size:17px;margin:4px 0 12px}
.opt{display:flex;gap:10px;width:100%;text-align:left;border:2px solid var(--line);background:var(--card);border-radius:12px;padding:11px 12px;margin:8px 0;min-height:48px}
.opt .k{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:700}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt.ok{border-color:var(--ok);background:var(--ok-soft)}.opt.ok .k{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.bad{border-color:var(--bad);background:var(--bad-soft)}.opt.bad .k{background:var(--bad);border-color:var(--bad);color:#fff}
.opt[disabled]{cursor:default}
.exp{margin-top:10px;background:var(--gold-soft);border-radius:10px;padding:10px 12px;font-size:15px}
.res{font-weight:700;margin:8px 0}.res.ok{color:var(--ok)}.res.bad{color:var(--bad)}
.nav-q{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.nav-q button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:600}
.nav-q button.a{background:var(--brand-soft);border-color:var(--brand)}.nav-q button.cur{outline:2px solid var(--ink)}
.nav-q button.ok{background:var(--ok-soft);border-color:var(--ok)}.nav-q button.bad{background:var(--bad-soft);border-color:var(--bad)}
.timer{position:sticky;top:0;z-index:5;background:var(--bg);padding:6px 0;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.timer.low{color:var(--bad)}
.flash{min-height:230px;display:grid;place-items:center;text-align:center;cursor:pointer;padding:24px;font-size:20px;border:2px dashed var(--line);border-radius:18px;background:var(--card)}
.flash small{display:block;color:var(--mute);font-size:13px;margin-bottom:8px}
.pager{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.empty{text-align:center;color:var(--mute);padding:30px 8px}
.loading{color:var(--mute);padding:20px 0}
.hero{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero .planet{width:84px;height:84px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#F7B58F,#C0472B 52%,#5B1E10);box-shadow:inset -10px -10px 18px rgba(0,0,0,.3),0 0 30px rgba(192,71,43,.35)}
@media (min-width:760px){.tabs{left:50%;right:auto;width:max-content;transform:translateX(-50%);bottom:12px;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);max-width:calc(100vw - 24px)}.tabs a{flex-direction:row;gap:6px;font-size:13px;min-width:0}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.tabs,.lang,.foot,.btn{display:none}body{padding:0}}