/* =========================================================================
   HỌC TIẾNG ANH & TIẾNG TRUNG — Design System
   Giữ nguyên mọi tên class/ID mà JS đang dùng, chỉ nâng cấp phần nhìn.
   ========================================================================= */

/* ---- Web fonts (tùy chọn, cần mạng; offline sẽ fallback về system font) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap');

/* ================= THEME TOKENS ================= */
:root{
  /* thang khoảng cách & bo góc dùng chung */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-lg:18px; --fs-xl:24px; --fs-2xl:34px; --fs-3xl:46px;
  --ease:cubic-bezier(.4,0,.2,1);
  --font-cn:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;
}
:root[data-theme="dark"]{
  --bg1:#0b1220; --bg2:#0e1626; --bg-grid:rgba(56,189,248,.05);
  --panel:#151f33; --panel2:#1c2942; --panel3:#233350;
  --text:#e8eef7; --muted:#93a4bd; --faint:#64748b;
  --brand:#38bdf8; --brand2:#818cf8; --brand-ink:#04121f;
  --ok:#34d399; --ok-ink:#052e1a; --bad:#fb7185; --bad-ink:#3b0a12; --warn:#fbbf24;
  --border:#26344d; --border2:#31435f;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 12px 32px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 60px -12px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(56,189,248,.15), 0 8px 30px -6px rgba(56,189,248,.25);
  --ring:0 0 0 3px rgba(56,189,248,.28);
}
:root[data-theme="light"]{
  --bg1:#f6f8fc; --bg2:#eef2f9; --bg-grid:rgba(2,132,199,.04);
  --panel:#ffffff; --panel2:#f4f7fc; --panel3:#eaf0f9;
  --text:#0f1e33; --muted:#5a6b85; --faint:#8697ad;
  --brand:#0284c7; --brand2:#6366f1; --brand-ink:#ffffff;
  --ok:#059669; --ok-ink:#ffffff; --bad:#e11d48; --bad-ink:#ffffff; --warn:#d97706;
  --border:#dde5f0; --border2:#cbd6e6;
  --shadow-sm:0 1px 2px rgba(15,30,51,.06);
  --shadow:0 12px 32px -12px rgba(15,30,51,.16);
  --shadow-lg:0 24px 60px -16px rgba(15,30,51,.2);
  --glow:0 0 0 1px rgba(2,132,199,.12), 0 8px 30px -8px rgba(2,132,199,.25);
  --ring:0 0 0 3px rgba(2,132,199,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,var(--font-cn),sans-serif;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb,var(--brand) 10%,transparent), transparent 60%),
    radial-gradient(1000px 500px at -10% 0%, color-mix(in srgb,var(--brand2) 10%,transparent), transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
}
:lang(zh),.term:lang(zh){font-family:var(--font-cn)}

/* thanh cuộn tinh gọn */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:var(--border2);border-radius:var(--r-full)}
*::-webkit-scrollbar-track{background:transparent}

/* ================= APP SHELL (2 tầng điều hướng) ================= */
.app{display:flex;min-height:100vh}

/* ---- TẦNG 1: Sidebar (máy tính) ---- */
.sidebar{
  width:248px;flex:none;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:var(--sp-2);
  padding:20px 16px;
  background:color-mix(in srgb,var(--panel) 60%,var(--bg1));
  border-right:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0;padding:4px 8px 16px}
.logo{
  width:44px;height:44px;border-radius:13px;flex:none;
  background:linear-gradient(140deg,var(--brand),var(--brand2));
  display:grid;place-items:center;font-weight:800;font-size:23px;color:#fff;
  font-family:var(--font-cn);box-shadow:var(--glow);
}
.brand-text{min-width:0}
h1{font-size:16px;margin:0;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.brand-text .sub{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.04em;margin-top:2px}
h2{font-size:var(--fs-lg);margin:0 0 var(--sp-3);font-weight:700;letter-spacing:-.01em}

.nav-primary{display:flex;flex-direction:column;gap:4px}
.nav-item{
  display:flex;align-items:center;gap:12px;justify-content:flex-start;
  padding:12px 14px;border-radius:var(--r-md);border:1px solid transparent;
  background:transparent;color:var(--muted);font-weight:600;font-size:var(--fs-base);
  transform:none;text-align:left;
}
.nav-item .ic{font-size:19px;line-height:1;width:22px;text-align:center}
.nav-item:hover{background:var(--panel2);color:var(--text);border-color:transparent;transform:none}
.nav-item.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,var(--panel2)),var(--panel2));
  color:var(--text);border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  box-shadow:inset 3px 0 0 var(--brand);
}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:8px}
.side-note{font-size:var(--fs-xs);color:var(--faint)}

/* ---- Vùng nội dung ---- */
.content{flex:1;min-width:0;max-width:960px;margin:0 auto;
  padding:clamp(16px,3vw,28px);padding-bottom:96px;width:100%}

/* ---- Topbar ---- */
.topbar{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.topbar-head{flex:1;min-width:0}
.topbar h2{margin:0;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em}
.area-desc{margin:4px 0 0;color:var(--muted);font-size:var(--fs-sm)}
.topbar-streak{align-self:center;display:none}

/* ---- Thanh ngôn ngữ ---- */
.lang-bar{margin-top:0}

/* ================= TẦNG 2: Subnav (chế độ trong khu) ================= */
.subnav{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--sp-4);
}
.subnav-item{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:var(--r-full);
  background:var(--panel);border:1px solid var(--border);color:var(--muted);font-weight:600;
}
.subnav-item .ic{font-size:15px}
.subnav-item:hover{color:var(--text);border-color:var(--border2)}
.subnav-item.active{
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--brand-ink);
  border-color:transparent;box-shadow:var(--glow);
}

/* ================= HERO (Học tiếp) ================= */
.hero{
  display:flex;align-items:center;gap:18px;width:100%;text-align:left;
  padding:22px 24px;border-radius:var(--r-lg);border:1px solid transparent;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  box-shadow:var(--shadow-lg);animation:rise .35s var(--ease) both;
}
.hero:hover{filter:brightness(1.04);transform:translateY(-2px)}
.hero-ic{font-size:40px;line-height:1;flex:none;
  width:66px;height:66px;border-radius:18px;display:grid;place-items:center;
  background:rgba(255,255,255,.18)}
.hero-tx{flex:1;min-width:0}
.hero-eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;opacity:.85;font-weight:700}
.hero-title{font-size:var(--fs-lg);font-weight:800;margin-top:3px;letter-spacing:-.01em}
.hero-desc{font-size:var(--fs-sm);opacity:.9;margin-top:5px;line-height:1.5}
.hero-go{font-size:26px;flex:none;opacity:.9}

/* ================= TILE GRID (lối tắt khu học) ================= */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3);margin-top:var(--sp-3)}
.tile{
  display:block;text-align:left;padding:18px;border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--border);
}
.tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 40%,var(--border));box-shadow:var(--glow)}
.tile-ic{font-size:28px;line-height:1}
.tile-tt{font-size:var(--fs-base);font-weight:700;margin-top:10px}
.tile-ds{font-size:var(--fs-sm);color:var(--muted);margin-top:4px;line-height:1.5}

/* ================= BOTTOM BAR (điện thoại) ================= */
.bottombar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  grid-template-columns:repeat(5,1fr);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--bg1) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-top:1px solid var(--border);
}
.bottom-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;border-radius:var(--r-md);border:1px solid transparent;
  background:transparent;color:var(--muted);font-weight:600;font-size:10px;transform:none;
}
.bottom-item .ic{font-size:19px;line-height:1}
.bottom-item .tx{white-space:nowrap}
.bottom-item:hover{transform:none;border-color:transparent}
.bottom-item.active{color:var(--brand);background:var(--panel2)}

.row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}

/* ================= PILL / BADGE-CHIP ================= */
.pill{
  background:var(--panel2);border:1px solid var(--border);border-radius:var(--r-full);
  padding:6px 13px;font-size:var(--fs-sm);font-weight:600;color:var(--text);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
#streakPill{
  background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 22%,var(--panel2)),var(--panel2));
  border-color:color-mix(in srgb,var(--warn) 35%,var(--border));
}

/* ================= CONTROLS ================= */
select,button,input,textarea{font-size:var(--fs-base);font-family:inherit}
select,input[type=text],input[type=number],textarea{
  background:var(--panel);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:11px 13px;outline:none;width:auto;transition:border-color .15s,box-shadow .15s;
}
select{
  appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a4bd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
select:hover{border-color:var(--border2)}
select:focus,input:focus,textarea:focus{border-color:var(--brand);box-shadow:var(--ring)}
::placeholder{color:var(--faint)}

button{
  cursor:pointer;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:11px 17px;font-weight:600;line-height:1;
  background:var(--panel2);color:var(--text);
  transition:transform .12s var(--ease),filter .15s,box-shadow .15s,background .15s,border-color .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
button:hover{border-color:var(--border2);transform:translateY(-1px)}
button:active{transform:translateY(0) scale(.98)}
button:focus-visible{outline:none;box-shadow:var(--ring)}
button:disabled{cursor:default;opacity:.75;transform:none}
button.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--brand-ink);border:none;box-shadow:var(--glow)}
button.primary:hover{filter:brightness(1.06)}
button.ok{background:linear-gradient(135deg,var(--ok),color-mix(in srgb,var(--ok) 70%,var(--brand)));color:var(--ok-ink);border:none}
button.bad{background:linear-gradient(135deg,var(--bad),color-mix(in srgb,var(--bad) 75%,#f43f5e));color:var(--bad-ink);border:none}
button.ghost{background:transparent}
button.icon{padding:10px 12px;border-radius:var(--r-sm);font-size:16px}

/* ================= TABS (segmented nav) ================= */
.tabs{
  display:flex;gap:4px;background:var(--panel);padding:5px;border-radius:var(--r-md);
  border:1px solid var(--border);overflow-x:auto;box-shadow:var(--shadow-sm);
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  flex:1;background:transparent;border:1px solid transparent;white-space:nowrap;min-width:max-content;
  padding:9px 14px;border-radius:10px;color:var(--muted);font-weight:600;transform:none;
}
.tabs button:hover{color:var(--text);background:var(--panel2);border-color:transparent}
.tabs button.active{
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--brand-ink);
  border-color:transparent;box-shadow:var(--glow);
}
.tabs-sep{flex:none;align-self:stretch;width:1px;margin:4px 4px;background:var(--border2);border-radius:1px}
@media(max-width:600px){.tabs-sep{display:none}}

/* ================= CARD ================= */
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(18px,3vw,26px);margin-top:var(--sp-4);box-shadow:var(--shadow);
  animation:rise .35s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ================= STAT GRID ================= */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--sp-3)}
.stat{
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--border);border-radius:var(--r-md);padding:18px 14px;text-align:center;
  transition:transform .15s var(--ease),border-color .15s;
}
.stat:hover{transform:translateY(-2px);border-color:var(--border2)}
.stat .num{font-size:var(--fs-2xl);font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-size:var(--fs-xs);color:var(--muted);margin-top:8px;font-weight:500}

/* ================= FLASHCARD ================= */
.flash{
  min-height:250px;display:grid;place-items:center;text-align:center;cursor:pointer;
  user-select:none;position:relative;margin:var(--sp-4) 0;padding:var(--sp-5);
  background:
    radial-gradient(600px 200px at 50% 0%, color-mix(in srgb,var(--brand) 8%,transparent), transparent 70%),
    var(--panel2);
  border:1px solid var(--border);border-radius:var(--r-lg);
  transition:box-shadow .2s,border-color .2s,transform .2s var(--ease);
}
.flash:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));box-shadow:var(--glow)}
.flash:active{transform:scale(.995)}
.term{font-size:var(--fs-3xl);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.pinyin{font-size:var(--fs-xl);color:var(--brand);margin-top:8px;font-weight:500}
.mean{font-size:var(--fs-xl);color:var(--ok);font-weight:700;margin-top:6px}
.ex{font-size:var(--fs-base);color:var(--muted);margin-top:16px;max-width:540px;line-height:1.6;
  padding-top:14px;border-top:1px dashed var(--border2)}

/* ================= PROGRESS BAR ================= */
.bar{height:12px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--r-full);overflow:hidden;margin:var(--sp-2) 0}
.bar > i{display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  transition:width .5s var(--ease);box-shadow:0 0 12px -2px var(--brand)}

/* ================= QUIZ / DICTATION OPTIONS ================= */
.opt{display:block;width:100%;text-align:left;margin-top:10px;padding:14px 16px;font-weight:500;
  background:var(--panel2);border:1px solid var(--border)}
.opt:hover:not(:disabled){border-color:var(--brand);background:var(--panel3)}
.opt.correct{background:linear-gradient(135deg,var(--ok),color-mix(in srgb,var(--ok) 70%,var(--brand)));color:var(--ok-ink);border:none}
.opt.wrong{background:linear-gradient(135deg,var(--bad),#f43f5e);color:var(--bad-ink);border:none}

/* ================= CHART ================= */
.chart{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:var(--sp-3)}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.chart .col > i{display:block;width:72%;border-radius:8px 8px 3px 3px;min-height:3px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  transition:height .5s var(--ease);box-shadow:0 -4px 14px -6px var(--brand)}
.chart .col:hover > i{filter:brightness(1.15)}
.chart .col span{font-size:11px;color:var(--muted);font-weight:600}

/* ================= BADGES ================= */
.badges{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.badge{
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--border);border-radius:var(--r-md);padding:14px 12px;text-align:center;min-width:104px;
  transition:transform .15s var(--ease),box-shadow .15s;
}
.badge:not(.locked){box-shadow:var(--glow)}
.badge:not(.locked):hover{transform:translateY(-3px) rotate(-1deg)}
.badge.locked{opacity:.4;filter:grayscale(1)}
.badge .ic{font-size:30px;line-height:1}
.badge .nm{font-size:var(--fs-xs);margin-top:8px;font-weight:600}

/* ================= TABLE ================= */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);margin-top:var(--sp-3)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
th{color:var(--muted);font-weight:600;background:var(--panel2);position:sticky;top:0;text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-xs)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--panel2)}

/* ================= TOAST ================= */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);
  background:var(--panel);border:1px solid var(--border2);border-radius:var(--r-md);
  padding:13px 20px;box-shadow:var(--shadow-lg);font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);
  z-index:60;max-width:90%;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= FORM FIELDS ================= */
.field{display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-3)}
.field label{font-size:var(--fs-sm);color:var(--muted);font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:var(--r-full);
  background:var(--panel2);border:1px solid var(--border);padding:0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));border:2px solid var(--panel);box-shadow:var(--shadow-sm);cursor:pointer}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:2px solid var(--panel);
  background:var(--brand);cursor:pointer}

.hidden{display:none !important}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}

/* ================= KHÓA HỌC (LỘ TRÌNH) ================= */
.course-head{margin-top:0}
.seg{display:inline-flex;gap:2px;background:var(--panel2);border:1px solid var(--border);
  border-radius:var(--r-full);padding:3px}
.seg-btn{padding:6px 14px;border-radius:var(--r-full);border:none;background:transparent;
  color:var(--muted);font-weight:700;font-size:var(--fs-sm)}
.seg-btn:hover{transform:none;color:var(--text)}
.seg-btn.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--brand-ink)}

.course-next{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin-top:14px;
  padding:14px 16px;border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 14%,var(--panel2)),var(--panel2));
}
.course-next:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.cn-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--brand-ink);font-size:15px}
.cn-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.cn-lbl{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.cn-tt{font-size:var(--fs-base);font-weight:700;margin-top:2px}
.cn-go{font-size:20px;color:var(--brand);flex:none}

.stage{margin-top:var(--sp-5)}
.stage-head{display:flex;align-items:center;gap:12px;margin-bottom:var(--sp-3)}
.stage-ic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;
  font-size:24px;background:var(--panel2);border:1px solid var(--border)}
.stage-tx{flex:1;min-width:0}
.stage-name{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em}
.stage-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:1px}
.stage-count{align-self:center}

/* Đường lộ trình bài học */
.path{display:flex;flex-direction:column;gap:0;position:relative;padding-left:6px}
.lesson{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--panel);position:relative;margin:6px 0;
}
.lesson::before{content:"";position:absolute;left:25px;top:-6px;height:6px;width:2px;background:var(--border)}
.lesson:first-child::before{display:none}
.lesson-dot{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:var(--fs-base);background:var(--panel2);border:1px solid var(--border);color:var(--muted);
}
.lesson-body{flex:1;min-width:0;display:flex;flex-direction:column}
.lesson-topic{font-weight:700;font-size:var(--fs-base)}
.lesson-meta{font-size:var(--fs-sm);color:var(--muted);margin-top:1px}

.lesson.open:hover,.lesson.doing:hover{transform:translateX(3px);border-color:var(--brand);box-shadow:var(--glow)}
.lesson.doing{border-color:color-mix(in srgb,var(--brand) 35%,var(--border))}
.lesson.doing .lesson-dot{background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--brand-ink);border:none}
.lesson.done .lesson-dot{background:var(--ok);color:var(--ok-ink);border:none}
.lesson.done .lesson-topic{color:var(--muted)}
.lesson.locked{opacity:.55;cursor:not-allowed}
/* Thành thạo (đạt ngưỡng SM-2): viền vàng + sao */
.lesson-star{font-size:var(--fs-sm);margin-left:6px;vertical-align:middle}
.lesson.mastered{border-color:color-mix(in srgb,var(--warn) 45%,var(--border))}
.lesson.mastered .lesson-dot{
  background:linear-gradient(135deg,var(--warn),#f59e0b);color:#3b2a05;border:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent);
}
.lesson.locked:hover{transform:none}

/* ================= NGỮ PHÁP ================= */
.gr-head{margin-top:0}
.gr-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.gr-chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-full);
  background:var(--panel2);border:1px solid var(--border);color:var(--muted);
  font-weight:600;font-size:var(--fs-sm);
}
.gr-chip:hover{color:var(--text);border-color:var(--border2);transform:none}
.gr-chip.active{
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--brand-ink);border:none;
}
.gr-chip-lv{
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--text) 12%,transparent);
}
.gr-chip.active .gr-chip-lv{background:color-mix(in srgb,#000 18%,transparent)}

.gr-body{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-3)}
.gr-rule{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-sm);
}
.gr-rule-title{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em}
.gr-rule-explain{color:var(--muted);margin-top:6px;line-height:1.6;font-size:var(--fs-sm)}
.gr-formula{
  margin-top:12px;padding:11px 14px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--brand) 10%,var(--panel2));
  border:1px dashed color-mix(in srgb,var(--brand) 40%,var(--border));
  font-family:"Noto Sans SC",ui-monospace,monospace;font-weight:600;font-size:var(--fs-sm);
  color:var(--text);
}
.gr-examples{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.gr-ex{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);
  background:var(--panel2);border:1px solid var(--border)}
.gr-ex-spk{flex:none;padding:6px 8px;font-size:14px}
.gr-ex-tx{flex:1;min-width:0}
.gr-ex-s{font-weight:700;font-size:var(--fs-base)}
.gr-ex-m{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.gr-tip{
  margin-top:12px;padding:10px 13px;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.55;
  background:color-mix(in srgb,var(--warn) 12%,var(--panel2));
  border-left:3px solid var(--warn);color:var(--text);
}

/* ================= FOOTER ================= */
footer{
  max-width:920px;margin:var(--sp-6) auto var(--sp-5);padding:0 clamp(16px,3vw,28px);
  color:var(--faint);font-size:var(--fs-xs);text-align:center;
}

/* ================= RESPONSIVE ================= */
/* Máy tính bảng & điện thoại: chuyển sidebar → bottom bar */
@media(max-width:820px){
  .sidebar{display:none}
  .bottombar{display:grid}
  .app{display:block}
  .content{max-width:640px;margin:0 auto;padding-bottom:88px}
  .topbar-streak{display:inline-flex}
}
@media(max-width:600px){
  .grid2{grid-template-columns:1fr}
  .term{font-size:var(--fs-2xl)}
  .tile-grid{grid-template-columns:1fr 1fr}
  .hero{padding:18px}
  .hero-ic{width:54px;height:54px;font-size:32px}
  .field.inline-lang{flex:1}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}