/* ============ NUVORA — bảng màu "bình minh mới" ============ */
:root{
  /* ===== Bauhaus / Braun — "Weniger, aber besser" ===== */
  --accent:#C25320; --accent-d:#A83F1D;          /* cam-gạch Braun = thương hiệu */
  --violet:#C25320; --violet-d:#A83F1D;           /* tên token cũ giữ nguyên, trỏ về accent */
  --coral:#A83F1D; --coral-2:#C25320;
  --gold:#D69A2E; --green:#2E7D5B; --red:#BE3A2B; --blue:#4B6A8F;
  --ink:#16120C; --muted:#85806F; --line:#E3DCCB;
  --bg:#F3EFE5; --card:#FFFFFF;
  --paper:#F3EFE5; --paper-2:#ECE6D7; --tint:#F4EFE3; --tint-2:#F1ECDE;
  --brand:#C25320;
  --dawn:linear-gradient(165deg,#241F16 0%,#16120C 100%);  /* header mực than ấm */
  --shadow:0 8px 24px rgba(30,24,16,.10);
  --radius:16px;
  --font-cond:'Oswald','Archivo',sans-serif;
  font-synthesis:none;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:'Archivo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center; min-height:100dvh;
  overflow:hidden;
}

/* khung điện thoại */
#app{
  width:100%; max-width:440px; height:100dvh; max-height:940px;
  background:var(--card); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(30,24,16,.25);
}
@media(min-width:480px){ #app{ border-radius:34px; height:92dvh } }

.screen{ position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .28s ease, transform .28s ease; }
.screen.active{ opacity:1; pointer-events:auto; transform:none }
.scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch }
.scroll::-webkit-scrollbar{width:0}

/* ---------- nút ---------- */
.btn{ border:0; border-radius:16px; padding:15px 20px; font:inherit; font-weight:800;
  cursor:pointer; width:100%; transition:transform .08s, filter .15s; letter-spacing:.2px}
.btn:active{ transform:translateY(2px) }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 8px 0 var(--violet-d) }
.btn-primary:active{ box-shadow:0 4px 0 var(--violet-d) }
.btn-ghost{ background:#fff; color:var(--violet); border:2px solid var(--line) }
.btn-green{ background:var(--green); color:#fff; box-shadow:0 8px 0 #259469 }
.btn-green:active{ box-shadow:0 4px 0 #259469 }
.btn:disabled{ filter:grayscale(.6) opacity(.6); cursor:not-allowed; box-shadow:none }
.btn-sm{ padding:10px 14px; border-radius:12px; width:auto }

/* ================= SPLASH — hero ảnh Đức (học + kết nối) ================= */
#splash{ background:var(--paper); color:var(--ink); text-align:center; padding:0; justify-content:flex-end; overflow:hidden }
.splash-hero{ position:absolute; left:0; right:0; top:0; height:100%; animation:hero-in 1.1s ease both }
.splash-hero img{ width:100%; height:100%; object-fit:cover; object-position:center center }
.splash-hero::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,18,12,.05) 0%, transparent 24%, transparent 66%, rgba(243,239,229,.22) 100%) }
@keyframes hero-in{ from{ opacity:0; transform:scale(1.045) } to{ opacity:1; transform:none } }
.splash-body{ position:relative; z-index:2; width:100%; padding:56px 26px calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; animation:body-in .8s .15s ease both;
  background:linear-gradient(180deg, transparent 0, rgba(243,239,229,.50) 30px, rgba(243,239,229,.90) 70px, var(--paper) 140px) }
@keyframes body-in{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.logo{ font-family:'Archivo',sans-serif; font-weight:800; font-size:46px; letter-spacing:-1.4px;
  text-transform:lowercase; color:var(--ink); line-height:1 }
.logo .dot{ color:var(--accent); -webkit-text-fill-color:var(--accent) }
.logo-eyebrow{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:3px;
  font-size:11px; font-weight:600; color:var(--accent); margin-top:10px }
.tagline{ color:var(--muted); font-size:14px; margin-top:7px; font-weight:500; letter-spacing:.2px; max-width:320px; line-height:1.55 }
@media(max-height:700px){ .logo{ font-size:38px } }

/* ================= ONBOARD HEADER ================= */
.topbar{ display:flex; align-items:center; gap:12px; padding:16px 18px; }
.topbar .back{ width:38px;height:38px;border-radius:12px;border:2px solid var(--line);
  background:#fff;display:grid;place-items:center;cursor:pointer;font-size:20px;color:var(--muted)}
.progress{ flex:1; height:14px; background:var(--line); border-radius:10px; overflow:hidden }
.progress > i{ display:block;height:100%;background:var(--brand);border-radius:10px;transition:width .3s;width:0}
.step-title{ font-size:22px; font-weight:800; padding:6px 22px 0 }
.step-sub{ color:var(--muted); padding:2px 22px 12px; font-weight:600; font-size:14px }

/* ================= CHARACTER CREATE ================= */
.stage{ display:flex; flex-direction:column; align-items:center; padding:6px 16px 0 }
.avatar-frame{ width:230px;height:230px;border-radius:30px; position:relative;
  background:radial-gradient(circle at 50% 30%, #fff 0%, #F1ECDE 70%);
  box-shadow:var(--shadow); display:grid; place-items:center; overflow:hidden;
  border:3px solid #fff }
.avatar-frame::after{ content:''; position:absolute; inset:0; border-radius:28px;
  background:radial-gradient(circle at 50% 120%, rgba(194,83,32,.18), transparent 60%) }
.nv-avatar{ width:212px; height:212px; position:relative; z-index:1 }
.char-name-tag{ margin-top:10px; font-weight:800; font-size:18px; color:var(--violet) }

/* hàng biểu cảm */
.exprs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:12px 16px 4px }
.expr-btn{ border:0; background:#fff; border:2px solid var(--line); border-radius:14px;
  padding:8px 10px; font-size:20px; cursor:pointer; transition:.12s; line-height:1;
  display:flex; flex-direction:column; align-items:center; gap:3px; min-width:52px }
.expr-btn small{ font-size:10px; font-weight:700; color:var(--muted) }
.expr-btn.active{ border-color:var(--violet); background:#F4EFE3; transform:translateY(-2px) }

/* panel tuỳ biến */

.seg{ display:flex; background:var(--line); border-radius:14px; padding:4px; margin-bottom:14px }
.seg button{ flex:1; border:0; background:transparent; padding:10px; border-radius:11px;
  font:inherit; font-weight:800; color:var(--muted); cursor:pointer; transition:.15s }
.seg button.active{ background:#fff; color:var(--violet); box-shadow:0 2px 8px rgba(0,0,0,.08) }

.field-label{ font-weight:800; font-size:13px; color:var(--muted); margin:14px 2px 8px; text-transform:uppercase; letter-spacing:.6px }


/* name input */
.name-input{ width:100%; border:2px solid var(--line); border-radius:16px; padding:15px 16px;
  font:inherit; font-weight:800; font-size:18px; text-align:center; color:var(--ink); outline:none }
.name-input:focus{ border-color:var(--violet) }

.foot{ padding:14px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff }

/* ================= HOME / PATH ================= */
.home-head{ background:var(--dawn); color:#fff; padding:18px 18px 22px;
  border-radius:0 0 28px 28px }
.stat-row{ display:flex; gap:10px; margin-top:14px }
.stat{ flex:1; background:rgba(255,255,255,.16); border-radius:16px; padding:10px; text-align:center;
  backdrop-filter:blur(6px) }
.stat b{ font-size:20px; display:block } .stat small{ font-size:11px; opacity:.85; font-weight:700 }
.greet{ display:flex; align-items:center; gap:12px }
.greet .ava{ width:60px;height:60px;border-radius:50%;background:#fff;overflow:hidden;display:grid;place-items:center;flex:0 0 60px;border:3px solid rgba(255,255,255,.5)}
.greet .ava svg{ width:64px;height:64px;transform:translateY(4px) }
.greet h2{ margin:0; font-size:18px } .greet p{ margin:2px 0 0; opacity:.9; font-size:13px; font-weight:600 }

.unit-banner{ margin:16px; background:var(--brand); color:#fff; border-radius:18px; padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center; box-shadow:var(--shadow) }
.unit-banner small{ opacity:.85; font-weight:700 } .unit-banner b{ font-size:17px }


/* tab bar */
.tabbar{ display:flex; border-top:1px solid var(--line); background:#fff; padding-bottom:env(safe-area-inset-bottom) }
.tabbar button{ flex:1; border:0; background:transparent; padding:12px 0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font-weight:800; font-size:11px }
.tabbar button.active{ color:var(--violet) } .tabbar button svg{ width:24px;height:24px }

/* ================= LESSON ================= */
#lesson{ background:#fff }
.lesson-top{ display:flex; align-items:center; gap:14px; padding:calc(14px + env(safe-area-inset-top)) 18px 12px; position:relative; z-index:3; background:#fff }
.lesson-top .x{ font-size:24px; color:var(--muted); background:none; border:0; cursor:pointer }
.hearts{ color:var(--red); font-weight:800; display:flex; align-items:center; gap:4px }
.q-area{ flex:1; padding:18px 22px 8px; overflow-y:auto }
.q-prompt{ font-size:22px; font-weight:800; margin:10px 0 6px }
.q-hint{ color:var(--muted); font-weight:700; margin-bottom:18px }

.options{ display:flex; flex-direction:column; gap:12px }
.opt{ border:2px solid var(--line); border-bottom-width:4px; background:#fff; border-radius:16px;
  padding:16px; font:inherit; font-weight:800; font-size:17px; cursor:pointer; text-align:left; transition:.1s }
.opt:active{ transform:translateY(1px) }
.opt.sel{ border-color:var(--violet); background:#F4EFE3; color:var(--violet) }
.opt.correct{ border-color:var(--green); background:#e9f9f1; color:#1e8c63 }
.opt.wrong{ border-color:var(--red); background:#ffeded; color:#c33 }
.tiles{ display:flex; flex-wrap:wrap; gap:10px }
.tile{ border:2px solid var(--line); border-bottom-width:4px; background:#fff; border-radius:14px;
  padding:12px 16px; font-weight:800; cursor:pointer; font-size:16px }
.tile.used{ opacity:.35; pointer-events:none }
.answer-line{ min-height:54px; border-bottom:3px dashed var(--line); display:flex; gap:8px; flex-wrap:wrap;
  align-items:center; margin-bottom:18px; padding:6px 0 }

.check-bar{ padding:16px 18px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line) }
.check-bar.ok{ background:#e9f9f1 } .check-bar.no{ background:#ffeded }
.feedback{ display:flex; align-items:center; gap:10px; font-weight:800; margin-bottom:10px }
.feedback.ok{ color:#1e8c63 } .feedback.no{ color:#c33 }

/* ================= MODAL / TOAST ================= */
.center-screen{ align-items:center; justify-content:center; text-align:center; padding:30px; background:var(--dawn); color:#fff }
.center-screen .big-ava{ width:200px;height:200px;border-radius:30px;background:rgba(255,255,255,.15);display:grid;place-items:center;margin-bottom:10px }
.center-screen .big-ava svg{ width:190px;height:190px }
.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.confetti i{ position:absolute; width:10px;height:14px; top:-20px; border-radius:2px; animation:fall linear forwards }
@keyframes fall{ to{ transform:translateY(120vh) rotate(540deg) } }
.reward-row{ display:flex; gap:14px; justify-content:center; margin:18px 0 }
.reward{ background:rgba(255,255,255,.15); border-radius:16px; padding:14px 18px; font-weight:800 }
.reward b{ font-size:26px; display:block }

.hidden{ display:none !important }
.muted{ color:var(--muted) }

/* ================= MIRA — LINH VẬT ĐỘNG VIÊN (ảnh thật, KHÔNG nền) ================= */
.mira-port{ width:100%; height:100%; object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 10px 18px rgba(30,24,16,.28)); animation:mira-float 4.5s ease-in-out infinite; }
@keyframes mira-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
/* chỉ các khung TRÒN ở home/đặt tên mới crop từ đỉnh đầu */
#home-ava .mira-port, .greet .ava .mira-port, #avatar-name-preview .mira-port,
.avatar-frame .mira-port{ object-position:top center; }

/* ----- CẢNH CÂU HỎI kiểu Duolingo: nhân vật trái + bong bóng phải ----- */
.q-scene{ display:flex; align-items:flex-end; gap:8px; margin:8px 0 20px; }
.q-mascot{ position:relative; flex:0 0 116px; height:150px; display:flex; align-items:flex-end; justify-content:center; }
.q-mascot .mira-port{ height:150px; width:100%; }
.q-mascot svg{ width:118px; height:118px; }
.q-mascot.bounce{ animation:mira-bounce .6s ease; }
@keyframes mira-bounce{ 0%,100%{ transform:translateY(0) } 35%{ transform:translateY(-14px) } 60%{ transform:translateY(-4px) } }
.q-mascot.shake{ animation:mira-shk .5s ease; }
@keyframes mira-shk{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-7px) rotate(-1.5deg) } 75%{ transform:translateX(7px) rotate(1.5deg) } }

.q-speech{ position:relative; flex:1; align-self:center; background:#F4EFE3; border:2px solid #E7E0CD;
  border-radius:16px; padding:13px 15px; font-weight:800; font-size:19px; color:#241F16;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:54px; }
.q-speech::before{ content:''; position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  border:8px solid transparent; border-right-color:#E7E0CD; }
.q-speech::after{ content:''; position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  border:7px solid transparent; border-right-color:#F4EFE3; }
.q-speech .de-word{ color:var(--violet); font-size:24px; letter-spacing:.3px;
  border-bottom:3px dotted #EAC6AE; padding-bottom:2px; }
.spk{ flex:0 0 auto; width:40px; height:40px; border:0; border-radius:12px; cursor:pointer;
  background:var(--violet); color:#fff; font-size:18px; box-shadow:0 3px 0 #A83F1D; }
.spk:active{ transform:translateY(2px); box-shadow:none; }

/* bong bóng thoại nhỏ của Mira (động viên đúng/sai) — INLINE trên đầu nhân vật */
.mascot-say{ position:absolute; bottom:calc(100% - 6px); left:50%; transform:translateX(-46%) translateY(6px);
  background:#fff; color:#241F16; font-weight:800; font-size:13px; line-height:1.25; padding:8px 11px;
  border-radius:14px; box-shadow:0 8px 20px rgba(30,24,16,.25); width:180px; max-width:46vw; text-align:center;
  opacity:0; pointer-events:none; transition:.28s; z-index:4; }
.mascot-say.show{ opacity:1; transform:translateX(-46%) translateY(0); }

/* lấp lánh INLINE (gắn vào .q-mascot / khung ăn mừng — KHÔNG fixed) */
.mira-spark{ position:absolute; bottom:8%; border-radius:50%; pointer-events:none;
  box-shadow:0 0 10px rgba(255,217,138,.8); animation:mira-rise 1.4s linear forwards; }
@keyframes mira-rise{ 0%{ transform:translateY(0) scale(.4); opacity:0 } 12%{ opacity:1 }
  100%{ transform:translateY(-150px) scale(1.15); opacity:0 } }

/* ----- MÀN HOÀN THÀNH: clip ăn mừng căn GIỮA, không lệch ----- */
#complete-ava.photo{ width:240px; height:300px; background:transparent; border-radius:0;
  display:flex; align-items:center; justify-content:center; overflow:visible; }
.mira-clip{ width:100%; height:100%; object-fit:contain; border-radius:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.4); animation:mira-popin .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes mira-popin{ 0%{ transform:scale(.7); opacity:0 } 100%{ transform:scale(1); opacity:1 } }

/* ----- nhãn loại bài + tiêu đề kiểu Duolingo ----- */
.q-kind{ display:inline-flex; align-items:center; gap:6px; margin:6px 0 4px; padding:5px 12px;
  background:#F1ECDE; color:var(--violet); font-weight:900; font-size:12px;
  letter-spacing:.6px; border-radius:10px; text-transform:uppercase; }
.q-title{ font-size:23px; font-weight:800; margin:6px 0 14px; line-height:1.2; }
.q-hint.big-vi{ font-size:21px; color:#241F16; font-weight:800; margin:2px 0 6px; }
.word-bank{ margin-top:6px; }
.q-speech.listen{ justify-content:flex-start; }
.spk.big{ width:60px; height:60px; font-size:26px; border-radius:16px; }

/* ================= SỔ TAY TỪ VỰNG ================= */
.vocab-scroll{ padding-bottom:90px }
.vhead{ display:flex; align-items:center; gap:6px; padding:calc(12px + env(safe-area-inset-top)) 4px 6px; font-family:'Archivo'; font-size:24px }
.vhead-back{ font-size:28px; line-height:1; background:none; border:0; cursor:pointer; color:var(--muted); padding:0 2px; margin-left:-2px }
.vbtn-create{ width:100%; border:0; background:#F4EFE3; color:var(--violet); font:inherit; font-weight:800;
  font-size:16px; padding:15px; border-radius:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:6px }
.vbtn-create span{ background:var(--violet); color:#fff; width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:14px }
.vsec-title{ display:flex; justify-content:space-between; align-items:center; margin:18px 2px 10px; font-weight:800; font-size:18px }
.vbar{ height:8px; background:#eee; border-radius:5px; overflow:hidden; margin-top:8px }
.vbar i{ display:block; height:100%; background:var(--violet); border-radius:5px }
.fav-card{ background:#fff; border:2px solid var(--line); border-radius:16px; padding:14px 16px; cursor:pointer; box-shadow:0 4px 14px rgba(30,24,16,.06) }
.fav-card small{ display:block; color:var(--muted); font-weight:700; margin-top:2px }
.set-row{ display:flex; gap:12px; overflow-x:auto; padding:2px 2px 6px; scroll-snap-type:x mandatory }
.set-card{ scroll-snap-align:start; flex:0 0 70%; max-width:280px; background:#fff; border:1px solid var(--line);
  border-left:6px solid var(--c,#C25320); border-radius:16px; padding:16px; cursor:pointer; box-shadow:0 5px 16px rgba(30,24,16,.07) }
.set-card b{ font-size:18px } .set-card small{ display:block; color:var(--muted); font-weight:700; margin:4px 0 2px }
.set-card .vbar i{ background:var(--c,#C25320) }

/* màn 1 bộ từ */
.vset-top{ display:flex; align-items:center; gap:10px; padding:calc(12px + env(safe-area-inset-top)) 16px 12px; border-bottom:1px solid var(--line) }
.vset-top b{ flex:1; font-size:19px } .vcount{ color:var(--muted); font-weight:800 }
.vback{ font-size:24px; background:none; border:0; cursor:pointer; color:var(--muted) }
.word-item{ display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--line) }
.word-item.done{ opacity:.62 }
.w-spk{ flex:0 0 auto; width:40px;height:40px;border:0;border-radius:12px;background:#F4EFE3;color:var(--violet);font-size:16px;cursor:pointer }
.w-main{ flex:1 } .w-main b{ font-size:18px } .w-main b i{ color:var(--violet); font-style:normal; font-weight:800; font-size:14px }
.w-main small{ display:block; color:var(--muted); font-weight:700 }
.w-fav{ border:0; background:none; font-size:20px; cursor:pointer }
.vfoot{ padding:14px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line) }
.vempty{ text-align:center; color:var(--muted); font-weight:700; padding:40px 0 }

/* flashcard */
.flash-top{ display:flex; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 18px 10px }
.flash-card{ margin:18px; height:48vh; border-radius:24px; cursor:pointer; position:relative }
.flash-card.flip{ animation:fc-pop .35s ease }
@keyframes fc-pop{ 0%{ transform:scale(.97) } 55%{ transform:scale(1.02) } 100%{ transform:scale(1) } }
.fc-face{ position:absolute; inset:0; border-radius:24px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px; box-shadow:0 14px 40px rgba(30,24,16,.16);
  transition:opacity .25s ease }
.fc-front{ background:linear-gradient(160deg,#fff,#F4EFE3); opacity:1 }
.fc-back{ background:linear-gradient(160deg,#eafff4,#d9f5e8); opacity:0 }
.flash-card.flip .fc-front{ opacity:0 }
.flash-card.flip .fc-back{ opacity:1 }
.fc-spk{ position:absolute; top:16px; right:16px; width:48px;height:48px;border:0;border-radius:14px;background:var(--violet);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 3px 0 #A83F1D }
.fc-de{ font-family:'Archivo'; font-size:38px; color:#241F16; line-height:1.1 }
.fc-art{ color:var(--violet); font-size:22px }
.fc-hint{ position:absolute; bottom:18px; color:var(--muted); font-weight:800; font-size:13px }
.fc-vi{ font-family:'Archivo'; font-size:30px; color:#1e8c63 }
.fc-ex{ margin-top:14px; font-weight:700; color:#241F16 } .fc-ex small{ color:var(--muted) }
.flash-ctr{ display:flex; gap:12px; padding:6px 18px calc(16px + env(safe-area-inset-bottom)) }
.flash-ctr .btn{ flex:1 }
.fc-no{ background:#fff; border:2px solid var(--line); color:#c33; box-shadow:0 4px 0 var(--line) }
.fc-yes{ background:var(--green); color:#fff; box-shadow:0 5px 0 #2c9670 }
.flash-done{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:80vh; padding:30px; gap:10px }
.fd-ava{ width:160px;height:200px; display:grid; place-items:center; font-size:90px }
.fd-ava .mira-port{ width:100%;height:100% }

/* màn từ vựng có nền đặc → không lộ lớp dưới khi chuyển cảnh */
#vocab, #vocab-set, #flash{ background:#fff }

/* ============================================================
   NUVORA v8 — KHO A1–B2, tab mới, công tắc, thi thử
   ============================================================ */

/* ---- thanh tab CHUNG (absolute đáy khung) ---- */
.tabbar{ position:absolute; left:0; right:0; bottom:0; z-index:6; display:none;
  border-top:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -6px 20px rgba(30,24,16,.06) }
.tabbar button{ flex:1; border:0; background:transparent; padding:9px 0 8px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--muted); font-weight:800; font-size:10px; font-size:max(10px,1.9vw) }
.tabbar button span{ font-size:10px }
.tabbar button.active{ color:var(--violet); transform:translateY(-1px) }
.tab-scroll{ padding:0 16px calc(78px + env(safe-area-inset-bottom)) }
.home-head{ margin:0 -16px } /* head tràn mép trong tab-scroll */

/* ---- đầu tab đơn giản ---- */
.tab-head{ padding:16px 2px 4px } .tab-head h1{ margin:0; font-family:'Archivo'; font-size:26px }
.tab-head p{ margin:4px 0 0; font-weight:700 }
.empty-state{ text-align:center; padding:50px 20px; color:var(--muted) }
.empty-emoji{ font-size:54px; margin-bottom:10px } .empty-state b{ display:block; color:var(--ink); font-size:17px }
.empty-state p{ margin:6px 0 0; font-weight:700 }


/* ---- hàng chọn cấp ---- */
.level-row{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x proximity }
.level-row::-webkit-scrollbar{height:0}
.lv-chip{ flex:0 0 auto; scroll-snap-align:center; border:2px solid var(--line); background:#fff;
  border-radius:14px; padding:8px 13px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px; transition:.15s }
.lv-chip i{ font-size:17px; font-style:normal } .lv-chip b{ font-size:12px; color:var(--muted) }
.lv-chip.active{ border-color:var(--lc); background:color-mix(in srgb,var(--lc) 12%,#fff) }
.lv-chip.active b{ color:var(--lc) }
.lv-chip.empty{ opacity:.45 }
.lv-mini{ display:flex; gap:7px; overflow-x:auto; padding:4px 0 6px } .lv-mini::-webkit-scrollbar{height:0}
.lvm{ flex:0 0 auto; border:2px solid var(--line); background:#fff; border-radius:11px; padding:7px 11px; font:inherit;
  font-weight:800; font-size:12px; color:var(--muted); cursor:pointer }
.lvm.active{ border-color:var(--lc); color:var(--lc); background:color-mix(in srgb,var(--lc) 12%,#fff) }


/* ---- segment pill (từ điển) ---- */
.seg-pill{ background:#ECE6D7; border-radius:14px; padding:4px; margin:6px 0 12px }
.seg-pill button{ flex:1; border:0; background:transparent; padding:10px; border-radius:11px; font:inherit; font-weight:800; color:var(--muted); cursor:pointer }
.seg-pill button.active{ background:#fff; color:var(--violet); box-shadow:0 2px 8px rgba(0,0,0,.07) }

/* ============ NGỮ PHÁP ============ */
.gram-tag{ display:inline-block; margin:14px 0 2px; padding:5px 12px; background:#F1ECDE; color:var(--violet);
  font-weight:900; font-size:12px; letter-spacing:.6px; border-radius:10px }
.gram-title{ font-size:24px; margin:6px 0 8px } .gram-sum{ font-weight:700; color:#4A463C; margin:0 0 14px }
.gram-html{ font-weight:600; line-height:1.6 } .gram-html b{ color:var(--violet) }
.gram-html table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:14px }
.gram-html td,.gram-html th{ border:1px solid var(--line); padding:8px 10px; text-align:left }
.gram-html th{ background:#F6F1E6 } .gram-html ul{ padding-left:20px }
.gram-ex{ background:#F7F3EA; border-left:4px solid var(--violet); border-radius:0 12px 12px 0; padding:10px 14px; margin-bottom:8px }
.gram-ex b{ display:block; font-size:16px } .gram-ex small{ color:var(--muted); font-weight:700 }


.score-ring{ width:150px;height:150px;border-radius:50%; margin:6px auto 4px; display:grid; place-items:center; color:#fff;
  background:conic-gradient(var(--green) 0,var(--green) var(--p,60%),#ECE6D7 0) }
.score-ring{ position:relative } .score-ring::after{ content:''; position:absolute; inset:12px; border-radius:50%; background:var(--tint) }
.score-ring b,.score-ring small{ position:relative; z-index:1; color:var(--ink) } .score-ring b{ font-size:34px; font-family:'Archivo' }
.score-ring small{ display:block; font-weight:700; color:var(--muted) }
.score-ring.pass{ background:conic-gradient(var(--green) 0 70%,#ECE6D7 0) }
.score-ring.fail{ background:conic-gradient(var(--coral) 0 40%,#ECE6D7 0) }


/* ============ NGHE ============ */
.listen-card{ display:flex; align-items:center; gap:12px; width:100%; border:1.5px solid var(--line); background:#fff;
  border-radius:16px; padding:13px 15px; margin-bottom:10px; cursor:pointer; text-align:left; box-shadow:0 4px 12px rgba(30,24,16,.05) }
.lc-ic{ font-size:24px } .lc-tx{ flex:1 } .lc-tx b{ display:block } .lc-tx small{ color:var(--muted); font-weight:700 }
.listen-quiz{ padding:8px 2px }
.lq-top{ display:flex; align-items:center; gap:12px; margin-bottom:24px }
.lq-spk-wrap{ text-align:center; margin:10px 0 18px } .lq-spk-wrap small{ display:block; margin-top:8px; font-weight:700 }
.lq-spk{ width:110px;height:110px; border-radius:34px; border:0; background:var(--brand); color:#fff; font-size:44px; cursor:pointer; box-shadow:0 12px 28px rgba(194,83,32,.32) }
.lq-spk:active{ transform:scale(.96) }
.lq-ask{ text-align:center; font-weight:800; font-size:17px; margin:0 0 16px }

/* ============ TỪ ĐIỂN ============ */
.dict-search{ margin:6px 0 4px } .dict-search input{ width:100%; border:2px solid var(--line); border-radius:16px; padding:14px 16px; font:inherit; font-weight:700; font-size:15px; outline:none }
.dict-search input:focus{ border-color:var(--violet) }
.dict-card{ display:flex; gap:12px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:13px 14px; margin-bottom:10px; box-shadow:0 3px 10px rgba(30,24,16,.04) }
.dc-spk{ flex:0 0 42px; width:42px;height:42px;border:0;border-radius:13px; background:#F4EFE3; color:var(--violet); font-size:17px; cursor:pointer; align-self:flex-start }
.dc-main{ flex:1 } .dc-main b{ font-size:18px } .dc-main b .art{ color:var(--violet); font-style:normal; font-weight:800 }
.dc-pl{ display:block; color:var(--muted); font-weight:700; font-size:12px }
.dc-vi{ font-weight:800; color:#1e8c63; margin:3px 0 } .dc-ex{ font-weight:600; color:#4A463C; font-size:13px; line-height:1.5 } .dc-ex i{ color:var(--muted) }
.dc-lv{ align-self:flex-start; background:#F1ECDE; color:var(--violet); font-weight:800; font-size:11px; padding:3px 8px; border-radius:8px }

/* ============ CỘNG ĐỒNG ============ */
.cd-hero{ background:var(--dawn); color:#fff; border-radius:20px; padding:18px; margin-bottom:14px; box-shadow:var(--shadow) }
.cd-hero b{ font-size:17px } .cd-hero p{ margin:6px 0 0; opacity:.92; font-weight:600; font-size:14px }
.buddy{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:11px 13px; margin-bottom:9px }
.bud-ava{ position:relative; width:46px;height:46px;border-radius:50%; flex:0 0 46px; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:900; font-size:18px }
.bud-ava .dot{ position:absolute; right:0; bottom:2px; width:12px;height:12px;border-radius:50%; background:#c4c0d8; border:2px solid #fff } .bud-ava .dot.on{ background:var(--green) }
.bud-tx{ flex:1 } .bud-tx b{ font-size:15px } .bud-lv{ font-size:11px; background:#F1ECDE; color:var(--violet); padding:2px 7px; border-radius:7px; font-weight:800 }
.bud-tx small{ display:block; color:var(--muted); font-weight:700; margin-top:2px }
.bud-btn{ border:0; background:var(--violet); color:#fff; font:inherit; font-weight:800; font-size:13px; padding:9px 14px; border-radius:12px; cursor:pointer; box-shadow:0 4px 0 var(--violet-d) }
.bud-btn:active{ transform:translateY(2px); box-shadow:none }
.cd-card{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; margin:12px 0 16px }
.cd-card-ic{ font-size:30px } .cd-card b{ display:block } .cd-card small{ color:var(--muted); font-weight:700 }
.stammtisch{ background:linear-gradient(120deg,#fff7ee,#fdeede); border-color:#ffe0bf }
.league{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden }
.lg-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:800 }
.lg-row:last-child{ border-bottom:0 } .lg-row.me{ background:#F6F1E6 }
.lg-rank{ width:26px;height:26px;border-radius:8px; background:#eee; color:var(--muted); display:grid; place-items:center; font-weight:900; flex:0 0 26px }
.lg-rank.top{ background:var(--gold); color:#fff } .lg-row b{ flex:1 } .lg-xp{ color:var(--violet) }
.cd-demo{ color:var(--muted); font-weight:700; font-size:12px; text-align:center; margin-top:14px }

/* ============ HỒ SƠ ============ */
.hoso-head{ background:var(--dawn); color:#fff; text-align:center; padding:26px 18px 22px; border-radius:0 0 30px 30px }
.hoso-ava{ width:120px;height:120px; margin:0 auto 8px; border-radius:34px; background:rgba(255,255,255,.16); display:grid; place-items:center; overflow:hidden }
.hoso-ava .mira-port{ width:100%;height:100%; object-position:top center } .hoso-ava svg{ width:120px;height:120px }
.hoso-head h2{ margin:6px 0 2px; font-size:22px } .hoso-head p{ margin:0; opacity:.92; font-weight:700 }
.hoso-edit{ margin-top:12px; background:rgba(255,255,255,.2); color:#fff; border:0; font-weight:800; cursor:pointer }
.hoso-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px }
.hs{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; text-align:center; box-shadow:0 3px 10px rgba(30,24,16,.04) }
.hs b{ font-size:24px; display:block; font-family:'Archivo' } .hs small{ color:var(--muted); font-weight:700 }
.hoso-prog{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px 14px }
.hp-row{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line) }
.hp-row:last-child{ border-bottom:0 } .hp-row span{ font-weight:800; font-size:13px; width:64px; flex:0 0 64px }
.hp-row .vbar{ flex:1; margin:0 } .hp-row small{ color:var(--muted); font-weight:800; width:42px; text-align:right }
.badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.badge{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 6px; text-align:center }
.badge span{ font-size:28px } .badge small{ display:block; color:var(--ink); font-weight:800; font-size:11px; margin-top:4px }
.badge.off{ opacity:.4; filter:grayscale(1) }
.kho-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px }
.kho-stats > div{ background:#F6F1E6; border-radius:14px; padding:12px 4px; text-align:center }
.kho-stats b{ display:block; font-size:20px; color:var(--violet); font-family:'Archivo' } .kho-stats small{ color:var(--muted); font-weight:700; font-size:11px }

/* ============ v9 — TỪ ĐIỂN THEO BÀI · AUDIO · CLIP · CREDITS ============ */
/* tra theo bài */
.lekt-acc{ background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:8px; overflow:hidden }
.lekt-acc summary{ cursor:pointer; padding:13px 14px; font-weight:700; list-style:none; display:flex; align-items:center; gap:8px }
.lekt-acc summary::-webkit-details-marker{ display:none }
.lekt-acc summary b{ color:var(--violet) } .lekt-acc summary span{ margin-left:auto; color:var(--muted); font-size:12px; font-weight:800; background:#F1ECDE; padding:3px 9px; border-radius:8px }
.lekt-words{ border-top:1px solid var(--line); padding:4px 0 }
.lw{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid #F1ECDE }
.lw:last-child{ border-bottom:0 } .lw b{ font-size:16px } .lw b .art{ color:var(--violet); font-style:normal; font-weight:800 }
.lw-pl{ color:var(--muted); font-style:normal; font-weight:700; font-size:13px } .lw small{ display:block; color:#1e8c63; font-weight:700 }

/* credits */
.credits{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px }
.credits p{ margin:0 0 10px; font-weight:600; font-size:13px; line-height:1.55 } .credits p:last-child{ margin:0 }
.credits b{ color:var(--violet) } .credits a{ color:var(--blue); font-weight:700 }

/* ============ v10 — THƯ VIỆN TÀI LIỆU · IPA ============ */

/* phát âm IPA */
.ipa{ color:var(--muted); font-style:normal; font-weight:700; font-size:13px; letter-spacing:.2px }
/* thư viện */

.doc-cat{ background:#fff; border:1px solid var(--line); border-radius:16px; margin-bottom:10px; overflow:hidden }
.doc-cat summary{ cursor:pointer; padding:13px 15px; font-weight:800; list-style:none; display:flex; align-items:center; gap:8px }
.doc-cat summary::-webkit-details-marker{ display:none }
.doc-cat summary span{ margin-left:auto; color:var(--muted); font-size:12px; font-weight:800; background:#F1ECDE; padding:3px 9px; border-radius:8px }


/* ============ LƯỚI CHỌN LINH VẬT (20 bạn) ============ */
.mascot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; padding:6px 16px 14px; }
.mascot-card{ background:#fff; border:2px solid var(--line); border-radius:18px; padding:8px 6px 9px;
  text-align:center; cursor:pointer; transition:transform .12s, border-color .12s, box-shadow .12s; }
.mascot-card:active{ transform:scale(.96) }
.mascot-card.active{ border-color:var(--mc,#C25320); box-shadow:0 8px 20px -8px var(--mc,#C25320); }
.mascot-card .mc-pic{ width:100%; aspect-ratio:1/1; border-radius:13px; overflow:hidden;
  background:linear-gradient(160deg,#F4EFE3,#fff); display:flex; align-items:flex-end; justify-content:center; }
.mascot-card .mc-pic img{ width:100%; height:118%; object-fit:cover; object-position:top center; }
.mascot-card b{ display:block; font-size:12.5px; margin-top:5px; line-height:1.1 }
.mascot-card small{ display:block; color:var(--muted); font-size:10px; font-weight:800; line-height:1.15; margin-top:1px }

/* tia sáng bung giữa màn ăn mừng (đồng bộ cảm xúc) */
.confetti .burst{ position:absolute; top:38%; left:50%; width:18px; height:18px; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, var(--bc,#ffd36b), transparent 70%);
  box-shadow:0 0 0 0 var(--bc,#ffd36b); animation:burst 1s ease-out forwards; }
@keyframes burst{ 0%{ opacity:.9; transform:translate(-50%,-50%) scale(.2) } 70%{ opacity:.5 } 100%{ opacity:0; transform:translate(-50%,-50%) scale(9) } }


/* ============ v16 — phân phối kiến thức: Ngữ pháp + Nghe thật ============ */
.ngp-point{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:#fff; border:none; border-bottom:1px solid var(--line); padding:11px 6px; cursor:pointer }
.ngp-dot{ flex:none } .ngp-t{ flex:1; color:var(--ink); font-weight:700; font-size:14.5px } .ngp-point em{ color:var(--muted); font-style:normal }


/* ============ v25 — nghĩa MÁY DỊCH SƠ BỘ (badge) ============ */
.auto-badge{ display:inline-block; font-size:10.5px; font-weight:800; padding:1px 6px; border-radius:7px; margin-left:5px; vertical-align:middle; white-space:nowrap }
.auto-badge.q-h{ background:#e8f3ff; color:#2a7fd0 }
.auto-badge.q-m{ background:#fff3da; color:#b8860b }
.auto-badge.q-l{ background:#ffe9e9; color:#d05050 }

/* ============================================================
   v30 — LỘ TRÌNH TINH HOA A1→B2 + TRÒ PHÁT ÂM + ĐỌC HIỂU
   ============================================================ */


/* ĐỌC HIỂU (type:read) */
.q-read{ background:var(--tint); border:1.5px solid var(--line); border-radius:14px; padding:14px; margin:6px 0 12px }
.q-read-head{ display:flex; align-items:center; gap:9px; margin:0 0 11px; padding-bottom:11px; border-bottom:1.5px dashed var(--line) }
.q-read-head-lbl{ font-size:13px; font-weight:800; color:var(--violet) }
.q-read-de{ font-size:16px; font-weight:700; color:var(--ink); line-height:1.6 }
.q-read-vi-btn{ margin-top:9px; background:none; border:none; color:var(--violet); font-weight:800; font-size:12.5px; cursor:pointer; padding:0 }
.q-read-vi{ margin-top:7px; font-size:13.5px; font-weight:700; color:var(--muted); line-height:1.55; font-style:italic }
.q-read-vi.hidden{ display:none }
.q-readq{ font-size:15px; font-weight:800; color:var(--ink); margin:4px 2px 10px }

/* TRÒ PHÁT ÂM (window.PhatAm) */
.pa-wrap{ padding:6px 2px }
.pa-target{ display:flex; align-items:center; gap:10px; background:var(--tint); border:1.5px solid var(--line); border-radius:14px; padding:14px }
.pa-spk{ flex:none; width:40px; height:40px; border-radius:50%; border:none; background:var(--violet); color:#fff; font-size:18px; cursor:pointer }
.pa-de{ flex:1; font-size:18px; font-weight:800; color:var(--ink); line-height:1.4 }
.pa-vi{ text-align:center; color:var(--muted); font-weight:700; font-size:13.5px; font-style:italic; margin:9px 0 4px }
/* HƯỚNG DẪN PHÁT ÂM (thay "Nghe mẫu") */
.pa-guide-btn{ display:block; width:100%; margin:10px 0 4px; padding:11px; border:1.5px dashed var(--accent,#C25320); background:#fff;
  color:var(--accent,#C25320); font-weight:800; font-size:14px; border-radius:12px; cursor:pointer }
.pa-guide-btn.open{ background:var(--accent,#C25320); color:#fff; border-style:solid }
.pa-guide{ background:#fbf7f0; border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; margin:2px 0 8px; text-align:left }
.pg-head{ font-size:12.5px; font-weight:900; color:var(--muted); margin-bottom:8px }
.pg-item{ padding:7px 0; border-top:1px solid var(--line) }
.pg-item:first-of-type{ border-top:0 }
.pg-w{ font-size:15.5px; font-weight:800; color:var(--ink) }
.pg-w b{ color:var(--accent-d,#A83F1D) }
.pg-re{ font-weight:800; color:var(--green,#2E7D5B); font-size:14px; margin-left:4px }
.pg-tips{ margin:4px 0 0; padding-left:18px }
.pg-tips li{ font-size:13px; color:#4A463C; line-height:1.5; font-weight:600; margin:2px 0 }
.pg-empty{ font-size:13.5px; color:var(--muted); font-weight:700; text-align:center }
.pa-marks{ text-align:center; margin:10px 0; min-height:8px; line-height:1.9 }
.pa-tok{ font-size:15px; font-weight:800; padding:2px 7px; border-radius:8px; display:inline-block }
.pa-tok.ok{ background:#e8fff3; color:#1a9b66 } .pa-tok.no{ background:#ffeaea; color:#d04545 }
.pa-mic-box{ text-align:center; margin:14px 0 6px }
.pa-mic{ width:78px; height:78px; border-radius:50%; border:none; cursor:pointer; background:var(--brand);
  box-shadow:0 8px 22px rgba(194,83,32,.35); transition:transform .15s }
.pa-mic .pa-mic-ic{ font-size:32px }
.pa-mic:active{ transform:scale(.94) }
.pa-mic.rec{ animation:pa-pulse 1.1s infinite; background:var(--accent-d) }
.pa-mic.done{ background:var(--green); box-shadow:0 8px 22px rgba(51,192,138,.4) }
@keyframes pa-pulse{ 0%{ box-shadow:0 0 0 0 rgba(194,83,32,.5) } 70%{ box-shadow:0 0 0 18px rgba(194,83,32,0) } 100%{ box-shadow:0 0 0 0 rgba(194,83,32,0) } }
.pa-status{ margin-top:11px; font-size:13px; font-weight:800; color:var(--muted) }
.pa-score{ text-align:center; margin:8px 0 }
.pa-pct{ font-size:16px; font-weight:900; padding:7px 0 }
.pa-pct.ok{ color:var(--green) } .pa-pct.near{ color:#e08a1a } .pa-pct.low{ color:var(--red) }
.pa-actions{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:8px }
.pa-actions .btn{ flex:1; min-width:120px }
.btn-ghost{ background:#F1ECDE; color:var(--ink) }
.pa-skip{ background:#fff; color:var(--muted); border:1.5px solid var(--line) }

/* ============================================================
   v33 — DẠNG GAME MỚI: GHÉP CẶP (match) + ĐIỀN CHỖ TRỐNG (fill)
   ============================================================ */
.q-scene.small{ margin-bottom:8px }
.q-scene.small .q-mascot{ transform:scale(.82); transform-origin:left center }

/* GHÉP CẶP */
.match-grid{ display:flex; gap:12px; margin-top:6px }
.match-col{ flex:1; display:flex; flex-direction:column; gap:10px }
.match-cell{ padding:14px 10px; border-radius:13px; border:2px solid var(--line); background:#fff;
  font-weight:800; font-size:14.5px; color:var(--ink); cursor:pointer; text-align:center; transition:transform .1s, background .15s }
.match-cell:active{ transform:scale(.97) }
.match-cell.sel{ border-color:var(--violet); background:#F1ECDE; color:var(--violet-d) }
.match-cell.matched{ border-color:var(--green); background:#e8fff3; color:#1a9b66; opacity:.65; cursor:default }
.match-cell.miss{ border-color:var(--red); background:#ffeaea; color:var(--red); animation:match-shake .4s }
@keyframes match-shake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-5px) } 75%{ transform:translateX(5px) } }

/* ĐIỀN CHỖ TRỐNG */
.fill-sentence{ font-size:19px; font-weight:800; text-align:center; margin:16px 6px; line-height:1.7; color:var(--ink) }
.fill-blank{ display:inline-block; min-width:74px; border-bottom:3px solid var(--violet); color:var(--violet-d);
  padding:0 8px; font-weight:900 }

/* ===== VIDEO CẢM XÚC CẠNH LOA (random mỗi câu, đúng=vui / sai=tiếc) ===== */
.q-mascot{ overflow:visible; }
.q-mascot .mira-clip{
  width:132px; height:150px; object-fit:cover; object-position:top center;
  border-radius:20px; background:linear-gradient(160deg,#F4EFE3,#fff);
  box-shadow:0 8px 22px -8px rgba(30,24,16,.45);
  animation:qvid-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qvid-pop{ 0%{ transform:scale(.6); opacity:0 } 100%{ transform:scale(1); opacity:1 } }

/* ============================================================
   v36 — HỌC TỪ MỚI QUA HÌNH (pickimg) + GHÉP CÂU (connect)
   ============================================================ */
.pic-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px }
.pic-opt{ padding:0 !important; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border:2.5px solid var(--line); border-radius:18px; background:#fff; overflow:hidden; cursor:pointer }
.pic-opt.sel{ border-color:var(--violet); background:#F1ECDE }
.pic-opt.correct{ border-color:var(--green); background:#e8fff3 }
.pic-opt.wrong{ border-color:var(--red); background:#ffeaea }
.pic-img{ width:100%; height:100%; object-fit:cover; border-radius:15px }
.pic-emoji{ font-size:64px; line-height:1 }
.pic-emoji.mini{ font-size:46px }
/* ghép câu */
.conn-pics{ display:flex; align-items:center; justify-content:center; gap:10px; margin:14px 0 4px }
.conn-pics .pic-img.mini{ width:92px; height:92px; border-radius:16px; border:2px solid var(--line) }
.conn-plus{ font-size:26px; font-weight:900; color:var(--violet) }

/* ================= ĐĂNG KÝ / ĐĂNG NHẬP (auth.js) ================= */
.auth-box{ width:100%; max-width:420px; margin-top:30px; display:flex; flex-direction:column; gap:11px }
.auth-title{ color:var(--muted); font-weight:700; text-transform:uppercase; font-family:var(--font-cond); font-size:14px; opacity:.92; text-align:center; margin-bottom:2px; letter-spacing:.3px }
.auth-btn{ display:flex; align-items:center; gap:12px; width:100%; border:0; border-radius:16px;
  padding:14px 16px; font:inherit; font-weight:800; font-size:15px; cursor:pointer; color:var(--ink);
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .12s }
.auth-btn:active{ transform:translateY(2px) }
.auth-btn .ab-ic{ width:26px; height:26px; display:grid; place-items:center; font-size:19px; flex:0 0 26px }
.auth-btn.auth-fb{ background:#1877f2; color:#fff }
.auth-btn.auth-google{ background:#fff; color:#1f2330; border:1px solid #dadce0 }
.auth-btn.auth-phone{ background:#fff; color:var(--ink); border:1px solid var(--line) }
.mi-fb{ font-family:Georgia,'Times New Roman',serif; font-weight:900; font-style:italic }
.auth-btn.auth-fb .mi-fb{ color:#fff; background:rgba(255,255,255,.18); border-radius:6px; width:26px;height:26px; display:grid; place-items:center }
.auth-guest{ background:transparent; border:0; color:var(--muted); opacity:1; font:inherit; font-weight:600;
  font-size:13px; text-decoration:underline; cursor:pointer; padding:6px; margin-top:2px }
/* trạng thái đã đăng nhập */
.auth-cur{ display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  border-radius:16px; padding:11px 14px; color:#fff; position:relative }
.auth-cur-ic{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:18px; color:#1877f2 }
.auth-cur-ic .mi-fb{ color:#1877f2 }
.auth-cur-tx{ font-size:13px; line-height:1.35; font-weight:500; color:var(--ink) } .auth-cur-tx b{ font-size:15px; font-weight:700 }
.auth-admin{ position:absolute; top:-9px; right:10px; background:var(--gold); color:#3a2b00; font-size:10px;
  font-weight:900; padding:2px 8px; border-radius:999px; letter-spacing:.4px }

/* bottom sheet đăng nhập */
.auth-sheet{ position:fixed; inset:0; z-index:90; background:rgba(20,16,40,.5); display:flex; align-items:flex-end;
  opacity:0; transition:opacity .2s }
.auth-sheet.on{ opacity:1 }
.auth-sheet-card{ width:100%; max-width:520px; margin:0 auto; background:#fff; border-radius:24px 24px 0 0;
  padding:22px 22px calc(26px + env(safe-area-inset-bottom)); transform:translateY(20px); transition:transform .22s;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 -10px 40px rgba(0,0,0,.25);
  max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); overflow-y:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
.auth-sheet.on .auth-sheet-card{ transform:none }
.as-head{ display:flex; align-items:center; gap:11px; margin-bottom:4px; font-size:18px; color:var(--ink) }
.as-head b{ font-weight:800 }
.as-ic{ width:38px; height:38px; flex:0 0 38px; border-radius:12px; display:grid; place-items:center; font-size:20px }
.as-ic.phone{ background:#eafaf2 }
.as-ic.google{ background:#f4f6fb }
.as-ic.fb{ background:#1877f2; color:#fff; font-family:Georgia,serif; font-weight:900; font-style:italic }
.as-lb{ font-size:13px; font-weight:800; color:var(--muted); margin-top:4px }
.as-in{ width:100%; border:2px solid var(--line); border-radius:14px; padding:13px 15px; font:inherit;
  font-weight:700; font-size:16px; color:var(--ink); outline:none; transition:border-color .15s }
.as-in:focus{ border-color:var(--violet) }
.as-otp{ letter-spacing:8px; text-align:center; font-size:22px }
.as-sub{ font-size:13px; color:var(--muted); font-weight:600; line-height:1.5; margin:2px 0 2px }
.as-demo{ display:block; margin-top:4px; color:var(--violet); font-weight:700 }
.as-err{ color:var(--red); font-size:13px; font-weight:700; min-height:16px }
.as-cancel{ background:none; border:0; color:var(--muted); font:inherit; font-weight:800; font-size:14px; cursor:pointer; padding:8px }
.auth-fbbtn{ background:#1877f2; color:#fff }
.auth-sheet .btn{ margin-top:4px }

/* v93: tab Đăng nhập ↔ Đăng ký + phương thức Email */
.auth-seg{ display:flex; gap:4px; background:rgba(255,255,255,.85); border:1px solid var(--line);
  border-radius:999px; padding:4px; backdrop-filter:blur(4px); margin-bottom:2px }
.auth-seg button{ flex:1; border:0; border-radius:999px; padding:9px 10px; font:inherit; cursor:pointer;
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.5px; font-weight:700; font-size:14px;
  color:#6E6A5B; background:transparent; transition:background .15s,color .15s }
.auth-seg button.on{ background:var(--ink); color:var(--paper,#F3EFE5) }
.auth-btn.auth-mail{ background:#fff; color:var(--ink); border:1px solid var(--line) }
.as-ic.mail{ background:#FBEFE4 }
.as-row{ display:flex; align-items:center; justify-content:center; gap:2px; font-size:13px;
  color:var(--muted); font-weight:600 }
.as-link{ background:none; border:0; color:var(--accent,#C25320); font:inherit; font-weight:800;
  font-size:13px; cursor:pointer; padding:2px 4px; text-decoration:underline }

/* v94: đồng ý điều khoản + OAuth 1 chạm + chính sách + xoá tài khoản */
.as-consent{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink);
  font-weight:600; line-height:1.45; margin-top:4px; cursor:pointer }
.as-consent input{ width:18px; height:18px; flex:0 0 18px; margin-top:1px; accent-color:var(--accent,#C25320) }
.oa-row{ display:flex; align-items:center; gap:12px; width:100%; border:1.5px solid var(--line);
  background:#fff; border-radius:14px; padding:10px 13px; font:inherit; cursor:pointer; text-align:left }
.oa-row:active{ transform:translateY(1px) }
.oa-ava{ width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:var(--ink);
  color:var(--paper,#F3EFE5); display:grid; place-items:center; font-weight:900; font-size:17px }
.oa-tx{ display:flex; flex-direction:column; line-height:1.3 }
.oa-tx b{ font-size:15px; color:var(--ink) } .oa-tx small{ font-size:12px; color:var(--muted) }
.oa-new{ display:flex; flex-direction:column; gap:6px; border-top:1px dashed var(--line); padding-top:8px; margin-top:2px }
.btn-danger{ background:var(--red,#BE3A2B); color:#fff }
.privacy-ov{ position:fixed; inset:0; z-index:120; background:rgba(20,16,10,.55); display:flex;
  align-items:center; justify-content:center; padding:18px }
.privacy-card{ width:100%; max-width:480px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px);
  background:#fff; border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.35) }
.privacy-card h3{ font-size:17px; color:var(--ink) }
.privacy-body{ overflow-y:auto; display:flex; flex-direction:column; gap:9px; font-size:13.5px;
  line-height:1.55; color:var(--ink); font-weight:500 }
.privacy-body b{ font-weight:800 }

/* v94: bảo vệ nội dung (baove.js) — watermark chìm + tấm che + toast */
.bv-wm{ position:fixed; inset:-20%; z-index:9998; pointer-events:none; display:flex; flex-wrap:wrap;
  gap:70px 60px; align-content:space-between; transform:rotate(-24deg); opacity:.05; overflow:hidden }
.bv-wm span{ font-weight:800; font-size:14px; color:var(--ink); white-space:nowrap }
.bv-cover{ position:fixed; inset:0; z-index:99990; background:var(--paper,#F3EFE5); display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:10px }
.bv-cover.on{ display:flex }
.bv-cover-logo{ font-weight:800; font-size:38px; letter-spacing:-1px; color:var(--ink) }
.bv-cover-logo i{ font-style:normal; color:var(--accent,#C25320) }
.bv-cover p{ color:var(--muted); font-weight:700; font-size:13px }
.bv-toast{ position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom)); transform:translate(-50%,14px);
  z-index:99995; background:var(--ink); color:var(--paper,#F3EFE5); font-weight:700; font-size:13.5px;
  padding:11px 17px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.3); opacity:0;
  transition:opacity .22s, transform .22s; max-width:88vw; text-align:center }
.bv-toast.on{ opacity:1; transform:translate(-50%,0) }
body.bv-noselect{ -webkit-user-select:none; user-select:none }
body.bv-noselect input, body.bv-noselect textarea, body.bv-noselect [contenteditable],
body.bv-noselect .privacy-body, body.bv-noselect .acc-line{ -webkit-user-select:text; user-select:text }
/* chỉ chặn in khi ĐANG bảo vệ (đã đăng nhập) — chưa đăng nhập/đã đăng xuất in bình thường */
@media print{ body.bv-noselect > *{ display:none !important } }

/* v94: khối Tài khoản & dữ liệu trong Hồ sơ */
.acc-box{ display:flex; flex-direction:column; gap:9px; background:var(--card,#fff); border:1px solid var(--line);
  border-radius:16px; padding:14px }
.acc-line{ font-size:13.5px; color:var(--ink); font-weight:600 }
.acc-line b{ font-weight:800 }
.acc-btn{ display:flex; align-items:center; gap:9px; width:100%; border:1.5px solid var(--line); background:#fff;
  border-radius:12px; padding:11px 13px; font:inherit; font-weight:800; font-size:14px; color:var(--ink);
  cursor:pointer; text-align:left }
.acc-btn:active{ transform:translateY(1px) }
.acc-btn.danger{ color:var(--red,#BE3A2B); border-color:rgba(190,58,43,.35) }

/* nhóm nút phải trên thanh học: "⏮ Quay lại" + "⏭ Qua" */
.lesson-nav{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto }
.lesson-back{ background:var(--tint); color:var(--accent-d,#A83F1D); border:1.5px solid var(--line);
  border-radius:999px; padding:6px 12px; font:inherit; font-weight:800; font-size:13px; cursor:pointer; flex:0 0 auto }
.lesson-back:active{ transform:translateY(1px) }
/* nút "⏭ Qua" cho tài khoản test + node mở khoá */
.admin-skip{ background:#fff7e0; color:#9a6b00; border:1.5px dashed var(--gold);
  border-radius:999px; padding:6px 12px; font:inherit; font-weight:800; font-size:13px; cursor:pointer; flex:0 0 auto }
.admin-skip:active{ transform:translateY(1px) }


/* ============================================================
   v48 — BỐ CỤC BÀI THI KHOA HỌC (split-pane: đề trên / câu hỏi dưới,
   mỗi vùng cuộn riêng) + thanh số câu navigator + cỡ chữ + gắn cờ.
   Theo chuẩn đọc hiểu digital (TOEFL/IELTS split + Digital SAT navigator).
   ============================================================ */


/* ============================================================
   v50 — LỘ TRÌNH GIÁO TRÌNH HỢP NHẤT + khung bài "có hồn"
   (Einstieg mục tiêu ↔ Das kann ich tự đánh giá)
   ============================================================ */
/* Banner bài đang học */
.ub-head{ display:flex; align-items:flex-start; gap:12px }
.ub-emoji{ font-size:34px; line-height:1; flex:none }
.ub-meta{ flex:1; min-width:0 }
.ub-meta small{ font-family:var(--font-cond); letter-spacing:.05em; font-weight:600; font-size:10.5px; opacity:.9; text-transform:uppercase; display:block }
.ub-meta b{ display:block; font-size:18px; line-height:1.25; margin-top:3px }
.ub-de{ display:block; font-size:12.5px; opacity:.82; font-weight:600; font-style:italic; margin-top:1px }
.ub-goals{ display:flex; flex-direction:column; gap:5px; margin:12px 0 13px }
.ub-goal{ font-size:12.5px; font-weight:700; opacity:.95; line-height:1.35 }
.ub-start{ width:100%; border:0; border-radius:13px; background:#fff; color:var(--brand);
  font-weight:800; font-size:15px; padding:12px; cursor:pointer; box-shadow:0 5px 0 rgba(0,0,0,.14) }
.ub-start:active{ transform:translateY(2px); box-shadow:0 3px 0 rgba(0,0,0,.14) }

/* 2 công cụ phụ + nhãn lộ trình */
.path-tools{ display:flex; gap:10px; margin:4px 0 16px }
.ptool{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  background:var(--card); border:1px solid var(--line); border-radius:15px; padding:12px 13px; cursor:pointer; text-align:left }
.ptool:active{ transform:scale(.98) }
.ptool span{ font-size:21px }
.ptool b{ font-size:14px; color:var(--ink) }
.ptool small{ color:var(--muted); font-weight:700; font-size:11px }
.path-rail-label{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; font-size:11.5px; color:var(--muted); text-align:center; margin:2px 0 }

/* Chấm tiến độ trong banner (nền cam, chấm trắng) */
.ub-dots{ display:flex; gap:6px; align-items:center; margin:11px 0 3px }
.ub-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.32); flex:none; transition:.2s }
.ub-dot.done{ background:#fff }
.ub-dot.cur{ width:20px; border-radius:5px; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25) }

/* Danh sách bài (mục lục — thay con đường node) */
.lesson-list-label{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; font-size:11.5px; color:var(--muted); margin:6px 2px 9px }
.lesson-list{ display:flex; flex-direction:column; gap:9px; padding-bottom:34px }
.lrow{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:15px; padding:11px 13px }
.lrow:active{ transform:scale(.985) }
.lrow.current{ border-color:var(--brand); box-shadow:0 3px 0 rgba(0,0,0,.06) }
.lrow.locked, .lrow.soon{ cursor:default; opacity:.62 }
.lrow-no{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:15px; color:var(--muted); background:var(--tint); border:1px solid var(--line) }
.lrow.current .lrow-no{ background:var(--brand); color:#fff; border-color:var(--brand) }
.lrow-main{ flex:1; min-width:0 }
.lrow-main b{ display:block; font-size:14.5px; color:var(--ink); line-height:1.25 }
.lrow-main small{ display:block; font-size:11.5px; color:var(--muted); font-weight:600; font-style:italic;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lrow-tag{ flex:none; font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.05em;
  font-weight:600; font-size:10px; padding:3px 8px; border-radius:20px; color:var(--muted); background:var(--tint) }
.lrow-tag.cur{ background:var(--brand); color:#fff }
.lrow-tag.done{ color:var(--green); background:rgba(46,125,91,.12) }

/* ① Einstieg — mở bài */
.einstieg{ text-align:center; padding:10px 4px 20px; max-width:440px; margin:0 auto }
.eins-badge{ display:inline-block; font-family:var(--font-cond); letter-spacing:.1em; font-weight:600;
  font-size:12px; color:var(--brand); background:var(--tint); border-radius:20px; padding:5px 14px; text-transform:uppercase }
.eins-emoji{ font-size:58px; margin:16px 0 6px; line-height:1 }
.eins-title{ font-size:23px; margin:4px 0 2px; color:var(--ink) }
.eins-de{ font-size:14px; color:var(--muted); font-style:italic; font-weight:600; margin:0 0 18px }
.eins-goalbox{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px 18px; text-align:left; box-shadow:0 6px 18px rgba(30,24,16,.06) }
.eins-goalhead{ font-weight:800; font-size:14px; color:var(--ink); margin-bottom:10px }
.eins-goals{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px }
.eins-goals li{ position:relative; padding-left:26px; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4 }
.eins-goals li::before{ content:'✦'; position:absolute; left:4px; top:0; color:var(--brand); font-weight:900 }
.eins-funcs{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px }
.eins-funcs span{ font-size:11.5px; font-weight:700; color:var(--muted); background:var(--paper-2); border-radius:10px; padding:4px 9px }

/* Ngữ pháp theo sách: công thức + quy tắc + bẫy lỗi */
.gram-formula{ background:var(--dawn); color:#fff; border-radius:14px; padding:13px 16px; margin:6px 0 14px;
  font-family:var(--font-cond); letter-spacing:.02em; font-size:15.5px; font-weight:600; line-height:1.5; white-space:pre-wrap }
.gram-rule{ font-size:15px; line-height:1.6; color:var(--ink); margin:4px 0 12px }
.gram-trap{ background:#FFF4E6; border:1px solid #F2D9B0; border-left:4px solid var(--gold); border-radius:12px;
  padding:11px 14px; font-size:13.5px; color:#7a5a23; line-height:1.5; margin:14px 0 4px }
.ngp-dot.pas{ filter:grayscale(.3); opacity:.85 }
.doc-cat.cefr > summary{ font-weight:800; font-size:15px }
.doc-cat.lekt{ margin:6px 0 6px 8px; border-left:2px solid var(--line) }
.doc-cat.lekt > summary{ font-size:13.5px; font-weight:700; color:var(--ink) }
.doc-cat.lekt > summary b{ color:var(--brand) }

/* pickimg: cổng "nghe đủ 3 lần mới chọn hình" */
.listen-gate{ text-align:center; font-weight:800; font-size:14px; color:var(--brand); background:var(--tint);
  border:1.5px dashed var(--accent-d,#A83F1D); border-radius:13px; padding:11px 14px; margin:4px auto 14px; max-width:94% }
.listen-gate.done{ color:var(--green); background:#EAF6EF; border-style:solid; border-color:#bfe3cf }
.listen-gate.no{ color:var(--red); background:#FCEDEB; border-style:solid; border-color:#f0c4bd }
.listen-gate b{ color:inherit; font-size:16px }
.pic-grid.locked{ opacity:.45; filter:grayscale(.3); pointer-events:none }
/* loa to ("tap để nghe") nhấp nháy gọi chú ý */
.q-speech.listen .spk.big{ animation:spkpulse 1.25s ease-in-out infinite }
@keyframes spkpulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.13) } }

/* dòng gợi ý nghĩa Việt cho bài sắp xếp câu (dịch) */
.q-prompt-vi{ text-align:center; font-weight:800; font-size:15px; color:var(--ink); background:var(--tint); border-radius:12px; padding:9px 12px; margin:0 auto 12px; max-width:90% }

/* ⑪ Das kann ich — đóng bài */
.daskannich{ text-align:center; padding:10px 4px 20px; max-width:440px; margin:0 auto }
.dk-badge{ display:inline-block; font-family:var(--font-cond); letter-spacing:.08em; font-weight:600;
  font-size:11.5px; color:#fff; background:var(--green); border-radius:20px; padding:5px 14px; text-transform:uppercase }
.dk-title{ font-size:23px; margin:8px 0 2px; color:var(--ink) }
.dk-sub{ font-size:14px; color:var(--muted); font-weight:700; margin:0 0 14px }
.dk-list{ margin:0; padding:16px 18px; list-style:none; display:flex; flex-direction:column; gap:10px; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 6px 18px rgba(30,24,16,.06) }
.dk-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4 }
.dk-check{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:900; display:grid; place-items:center; margin-top:1px }
.dk-note{ font-size:13.5px; color:var(--muted); font-weight:700; margin:16px 4px 0; line-height:1.5 }

/* ===== v66 — TỪ ĐIỂN: đếm từ + nút thêm sổ tay + nguồn Theo bài + modal Sổ tay ===== */
.dict-count{ background:var(--dawn); color:#F3EFE5; border-radius:13px; padding:11px 14px; margin:2px 2px 10px; font-weight:800; font-size:13px; box-shadow:0 4px 14px rgba(30,24,16,.12) }
.dict-count b{ color:#fff; font-size:15px }
.dict-count small{ opacity:.82; font-weight:700 }
.dc-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto }
.dc-add{ width:32px; height:32px; border:1.5px solid var(--accent); background:var(--tint,#F4EFE3); color:var(--accent); border-radius:10px; font-size:18px; font-weight:800; cursor:pointer; line-height:1; display:grid; place-items:center }
.dc-add:active{ transform:translateY(1px) }
.dl-src{ display:flex; gap:8px; margin:2px 2px 10px }
.srcbtn{ flex:1; border:1.5px solid var(--line); background:#fff; border-radius:12px; padding:9px 8px; font:inherit; font-weight:800; font-size:13px; cursor:pointer; color:var(--muted) }
.srcbtn.active{ border-color:var(--accent); color:var(--accent); background:var(--tint,#F4EFE3) }
.lw-main{ flex:1; min-width:0 }
.lw .dc-add{ margin-left:auto; width:30px; height:30px; font-size:17px }
.ub-card b{ font-size:16px }
.vhint{ color:var(--muted); font-weight:700; font-size:13px; background:#F4EFE3; border:1px dashed var(--line); border-radius:12px; padding:12px 14px; margin-bottom:6px }
.ub-tools{ display:flex; gap:8px; padding:0 18px 6px }
.ub-tool{ border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:6px 12px; font:inherit; font-weight:800; font-size:12.5px; cursor:pointer; color:var(--ink) }
.ub-tool.danger{ color:var(--red); border-color:#f0c4bd }
.vadd-overlay{ position:fixed; inset:0; z-index:60; background:rgba(20,16,10,.42); display:flex; align-items:flex-end; justify-content:center; animation:vadd-fade .18s ease }
@keyframes vadd-fade{ from{opacity:0} to{opacity:1} }
.vadd-sheet{ width:100%; max-width:460px; background:var(--card,#fff); border-radius:20px 20px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(0,0,0,.22); position:relative; animation:vadd-up .22s cubic-bezier(.2,.8,.3,1) }
@keyframes vadd-up{ from{transform:translateY(34px)} to{transform:translateY(0)} }
.vadd-head{ font-weight:800; font-size:15px; margin-bottom:12px; color:var(--ink) }
.vadd-head b{ color:var(--accent) }
.vadd-list{ display:flex; flex-direction:column; gap:8px; max-height:44vh; overflow:auto }
.vadd-row{ display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); background:#fff; border-radius:13px; padding:12px 14px; font:inherit; cursor:pointer; text-align:left }
.vadd-ic{ font-size:20px } .vadd-nm{ flex:1; font-weight:800; color:var(--ink) }
.vadd-ck{ font-size:18px; font-weight:800; color:var(--accent); width:24px; text-align:center }
.vadd-new{ width:100%; margin-top:10px; border:1.5px dashed var(--accent); background:var(--tint,#F4EFE3); color:var(--accent); border-radius:13px; padding:12px; font:inherit; font-weight:800; cursor:pointer }
.vadd-done{ width:100%; margin-top:8px; border:0; background:var(--accent); color:#fff; border-radius:13px; padding:13px; font:inherit; font-weight:800; cursor:pointer }
.vadd-toast{ position:absolute; top:-38px; left:50%; transform:translateX(-50%); background:var(--green); color:#fff; font-weight:800; font-size:13px; padding:7px 14px; border-radius:999px; opacity:0; transition:opacity .2s; pointer-events:none }
.vadd-toast.show{ opacity:1 }

/* ============================================================
   v90 — HỆ MÀU PHÂN VÙNG (Bauhaus functional color coding)
   Mỗi khu vực một màu chức năng: Học=cam Braun · Nghe=xanh thép ·
   Từ điển=xanh rêu · Cộng đồng=vàng đồng · Hồ sơ=mực than.
   ============================================================ */
:root{
  --c-hoc:#C25320;   /* Học — cam gạch Braun (thương hiệu, hành động) */
  --c-nghe:#4B6A8F;  /* Nghe — xanh thép (âm thanh, tĩnh tại) */
  --c-dict:#2E7D5B;  /* Từ điển — xanh rêu (tri thức, tra cứu) */
  --c-cd:#B07D1E;    /* Cộng đồng — vàng đồng (con người, ấm áp) */
}
#home{ --tac:var(--c-hoc) } #nghe{ --tac:var(--c-nghe) }
#dict{ --tac:var(--c-dict) } #congdong{ --tac:var(--c-cd) } #hoso{ --tac:var(--ink) }

/* đầu tab thống nhất: eyebrow Oswald + tiêu đề + vạch màu vùng */
.tab-eyebrow{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:2.6px;
  font-size:11px; font-weight:600; color:var(--tac,var(--accent)); margin-bottom:2px }
.tab-head h1{ font-size:28px; letter-spacing:-.5px }
.tab-head h1::after{ content:''; display:block; width:34px; height:4px; border-radius:2px;
  background:var(--tac,var(--accent)); margin-top:8px }

/* tabbar: mỗi tab sáng đúng màu vùng của nó + vạch chỉ báo trên */
.tabbar button{ position:relative; transition:color .15s }
.tabbar button.active::before{ content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--c-hoc) }
.tabbar button[data-tab="nghe"].active{ color:var(--c-nghe) }
.tabbar button[data-tab="nghe"].active::before{ background:var(--c-nghe) }
.tabbar button[data-tab="dict"].active{ color:var(--c-dict) }
.tabbar button[data-tab="dict"].active::before{ background:var(--c-dict) }
.tabbar button[data-tab="congdong"].active{ color:var(--c-cd) }
.tabbar button[data-tab="congdong"].active::before{ background:var(--c-cd) }
.tabbar button[data-tab="hoso"].active{ color:var(--ink) }
.tabbar button[data-tab="hoso"].active::before{ background:var(--ink) }

/* nhãn khu vực trong Home (nhịp Oswald thống nhất) */
.home-label{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; font-size:11.5px; color:var(--muted); margin:18px 2px 9px }
.pad{ padding:16px 18px calc(30px + env(safe-area-inset-bottom)) }
.go{ font-size:22px; color:var(--muted); font-weight:800 }
.path-tools{ margin-bottom:30px }

/* tab Nghe: icon bộ nghe nhuộm màu vùng */
#nghe .lc-ic{ width:44px; height:44px; flex:0 0 44px; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c-nghe) 12%, #fff); font-size:22px }
#nghe .lq-spk{ background:var(--c-nghe); box-shadow:0 12px 28px rgba(75,106,143,.32) }
#nghe .progress > i{ background:var(--c-nghe) }
/* tab Từ điển: điểm nhấn xanh rêu */
#dict .seg-pill button.active{ color:var(--c-dict) }
#dict .dict-search input:focus{ border-color:var(--c-dict) }

/* ============================================================
   v90 — CỘNG ĐỒNG (Moments + Correction + Bạn học + Phòng nói + BXH)
   ============================================================ */


/* ---- toast + bottom sheet + quy tắc ---- */
.cd-toast{ position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:#F3EFE5; font-weight:800; font-size:13.5px; border-radius:999px; padding:11px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.3); z-index:120; opacity:0; transition:.22s; max-width:86vw; text-align:center }
.cd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.cd-sheet-ov{ position:fixed; inset:0; z-index:110; background:rgba(20,16,10,.45); display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .2s }
.cd-sheet-ov.on{ opacity:1 }
.cd-sheet{ width:100%; max-width:460px; background:#fff; border-radius:22px 22px 0 0;
  padding:20px 20px calc(22px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px;
  box-shadow:0 -10px 40px rgba(0,0,0,.25); transform:translateY(18px); transition:transform .22s }
.cd-sheet-ov.on .cd-sheet{ transform:none }
.cd-sheet-h{ font-size:17px; font-weight:800; color:var(--ink) }
.cd-sheet-p{ margin:0; font-size:13.5px; font-weight:600; color:var(--muted) }
.cd-sheet-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:1.5px solid var(--line);
  background:#fff; border-radius:13px; padding:13px 14px; font:inherit; font-weight:800; font-size:14.5px; color:var(--ink); cursor:pointer }
.cd-sheet-cancel{ border:0; background:none; color:var(--muted); font:inherit; font-weight:800; font-size:14px; cursor:pointer; padding:8px }
.cd-rules{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px }
.cd-rules li{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.5 }
.cd-rules-link{ display:block; margin:6px auto 0; border:0; background:none; color:var(--muted);
  font:inherit; font-weight:800; font-size:12.5px; text-decoration:underline; cursor:pointer; padding:8px }

/* ============================================================
   v91 — CỘNG ĐỒNG PRO (cm-*) : phong cách Meta/Facebook
   gọn · hairline · chữ nhỏ · màu tiết chế (accent chỉ ở điểm hành động)
   ============================================================ */
#congdong .tab-head{ padding-bottom:0 }
.cm-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin:2px -16px 12px; padding:0 10px }
.cm-tabs > button{ border:0; background:none; font:inherit; font-weight:700; font-size:14px; color:var(--muted);
  padding:10px 10px 11px; cursor:pointer; position:relative; white-space:nowrap }
.cm-tabs > button.on{ color:var(--ink) }
.cm-tabs > button.on::after{ content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:2.5px; border-radius:2px; background:var(--c-cd) }

.cm-chips{ display:flex; gap:7px; overflow-x:auto; padding:0 0 11px } .cm-chips::-webkit-scrollbar{ height:0 }
.cm-chip{ flex:0 0 auto; border:0; background:var(--paper-2); color:#5d5847; font:inherit; font-weight:700;
  font-size:12.5px; border-radius:999px; padding:7px 13px; cursor:pointer; display:flex; align-items:center; gap:5px }
.cm-chip.on{ background:var(--ink); color:#fff }
.cm-badge{ font-style:normal; background:var(--c-cd); color:#fff; font-size:10px; font-weight:800; border-radius:999px; padding:1px 6px }
.cm-chip.on .cm-badge{ background:rgba(255,255,255,.25) }

/* avatar linh vật */
.cm-ava{ width:40px; height:40px; flex:0 0 40px; border-radius:50%; overflow:hidden; display:inline-grid; place-items:center;
  background:linear-gradient(160deg,#F4EFE3,#fff); border:1px solid var(--line); vertical-align:middle }
.cm-ava img{ width:100%; height:135%; object-fit:cover; object-position:top center }
.cm-ava.sm{ width:26px; height:26px; flex:0 0 26px }
.cm-ava.lg{ width:72px; height:72px; flex:0 0 72px }
.cm-ava.txt{ font-weight:800; color:var(--c-cd); font-size:15px }
.cm-ava-wrap{ position:relative; flex:0 0 auto; align-self:flex-start }
.cm-ava-wrap .dot{ position:absolute; right:0; bottom:1px; width:11px; height:11px; border-radius:50%;
  background:#CFC9B8; border:2px solid #fff }
.cm-ava-wrap .dot.on{ background:var(--green) }

/* chip nhỏ dùng chung */
.cm-lv{ font-size:10.5px; font-weight:800; color:#5d5847; background:var(--paper-2); border-radius:6px; padding:2px 6px }
.cm-pair{ font-size:10.5px; font-weight:800; color:var(--blue); background:#EDF2F8; border-radius:6px; padding:2px 6px; white-space:nowrap }
.cm-sex{ font-size:10.5px; font-weight:800; border-radius:6px; padding:2px 7px }
.cm-sex.f{ background:#FCE9F1; color:#C2337A } .cm-sex.m{ background:#E7F0FA; color:#2E6FB0 }
.cm-serious{ font-size:10px; font-weight:800; color:var(--green); border:1px solid #BFE3CF; border-radius:6px; padding:1.5px 6px }
.cm-km{ color:var(--ink); font-weight:800; font-style:normal }
.cm-note{ font-size:13px; font-weight:600; color:var(--muted); margin:0 2px 12px; line-height:1.5 }

/* ---- composer ---- */
.cm-compose{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 12px 9px; margin-bottom:10px }
.cm-comp-row{ display:flex; gap:10px; align-items:flex-start }
.cm-compose textarea{ flex:1; border:0; background:none; resize:none; outline:none; font:inherit; font-weight:500;
  font-size:15px; color:var(--ink); padding:9px 0 4px; min-height:38px }
.cm-comp-meta{ display:flex; flex-wrap:wrap; gap:6px; padding:0 0 4px }
.cm-comp-meta:empty{ display:none }
.cm-meta-chip{ font-size:11.5px; font-weight:700; color:#5d5847; background:var(--paper-2); border-radius:999px; padding:4px 9px }
.cm-meta-chip i{ font-style:normal; cursor:pointer; opacity:.6; margin-left:2px }
.cm-meta-chip.fix{ background:#FDF3DC; color:#8a6a14 }
.cm-comp-tools{ display:flex; align-items:center; gap:2px; border-top:1px solid var(--line); padding-top:8px; margin-top:2px }
.cm-tool{ border:0; background:none; font:inherit; font-weight:700; font-size:12.5px; color:var(--muted);
  padding:6px 8px; border-radius:8px; cursor:pointer }
.cm-tool:active{ background:var(--paper-2) }
.cm-post-btn{ margin-left:auto; border:0; background:var(--c-cd); color:#fff; font:inherit; font-weight:800;
  font-size:13px; padding:7px 18px; border-radius:8px; cursor:pointer }
.cm-post-btn:active{ transform:translateY(1px) }

/* banner an toàn */
.cm-safety{ background:#FDF8EA; border:1px solid #EFDFB4; border-radius:10px; padding:8px 12px;
  font-size:12px; font-weight:600; color:#6b5320; line-height:1.5; margin-bottom:10px }

/* ---- bài đăng ---- */
.cm-post{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 12px 4px; margin-bottom:10px }
.cm-post-head{ display:flex; align-items:center; gap:9px }
.cm-post-who{ flex:1; min-width:0 }
.cm-post-name{ display:flex; align-items:center; gap:6px } .cm-post-name b{ font-size:14.5px }
.cm-post-who small{ display:block; color:var(--muted); font-weight:600; font-size:11.5px; margin-top:2px }
.cm-follow{ flex:0 0 auto; border:0; background:none; color:var(--c-cd); font:inherit; font-weight:800; font-size:12.5px; cursor:pointer; padding:4px 6px }
.cm-follow.on{ color:var(--muted); font-weight:700 }
.cm-more{ flex:0 0 auto; border:0; background:none; color:var(--muted); font-size:18px; font-weight:800; cursor:pointer; padding:2px 4px }
.cm-post-de{ font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.5; margin:9px 0 3px }
.cm-vi-btn{ border:0; background:none; color:var(--muted); font:inherit; font-weight:700; font-size:12px; cursor:pointer; padding:0 }
.cm-post-vi{ font-size:13px; font-weight:500; color:var(--muted); font-style:italic; margin-top:3px; line-height:1.5 }
.cm-post-topics{ display:flex; gap:9px; flex-wrap:wrap; margin-top:6px }
.cm-post-topics span{ color:#8a6314; font-weight:700; font-size:12.5px }
.cm-wantfix{ background:#FDF8EA; border-radius:9px; padding:7px 10px; font-size:12px; font-weight:600; color:#8a6a14; margin-top:8px }
.cm-counts{ display:flex; gap:10px; font-size:12px; font-weight:600; color:var(--muted); padding:8px 2px 7px }
.cm-counts:empty{ display:none }
.cm-post-act{ display:flex; border-top:1px solid var(--line); margin:0 -12px; padding:0 6px }
.cm-post-act button{ flex:1; border:0; background:none; font:inherit; font-weight:700; font-size:13px;
  color:var(--muted); padding:10px 2px; cursor:pointer; border-radius:8px }
.cm-post-act button:active{ background:var(--paper-2) }
.cm-post-act button.on{ color:var(--red) }

/* correction đỏ–xanh */
.cm-corr{ border-left:3px solid var(--c-cd); background:var(--tint); border-radius:8px; padding:9px 11px; margin-top:9px }
.cm-corr-head{ font-size:11.5px; font-weight:800; color:#8a6314; margin-bottom:5px }
.cm-corr-old{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.5 }
.cm-corr-old s{ color:var(--red); text-decoration-thickness:2px }
.cm-corr-new{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.5; margin-top:4px }
.cm-corr-new b{ color:var(--green); background:#EAF6EF; border-radius:4px; padding:0 3px }
.cm-corr-note{ font-size:12px; font-weight:600; color:#6b5320; margin-top:6px; line-height:1.5 }

/* bình luận kiểu bong bóng Meta */
.cm-cmts{ padding:2px 0 9px; display:flex; flex-direction:column; gap:7px }
.cm-cmt{ display:flex; gap:7px; align-items:flex-start }
.cm-cmt-bub{ background:var(--paper-2); border-radius:14px; padding:7px 11px; font-size:13px; font-weight:500; color:var(--ink); line-height:1.45 }
.cm-cmt-bub b{ display:block; font-size:12px; margin-bottom:1px }
.cm-cmt-box, .cm-fix-box{ display:flex; gap:7px; padding:4px 0 11px }
.cm-cmt-box input{ flex:1; border:0; background:var(--paper-2); border-radius:999px; padding:9px 14px; font:inherit; font-weight:500; font-size:13px; outline:none }
.cm-cmt-box button{ border:0; background:none; color:var(--c-cd); font:inherit; font-weight:800; font-size:13px; cursor:pointer }
.cm-fix-box{ flex-direction:column; background:var(--tint); border-radius:10px; padding:10px 11px; margin-bottom:11px }
.cm-fix-box small{ font-weight:700; color:var(--muted); font-size:11.5px }
.cm-fix-box input{ border:1px solid var(--line); border-radius:9px; padding:9px 11px; font:inherit; font-weight:500; font-size:14px; outline:none; background:#fff }
.cm-fix-box input:focus{ border-color:var(--c-cd) }
.cd-fix-send{ border:0; background:var(--green); color:#fff; font:inherit; font-weight:800; font-size:13px; border-radius:9px; padding:9px; cursor:pointer }

/* ---- bạn học ---- */
.cm-buddy{ display:flex; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin-bottom:8px; cursor:pointer }
.cm-bud-main{ flex:1; min-width:0 }
.cm-bud-l1{ display:flex; align-items:center; gap:6px; flex-wrap:wrap } .cm-bud-l1 b{ font-size:14.5px }
.cm-bud-l2{ font-size:11.5px; font-weight:600; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:5px; flex-wrap:wrap }
.cm-bud-bio{ font-size:13px; font-weight:500; color:var(--ink); margin-top:4px; line-height:1.4 }
.cm-bud-ints{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px }
.cm-bud-ints span{ font-size:11px; font-weight:700; color:#5d5847; background:var(--paper-2); border-radius:6px; padding:2.5px 7px }
.cm-bud-ints span.st{ background:#EAF6EF; color:var(--green) }
.cm-wave{ align-self:center; flex:0 0 40px; width:40px; height:40px; border:0; border-radius:50%;
  background:var(--tint); font-size:18px; cursor:pointer }
.cm-wave:active{ transform:scale(.92) }
.cm-nearbanner{ background:var(--tint); border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin-bottom:10px }
.cm-nearbanner b{ font-size:13.5px; display:block } .cm-nearbanner small{ color:var(--muted); font-weight:600; font-size:11.5px }
.cm-cities{ display:flex; gap:7px; overflow-x:auto; padding-bottom:9px } .cm-cities::-webkit-scrollbar{ height:0 }
.cm-city{ flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--muted); font:inherit; font-weight:700; font-size:12.5px; border-radius:999px; padding:6px 13px; cursor:pointer }
.cm-city.on{ border-color:var(--ink); background:var(--ink); color:#fff }
.cm-map{ position:relative; height:104px; border-radius:12px; overflow:hidden; margin-bottom:10px; border:1px solid var(--line);
  background:
    radial-gradient(90px 44px at 78% 22%, #DCE7D2 0 60%, transparent 61%),
    radial-gradient(120px 60px at 18% 80%, #D6E4EA 0 60%, transparent 61%),
    linear-gradient(120deg,#EFEBDD,#E7E2D1) }
.cm-map::before{ content:''; position:absolute; left:-10%; top:46%; width:120%; height:7px; background:#fff; opacity:.75; transform:rotate(-6deg) }
.cm-map-pins i{ position:absolute; width:11px; height:11px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--red); border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.25) }
.cm-map span{ position:absolute; left:9px; bottom:7px; font-size:11px; font-weight:800; color:#5d5847; background:rgba(255,255,255,.85); border-radius:7px; padding:3px 8px }
.cm-stamm{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin:10px 0 4px }
.cm-stamm b{ display:block; font-size:13.5px } .cm-stamm small{ color:var(--muted); font-weight:600; font-size:11.5px }
.cm-join{ margin-left:auto; border:0; background:var(--tint); color:var(--accent-d); font:inherit; font-weight:800; font-size:12.5px; padding:8px 14px; border-radius:9px; cursor:pointer }

/* ---- bộ lọc / hồ sơ (sheet) ---- */
.cm-fs-name{ font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:4px }
.cm-fs-row{ display:flex; gap:7px; flex-wrap:wrap }
.cm-fs-opt{ border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; font-weight:700; font-size:13px; border-radius:999px; padding:7px 14px; cursor:pointer }
.cm-fs-opt.on{ border-color:var(--ink); background:var(--ink); color:#fff }
.cm-prof{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center }
.cm-prof-name{ display:flex; align-items:center; gap:7px } .cm-prof-name b{ font-size:19px }
.cm-prof-sub{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); flex-wrap:wrap; justify-content:center }
.cm-prof-bio{ margin:2px 0; font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.5 }
.cm-prof-stats{ display:flex; gap:8px; width:100% }
.cm-prof-stats > div{ flex:1; background:var(--tint); border-radius:10px; padding:9px 4px }
.cm-prof-stats b{ display:block; font-size:17px } .cm-prof-stats small{ color:var(--muted); font-weight:700; font-size:10.5px }
.cm-prof .btn{ margin-top:6px }
.cm-opener{ background:var(--tint); border:1.5px dashed var(--c-cd); border-radius:11px; padding:10px 13px;
  font-size:14px; font-weight:700; color:var(--ink); line-height:1.5; width:100% }

/* ---- phòng nói ---- */
.cm-room{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin-bottom:8px; cursor:pointer }
.cm-room-lv{ flex:0 0 auto; min-width:40px; text-align:center; font-family:var(--font-cond); font-weight:600;
  font-size:12px; color:#fff; background:var(--c-nghe); border-radius:8px; padding:7px 7px }
.cm-room-lv.big{ font-size:14px; padding:9px 9px }
.cm-room-tx{ flex:1; min-width:0 } .cm-room-tx b{ display:block; font-size:13.5px; line-height:1.3 }
.cm-room-tx small{ color:var(--muted); font-weight:600; font-size:11.5px; display:flex; align-items:center; gap:5px; margin-top:3px }
.cm-live{ flex:0 0 auto; color:var(--red); font-weight:800; font-size:11px; letter-spacing:.3px }
.cm-sched{ flex:0 0 auto; color:var(--muted); font-weight:700; font-size:11px }
.cm-back{ border:0; background:none; color:var(--muted); font:inherit; font-weight:800; font-size:13.5px; cursor:pointer; padding:4px 2px 10px }
.cm-room-head{ display:flex; align-items:center; gap:11px; margin-bottom:9px }
.cm-room-head b{ display:block; font-size:15px } .cm-room-head small{ color:var(--muted); font-weight:600; font-size:12px }
.cm-rule{ background:#EAF6EF; border:1px solid #CBE7D7; border-radius:10px; padding:9px 12px;
  font-size:12px; font-weight:600; color:#1e6b4c; line-height:1.5; margin-bottom:11px }
.cm-seats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px }
.cm-seat{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 5px; text-align:center }
.cm-seat b{ display:block; font-size:11.5px; margin-top:5px } .cm-seat small{ color:var(--muted); font-weight:700; font-size:10px }
.cm-seat-plus{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--tint); font-size:20px; color:var(--muted); font-weight:800 }
.cm-seat.empty{ opacity:.55; border-style:dashed }
.cm-seat .cm-ava.lg{ width:56px; height:56px }
.cm-room-act{ display:flex; flex-direction:column; gap:8px }

/* ---- xếp hạng ---- */
.cm-league{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden }
.cm-lg{ display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid var(--line) }
.cm-lg:last-child{ border-bottom:0 }
.cm-lg.me{ background:var(--tint) }
.cm-lg-rank{ width:24px; text-align:center; font-weight:800; font-size:13px; color:var(--muted); flex:0 0 24px }
.cm-lg b{ flex:1; font-size:13.5px } .cm-lg-xp{ color:var(--muted); font-weight:800; font-size:13px }
.cm-report{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
.cm-report > div{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 3px; text-align:center }
.cm-report b{ display:block; font-size:18px; font-family:'Archivo' }
.cm-report small{ color:var(--muted); font-weight:700; font-size:10px }

.cm-rules-link{ display:block; margin:14px auto 0; border:0; background:none; color:var(--muted);
  font:inherit; font-weight:600; font-size:11.5px; cursor:pointer; padding:8px; text-align:center }

/* ============ v96 — HUB LUYỆN NGHE kiểu Todaii ============ */
#nghe{ --tac:var(--c-nghe,#4B6A8F); }
.ng-stats{display:flex;gap:8px;margin:2px 0 12px}
.ng-stats>div{flex:1;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center}
.ng-stats b{display:block;font-size:20px;color:var(--tac)}
.ng-stats small{color:var(--muted);font-size:11px}
.ng-lv-row{display:flex;gap:6px;margin-bottom:10px}
.ng-lv{flex:1;padding:9px 0;border-radius:12px;border:1.5px solid var(--line);background:var(--card,#fff);font-weight:800;font-family:var(--font-cond),sans-serif;letter-spacing:.5px;color:var(--muted)}
.ng-lv.on{background:var(--tac);border-color:var(--tac);color:#fff}
.ng-tool{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.ng-tool b{font-size:14px}
.ng-tool small{display:block;color:var(--muted)}
.ng-tool span{margin-left:auto;color:var(--muted);font-size:18px}
.ng-label{font-family:var(--font-cond),sans-serif;text-transform:uppercase;letter-spacing:1.2px;font-size:11.5px;color:var(--muted);margin:14px 2px 8px;font-weight:600}
.ng-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ng-topic{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:left;min-height:86px}
.ng-topic:active{transform:scale(.97)}
.ng-t-ic{font-size:24px;line-height:1}
.ng-t-tx b{display:block;font-size:13.5px;line-height:1.25;color:var(--ink)}
.ng-t-tx small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.ng-t-n{position:absolute;top:8px;right:8px;font-size:10.5px;font-weight:800;background:var(--tint,#F1ECDE);color:var(--muted);border-radius:999px;padding:2px 7px}
.ng-t-n.full{background:var(--green);color:#fff}
.ng-t-n.soon{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.ng-back{background:none;border:0;color:var(--tac);font-weight:800;font-size:14px;padding:4px 0;margin-bottom:6px}
.ng-topic-head{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.ng-th-ic{font-size:34px}
.ng-topic-head h2{font-size:19px;margin:0}
.ng-list{display:flex;flex-direction:column;gap:8px}
.ng-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:12px}
.ng-item.done{border-color:var(--green)}
.ng-i-st{width:30px;height:30px;border-radius:50%;background:var(--tac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.ng-item.done .ng-i-st{background:var(--green)}
.ng-i-tx b{display:block;font-size:14px}
.ng-i-tx small{color:var(--muted)}
.ng-i-fav{margin-left:auto;color:#BE3A2B}
.ng-i-score{margin-left:auto;font-weight:800;font-size:12px;color:var(--green)}
.ng-i-fav+.ng-i-score{margin-left:6px}
.ng-soon{background:var(--card,#fff);border:1px dashed var(--line);border-radius:14px;padding:14px}
.ng-samples{margin:8px 0 0 18px;padding:0}
.ng-samples li{font-size:13px;margin-bottom:5px}
.ng-samples small{color:var(--muted)}
/* player */
.ng-play-head{display:flex;align-items:flex-start;gap:10px}
.ng-play-head h2{font-size:19px;margin:0}
.ng-fav{margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:50%;width:38px;height:38px;font-size:18px;color:#BE3A2B;flex:none}
.ng-fav.on{background:#BE3A2B;border-color:#BE3A2B;color:#fff}
.ng-ctrl{display:flex;align-items:center;gap:8px;margin:12px 0;flex-wrap:wrap}
.ng-c-btn{background:var(--card,#fff);border:1.5px solid var(--line);border-radius:12px;padding:8px 13px;font-weight:800;font-size:14px}
.ng-c-btn.big{background:var(--tac);border-color:var(--tac);color:#fff;font-size:17px;padding:9px 20px}
.ng-c-btn.on{border-color:var(--tac);color:var(--tac)}
.ng-c-hint{flex-basis:100%;font-size:11px;color:var(--muted)}
.ng-karaoke{display:flex;flex-direction:column;gap:2px}
.ng-sent{display:flex;gap:8px;padding:9px 8px;border-radius:12px;align-items:flex-start}
.ng-sent.cur{background:var(--tint,#F1ECDE);box-shadow:inset 0 0 0 1.5px var(--tac)}
.ng-s-play{background:none;border:0;color:var(--tac);font-size:15px;padding:2px 4px;flex:none}
.ng-de{font-size:15.5px;line-height:1.55;margin:0;color:var(--ink)}
.ng-sent.cur .ng-de{font-weight:700}
.nw{border-bottom:1px dotted rgba(75,106,143,.5);cursor:pointer}
.nw:active{background:var(--tint,#F1ECDE)}
.ng-vi{font-size:12.5px;color:var(--muted);margin:3px 0 0}
.ng-vi.off{display:none}
.ng-vocab{display:flex;flex-direction:column;gap:6px}
.ng-w{display:flex;align-items:center;gap:8px;background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:13.5px}
.ng-w-spk{background:none;border:0;font-size:15px}
.ng-w-add{margin-left:auto;background:var(--tint,#F1ECDE);border:0;border-radius:8px;width:28px;height:28px;font-weight:800;color:var(--tac)}
.ng-q{background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:8px}
.ng-q-t{font-weight:700;font-size:14px;margin:0 0 8px}
.ng-q-opts{display:flex;flex-direction:column;gap:6px}
.ng-q-o{text-align:left;background:var(--paper,#F3EFE5);border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13.5px}
.ng-q-o.ok{border-color:var(--green);background:#E8F3EE;font-weight:700}
.ng-q-o.no{border-color:var(--red);background:#F9E9E6}
.ng-q-o.lock{pointer-events:none}
.ng-q-result{display:none;border-radius:14px;padding:12px;margin-top:4px;text-align:center}
.ng-q-result.show{display:block}
.ng-q-result.good{background:#E8F3EE;border:1.5px solid var(--green)}
.ng-q-result.try{background:var(--tint,#F1ECDE);border:1.5px solid var(--line)}
.ng-q-result b{display:block;margin-bottom:2px}
.ng-q-result span{font-size:12.5px;color:var(--muted)}
/* dict sheet */
.ng-dict{position:fixed;inset:0;background:rgba(22,18,12,.45);display:none;align-items:flex-end;z-index:60}
.ng-dict.show{display:flex}
.ng-d-card{background:var(--card,#fff);border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));width:100%;max-height:60dvh;overflow-y:auto}
.ng-d-head{display:flex;align-items:center;gap:8px}
.ng-d-w{font-size:19px;font-weight:800;margin:0}
.ng-d-ipa{font-size:13px;color:var(--muted);font-weight:400}
.ng-d-spk{margin-left:auto;background:var(--tint,#F1ECDE);border:0;border-radius:10px;width:36px;height:36px;font-size:16px}
.ng-d-f{font-size:12px;color:var(--muted);margin:4px 0 0}
.ng-d-vi{font-size:15px;color:var(--green);font-weight:700;margin:8px 0 2px}
.ng-d-mq{color:var(--muted)}
.ng-d-act{display:flex;gap:8px;margin-top:12px}
.ng-d-add{flex:1;background:var(--tac);border:0;border-radius:12px;color:#fff;font-weight:800;padding:11px}
.ng-d-x{background:var(--tint,#F1ECDE);border:0;border-radius:12px;font-weight:700;padding:11px 16px}

/* v103 — nhóm cờ dịch (ẩn dịch mặc định, bấm cờ mới hiện) */
.ng-tr{display:inline-flex;align-items:center;gap:6px;margin-left:2px}
.ng-tr-lbl{font-size:12px;color:var(--muted);font-weight:700}
.ng-flag{width:38px;height:34px;border:1.5px solid var(--line);border-radius:10px;background:var(--card,#fff);font-size:17px;line-height:1;filter:grayscale(.7);opacity:.7}
.ng-flag.on{border-color:var(--tac,#4B6A8F);filter:none;opacity:1;box-shadow:0 0 0 2px rgba(75,106,143,.15)}

/* v103 — nhiều nghĩa trong popup tra từ (Nghe) + tab Từ điển */
.ng-d-senses{margin:8px 0 2px}
.ng-d-st{font-size:12px;color:var(--muted);font-weight:800;margin:0 0 6px}
.ng-d-sn{display:flex;gap:8px;align-items:flex-start;padding:5px 0;border-top:1px solid var(--line);font-size:14.5px}
.ng-d-sn:first-of-type{border-top:0}
.ng-d-no{flex:none;width:20px;height:20px;border-radius:50%;background:var(--tac,#4B6A8F);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ng-d-cx{color:var(--accent,#C25320);font-weight:700}
.dc-senses{margin-top:5px;display:flex;flex-direction:column;gap:3px}
.dc-sn{font-size:13.5px;display:flex;gap:6px}
.dc-sn b{color:var(--tac,#4B6A8F)}
.dc-sn small{color:var(--accent,#C25320);font-weight:700}

/* v104 — TÔ MÀU VAI TRÒ NGỮ PHÁP (grammar-color.js) */
.gc{border-radius:5px;padding:0 3px;font-weight:600;white-space:nowrap}
.gc-pron{font-weight:800}                     /* đại từ nhân xưng LUÔN đậm */
.gc-subj{color:#2C5578;background:rgba(75,106,143,.14)}      /* chủ ngữ - xanh dương */
.gc-akk,.gc-akk-art{color:#A8431A;background:rgba(194,83,32,.14)}  /* tân ngữ Akkusativ - cam */
.gc-dat,.gc-dat-art{color:#5B3E9C;background:rgba(107,79,160,.15)} /* tân ngữ Dativ - tím */
.gc-rel{color:#B02E20;background:rgba(190,58,43,.15);font-weight:800}  /* đại từ quan hệ - đỏ */
.gc-art{color:#7A6E58;background:rgba(122,110,88,.12)}      /* mạo từ - nâu xám */
.gc-konj{color:#256B49;background:rgba(46,125,91,.14)}      /* liên từ - xanh lá */
.gc-wfr{color:#9A6A12;background:rgba(214,154,46,.16)}      /* từ hỏi - vàng */
.gc-noun{font-weight:700}                     /* danh từ (đích mũi tên) hơi đậm */
.gram-ex{position:relative}
.gram-ex b{line-height:2.1;display:inline-block}
.gc-arrows{z-index:2}
.gc-arrow-path{fill:none;stroke:#B02E20;stroke-width:1.6;opacity:.75}
.gc-arrow-head{fill:none;stroke:#B02E20;stroke-width:1.6;opacity:.9}
/* chú thích màu */
.gc-legend{background:var(--tint,#F1ECDE);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0}
.gc-lg-t{font-size:13px;display:block;margin-bottom:7px}
.gc-lg-row{display:flex;flex-wrap:wrap;gap:8px 12px}
.gc-lg-item{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600}
.gc-chip{width:15px;height:15px;border-radius:4px;display:inline-block}
.gc-lg-note{font-size:11.5px;color:var(--muted);margin:8px 0 0}

/* v105 — PLAYER thanh phát audio + thanh tốc độ + đếm ngược 3-2-1 */
.ng-player{display:flex;align-items:center;gap:10px;margin:12px 0 8px}
.ng-bar{flex:1;display:flex;gap:3px;height:22px;align-items:center;cursor:pointer;touch-action:none}
.ng-seg{flex:1;height:7px;background:var(--line);border-radius:4px;overflow:hidden;transition:height .12s}
.ng-seg.cur{height:11px}
.ng-seg-fill{height:100%;width:0;background:var(--tac,#4B6A8F);border-radius:4px}
.ng-seg.cur .ng-seg-fill{background:var(--accent,#C25320)}
.ng-pos{font-size:12px;font-weight:800;color:var(--muted);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.ng-ctrl2{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.ng-speedbox{display:flex;align-items:center;gap:7px;flex:0 1 auto}
.ng-sp-lbl{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
/* thanh tốc độ RÚT NGẮN ~1/3 (66px cố định) → chừa chỗ trống cho cờ ngôn ngữ ở "Dịch sang:" */
.ng-speed-range{flex:none;width:66px;-webkit-appearance:none;appearance:none;height:6px;border-radius:4px;background:linear-gradient(90deg,var(--tac,#4B6A8F),var(--tint,#F1ECDE));outline:none}
.ng-speed-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--tac,#4B6A8F);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.ng-speed-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--tac,#4B6A8F);border:3px solid #fff;cursor:pointer}
.ng-sp-sel{font-size:12px;font-weight:800;color:var(--tac,#4B6A8F);background:var(--card,#fff);border:1.5px solid var(--line);border-radius:9px;padding:4px 3px;font-variant-numeric:tabular-nums;cursor:pointer}
/* đếm ngược 3-2-1 NGAY TRÊN nút play (không overlay, không làm mờ màn) */
.ng-c-btn.big.counting{background:var(--accent,#C25320);border-color:var(--accent,#C25320);color:#fff;font-family:var(--font-cond),sans-serif;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.ng-c-btn.big.cd-pop{animation:ngcd .5s ease-out}
@keyframes ngcd{0%{transform:scale(.62);opacity:.4}45%{transform:scale(1.16);opacity:1}100%{transform:scale(1);opacity:1}}

/* v105 — quiz kiểu game: giải thích + rung + mờ */
.ng-q-expl{display:none;margin-top:8px;padding:9px 11px;border-radius:10px;font-size:13px;line-height:1.5}
.ng-q-expl.show{display:block;animation:cdpop .3s ease-out}
.ng-q-expl.ok{background:#E8F3EE;border:1.5px solid var(--green,#2E7D5B);color:#1c5c40}
.ng-q-expl.no{background:#F9E9E6;border:1.5px solid var(--red,#BE3A2B);color:#8a2a20}
.ng-q-o.dim{opacity:.45}
.ng-q-o.shake{animation:qshake .4s}
@keyframes qshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* v105 — từ loại + chức năng khi tra từ */
.ng-d-pos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0}
.ng-d-pos-b{background:var(--tac,#4B6A8F);color:#fff;font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px}
.ng-d-func{font-size:12.5px;color:var(--accent,#C25320);font-weight:600;line-height:1.4}
.dc-pos{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0}
.dc-pos-b{background:var(--tac,#4B6A8F);color:#fff;font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px}
.dc-func{font-size:12px;color:var(--accent,#C25320);font-weight:600}

/* ================= v108 — SÁCH NUVORA (mục 3 Công cụ học + trình đọc + karaoke) ================= */
/* nút nổi bật ở Công cụ học */
.ptool-sach{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:linear-gradient(135deg,#FBF4E9,#F3E7D3); border:1.5px solid var(--accent,#C25320);
  border-radius:16px; padding:13px 15px; margin:4px 0 10px; cursor:pointer; text-align:left; box-shadow:0 3px 12px rgba(194,83,32,.10) }
.ptool-sach:active{ transform:scale(.99) }
.ps-top{ display:flex; align-items:center; gap:9px }
.ps-ic{ font-size:23px }
.ptool-sach b{ font-size:17px; color:var(--ink); font-weight:800 }
.ptool-sach small{ color:var(--accent-d,#A83F1D); font-weight:700; font-size:11.5px; font-style:italic }
.nv-wm{ font-family:'Archivo',sans-serif; font-weight:800; text-transform:lowercase; letter-spacing:-.5px }
.nv-wm .dot{ color:var(--accent,#C25320); -webkit-text-fill-color:var(--accent,#C25320) }


/* trình đọc PDF: cuộn trọn 540 trang (ảnh) + nút play chồng đúng vị trí */
#sach{ background:#e9e5da }
.sach-wrap{ position:absolute; inset:0; display:flex; flex-direction:column }
.sk-topbar{ flex:none; display:flex; align-items:center; gap:10px; z-index:6;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 10px; background:var(--bg,#F3EFE5); border-bottom:1px solid var(--line) }
.sk-back{ background:var(--card,#fff); border:1px solid var(--line); border-radius:10px; padding:6px 11px; font-size:16px; font-weight:800; color:var(--ink); cursor:pointer }
.sk-top-tt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; font-weight:800; color:var(--ink) }
.sk-toc-btn{ background:var(--ink,#16120C); color:#fff; border:0; border-radius:10px; padding:7px 11px; font-size:12.5px; font-weight:800; cursor:pointer; white-space:nowrap }
/* chỉnh tốc độ đọc (cạnh Mục lục) */
.sk-speed{ position:relative; flex:none }
.sk-speed-btn{ display:flex; align-items:center; gap:3px; background:var(--card,#fff); border:1px solid var(--line); border-radius:10px; padding:6px 9px; font-size:12px; font-weight:800; color:var(--ink); cursor:pointer; white-space:nowrap }
.sk-speed-btn b{ color:var(--accent,#C25320); font-variant-numeric:tabular-nums }
.sk-speed-menu{ position:absolute; top:calc(100% + 6px); right:0; display:none; flex-direction:column; gap:2px; min-width:92px;
  background:var(--card,#fff); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 26px rgba(0,0,0,.18); padding:5px; z-index:30 }
.sk-speed.open .sk-speed-menu{ display:flex }
.sk-speed-menu button{ background:none; border:0; border-radius:8px; padding:9px 11px; text-align:left; font-size:13.5px; font-weight:700; color:var(--ink); cursor:pointer; font-variant-numeric:tabular-nums }
.sk-speed-menu button.on{ background:var(--accent,#C25320); color:#fff }
.sk-pages-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 0 44px }
.sk-pages{ max-width:820px; margin:0 auto; padding:0 8px }
.sk-page{ position:relative; width:100%; margin:0 auto 10px; background:#fff; border-radius:4px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.14) }
.sk-pimg{ display:block; width:100%; height:auto }
/* nút play GHÉP vào nửa phải thanh heading (cao = thanh) → không che chữ, nổi bật để bấm nghe */
.sk-pbtn{ position:absolute; right:6.5%; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  background:var(--accent,#C25320); color:#fff; border:1.5px solid #fff; border-radius:8px; padding:0 8px;
  box-shadow:0 2px 9px rgba(194,83,32,.55); cursor:pointer; z-index:3; white-space:nowrap; animation:skpulse 2.2s ease-in-out infinite }
.sk-pbtn:active{ transform:scale(.95) }
.sk-pbtn.playing{ background:#16120C; border-color:var(--accent,#C25320); animation:none }
.sk-pic{ font-size:12px; line-height:1 }
.sk-pdur{ font-family:var(--font-cond),sans-serif; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums }
.sk-pear{ font-size:11px }
@keyframes skpulse{ 0%,100%{ box-shadow:0 2px 9px rgba(194,83,32,.5) } 50%{ box-shadow:0 3px 18px rgba(194,83,32,.9) } }
/* mục lục drawer */
.sk-toc{ position:absolute; inset:0; z-index:20; display:none; background:rgba(22,18,12,.42) }
.sk-toc.show{ display:block }
.sk-toc-panel{ position:absolute; top:0; right:0; bottom:0; width:min(86%,380px); background:var(--bg,#F3EFE5);
  box-shadow:-8px 0 30px rgba(0,0,0,.3); display:flex; flex-direction:column; animation:sktoc .22s ease-out }
@keyframes sktoc{ from{ transform:translateX(30px); opacity:.4 } to{ transform:translateX(0); opacity:1 } }
.sk-toc-head{ flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 14px) 16px 12px; border-bottom:1px solid var(--line); font-size:16px }
.sk-toc-x{ background:none; border:0; font-size:18px; cursor:pointer; color:var(--muted) }
.sk-toc-list{ flex:1; overflow-y:auto; padding:8px 12px 30px }
.sk-toc-lv{ font-family:var(--font-cond),sans-serif; font-weight:600; letter-spacing:.1em; color:var(--accent-d,#A83F1D); margin:12px 4px 6px }
.sk-toc-it{ width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; margin-bottom:5px;
  background:var(--card,#fff); border:1px solid var(--line); border-radius:11px; cursor:pointer; text-align:left }
.sk-toc-it:active{ transform:scale(.99) }
.sk-toc-no{ flex:none; width:26px; height:26px; border-radius:8px; background:var(--tint,#F1ECDE); color:var(--accent-d,#A83F1D);
  font-family:var(--font-cond),sans-serif; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center }
.sk-toc-tt{ flex:1; display:flex; flex-direction:column }
.sk-toc-tt b{ font-size:13.5px; color:var(--ink) }
.sk-toc-tt small{ font-size:11px; color:var(--muted) }
.sk-toc-au{ flex:none; font-size:11px; color:var(--muted); font-weight:700 }

/* ============ v113 — SẮP LẠI TAB HỌC (game → lộ trình → bài) + MỤC LỤC GỌN ============ */
/* Căn mép thống nhất: container .tab-scroll đã có padding 16px → mọi khối span đủ bề ngang */
#home #game-hero{ padding:14px 0 2px }
.unit-banner{ margin:12px 0 20px; background:linear-gradient(160deg,#CE5D24,#B8481C) } /* cam Braun có chiều sâu nhẹ */
/* hero game về tông MỰC THAN ẤM → đồng bộ họ màu Bauhaus với header (bỏ tím lạnh) */
#home .gh-card{ background:linear-gradient(135deg,#241F16 0%,#4A2413 100%); box-shadow:0 14px 34px rgba(36,31,22,.30) }
/* chip cấp đang chọn: tô ĐẶC màu cấp, chữ trắng — nhìn 1 giây biết mình ở đâu */
.lv-chip.active{ background:var(--lc); border-color:var(--lc) }
.lv-chip.active b{ color:#fff }

/* MỤC LỤC GỌN — chỉ hiển thị, không thao tác (banner mới là nút học) */
.toc-card{ margin:0 0 26px; background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:2px 14px 4px }
.toc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:10px 2px 8px; border-bottom:1.5px solid var(--line) }
.toc-title{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:600; color:var(--muted) }
.toc-note{ font-size:11.5px; font-weight:800; color:var(--brand); white-space:nowrap }
.toc-note.ok{ color:var(--green) }
.toc-row{ display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--tint,#F4EFE3) }
.toc-row:last-child{ border-bottom:0 }
.toc-dot{ flex:none; width:23px; height:23px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:800; border:1.5px solid var(--line); color:var(--muted); background:#fff }
.toc-dot.done{ color:#fff; font-size:12.5px }
.toc-dot.cur{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 0 0 3px rgba(194,83,32,.18) }
.toc-main{ flex:1; min-width:0; display:flex; align-items:baseline; gap:7px; overflow:hidden }
.toc-main b{ font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.toc-main small{ flex:none; max-width:36%; font-size:10.5px; color:var(--muted); font-weight:600; font-style:italic;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.toc-row.next b{ color:var(--muted); font-weight:600 }
.toc-row.cur b{ color:var(--brand) }
.toc-here{ flex:none; font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.06em;
  font-size:9.5px; font-weight:600; color:#fff; background:var(--brand); padding:3px 8px; border-radius:9px }