/* ============ TOKENS ============ */
:root{
  --bg:#f4f7fb; --surface:#ffffff; --surface-2:#f8fafc; --line:#e2e8f0;
  --text:#0f172a; --muted:#64748b;
  --brand:#4f46e5; --brand-soft:#eef2ff;
  --ok:#16a34a; --ok-soft:#dcfce7; --bad:#dc2626; --bad-soft:#fee2e2;
  --warn:#d97706; --warn-soft:#fef3c7;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --r:16px;
}
[data-theme="dark"]{
  --bg:#0b1120; --surface:#131c31; --surface-2:#0f1729; --line:#25304a;
  --text:#e8eefc; --muted:#93a3bd;
  --brand:#818cf8; --brand-soft:#1e2545;
  --ok:#4ade80; --ok-soft:#14311f; --bad:#f87171; --bad-soft:#3a1717;
  --warn:#fbbf24; --warn-soft:#3a2c0d;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.65;
}
h1,h2,h3,.brand strong{font-family:"Baloo 2","Nunito",sans-serif; line-height:1.25; margin:0}
button,input,select,output{font-family:inherit;font-size:1rem;color:inherit}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}

/* ============ TOPBAR ============ */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 20px; background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(15,23,42,.05);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{font-size:30px;filter:drop-shadow(0 3px 6px rgba(79,70,229,.35))}
.brand strong{display:block;font-size:20px}
.brand small{display:block;color:var(--muted);font-size:12.5px}
.topbar-right{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;font-size:18px;transition:.15s;
}
.icon-btn:hover{background:var(--brand-soft);border-color:var(--brand)}
.only-mobile{display:none}
.progress-chip{
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:5px 14px;font-size:13px;font-weight:700;color:var(--muted);
}
.progress-bar{height:5px;background:var(--line);border-radius:99px;margin-top:4px;width:110px;overflow:hidden}
.progress-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4f46e5,#06b6d4);transition:width .4s}

/* ============ LAYOUT ============ */
.layout{display:grid;grid-template-columns:270px 1fr;align-items:start;max-width:1500px;margin:0 auto}
.sidebar{
  position:sticky;top:61px;height:calc(100vh - 61px);overflow-y:auto;
  padding:20px 14px;border-right:1px solid var(--line);background:var(--surface);
}
.side-title{margin:0 0 12px 8px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
#nav{display:flex;flex-direction:column;gap:4px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  border:none;background:none;cursor:pointer;text-align:left;width:100%;
  font-weight:700;font-size:14.5px;color:var(--text);transition:.15s;
}
.nav-item:hover{background:var(--surface-2)}
.nav-item.active{background:var(--brand-soft);color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}
.nav-emoji{font-size:19px;width:24px;text-align:center}
.nav-item .done{margin-left:auto;color:var(--ok);font-size:15px}
.side-foot{margin-top:22px;padding:14px;background:var(--warn-soft);border-radius:12px;font-size:13px;color:var(--text)}
.side-foot p{margin:0}

main{padding:26px 34px 60px;min-width:0}
.page{display:none;animation:fade .3s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ HERO ============ */
.hero{
  display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center;
  background:linear-gradient(135deg,#4f46e5,#7c3aed 45%,#06b6d4);
  color:#fff;border-radius:26px;padding:38px 40px;margin-bottom:34px;position:relative;overflow:hidden;
}
.badge{display:inline-block;background:rgba(255,255,255,.22);padding:4px 14px;border-radius:99px;font-weight:800;font-size:12.5px;letter-spacing:.05em}
.hero h1{font-size:clamp(26px,3.6vw,42px);margin:12px 0}
.hl{background:linear-gradient(transparent 62%,#fde047 62%);padding:0 4px;border-radius:3px;color:#fff}
.hero p{margin:0 0 22px;opacity:.94;max-width:52ch}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative;height:210px}
.hero-circle{position:absolute;inset:10% 15%;border-radius:50%;background:rgba(255,255,255,.14);border:2px dashed rgba(255,255,255,.4)}
.float{
  position:absolute;background:#fff;color:#4f46e5;font-family:"Baloo 2",sans-serif;font-weight:800;
  padding:8px 16px;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.18);font-size:19px;
  animation:bob 4s ease-in-out infinite;
}
.f1{top:4%;left:6%}.f2{top:34%;right:0;animation-delay:.6s}.f3{bottom:6%;left:16%;animation-delay:1.2s}
.f4{top:8%;right:14%;animation-delay:1.8s}.f5{bottom:22%;right:8%;animation-delay:2.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ============ BUTTONS ============ */
.btn{border:none;border-radius:13px;padding:12px 22px;font-weight:800;cursor:pointer;transition:.18s;font-size:15px}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.32)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(79,70,229,.4)}
.btn.ghost{background:rgba(255,255,255,.2);color:#fff;border:2px solid rgba(255,255,255,.6)}
.page .btn.ghost{background:var(--surface);color:var(--brand);border:2px solid var(--brand)}
.hero .btn.ghost{background:rgba(255,255,255,.18);color:#fff;border:2px solid rgba(255,255,255,.7)}
.btn.ghost:hover{transform:translateY(-2px)}
.btn.small{padding:8px 16px;font-size:14px;border-radius:11px}

/* ============ CARDS ============ */
.sec-title{font-size:24px;margin:0 0 16px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px;margin-bottom:32px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  cursor:pointer;transition:.2s;box-shadow:var(--shadow);position:relative;overflow:hidden;text-align:left;
}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--c)}
.card:hover{transform:translateY(-4px);border-color:var(--c)}
.card-emoji{font-size:32px}
.card h3{font-size:18px;margin:8px 0 4px}
.card p{margin:0;color:var(--muted);font-size:14px}
.card .tag{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;color:var(--c);background:var(--surface-2);padding:3px 10px;border-radius:99px}

.tip-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tip{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.tip>span{font-size:26px}
.tip b{display:block}
.tip p{margin:2px 0 0;color:var(--muted);font-size:14px}

/* ============ LESSON ============ */
.lesson-head{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-left:6px solid var(--c);border-radius:var(--r);padding:20px 24px;margin-bottom:22px;box-shadow:var(--shadow)}
.lh-icon{font-size:40px}
.lesson-head h1{font-size:26px}
.lesson-head p{margin:2px 0 0;color:var(--muted);font-size:14.5px}

.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:20px;box-shadow:var(--shadow)}
.box>h3{font-size:19px;margin:0 0 10px;padding-bottom:8px;border-bottom:2px dashed var(--line)}
.box p{margin:8px 0}
.note{background:var(--warn-soft);border-radius:12px;padding:12px 16px;font-size:14.5px;margin-top:14px}
.why{background:var(--brand-soft);border-radius:12px;padding:12px 16px;font-size:14.5px}

.formula{
  background:linear-gradient(135deg,var(--brand),#06b6d4);color:#fff;border-radius:14px;
  padding:16px 22px;font-family:"Baloo 2",sans-serif;font-size:24px;font-weight:800;
  text-align:center;margin:12px 0;box-shadow:0 8px 20px rgba(79,70,229,.25);
}
.formula small{display:block;font-family:"Nunito";font-size:13px;font-weight:600;opacity:.9;margin-top:4px}

/* fraction inline */
.frac-inline{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.15;font-style:normal;margin:0 3px}
.frac-inline i{font-style:normal;padding:0 5px}
.frac-inline i:first-child{border-bottom:2px solid currentColor}
.hl-frac{color:var(--ok)}

/* examples */
.example{background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:12px;padding:16px 18px;margin:14px 0}
.ex-title{font-weight:800;color:var(--ok);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.ex-q{font-weight:700;margin:6px 0 10px !important}
.steps{margin:0;padding-left:22px}
.steps li{margin:6px 0}
.steps.plain{padding-left:20px}
.ex-ans{margin-top:12px;display:inline-block;background:var(--ok-soft);color:var(--ok);font-weight:800;padding:7px 16px;border-radius:10px}

.rule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:12px 0}
.rule{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:15px}
.rule b{color:var(--brand);font-size:15.5px}
.rule p{margin:6px 0;font-size:14.5px}
.rule code{display:block;background:var(--surface);border:1px dashed var(--line);border-radius:9px;padding:9px 11px;font-size:13.5px;color:var(--text);margin-top:8px;line-height:1.7}

/* ============ WIDGETS ============ */
.widget{border:2px solid var(--brand);border-radius:15px;overflow:hidden;margin:16px 0;background:var(--surface)}
.widget-head{background:var(--brand);color:#fff;padding:9px 16px;font-weight:800;font-size:14.5px}
.w-body{padding:18px}
.row-inputs{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row-inputs label{font-weight:700;font-size:14.5px}
input[type=number],input[type=text],select{
  border:2px solid var(--line);border-radius:11px;padding:8px 12px;background:var(--surface-2);
  width:92px;font-weight:700;transition:.15s;
}
input.wide{width:170px}
select{width:auto;max-width:100%}
input:focus,select:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.slash{font-size:24px;font-weight:800;color:var(--muted)}
.result-box{
  background:var(--ok-soft);color:var(--ok);border-radius:12px;padding:12px 16px;
  font-weight:800;margin-top:12px;font-size:15.5px;line-height:1.7;
}
.result-box.grow{margin-top:0;flex:1;min-width:200px}
.result-box small{display:block;font-weight:600;opacity:.85;font-size:13.5px}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:var(--line);padding:0;border:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--brand);border:3px solid #fff;cursor:pointer}
.geo-ctrl label,.pizza-ctrl label{display:block;margin:12px 0 5px;font-weight:700;font-size:14.5px}
output{color:var(--brand);font-weight:800}

/* pizza / fraction */
.pizza-w{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.pizza-visual svg{width:100%;max-width:230px;display:block;margin:0 auto}
.bar-visual{display:flex;gap:3px;margin-top:16px;height:44px}
.bar-visual i{flex:1;border-radius:6px;background:var(--surface-2);border:2px solid var(--line)}
.bar-visual i.on{background:linear-gradient(180deg,#fb923c,#f97316);border-color:#ea580c}

.cmp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.cmp-side{text-align:center}
.cmp-bar{height:38px;border-radius:10px;background:var(--surface-2);border:2px solid var(--line);margin-top:12px;overflow:hidden;position:relative}
.cmp-bar i{display:block;height:100%;background:linear-gradient(90deg,#6366f1,#22d3ee);transition:width .35s;position:relative}
.cmp-sign{font-size:40px;font-weight:800;color:var(--brand);font-family:"Baloo 2"}

/* place value */
.place-table{display:flex;gap:5px;flex-wrap:wrap;margin:16px 0;justify-content:center}
.pv{min-width:64px;border:2px solid var(--line);border-radius:11px;text-align:center;overflow:hidden;background:var(--surface-2)}
.pv .pv-l{font-size:11px;font-weight:800;padding:4px;background:var(--brand-soft);color:var(--brand)}
.pv .pv-d{font-size:26px;font-weight:800;padding:6px;font-family:"Baloo 2"}
.pv.dec{border-color:var(--warn)}
.pv.dec .pv-l{background:var(--warn-soft);color:var(--warn)}
.pv.comma{min-width:26px;display:flex;align-items:flex-end;justify-content:center;border:none;background:none;font-size:34px;font-weight:800;color:var(--bad)}

/* hundred grid */
.hundred{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;width:230px;aspect-ratio:1;margin:0 auto 14px}
.hundred i{background:var(--surface-2);border:1px solid var(--line);border-radius:2px;transition:.1s}
.hundred i.on{background:#22c55e;border-color:#16a34a}
.pct-flex{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.pct-big{font-family:"Baloo 2";font-size:56px;font-weight:800;color:var(--ok);text-align:center}
.pct-equiv{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.pct-equiv span{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-weight:700;font-size:14.5px}

/* vertical calc */
.vertical-calc{font-family:"Baloo 2",monospace;font-size:26px;font-weight:800;text-align:right;
  display:inline-block;margin:16px 0;padding:14px 22px;background:var(--surface-2);border-radius:12px;border:2px dashed var(--line);min-width:180px}
.vertical-calc div{letter-spacing:3px}
.vertical-calc .vline{border-top:3px solid var(--text);margin:6px 0 4px}
.vertical-calc .vres{color:var(--ok)}

/* shift decimal */
.shift-display{font-family:"Baloo 2";font-size:40px;font-weight:800;text-align:center;color:var(--brand);margin-bottom:16px;letter-spacing:2px}
.shift-labels{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted);margin-top:6px}

/* stair */
.stair{display:flex;align-items:flex-end;gap:6px;margin-top:18px;overflow-x:auto;padding-bottom:6px}
.stair .st{flex:1;min-width:62px;background:var(--surface-2);border:2px solid var(--line);border-radius:10px 10px 0 0;text-align:center;padding:8px 4px;font-weight:800;font-size:13.5px}
.stair .st.act{background:var(--brand);color:#fff;border-color:var(--brand)}
.stair .st small{display:block;font-weight:600;font-size:11px;opacity:.75}

/* clock */
.clock-row{display:flex;gap:20px;align-items:center;margin-top:14px;flex-wrap:wrap}
.clock{width:120px;height:120px;flex:none}

/* geometry */
.geo-w{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.geo-svg{width:100%;background:var(--surface-2);border-radius:12px;border:1px solid var(--line)}

/* 3d box */
.box3d-stage{perspective:900px;height:260px;display:flex;align-items:center;justify-content:center}
.box3d{position:relative;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-32deg);transition:.3s}
.box3d .f{position:absolute;display:block;border:2px solid rgba(255,255,255,.55);background:rgba(249,115,22,.72)}
.box3d .top{background:rgba(251,146,60,.9)}
.box3d .front{background:rgba(234,88,12,.85)}
.box3d .right{background:rgba(194,65,12,.85)}

/* motion */
.road{position:relative;height:96px;background:#334155;border-radius:14px;overflow:hidden;margin-bottom:16px}
.road-line{position:absolute;top:50%;left:0;right:0;height:4px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,#fbbf24 0 26px,transparent 26px 52px)}
.car{position:absolute;top:12px;left:0;font-size:38px;transition:left linear;z-index:2}
.finish{position:absolute;right:10px;top:26px;font-size:34px}
.tri-formula{width:210px;margin:0 auto 18px;text-align:center}
.tf-top{background:var(--brand);color:#fff;font-family:"Baloo 2";font-size:34px;font-weight:800;border-radius:12px 12px 0 0;padding:8px}
.tf-bot{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.tf-bot span{background:#06b6d4;color:#fff;font-family:"Baloo 2";font-size:30px;font-weight:800;padding:8px}
.tf-bot span:first-child{border-radius:0 0 0 12px}
.tf-bot span:last-child{border-radius:0 0 12px 0}
.tri-formula p{font-size:13px;color:var(--muted);margin-top:8px}

/* convert grid */
.convert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:12px 0}
.conv{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;font-size:22px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.conv small{width:100%;font-size:12.5px;font-weight:600;color:var(--muted)}

/* ============ QUIZ ============ */
.quiz-box{background:var(--surface);border:2px solid var(--brand);border-radius:var(--r);padding:22px 24px;margin-bottom:20px}
.quiz-box>h3{margin:0 0 4px;font-size:20px;color:var(--brand)}
.quiz-sub{color:var(--muted);font-size:14px;margin:0 0 14px}
.q{background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-bottom:12px}
.q-text{font-weight:700;margin:0 0 12px}
.q-text b{color:var(--brand)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.opt{border:2px solid var(--line);background:var(--surface);border-radius:11px;padding:11px 14px;cursor:pointer;font-weight:700;text-align:left;transition:.15s}
.opt:hover{border-color:var(--brand);background:var(--brand-soft)}
.opt.sel{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.opt.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.opt:disabled{cursor:default}
.explain{margin-top:11px;padding:11px 14px;border-radius:10px;font-size:14.5px;background:var(--brand-soft);display:none}
.explain.show{display:block}
.score{font-family:"Baloo 2";font-size:22px;font-weight:800;text-align:center;padding:18px;border-radius:14px;margin-top:16px}
.score.good{background:var(--ok-soft);color:var(--ok)}
.score.mid{background:var(--warn-soft);color:var(--warn)}
.score.bad{background:var(--bad-soft);color:var(--bad)}

/* lesson nav */
.lesson-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120%);background:var(--text);color:var(--bg);
  padding:12px 24px;border-radius:99px;font-weight:800;z-index:99;transition:.35s;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.toast.show{transform:translate(-50%,0)}

.foot{text-align:center;padding:26px;color:var(--muted);border-top:1px solid var(--line);background:var(--surface);font-size:14px}
.foot p{margin:2px}
.foot .small{font-size:12.5px}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:61px;width:262px;z-index:35;transform:translateX(-105%);transition:.28s;box-shadow:var(--shadow)}
  .sidebar.open{transform:none}
  .only-mobile{display:block}
  main{padding:20px 16px 50px}
  .hero{grid-template-columns:1fr;padding:28px 24px}
  .hero-art{display:none}
  .pizza-w,.geo-w,.pct-flex{grid-template-columns:1fr}
  .progress-chip{display:none}
}
@media (max-width:520px){
  body{font-size:15.5px}
  .cmp-row{grid-template-columns:1fr;gap:10px}
  .cmp-sign{font-size:30px}
  .hundred{width:100%;max-width:230px}
  .box{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ BỔ SUNG: CHIPS, WIDGET HỌC KÌ 2 ============ */
.sec-note{font-family:"Nunito";font-size:14px;font-weight:600;color:var(--muted)}

/* dải chip liên kết tới từng bài */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{
  display:inline-block;padding:6px 14px;border-radius:99px;font-size:13.5px;font-weight:800;
  background:var(--surface);border:1px solid var(--line);color:var(--brand);
  text-decoration:none;transition:.15s;white-space:nowrap;
}
.chip:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-2px)}

/* svg dùng chung cho trục số, sơ đồ đoạn thẳng, biểu đồ cột */
.numline{width:100%;display:block;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;margin:12px 0}

/* hỗn số */
.hs-visual{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0}
.hs-visual svg{width:78px;height:78px}

/* bảng công thức ôn tập */
.formula-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.fl{background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px;padding:14px 16px}
.fl b{display:block;color:var(--brand);margin-bottom:6px}
.fl span{display:block;font-weight:700;font-size:15px}
.fl span+span{color:var(--muted);font-weight:600;font-size:14px}

/* máy tính cầm tay */
.calc-w{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start}
.calc{background:#1e293b;border-radius:18px;padding:14px;box-shadow:0 10px 28px rgba(15,23,42,.28)}
.calc-disp{
  background:#0f172a;color:#4ade80;border-radius:10px;padding:14px 16px;text-align:right;
  font-family:"Baloo 2",monospace;font-size:30px;font-weight:800;margin-bottom:12px;
  overflow-x:auto;white-space:nowrap;
}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ck{
  border:none;border-radius:11px;padding:13px 0;font-size:17px;font-weight:800;cursor:pointer;
  background:#475569;color:#fff;transition:.12s;
}
.ck:hover{background:#64748b;transform:translateY(-1px)}
.ck.op{background:#f97316}
.ck.op:hover{background:#fb923c}
.ck.eq{background:#22c55e}
.ck.eq:hover{background:#4ade80}
.ck.fn{background:#334155;font-size:15px}
.calc-tips ul{margin:6px 0}
.calc-tips code{background:var(--surface-2);border:1px dashed var(--line);border-radius:7px;padding:2px 8px;font-weight:700}

/* thí nghiệm xác suất */
.xs-bars{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.xb{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:12px;font-weight:700;font-size:14.5px}
.xb i{display:block;height:26px;border-radius:8px;min-width:3px;transition:width .3s}
.xb b{text-align:right;font-size:17px}

@media (max-width:1000px){
  .calc-w{grid-template-columns:1fr}
  .calc{max-width:280px}
  .xb{grid-template-columns:96px 1fr 46px;font-size:13px}
}

/* nhãn số trang sách giáo khoa */
.pg{
  display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 10px;border-radius:99px;
  font-family:"Nunito";font-size:11.5px;font-weight:800;letter-spacing:.02em;
  background:var(--brand-soft);color:var(--brand);border:1px solid var(--line);
}

/* ---- bổ sung theo SGK ---- */
h4.sub{font-family:"Baloo 2";font-size:16.5px;margin:16px 0 6px;color:var(--brand)}
.tri-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:12px 0}
.tt{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.tt svg{width:100%;max-width:110px;height:auto}
.tt b{display:block;margin-top:6px;font-size:15px}
.tt p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.dv-table{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:12px 0;overflow-x:auto}
.dv{background:#dbeafe;border-radius:8px;padding:9px 6px;text-align:center;font-size:12.5px}
.dv.m{background:#fef3c7}.dv.s{background:#f3e8ff}
.dv b{display:block;font-size:15px;margin-bottom:3px}
.dv span{color:#334155;font-size:11.5px;line-height:1.4;display:block}
.dv.h{grid-column:span 2;font-weight:800;background:#93c5fd;padding:7px}
.dv.h.m{grid-column:span 1;background:#fcd34d}
.dv.h.s{grid-column:span 3;background:#d8b4fe}
[data-theme="dark"] .dv{background:#1e3a5f}[data-theme="dark"] .dv.m{background:#4a3a12}
[data-theme="dark"] .dv.s{background:#3b2a52}[data-theme="dark"] .dv span{color:#cbd5e1}
[data-theme="dark"] .dv.h{background:#2563eb}[data-theme="dark"] .dv.h.m{background:#b45309}
[data-theme="dark"] .dv.h.s{background:#7c3aed}
@media (max-width:640px){.dv-table{grid-template-columns:repeat(3,1fr)}.dv.h{grid-column:span 3}.dv.h.m,.dv.h.s{grid-column:span 3}}
.rule.mo-rong{border-style:dashed;background:transparent}
.rule.mo-rong b{color:var(--muted)}

/* ---- hình minh hoạ lý thuyết ---- */
.viz{
  background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:14px;padding:14px 16px;margin:14px 0;
}
.viz-cap{font-weight:800;font-size:14px;color:var(--brand);margin-bottom:8px}
.viz-svg{width:100%;max-width:520px;display:block;margin:0 auto;height:auto;overflow:visible}
.viz-note{margin:10px 0 0;font-size:14px;color:var(--text);line-height:1.6}
.viz input[type=range]{margin-top:12px}

/* ---- animation cắt ghép ---- */
.viz-hot{border-left-color:#dc2626;background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.viz-hot .viz-cap{color:#dc2626}
.viz-ctrl{display:flex;align-items:center;gap:14px;margin-top:10px}
.viz-ctrl input[type=range]{flex:1;margin-top:0}
.viz-steps{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.viz-steps span{
  flex:1;min-width:110px;padding:7px 10px;border-radius:9px;font-size:12.5px;font-weight:700;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);transition:.2s;text-align:center;
}
.viz-steps span.on{background:#dc2626;border-color:#dc2626;color:#fff;transform:translateY(-2px)}
.viz-steps span.xong{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}

/* ---------- Toán tư duy ---------- */
.dh-bang{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.dh-bang span{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  padding:5px 9px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--muted);transition:.15s}
.dh-bang span b{color:var(--text)}
.dh-bang span.on{background:#9333ea;border-color:#9333ea;color:#fff;transform:translateY(-2px)}
.dh-bang span.on b{color:#fff}

.td-bang{display:inline-block;margin:10px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.td-row{display:flex}
.td-row.td-head span{
  font-size:13px;font-weight:800;color:var(--brand);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center}
.td-row>span{width:88px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.td-row:last-child>span,.td-row:last-child>.td-o{border-bottom:none}
.td-row>span:last-child{border-right:none}
.td-ten{background:var(--surface-2);color:var(--text)}
.td-o{
  width:88px;height:44px;border:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--surface);cursor:pointer;font-size:19px;font-weight:800;color:var(--muted);transition:.12s}
.td-o:last-child{border-right:none}
.td-o:hover{background:var(--surface-2)}
.td-o.co{background:var(--ok-soft);color:var(--ok)}
.td-o.khong{background:var(--bad-soft);color:var(--bad)}

.result-box.dung{border-color:var(--ok);background:var(--ok-soft)}
.result-box.sai{border-color:var(--bad);background:var(--bad-soft)}

/* ---------- Nhiều môn học ---------- */
button.brand-logo{border:none;cursor:pointer;font:inherit}
button.brand-logo:hover{transform:scale(1.08)}
#navMon .nav-item{font-weight:800}
#navMon .nav-item.chua{opacity:.62}
.nav-item .sap{
  margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.02em;
  padding:2px 7px;border-radius:99px;background:var(--surface-2);
  color:var(--muted);border:1px solid var(--line)}
#navToan{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}

.card.mon.chua{opacity:.72}
.card.mon.chua:hover{opacity:1}
.card.mon.chua .tag{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

.box.chua-co{border-left:4px solid var(--muted);background:var(--surface-2)}
.box.chua-co h3{color:var(--muted)}

/* ---------- Tiếng Anh ---------- */
.ta-chudiem{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);margin:-4px 0 12px}
.ta-mau{display:grid;gap:8px;margin:8px 0 4px}
.ta-cap{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ta-hoi,.ta-dap{padding:9px 12px;border-radius:10px;font-size:14px;font-weight:600;line-height:1.45}
.ta-hoi{background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand)}
.ta-dap{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}
@media(max-width:640px){.ta-cap{grid-template-columns:1fr}}

.ta-luoi{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.ta-tu{display:flex;flex-direction:column;gap:1px;padding:7px 11px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);min-width:120px}
.ta-tu b{font-size:14px;color:var(--text)}
.ta-tu i{font-size:12px;color:var(--brand);font-style:normal}
.ta-tu small{font-size:11px;color:var(--muted)}

.ta-the-khung{display:flex;justify-content:center;margin:12px 0}
.ta-the{width:100%;max-width:420px;min-height:132px;border-radius:16px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:18px;text-align:center;transition:.18s;border:2px solid var(--brand)}
.ta-the:hover{transform:translateY(-2px)}
.ta-the.truoc{background:var(--brand-soft)}
.ta-the.sau{background:var(--ok-soft);border-color:var(--ok)}
.ta-the b{font-size:26px;line-height:1.25;color:var(--text)}
.ta-the i{font-size:15px;color:var(--brand);font-style:normal}
.ta-the small{font-size:12px;color:var(--muted)}
.ta-dem{font-size:12px;font-weight:700;color:var(--muted)}
.ta-trong{color:var(--muted);font-size:14px;text-align:center;padding:22px}

.ta-am-hoi{text-align:center;padding:14px 0 4px}
.ta-am-hoi b{font-size:26px}
.ta-ipa{font-size:16px;color:var(--brand);margin-left:8px}
.ta-am{font-size:17px!important;min-width:64px;font-family:inherit}

.ta-bang{max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;margin-top:10px}
.ta-dong{display:grid;grid-template-columns:150px 44px 165px 1fr;gap:8px;align-items:baseline;
  padding:7px 12px;border-bottom:1px solid var(--line);font-size:13px}
.ta-dong:last-child{border-bottom:none}
.ta-dong b{color:var(--text)}
.ta-dong span{color:var(--muted);font-size:11px}
.ta-dong i{color:var(--brand);font-style:normal}
.ta-dong em{color:var(--muted);font-style:normal}
@media(max-width:640px){.ta-dong{grid-template-columns:1fr 1fr;row-gap:2px}}
.ta-tu.rong{min-width:auto}
.ta-cau{display:grid;gap:8px;margin:8px 0 4px}
.ta-ngu{padding:9px 13px;border-radius:10px;font-size:14px;font-weight:600;border:1px solid var(--line);background:var(--surface-2)}
.ta-ngu b{font-size:17px;margin-left:5px}
.ta-ngu.len{border-color:#0891b2;color:#0891b2}
.ta-ngu.xuong{border-color:#db2777;color:#db2777}
.ta-dong{grid-template-columns:150px 40px 160px 1fr 46px}
.ta-dong u{text-decoration:none;font-size:10px;font-weight:800;color:var(--muted)}

/* ---------- Tiếng Anh · chi tiết Lesson ---------- */
.ta-lesson{margin:14px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ta-lesson-dau{background:var(--brand);color:#fff;padding:8px 14px;font-weight:800;letter-spacing:.06em;
  display:flex;justify-content:space-between;align-items:center;font-size:13px}
.ta-lesson-dau span{font-weight:600;opacity:.85;font-size:11px;letter-spacing:0}
.ta-hd{padding:12px 14px;border-top:1px solid var(--line)}
.ta-hd:first-of-type{border-top:none}
.ta-hd-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.ta-hd-so{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}
.ta-hd-dau b{font-size:14px;color:var(--text)}
.ta-track{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);
  padding:2px 8px;border-radius:99px;border:1px solid var(--line)}
.ta-canbang{font-size:11px;font-weight:700;color:#d97706;background:#fef3c7;padding:2px 8px;border-radius:99px}
[data-theme="dark"] .ta-canbang{background:#3a2a09}

.ta-canh{display:flex;gap:9px;margin:7px 0}
.ta-nhan{width:20px;height:20px;border-radius:6px;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none;margin-top:2px}
.ta-loi{margin:3px 0;font-size:14px;line-height:1.5}
.ta-loi b{color:var(--brand)}

.ta-cau{margin:9px 0;font-size:14px;line-height:1.6}
.ta-lcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.ta-lc{font-size:13px;padding:4px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.ta-lc.dung{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);font-weight:700}
.ta-o{display:inline-block;min-width:82px;border-bottom:2px solid var(--brand);margin:0 3px}
.ta-goi{font-size:13px;color:var(--muted);margin:7px 0;line-height:1.55}
.ta-visao{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.ta-tuade{font-weight:800;color:#f97316;margin:4px 0 8px;font-size:15px}

.ta-doan{background:var(--surface-2);border-left:3px solid var(--brand);border-radius:0 10px 10px 0;
  padding:9px 13px;margin:8px 0}
.ta-doan b{color:var(--brand);font-size:13px}
.ta-doan p{margin:4px 0 0;font-size:14px;line-height:1.6}
.ta-hat{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--surface-2);
  border-radius:12px;padding:12px 15px}
.ta-hat p{margin:3px 0;font-size:14px;line-height:1.55}
@media(max-width:640px){.ta-hat{grid-template-columns:1fr}}
.ta-khung{border:2px dashed #f97316;border-radius:12px;padding:13px 15px;font-size:14px;line-height:2}

.ta-dapan{margin-top:8px}
.ta-dapan summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--brand);
  padding:5px 11px;border-radius:8px;background:var(--brand-soft);display:inline-block}
.ta-dapan>div{margin-top:7px;padding:9px 13px;border-radius:10px;background:var(--ok-soft);
  border:1px solid var(--ok);font-size:14px}
.ta-dapan small{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.ta-dapan .ta-luuy{color:#d97706;font-weight:600}
.box.co-bai>h3 .pg{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.ta-ds{border-collapse:collapse;margin:10px 0;font-size:14px;width:100%;max-width:560px}
.ta-ds th,.ta-ds td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.ta-ds th:not(:first-child),.ta-ds td:not(:first-child){text-align:center;width:66px}
.ta-ds th{background:var(--surface-2);font-size:12px}
.ta-ds td.dung{background:var(--ok-soft);color:var(--ok);font-weight:800}
.ta-dong-ke{border-bottom:1px solid var(--line);height:20px;margin:2px 0 10px}

/* ---------- Menu 20 unit ---------- */
.ta-nhom{margin:12px 0}
.ta-nhom-dau{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;
  padding-bottom:5px;border-bottom:2px solid var(--line)}
.ta-nhom-dau b{font-size:12px;font-weight:800;letter-spacing:.07em;color:var(--brand)}
.ta-nhom-dau span{font-size:11px;color:var(--muted);font-weight:700}
.ta-menu-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.ta-o-unit{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface-2);text-decoration:none;transition:.15s;position:relative}
.ta-o-unit:hover{transform:translateY(-2px);border-color:var(--brand)}
.ta-o-so{position:absolute;top:8px;right:10px;font-size:17px;font-weight:800;color:var(--line)}
.ta-o-ten{font-size:13px;font-weight:700;color:var(--text);padding-right:22px;line-height:1.3}
.ta-o-tr{font-size:11px;color:var(--muted)}
.ta-o-unit.phu{background:transparent;border-style:dashed}
.ta-o-unit.phu .ta-o-ten{color:var(--muted)}
.ta-o-unit.xong{border-color:var(--ok);background:var(--ok-soft)}
.ta-o-unit.xong .ta-o-so{color:var(--ok);opacity:.5}
.ta-o-unit.xong .ta-o-tr{color:var(--ok);font-weight:700}
.ta-bang2{border-collapse:collapse;margin:10px 0;font-size:14px;width:100%;max-width:620px}
.ta-bang2 th,.ta-bang2 td{border:1px solid var(--line);padding:7px 11px;text-align:left;vertical-align:top}
.ta-bang2 th{background:var(--surface-2);font-weight:700;width:40%;font-size:13px}
.ta-bang2.cot th{width:auto;text-align:center}
.ta-bang2.cot td{min-height:26px}
.ta-cau u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ta-cau u.them{color:var(--ok);font-weight:800;text-decoration-color:var(--ok)}
.ta-ghep{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;margin:10px 0}
.ta-ghep>div{display:flex;flex-direction:column;gap:6px}
@media(max-width:640px){.ta-ghep{grid-template-columns:1fr}}

/* ---------- Mục lục môn Tiếng Anh (thanh bên) ---------- */
.side-tap{margin:14px 0 6px 8px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand)}
#navTiengAnh .nav-item{gap:8px;padding:7px 10px;font-size:14px}
#navTiengAnh .nav-emoji{display:inline-flex;justify-content:center;min-width:22px;
  font-size:12px;font-weight:800;color:var(--muted)}
.ta-muc-ten{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta-muc-tr{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.ta-muc.phu .ta-muc-ten{color:var(--muted);font-style:italic}