:root{
  --bg:#f5f6fa;--bg2:#eef0f7;--card:#fff;--text:#1a2030;--muted:#687087;--border:#e4e7ef;--hover:#f0f2f8;
  --primary:#5b5bf0;--primary2:#8b5cf6;--soft:color-mix(in srgb,var(--primary) 10%,var(--card));
  --code:#0f1424;--codefg:#e2e8f0;--j:#16a34a;--m:#d97706;--s:#dc2626;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);--shadow:0 1px 3px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.05);
  --shadow-lg:0 8px 28px rgba(16,24,40,.12);
  --top:111px;--r:14px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme=dark]{
  --bg:#0c0f16;--bg2:#121722;--card:#151a25;--text:#e6e9f2;--muted:#8d95aa;--border:#252c3b;--hover:#1c2230;
  --primary:#8b8dff;--primary2:#b794ff;--code:#0a0d14;
  --shadow-sm:none;--shadow:0 1px 0 rgba(255,255,255,.02);--shadow-lg:0 12px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in srgb,var(--primary) 28%,transparent)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
a{color:var(--primary)}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--border)}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;max-width:1240px;margin:0 auto}
.topbar h1{font-size:19px;margin:0;flex:1;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:10px;font-size:17px;width:40px;height:40px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;box-shadow:var(--shadow-sm)}
.icon-btn:hover{background:var(--hover);border-color:color-mix(in srgb,var(--primary) 35%,var(--border))}
.icon-btn:active{transform:scale(.95)}
.icon-btn.lang-btn{width:auto;padding:0 12px;font-size:13px;font-weight:700;letter-spacing:.04em}

/* ---- tabs ---- */
.tabs-wrap{position:relative;max-width:1240px;margin:0 auto}
.tabs{display:flex;gap:4px;padding:4px 12px 8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:7px 14px;white-space:nowrap;color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;border-radius:999px;transition:background .15s,color .15s}
.tab:hover{background:var(--hover);color:var(--text)}
.tab.active{color:var(--primary);background:var(--soft);font-weight:650;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 22%,transparent)}
.tabs-arrow{position:absolute;top:0;bottom:0;width:40px;border:0;padding:0;cursor:pointer;font-size:24px;line-height:1;color:var(--primary);z-index:2}
.tabs-arrow[hidden]{display:none}
.tabs-arrow.left{left:0;background:linear-gradient(to right,var(--card) 55%,transparent)}
.tabs-arrow.right{right:0;background:linear-gradient(to left,var(--card) 55%,transparent)}

/* ---- layout + sidebar ---- */
.layout{display:flex;max-width:1240px;margin:0 auto}
.sidebar{width:280px;flex-shrink:0;padding:18px 12px 18px 16px;position:sticky;top:var(--top);align-self:flex-start;height:calc(100vh - var(--top));overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.sidebar a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14.5px;transition:background .12s,color .12s;margin:1px 0}
.sidebar a:hover{background:var(--hover)}
.sidebar a.active{background:var(--soft);color:var(--primary);font-weight:600;box-shadow:inset 3px 0 0 var(--primary)}
.sidebar a small{margin-left:auto;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);background:var(--bg2);padding:1px 8px;border-radius:999px}
.sidebar a.active small{background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary)}
.sidebar .grp{margin-top:14px;font-weight:700}
.sidebar .sub{padding-left:24px;font-size:14px}
.sidebar a .tick{margin-left:auto;color:var(--j);font-weight:700}
.side-foot{margin:18px 12px 0;padding-top:12px;border-top:1px solid var(--border)}
.link-btn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:0}
.link-btn:hover{color:var(--s);text-decoration:underline}
.main{flex:1;min-width:0;padding:22px 24px 80px}

/* ---- controls ---- */
.controls{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
#search{width:100%;padding:11px 14px 11px 40px;font-size:15.5px;border:1px solid var(--border);border-radius:10px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23878fa5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m16 16-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;color:var(--text);transition:border-color .15s,box-shadow .15s}
#search:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip,.btn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s;font-family:inherit}
.chip:hover,.btn:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--border));background:var(--hover)}
.chip:active,.btn:active{transform:scale(.97)}
.btn{border-radius:10px;text-decoration:none;display:inline-block}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.chip.lv-junior.active{background:var(--j);border-color:var(--j)}.chip.lv-mid.active{background:var(--m);border-color:var(--m)}.chip.lv-senior.active{background:var(--s);border-color:var(--s)}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.spacer{flex:1}.muted{color:var(--muted);font-size:14px}
h2{margin:26px 0 10px;letter-spacing:-.02em}
#topicTitle{font-size:24px}

.progress{height:8px;background:var(--bg2);border-radius:99px;overflow:hidden;margin-bottom:18px}
.progress div{height:100%;width:0;background:linear-gradient(90deg,#22c55e,#10b981);border-radius:99px;transition:width .4s ease}

/* ---- Q&A cards ---- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .2s,transform .2s;scroll-margin-top:130px}
.card:hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--border));box-shadow:var(--shadow-lg)}
.card.done{box-shadow:inset 4px 0 0 var(--j),var(--shadow)}
.card.done .card-head h3{color:var(--muted)}
.card-head{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;cursor:pointer;user-select:none}
.card-head::after{content:"";flex-shrink:0;width:8px;height:8px;margin:7px 4px 0 0;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.card.open .card-head::after{transform:rotate(-135deg);margin-top:11px}
.card-head h3{margin:0;font-size:16px;font-weight:600;flex:1;line-height:1.5}
.badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:99px;flex-shrink:0;margin-top:2px}
.badge.junior{background:color-mix(in srgb,var(--j) 14%,transparent);color:var(--j)}
.badge.mid{background:color-mix(in srgb,var(--m) 16%,transparent);color:var(--m)}
.badge.senior{background:color-mix(in srgb,var(--s) 14%,transparent);color:var(--s)}
.star{background:none;border:0;font-size:19px;line-height:1.3;cursor:pointer;color:var(--border);padding:0 2px;transition:color .15s,transform .15s}
.star:hover{color:#f59e0b;transform:scale(1.15)}
.star.on{color:#f59e0b}
.answer{display:none;padding:2px 20px 18px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--bg) 40%,var(--card))}
.card.open .answer{display:block;animation:reveal .22s ease}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.answer p{margin:12px 0}.answer ul{padding-left:22px}.answer li{margin:4px 0}
.answer code,.doc code{font-family:var(--mono);background:color-mix(in srgb,var(--primary) 9%,var(--bg2));color:color-mix(in srgb,var(--primary) 60%,var(--text));padding:1px 6px;border-radius:6px;font-size:.86em}
.answer pre{background:var(--code);color:var(--codefg);padding:14px 16px;border-radius:10px;overflow:auto;font-size:13px;line-height:1.6;border:1px solid #ffffff10}
.answer pre code,.doc pre code{background:none;padding:0;color:inherit;font-size:inherit}
.answer-foot{display:flex;gap:8px;margin-top:14px}
.empty{text-align:center;color:var(--muted);padding:56px 0}
.backdrop{display:none}
#menuBtn{display:none}

/* ---- docs (Android, Ads, CI) ---- */
.doc{max-width:820px;font-size:16.5px;line-height:1.75}
.doc h2.doc-title{margin:6px 0 6px;font-size:30px;line-height:1.25;letter-spacing:-.025em}
.doc .doc-sub{color:var(--muted);margin:0 0 18px;font-size:13.5px;text-transform:none}
.doc h3.s2{margin:36px 0 10px;font-size:21px;padding-bottom:8px;border-bottom:1px solid var(--border);letter-spacing:-.015em}
.doc h4.s3{margin:22px 0 6px;font-size:16.5px;color:var(--primary)}
.doc p{margin:12px 0}.doc ul,.doc ol{padding-left:24px}.doc li{margin:6px 0}
.doc li::marker{color:var(--primary)}
.note{background:var(--soft);border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);border-left:4px solid var(--primary);padding:12px 16px;border-radius:10px;margin:14px 0;font-size:15.5px}
.codewrap{position:relative;margin:14px 0}
.codewrap pre{background:var(--code);color:var(--codefg);padding:16px;border-radius:12px;overflow:auto;font:13px/1.6 var(--mono);margin:0;tab-size:2;border:1px solid #ffffff10}
.codewrap .copy{position:absolute;top:8px;right:8px;font-size:12px;padding:3px 10px;border-radius:7px;border:1px solid #ffffff22;background:#ffffff12;color:#cbd5e1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s;font-family:inherit}
.codewrap:hover .copy,.codewrap .copy:focus-visible{opacity:1}
.codewrap .copy:hover{background:#ffffff24}
@media(hover:none){.codewrap .copy{opacity:.85}}
.tbl{overflow-x:auto;margin:14px 0;border:1px solid var(--border);border-radius:12px}
.tbl table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.55}
.tbl th,.tbl td{border-bottom:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.tbl th{background:var(--bg2);color:var(--text);font-weight:650;font-size:13.5px}
.tbl tr:last-child td{border-bottom:0}
.tbl td+td,.tbl th+th{border-left:1px solid var(--border)}
.tbl tr:hover td{background:var(--hover)}
.pager{display:flex;gap:10px;justify-content:space-between;margin:40px 0 0;flex-wrap:wrap}
.pager .btn{max-width:48%;text-align:left;padding:12px 16px;border-radius:12px;font-size:14px;box-shadow:var(--shadow)}
.pager .btn:last-child{text-align:right;margin-left:auto}
.tk-c{color:#7c8aa5;font-style:italic}.tk-s{color:#a5e3a8}.tk-k{color:#c4a1ff}
.doc-read{margin-top:28px}
.doc-read .btn{background:var(--soft);border-color:color-mix(in srgb,var(--primary) 30%,transparent);color:var(--primary);font-weight:600}

/* ---- global search ---- */
.gs{position:fixed;inset:0;z-index:60;background:rgba(8,10,18,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:8vh 12px}
.gs[hidden]{display:none}
.gs-box{background:var(--card);color:var(--text);width:min(760px,100%);max-height:80vh;border-radius:16px;border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.35);animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.gs-head{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--border)}
.gs-head input{flex:1;padding:11px 14px;font-size:16px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text)}
.gs-head input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.gs-info{padding:8px 16px;font-size:12.5px;color:var(--muted)}
.gs-list{overflow:auto;padding:0 8px 12px}
.gs-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:10px 12px;color:var(--text);cursor:pointer;font:inherit;border-left:3px solid transparent}
.gs-item:hover{background:var(--hover)}
.gs-item.sel{background:var(--soft);border-left-color:var(--primary)}
.gs-tag{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);margin-right:6px;vertical-align:middle}
.gs-title{font-weight:600}
.gs-snip{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.gs mark{background:#facc1555;color:inherit;border-radius:3px;padding:0 1px}

/* ---- tab Tiếng Anh ---- */
.eng-grp{margin:16px 12px 4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.eng h3{margin:30px 0 10px;letter-spacing:-.015em}
.eng-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:10px 0}
.eng-bar label{font-size:14px;display:flex;gap:6px;align-items:center}
.eng-bar select{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-family:inherit}
.eng-btn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:8px;padding:3px 10px;font-size:14px;cursor:pointer;margin-right:4px;transition:background .15s,border-color .15s;font-family:inherit}
.eng-btn:hover{background:var(--hover);border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.eng-btn.rec-on{background:var(--s);color:#fff;border-color:var(--s);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--s) 20%,transparent)}}
.eng-vocab td.nw{white-space:nowrap}
.ipa{font-family:"Segoe UI",Arial,sans-serif;color:var(--muted)}
.eng-dialogue .dl{display:flex;gap:8px;align-items:baseline;padding:8px 10px;border-radius:10px;flex-wrap:wrap}
.eng-dialogue .dl.b{background:var(--bg2)}
.eng-dialogue .who{font-weight:700;color:var(--primary);min-width:1.2em}
.eng-dialogue .vi{color:var(--muted);flex-basis:100%;padding-left:2em;font-size:14px}
.eng-dialogue.script-hidden .en{filter:blur(6px);user-select:none}
.eng-dialogue.vi-hidden .vi{display:none}
.eng-q,.eng-dict,.eng-sh,.eng-speak{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:12px 0;box-shadow:var(--shadow)}
.eng-q .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.eng-opt{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:6px 15px;cursor:pointer;font-size:15px;transition:background .15s,border-color .15s;font-family:inherit}
.eng-opt:hover{border-color:var(--primary)}
.eng-opt.right{background:#16a34a;border-color:#16a34a;color:#fff}
.eng-opt.wrong{background:#dc2626;border-color:#dc2626;color:#fff}
.eng-q .fb{margin-top:8px;font-size:14px}
.eng-pat{margin:10px 0}.eng-pat ul{margin:4px 0 0}
.eng-input{width:100%;margin:8px 0;padding:10px 12px;font-size:16px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-family:inherit}
.eng-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.eng-diff span{display:inline-block;padding:1px 6px;margin:2px;border-radius:6px}
.eng-diff .ok{background:#16a34a33}.eng-diff .bad{background:#dc262633;text-decoration:underline}
.eng-score{font-size:14px;margin:4px 0}
.eng-sh .ctl,.eng-speak .ctl{margin:8px 0}
.eng-role .rl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border-radius:10px}
.eng-role .rl.b{background:var(--bg2)}
.eng-role .who{font-weight:700;color:var(--primary)}
.eng-role .cue{font-weight:600}
.eng-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px 22px;text-align:center;max-width:520px;margin:18px auto;box-shadow:var(--shadow-lg)}
.eng-card .big{font-size:32px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.eng-card .ctl{margin:12px 0}
.eng-card .ans{margin:12px 0}
audio{max-width:100%;margin-top:6px}

/* ---- mobile ---- */
@media(max-width:820px){
  #menuBtn{display:block}
  .sidebar{position:fixed;top:var(--top);left:0;bottom:0;height:auto;width:290px;max-width:86vw;background:var(--card);z-index:30;transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);border-right:1px solid var(--border);box-shadow:var(--shadow-lg)}
  body.menu-open .sidebar{transform:none}
  body.menu-open .backdrop{display:block;position:fixed;inset:var(--top) 0 0 0;background:rgba(8,10,18,.45);backdrop-filter:blur(2px);z-index:25}
  .main{padding:14px 12px 70px}
  .controls{padding:12px}
  .topbar h1{font-size:17px}
  .doc{font-size:16px}
  .doc h2.doc-title{font-size:24px}
  .tab{padding:6px 12px;font-size:14px}
  .answer{padding:2px 14px 16px}
  .gs{padding:0}.gs-box{max-height:100vh;height:100vh;border-radius:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}