* { box-sizing: border-box; }
a:not([class]) { color: var(--link-ink); }  /* chỉ link thô không class — §D1 (không đè link đã style) */
/* ===== Token màu: sáng mặc định + tối (opt-in qua [data-theme=dark], KHÔNG auto theo hệ thống để rollout an toàn) ===== */
:root {
  --bg: #f6f6fb; --panel: #ffffff; --panel-2: #f8fafc; --panel-3: #f3f4f6;
  --text: #1a1a2e; --text-2: #374151; --muted: #646b78;
  --line: #e3e3ee; --line-2: #e0e0ec;
  --accent-bg: #f0fdfa; --accent-bg2: #ccfbf1;
  --brand-ink: #0f766e; /* chữ teal (nav/brand) — sáng lên ở dark để đủ tương phản (§D1) */
  --brand-solid: #0f766e; /* NỀN teal đặc cho nút/badge CHỮ TRẮNG — GIỮ tối ở cả 2 theme (trắng đọc được) */
  --warn-ink: #b45309; --err-ink: #dc2626; --ok-ink: #047857; --link-ink: #1d4ed8;
}
:root[data-theme="dark"] {
  --brand-ink: #2dd4bf;
  --warn-ink: #fbbf24; --err-ink: #f87171; --ok-ink: #34d399; --link-ink: #7dd3fc;
  --bg: #0e1320; --panel: #172033; --panel-2: #1c273c; --panel-3: #212d45;
  --text: #e7eaf2; --text-2: #c3c9d6; --muted: #97a1b3;
  --line: #2c3852; --line-2: #33405c;
  --accent-bg: #0f2b2a; --accent-bg2: #123634;
}
body { margin: 0; font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); }
/* form controls theo token (dark mode: nền tối, chữ sáng thay vì trắng chói) */
input, textarea, select { background: var(--panel); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 13px; }
.err { color: var(--err-ink); font-size: 13px; }
/* Dùng token: mã cứng #047857 là xanh đậm, đặt trên nền tối thì chữ chìm gần như đọc
   không ra — đúng loại lỗi đã sửa ở các chỗ khác, riêng lớp .ok này còn sót. */
.ok { color: var(--ok-ink); font-weight: 600; }
/* keyboard focus visibility (a11y) */
:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; border-radius: 6px; }

/* responsive: tablet (nav nhiều tab dễ chật từ ~900px trở xuống) */
@media (max-width: 900px) {
  main { max-width: 100%; }
  /* ít mục sau khi gộp dropdown -> cho wrap, KHÔNG cuộn ngang (tránh cắt menu xổ) */
  nav { flex-wrap: wrap; overflow: visible; }
  .tab, .navtrig { white-space: nowrap; }
  .stats { flex-wrap: wrap; }
  .stat { flex: 1 1 30%; }
}
/* responsive: phones */
@media (max-width: 640px) {
  header { gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
  nav { order: 3; width: 100%; overflow: visible; flex-wrap: wrap; padding-bottom: 4px; }
  /* vùng chạm >=44px (dễ bấm cho người lớn tuổi/trẻ em/tay run) */
  .tab, .navtrig { white-space: nowrap; padding: 11px 12px; min-height: 44px; display: inline-flex; align-items: center; }
  .chat-mic, .chat-send, .sw-send, .kmodal-x, .slide-ov-x { min-width: 44px; min-height: 44px; }
  .navmenu { min-width: 180px; }
  .brand { font-size: 16px; }
  .userbox { font-size: 12px; }
  main { padding: 14px; }
  .stats { flex-wrap: wrap; }
  .stat { flex: 1 1 45%; }
  .addrow { flex-wrap: wrap; }
  .addrow input, .addrow select, .addrow textarea, .addrow button { flex: 1 1 100%; }
  .vocab-item { flex-direction: row; }
  .chatbox { max-height: none; }
  .msg .bubble { max-width: 88%; }
  .msg .corr { max-width: 88%; }
  /* Tutor chat: header xuống dòng đẹp, chat lấp đầy màn hình, input 16px chống iOS auto-zoom */
  .chatwin { height: calc(100dvh - 172px); min-height: 320px; }
  .chat-head { flex-wrap: wrap; }
  .chat-tools { order: 3; width: 100%; justify-content: flex-end; }
  .chat-compose input { font-size: 16px; }
}

header {
  display: flex; align-items: center; gap: 18px;
  background: var(--panel); padding: 12px 24px; border-bottom: 1px solid #ececf3;
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 800; color: var(--brand-ink); font-size: 18px; }
nav { display: flex; gap: 6px; flex: 1; align-items: center; }
.tab { background: none; border: none; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.ni { font-size: 15px; line-height: 1; font-style: normal; }
.navicon .ni { font-size: 17px; }
.tab.active { background: var(--accent-bg2); color: var(--brand-ink); font-weight: 600; }
/* Nhóm dropdown (Học ▾ / Luyện ▾) */
.navgrp { position: relative; }
.navtrig { background: none; border: none; padding: 8px 14px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
.navtrig:hover { background: var(--panel-3); }
.navtrig.active { background: var(--accent-bg2); color: var(--brand-ink); font-weight: 600; }
.navtrig .cv { font-size: 10px; opacity: .7; transition: transform .15s; }
.navgrp.open .navtrig .cv { transform: rotate(180deg); }
.navmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: none;
  flex-direction: column; gap: 2px; min-width: 160px; padding: 6px;
  background: var(--panel); border: 1px solid #e7e7f2; border-radius: 12px; box-shadow: 0 10px 30px rgba(20,20,40,.12); }
.navgrp.open .navmenu { display: flex; }
.navmenu .tab { text-align: left; width: 100%; padding: 9px 12px; }
.navmenu .tab:hover { background: var(--panel-3); }
.navhidden { display: none !important; }
.badge { display:inline-block; min-width:18px; height:18px; line-height:18px; padding:0 5px; margin-left:6px; border-radius:9px; background:#ef4444; color:#fff; font-size:11px; font-weight:700; text-align:center; vertical-align:middle; }
.badge.hidden { display:none; }
.userbox { display: flex; align-items: center; }

/* Profile avatar + dropdown */
.pf { position: relative; }
.pf-btn { background: none; border: none; padding: 0; cursor: pointer; border-radius: 50%; }
.pf-btn:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
.pf-av { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; font-weight: 700; font-size: 15px;
  color: #fff; background: linear-gradient(135deg, #2dd4bf, #0d9488); box-shadow: 0 2px 6px rgba(13,148,136,.3); }
.pf-av.lg { width: 42px; height: 42px; font-size: 18px; }
.pf-btn:hover .pf-av { filter: brightness(1.06); }
.pf-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; display: none;
  flex-direction: column; min-width: 240px; padding: 8px;
  background: var(--panel); border: 1px solid #e7e7f2; border-radius: 14px; box-shadow: 0 14px 40px rgba(20,20,40,.16); }
.pf-menu.open { display: flex; }
.pf-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; border-bottom: 1px solid #f0f0f6; margin-bottom: 6px; }
.pf-info { min-width: 0; }
.pf-email { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-all; line-height: 1.3; }
.pf-tier { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.pf-tier.t-free { background: var(--panel-3); color: var(--muted); }
.pf-tier.t-pro { background: var(--accent-bg2); color: #0e7490; }
.pf-tier.t-pro_plus { background: linear-gradient(135deg,#fde68a,#f59e0b); color: #78350f; }
.pf-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; padding: 10px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--text-2); font-family: inherit; }
.pf-item:hover { background: #f2faf9; }
.pf-item.danger { color: var(--err-ink); }
.pf-item.danger:hover { background: #fef2f2; }

main { max-width: 720px; margin: 0 auto; padding: 20px; }

.stats { display: flex; gap: 12px; margin-bottom: 18px; }
.stat { flex: 1; background: var(--panel); border-radius: 12px; padding: 14px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.stat .n { font-size: 22px; font-weight: 800; color: var(--brand-ink); }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.insights { background: var(--accent-bg); border: 1px solid #ccfbf1; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; }
.insights button { margin-left: auto; }
.goalbar { height: 6px; background: var(--accent-bg2); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.goalfill { height: 100%; background: #0f766e; transition: width .3s; }

.card-center { display: flex; flex-direction: column; align-items: center; }
.flash {
  background: var(--panel); border-radius: 16px; padding: 28px; width: 100%; max-width: 460px;
  box-shadow: 0 6px 24px rgba(40,40,90,.10); text-align: center;
}
.flash .q { font-size: 15px; color: var(--text-2); margin-bottom: 14px; line-height: 1.5; }
.flash .blank { color: var(--brand-ink); font-weight: 700; }
.flash .term { font-size: 28px; font-weight: 800; color: var(--brand-ink); }
.flash .ipa { color: var(--muted); margin: 4px 0; }
.flash .ans { font-size: 18px; margin: 10px 0; }
.flash .src { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 10px; }
.reveal-btn { background: #0f766e; color: #fff; border: none; border-radius: 10px; padding: 12px 22px; font-size: 15px; cursor: pointer; font-weight: 600; }
.grades { display: flex; gap: 8px; margin-top: 16px; justify-content: center; flex-wrap: wrap; }
.grade { border: none; border-radius: 10px; padding: 10px 16px; cursor: pointer; font-weight: 600; font-size: 14px; color: #fff; }
/* AA-safe: white text needs ≥3:1 (large/bold) — darkened from the bright tints */
.g-forgot { background: #dc2626; } .g-hard { background: #b45309; } .g-ok { background: #047857; } .g-easy { background: #2563eb; }
.grade small { display: block; font-weight: 400; font-size: 11px; opacity: .9; }
.empty { text-align: center; color: var(--muted); padding: 40px; }
.empty .big { font-size: 40px; }

.spk { background: var(--panel-3); border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer; margin-top: 8px;
  color: var(--text); font-family: inherit; } /* thiếu color -> button về đen mặc định, chìm nghỉm trên nền tối */
.vb-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.vb-del { background: transparent; border: none; border-radius: 8px; padding: 6px 10px; cursor: pointer; opacity: .55; font-size: 15px; }
.vb-del:hover { opacity: 1; background: var(--panel-3); }
.exp-box { background: var(--accent-bg); border-radius: 10px; padding: 12px; margin-top: 12px; text-align: left; color: var(--text-2); font-size: 13px; }
.exp-box .ex { margin-top: 6px; color: var(--brand, #0e7490); }
.exp-box ul { margin: 4px 0 0; padding-left: 18px; }
.mnem { margin-top: 8px; background: var(--accent-bg2); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }

/* ---- Ngân hàng bài tập (drill) — nút to, tương phản rõ, dễ dùng mọi lứa tuổi ---- */
.drill-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.drill-badge { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-weight: 600; }
.drill-prog { flex: 1; height: 8px; background: var(--panel-3); border-radius: 99px; overflow: hidden; }
.drill-prog > i { display: block; height: 100%; background: #0f766e; border-radius: 99px; transition: width .3s ease; }
.drill-passage { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; line-height: 1.7; font-size: 15.5px; color: var(--text-2); white-space: pre-wrap; }
.drill-q { font-size: 19px; font-weight: 700; line-height: 1.45; margin: 4px 0 16px; color: var(--text); }
.drill-opts { display: flex; flex-direction: column; gap: 10px; }
.drill-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--panel); color: var(--text); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 16px; font-weight: 500; cursor: pointer; font-family: inherit; min-height: 54px; transition: border-color .15s, background .15s; }
.drill-opt:hover:not(:disabled) { border-color: var(--brand-ink); background: var(--panel-2); }
.drill-opt:disabled { cursor: default; }
.drill-opt .k { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--panel-3); color: var(--text-2); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.drill-opt.correct { border-color: #059669; background: rgba(5,150,105,.12); }
.drill-opt.correct .k { background: #059669; color: #fff; }
.drill-opt.wrong { border-color: #ef4444; background: rgba(239,68,68,.1); }
.drill-opt.wrong .k { background: #ef4444; color: #fff; }
.drill-fb { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.drill-fb.ok { background: rgba(5,150,105,.1); border-color: rgba(5,150,105,.35); }
.drill-fb.no { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); }
.drill-fb .v { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.drill-fb.ok .v { color: var(--ok-ink); }
.drill-fb.no .v { color: #ef4444; }
.drill-fb .why { color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.drill-drop { min-height: 56px; border: 2px dashed var(--line); border-radius: 12px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-content: flex-start; }
.drill-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.drill-chip { background: var(--panel); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 16px; font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; min-height: 46px; }
.drill-chip:hover:not(:disabled) { border-color: var(--brand-ink); }
.drill-result { text-align: center; padding: 24px 12px; }
.drill-result .num { font-size: 48px; font-weight: 800; line-height: 1; }
.drill-result .sub { color: var(--muted); margin: 10px 0 20px; font-size: 15px; }
.pl-q { margin: 10px 0; padding: 10px 12px; background: var(--panel-3); border-radius: 10px; }
.pl-p { font-size: 14.5px; margin-bottom: 6px; }
.pl-opts { display: flex; flex-direction: column; gap: 4px; }
.pl-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 5px 6px; border-radius: 6px; cursor: pointer; min-height: 36px; }
.pl-opt:hover { background: var(--accent-bg); }
.onboard { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--accent-bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; }
.onboard-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rev-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; margin-bottom: 8px; }
.ws-sec { margin-top: 8px; }
.ws-rw { margin-top: 8px; }
.ws-rw summary { cursor: pointer; font-weight: 600; color: var(--text); }
.ws-rw-body { margin-top: 6px; padding: 8px 10px; background: var(--panel); border-radius: 8px; color: var(--text); white-space: pre-wrap; font-size: 13px; line-height: 1.5; }

.search { width: 100%; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px; margin-bottom: 14px; }
.vocab-list { display: flex; flex-direction: column; gap: 8px; }
.vocab-item { background: var(--panel); border-radius: 10px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.vocab-item .t { font-weight: 700; color: var(--brand-ink); }
.vocab-item .m { font-size: 13px; color: var(--text-2); }
.vocab-item .s { font-size: 11px; color: var(--muted); font-style: italic; }
.dots { color: var(--muted); letter-spacing: 2px; }
.dots .on { color: var(--brand-ink); }

.explore { background: var(--panel); border-radius: 12px; padding: 20px; }
.addrow { display: flex; gap: 8px; margin: 12px 0; }
.addrow input { flex: 1; padding: 10px; border: 1px solid var(--line-2); border-radius: 8px; }
.primary { background: #0f766e; color: #fff; border: none; border-radius: 8px; padding: 10px 16px; cursor: pointer; font-weight: 600; }
.ghost { background: var(--panel-3); color: var(--text); border: none; border-radius: 8px; padding: 10px 16px; cursor: pointer; font-weight: 600; }

.login-overlay { position: fixed; inset: 0; background: rgba(30,27,75,.5); display: flex; align-items: center; justify-content: center; z-index: 100; }
.login-card { background: var(--panel); border-radius: 16px; padding: 32px; text-align: center; width: 320px; }
.login-card h2 { color: var(--brand-ink); margin: 0 0 6px; }

/* loading / error states */
.lf-state { display:flex; align-items:center; justify-content:center; gap:12px; padding:40px 16px; color:var(--muted); font-size:14px; flex-wrap:wrap; }
.lf-err-state { color:var(--warn-ink); }
.lf-spin { width:22px; height:22px; border:3px solid #ccfbf1; border-top-color:var(--brand-ink); border-radius:50%; animation:lf-rot .8s linear infinite; }
@keyframes lf-rot { to { transform:rotate(360deg); } }
/* toast */
#lf-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:#1a1a2e; color:#fff; padding:12px 20px; border-radius:12px; font-size:14px; box-shadow:0 12px 36px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:.35s; z-index:200; max-width:90vw; }
#lf-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#lf-toast.err { background:#b91c1c; }
#lf-toast.ok { background:#0f766e; }
/* onboarding steps */
.ob-step { display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-top:1px solid #f0f0f6; }
.ob-step:first-of-type { border-top:none; }
.ob-n { flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:#ccfbf1; color:#0f766e; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px; }
.ob-step b { color: var(--text); }

/* tutor chat */
/* Tutor chat window */
.chatwin { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; box-shadow: 0 8px 30px rgba(20,20,40,.06); height: 68vh; min-height: 460px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff; }
.chat-av { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.chat-head-t { flex: 1; min-width: 0; }
.chat-title { font-weight: 700; font-size: 16px; }
.chat-sub { font-size: 12px; opacity: .85; }
.chat-tools { display: flex; gap: 6px; }
.chat-tool { background: rgba(255,255,255,.16); color: #fff; border: none; border-radius: 8px;
  padding: 6px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.chat-tool:hover { background: rgba(255,255,255,.28); }
.chat-tool.on { background: var(--panel); color: #0d9488; font-weight: 700; }
/* Máy không có micro -> nút giọng nói bị khoá. Phải TRÔNG như bị khoá, nếu không người
   dùng cứ bấm mãi và tưởng nút hỏng (đúng lỗi đã gặp: nút bật lên rồi tự tắt ngay). */
.chat-tool:disabled { opacity: .5; cursor: not-allowed; }
.chat-tool:disabled:hover { background: rgba(255,255,255,.16); }
.chat-mic:disabled { opacity: .45; cursor: not-allowed; }
.chat-status { padding: 4px 16px; font-size: 12px; }
.chat-status:empty { display: none; }
.chatbox { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: var(--panel-2); }
.chat-empty { margin: auto; text-align: center; color: var(--muted); font-size: 14px; max-width: 260px; }
.chat-empty .ce-ic { font-size: 34px; display: block; margin-bottom: 8px; }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.msg.user { flex-direction: row-reverse; align-self: flex-end; }
.msg.assistant { align-self: flex-start; }
.msg .m-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.msg.assistant .m-av { background: var(--accent-bg2); }
.msg.user .m-av { background: #0d9488; color: #fff; font-size: 12px; font-weight: 700; }
.msg .m-col { display: flex; flex-direction: column; min-width: 0; }
.msg.user .m-col { align-items: flex-end; }
.msg .bubble { max-width: 78%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.msg.user .bubble { background: #0d9488; color: #fff; border-bottom-right-radius: 5px; }
.msg.assistant .bubble { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg .corr { font-size: 12px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 6px 10px; margin-top: 5px; max-width: 78%; }
.chat-typing .bubble { display: inline-flex; gap: 4px; }
.chat-typing .dot { width: 6px; height: 6px; border-radius: 50%; background: #b5b5c5; animation: ctb 1s infinite; }
.chat-typing .dot:nth-child(2) { animation-delay: .15s; }
.chat-typing .dot:nth-child(3) { animation-delay: .3s; }
@keyframes ctb { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-compose { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.chat-compose input { flex: 1; border: 1px solid var(--line); border-radius: 22px; padding: 10px 16px; font-size: 14px; font-family: inherit; outline: none; }
.chat-compose input:focus { border-color: #14b8a6; }
.chat-mic { background: var(--panel-3); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 16px; flex-shrink: 0; }
.chat-mic:hover { background: #e9e9f2; }
.chat-mic.rec { background: #fee2e2; animation: micpulse 1s infinite; }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }
.chat-send { background: linear-gradient(135deg,#14b8a6,#0d9488); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 15px; flex-shrink: 0; }
.chat-send:hover { filter: brightness(1.08); }
.chat-send:disabled { opacity: .5; cursor: default; }
textarea.search { resize: vertical; font-family: inherit; }

/* Thẻ gói đã mua (hero) */
.plan-hero { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px;
  color: #fff; box-shadow: 0 8px 24px rgba(13,148,136,.25); }
.plan-hero.t-pro { background: linear-gradient(135deg,#2dd4bf,#0d9488); }
.plan-hero.t-pro_plus { background: linear-gradient(135deg,#0e7490,#0f766e); }
.plan-hero.t-family { background: linear-gradient(135deg,#0f766e,#0891b2); }
.plan-crown { font-size: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.plan-hero-name { font-size: 17px; font-weight: 600; }
.plan-hero-name b { font-weight: 800; }
.plan-hero-sub { font-size: 13px; opacity: .9; margin-top: 3px; }

/* Widget Hỗ trợ nổi */
.sw { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: none; }
body.authed .sw { display: block; }
.sw-bubble { width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg,#14b8a6,#0d9488); color: #fff; font-size: 24px;
  box-shadow: 0 8px 24px rgba(13,148,136,.4); display: flex; align-items: center; justify-content: center;
  transition: transform .15s; }
.sw-bubble:hover { transform: scale(1.06); }
.sw-ic-close { display: none; }
.sw.open .sw-ic-open { display: none; }
.sw.open .sw-ic-close { display: inline; }
.sw-panel { position: absolute; right: 0; bottom: 72px; width: 360px; max-width: calc(100vw - 44px);
  background: var(--panel); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(20,20,40,.22);
  display: none; flex-direction: column; height: min(580px, calc(100vh - 120px)); }
.sw.open .sw-panel { display: flex; }
.sw-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px;
  background: linear-gradient(135deg,#14b8a6,#0d9488); color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(13,148,136,.25); }
.sw-back { background: none; border: none; color: #fff; width: 26px; height: 30px;
  font-size: 26px; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; padding: 0 0 3px; opacity: .9; margin-left: -4px; }
.sw-back:hover { opacity: 1; }
.sw-av { position: relative; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.sw-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; background: #34d399; border: 2px solid #0d9488; }
.sw-head-t { min-width: 0; }
.sw-title { font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-sub { font-size: 12px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Các view chiếm phần còn lại, tự cuộn */
.sw-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sw-view[hidden] { display: none; }

/* View home: danh sách hội thoại + nút CTA dưới cùng */
#swHome { background: var(--panel-2); }
.sw-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sw-hint { color: var(--muted); font-size: 13px; text-align: center; margin: auto; padding: 20px; line-height: 1.5; }
.tkrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; font-family: inherit; }
.tkrow:hover { border-color: #cfcfe6; box-shadow: 0 3px 12px rgba(20,20,40,.06); }
.tkrow-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }
.tkrow-dot.open { background: #22c55e; }
.tkrow-dot.answered { background: #3b82f6; }
.tkrow-dot.pending { background: #f59e0b; }
.tkrow-dot.closed { background: #cbd5e1; }
.tkrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tkrow-subject { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkrow-meta { font-size: 12px; color: var(--muted); }
.tkrow-arrow { color: #7b8090; font-size: 20px; flex-shrink: 0; }
.sw-cta { margin: 12px; flex-shrink: 0; background: linear-gradient(135deg,#14b8a6,#0d9488); color: #fff;
  border: none; border-radius: 12px; padding: 13px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.sw-cta:hover { filter: brightness(1.06); }
.sw-cta:disabled { opacity: .55; cursor: default; }

/* View new: form */
.sw-form { padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.sw-form input, .sw-form textarea { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  font: inherit; font-size: 14px; outline: none; }
.sw-form input:focus, .sw-form textarea:focus { border-color: #14b8a6; }
.sw-form textarea { min-height: 120px; resize: vertical; }
.sw-status:empty { display: none; }
.sw-status { font-size: 12px; color: var(--muted); }

/* View thread: hội thoại */
.sw-thread { background: var(--panel-2); }
.sw-msgs { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 3px; }
.sw-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.sw-msg.grp { margin-top: 9px; }
.sw-msg:first-child { margin-top: 0; }
.sw-msg.user { flex-direction: row-reverse; align-self: flex-end; }
.sw-msg.agent { align-self: flex-start; }
.sw-m-av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-bg2); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.sw-m-col { display: flex; flex-direction: column; min-width: 0; max-width: 82%; }
.sw-msg.user .sw-m-col { align-items: flex-end; }
.sw-m-name { font-size: 11px; font-weight: 600; color: #8b8ba7; margin: 0 0 3px 3px; }
.sw-bubble-m { padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45;
  white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 2px rgba(20,20,40,.05); }
.sw-msg.user .sw-bubble-m { background: linear-gradient(135deg,#14b8a6,#0d9488); color: #fff; border-bottom-right-radius: 5px; }
.sw-msg.agent .sw-bubble-m { background: var(--panel); color: var(--text); border: 1px solid #ececf3; border-bottom-left-radius: 5px; }
.sw-m-time { font-size: 10px; color: var(--muted); margin: 3px 4px 0; }
.sw-compose { display: flex; align-items: center; gap: 7px; padding: 10px; border-top: 1px solid var(--line); background: var(--panel); flex-shrink: 0; }
.sw-compose input { flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 9px 14px; font: inherit; font-size: 14px; outline: none; }
.sw-compose input:focus { border-color: #14b8a6; }
.sw-send { background: linear-gradient(135deg,#14b8a6,#0d9488); color: #fff; border: none; width: 38px; height: 38px;
  border-radius: 50%; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.sw-send:hover { filter: brightness(1.08); }
.sw-send:disabled { opacity: .5; }
@media (max-width: 480px) {
  .sw { right: 14px; bottom: 14px; }
  .sw-panel { bottom: 68px; }
}
/* quiz */
.quizq { background: var(--accent-bg); border-radius: 10px; padding: 12px; margin-top: 10px; }
.quizopt { display: block; width: 100%; text-align: left; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); cursor: pointer; }
.quizopt:hover { border-color: var(--brand-ink); }
.quizfb { margin-top: 6px; font-size: 13px; }
/* reader */
.reader { margin-top: 12px; }
.rbody { line-height: 1.9; font-size: 16px; }
.rword { cursor: pointer; border-radius: 3px; padding: 0 1px; }
.rword:hover { background: var(--accent-bg2); color: var(--brand-ink); }
#rpop { margin-top: 12px; font-size: 14px; }

/* ---- Settings: engine + BYO-key ---- */
.field { margin: 14px 0; }
.fieldlbl { display: block; font-weight: 600; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.engine-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.engine-pills .pill {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.engine-pills .pill.on { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.engine-pills .pill.off { background: var(--panel-3); color: var(--muted); }

.byo-card {
  margin-top: 16px; padding: 16px; border: 1px solid #e5e7eb;
  border-radius: 14px; background: linear-gradient(180deg, #f4fbfa 0%, #fff 60%);
}
.byo-head { display: flex; align-items: center; gap: 8px; }
.byo-title { font-weight: 700; font-size: 15px; color: var(--text); }
.badge-pro {
  font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .3px;
  background: linear-gradient(135deg, #14b8a6, #0f766e); padding: 2px 8px; border-radius: 6px;
}
.byo-desc { margin: 8px 0 12px; font-size: 13px; line-height: 1.55; }
.byo-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.byo-row select, .byo-row input {
  padding: 10px; border: 1px solid var(--line-2); border-radius: 8px; font-family: inherit; font-size: 14px;
}
.byo-row select { background: var(--panel); }
.byo-row input { flex: 1; min-width: 180px; }
.byo-hints { margin-top: 10px; font-size: 12px; }
.byo-hints a { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.byo-hints a:hover { text-decoration: underline; }

/* ---- Auth tabs (đăng nhập / đăng ký) ---- */
.auth-tabs{display:flex;gap:6px;background:var(--panel-3);border-radius:10px;padding:4px;margin-bottom:12px}
.auth-tab{flex:1;border:none;background:transparent;padding:8px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;color:var(--text-2)}
.auth-tab.active{background:var(--panel);color:var(--brand-ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.login-card input{padding:11px 12px;border:1px solid var(--line-2);border-radius:10px;font-size:14px;box-sizing:border-box}
.login-card input:focus{outline:none;border-color:#5eead4}

/* ---- Trợ lý viết (TipTap) ---- */
/* main bị giới hạn 720px -> ô viết chỉ còn ~370px, quá chật. Nới riêng cho tab Viết. */
main.wide { max-width: 1140px; }

.w-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin-top: 16px; align-items: start; }
@media (max-width: 900px) { main.wide { max-width: 100%; } .w-wrap { grid-template-columns: 1fr; } }

.w-main { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel);
          box-shadow: 0 1px 3px rgba(20,20,60,.04); }

/* Thanh công cụ: KHÔNG cho chữ xuống dòng (trước đây "Kiểm tra" vỡ thành 2 dòng). */
.w-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; flex-wrap: nowrap;
         border-bottom: 1px solid var(--line); background: var(--panel-2); }
.w-bar button, .w-bar span { white-space: nowrap; flex-shrink: 0; }
.w-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; height: 32px; min-width: 34px;
         padding: 0 9px; cursor: pointer; font-size: 13px; color: var(--text-2); line-height: 1; }
.w-btn:hover { border-color: #5eead4; color: var(--brand-ink); background: var(--panel-3); }
.w-sep { width: 1px; height: 20px; background: #e6e6f0; margin: 0 4px; }
.w-grow { flex: 1 1 auto; min-width: 0; }
#wCount { font-size: 12.5px; color: var(--muted); }
.w-bar .ghost, .w-bar .primary { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 8px; line-height: 1; }

/* Vùng soạn thảo: rộng rãi, dễ đọc như trang giấy */
.w-editor { min-height: 380px; padding: 26px 30px; outline: none;
            font-size: 16px; line-height: 1.85; color: var(--text); }
.w-editor p { margin: 0 0 14px; }
.w-editor p:last-child { margin-bottom: 0; }
.w-editor ul { margin: 0 0 14px; padding-left: 22px; }
.w-editor p.is-editor-empty:first-child::before {
  content: "Start writing in English…"; color: #7b8090; float: left; pointer-events: none; height: 0; }

/* Gạch chân lỗi ngay trong bài — mỗi loại một màu */
.gm { border-bottom: 2px solid; cursor: pointer; padding-bottom: 1px; }
.gm-spelling { border-color: #ef4444; background: rgba(239,68,68,.07); }
.gm-grammar { border-color: #14b8a6; background: rgba(20,184,166,.07); }
.gm-punctuation { border-color: #f59e0b; background: rgba(245,158,11,.09); }
.gm-capitalization { border-color: #10b981; background: rgba(16,185,129,.09); }
.gm-style { border-color: var(--muted); background: rgba(148,148,171,.09); }
.gm-on { background: #fde68a !important; box-shadow: 0 0 0 2px #fde68a; }

/* Cột lỗi bên phải */
.w-side { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden;
          position: sticky; top: 16px; display: flex; flex-direction: column; max-height: 78vh;
          box-shadow: 0 1px 3px rgba(20,20,60,.04); }
.w-side-head { padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13.5px;
               display: flex; align-items: center; gap: 8px; background: var(--panel-2); color: var(--text); }
.w-badge { background: #0f766e; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700;
           padding: 2px 8px; min-width: 20px; text-align: center; }
.w-badge.zero { background: #d9d9e3; color: #6b6b80; }
#wIssues { overflow-y: auto; padding: 10px; }
.w-clean { color: var(--ok-ink); font-size: 13px; text-align: center; padding: 30px 10px; line-height: 1.6; }
.w-issue { border: 1px solid #eeeef4; border-radius: 10px; padding: 11px 12px; margin-bottom: 8px;
           cursor: pointer; transition: .15s; }
.w-issue:hover { border-color: #c7c7e8; background: #fafaff; }
.w-issue.on { border-color: #14b8a6; background: #f5f5ff; box-shadow: 0 0 0 1px #14b8a6 inset; }
.w-type { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px; letter-spacing: .3px; }
.w-spelling { background: #fee2e2; color: #b91c1c; }
.w-grammar { background: #e0e7ff; color: #0f766e; }
.w-punctuation { background: #fef3c7; color: #b45309; }
.w-capitalization { background: #d1fae5; color: #047857; }
.w-style { background: var(--panel-3); color: var(--text-2); }
.w-fix { font-size: 14px; margin: 8px 0 4px; word-break: break-word; }
.w-fix s { color: #ef4444; text-decoration-thickness: 1.5px; }
.w-fix b { color: #059669; }
.w-arrow { color: #b8b8c8; margin: 0 3px; }
.w-why { font-size: 12px; color: #7a7a90; line-height: 1.5; }
.w-apply { margin-top: 9px; border: none; background: #0f766e; color: #fff; border-radius: 7px;
           padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.w-apply:hover { background: #3730a3; }

/* ---- Từ điển ---- */
.dict-search { display: flex; gap: 8px; position: relative; margin-top: 12px; }
.dict-search .search { flex: 1; }
.dict-suggest { position: absolute; top: 100%; left: 0; right: 90px; z-index: 30; margin-top: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20,20,60,.14);
  overflow: hidden; max-height: 260px; overflow-y: auto; }
.dict-suggest button { display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 14px; font-size: 14px; cursor: pointer; font-family: inherit; color: var(--text); }
.dict-suggest button:hover { background: var(--panel-3); color: var(--brand-ink); }

.d-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-top: 16px; }
.d-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.d-word { font-size: 28px; font-weight: 800; color: var(--brand-ink); }
.d-ipa { margin-left: 8px; color: #7a7a90; font-size: 15px; }
.d-cefr { margin-left: 8px; background: var(--accent-bg2); color: #0e7490; font-size: 11px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; }
.d-audio { display: flex; gap: 6px; align-items: center; }
.d-play { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 11px;
  font-size: 12.5px; cursor: pointer; color: var(--text-2); }
.d-play:hover { border-color: #5eead4; color: var(--brand-ink); }
.d-vi { margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--text); }

.d-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid #f0f0f5; }
.d-sec-h { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase;
  letter-spacing: .6px; margin-bottom: 10px; }
.d-pos-block { margin-bottom: 10px; }
.d-pos { display: inline-block; background: var(--panel-3); color: var(--text-2); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 6px; margin-bottom: 6px; }
.d-defs, .d-ex { margin: 4px 0 0; padding-left: 20px; }
.d-defs li { font-size: 14.5px; color: var(--text); line-height: 1.6; }
.d-ex li { font-size: 14.5px; color: var(--text-2); font-style: italic; line-height: 1.7; }

.d-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.d-chip { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 9px; padding: 6px 11px;
  font-size: 13.5px; font-weight: 600; color: var(--brand-ink); cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: baseline; gap: 6px; }
.d-chip:hover { border-color: var(--brand-ink); background: var(--panel-3); }
.d-chip-vi { font-size: 11.5px; font-weight: 400; color: var(--muted); }
/* Từ điển kiểu Cambridge: gom theo từ loại, mỗi nghĩa đánh số, ví dụ nghiêng thụt vào */
.cd-pos { margin-top: 14px; }
.cd-pos-h { font-size: 13px; font-weight: 800; font-style: italic; color: var(--err-ink);
  border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 8px; letter-spacing: .01em; }
.cd-senses { margin: 0; padding-left: 24px; list-style: decimal; }
.cd-senses > li { margin: 0 0 12px; padding-left: 4px; }
.cd-senses > li::marker { color: var(--muted); font-weight: 700; font-size: 13px; }
.cd-vi { font-size: 15px; font-weight: 600; color: var(--brand-ink); line-height: 1.45; }
.cd-def { font-size: 14.5px; color: var(--text); line-height: 1.5; }
/* Khi có nghĩa Việt (.cd-vi) đứng trước, định nghĩa Anh xuống hàng phụ (mờ, nhỏ hơn) — kiểu Cambridge. */
.cd-vi + .cd-def { font-size: 13px; color: var(--text-2); }
.cd-ex { margin: 5px 0 0; padding: 0; list-style: none; }
.cd-ex li { font-style: italic; color: var(--text-2); font-size: 13.5px; line-height: 1.5;
  padding-left: 12px; border-left: 2px solid #e7e7f2; margin: 3px 0; }
.cd-rel { display: flex; align-items: baseline; gap: 8px; margin: 7px 0 0; flex-wrap: wrap; }
.cd-rel-l { font-size: 11px; font-weight: 700; color: var(--ok-ink); min-width: 60px; flex: none;
  text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; }
.cd-rel-l.cd-ant { color: var(--err-ink); }

.d-more { margin-top: 16px; }
.d-more summary { cursor: pointer; font-size: 13px; color: #7a7a90; }
.d-raw { white-space: pre-wrap; font-size: 13px; color: var(--text-2); background: var(--panel-2);
  border: 1px solid #eee; border-radius: 8px; padding: 12px; margin-top: 8px;
  font-family: inherit; line-height: 1.6; max-height: 300px; overflow-y: auto; }
/* Giải nghĩa dịch máy — nền vàng nhạt + nhãn, để không bị nhầm là nghĩa chuẩn */
.d-mt { margin-top: 10px; font-size: 15px; color: #7c5f10; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; line-height: 1.6; }
.d-mt-tag { display: inline-block; background: #fde68a; color: #78350f; font-size: 10px;
  font-weight: 800; padding: 2px 7px; border-radius: 5px; margin-right: 6px;
  text-transform: uppercase; letter-spacing: .3px; vertical-align: 1px; }

/* ---- Lớp học ---- */
.cls-sec { margin-top: 18px; }
.cls-sec-h { font-weight: 700; font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
/* ── Bảng lớp trung tâm: tổng quan + thẻ giàu thông tin ── */
.cls-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 4px; }
.cls-stat { background: linear-gradient(180deg,#f0fdfa,#fff); border: 1px solid #d5f5ef; border-radius: 12px; padding: 12px 14px; }
.cls-stat-n { font-size: 22px; font-weight: 800; color: var(--brand-ink); line-height: 1.1; }
.cls-stat-l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cls-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cls-card2 { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px; transition: border-color .12s, box-shadow .12s, transform .12s; }
.cls-card2:hover { border-color: #14b8a6; box-shadow: 0 6px 18px rgba(20,184,166,.14); transform: translateY(-2px); }
.cls-card2:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
.cls-card2.is-arch { opacity: .62; }
.cls-c2-top { display: flex; align-items: center; gap: 8px; }
.cls-ava { width: 38px; height: 38px; border-radius: 10px; color: #fff; font-weight: 800; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: .3px; flex: 0 0 auto; }
.cls-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.role-teacher { background: var(--accent-bg2); color: var(--brand-ink); }
.role-asst { background: #e0e7ff; color: #4338ca; }
.role-admin { background: #fef3c7; color: #b45309; }
.role-stud { background: #dcfce7; color: #15803d; }
.role-arch { background: #f1f5f9; color: #64748b; margin-left: auto; }
.cls-c2-name { font-weight: 700; font-size: 15.5px; color: var(--text); line-height: 1.3; }
.cls-c2-seat { display: flex; flex-direction: column; gap: 5px; }
.cls-seatbar { height: 6px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.cls-seatbar span { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
.cls-seat-t { font-size: 12.5px; color: var(--muted); }
.cls-seat-t b { color: var(--text); }
.cls-c2-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.cls-code { background: var(--panel-2); border: 1px solid #e5e7eb; border-radius: 7px; padding: 4px 9px; font: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #334155; cursor: pointer; }
.cls-code:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.cls-open-hint { font-size: 12.5px; font-weight: 600; color: var(--brand-ink); }
.cls-empty { grid-column: 1/-1; display: flex; align-items: center; gap: 14px; background: var(--panel-3);
  border: 1px dashed #e2e5ee; border-radius: 14px; padding: 20px 22px; }
.cls-empty-ic { font-size: 34px; }
@media (max-width: 560px) { .cls-stats { grid-template-columns: repeat(2, 1fr); } }
.cls-new { display: flex; gap: 8px; margin-top: 10px; }
.cls-new input { flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 14px; outline: none; }
.cls-new input:focus { border-color: #14b8a6; }
.cls-back { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-bg); border: 1px solid #99f6e4; color: var(--brand-ink); font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 7px 14px; margin-bottom: 12px; border-radius: 8px; font-family: inherit; }
.cls-back:hover { background: var(--accent-bg2); }
.cls-code { background: var(--accent-bg); border: 1px solid #ccfbf1; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 4px; }
.cls-code b { font-size: 17px; color: var(--brand-ink); letter-spacing: 1px; }
.cls-assign { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; margin-bottom: 6px; font-size: 14px; }
.cls-sec textarea, .cls-sec > input { width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; font: inherit; font-size: 14px; outline: none; margin-bottom: 8px; resize: vertical; }
.cls-sec textarea:focus, .cls-sec > input:focus { border-color: #14b8a6; }
.cls-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cls-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.cls-table td { padding: 9px 8px; border-bottom: 1px solid #f3f3f8; }
.cls-bar { display: inline-block; width: 80px; height: 6px; background: #eceef0; border-radius: 4px; overflow: hidden; margin-right: 6px; vertical-align: middle; }
.cls-bar-f { height: 100%; background: linear-gradient(90deg,#14b8a6,#0d9488); }

/* ---- Lớp học: Pha 2/3 ---- */
.cls-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; border-bottom: 1px solid var(--line); }
.cls-subtab { background: none; border: none; padding: 8px 12px; cursor: pointer; font: inherit; font-size: 14px;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cls-subtab:hover { color: var(--brand-ink); }
.cls-subtab.on { color: var(--brand-ink); font-weight: 700; border-bottom-color: #14b8a6; }
.cls-select { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 14px; margin-bottom: 8px; width: 100%; }
.cls-mini { background: var(--accent-bg); border: 1px solid #ccfbf1; color: var(--brand-ink); border-radius: 8px;
  padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; font-weight: 600; }
.cls-mini:hover { background: var(--accent-bg2); }
.cls-tag { display: inline-block; background: var(--accent-bg2); color: var(--brand-ink); font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px; }
.cls-mat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 8px; }
.cls-mat-b { white-space: pre-wrap; margin: 6px 0; font-size: 14px; line-height: 1.5; }
.cls-q { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; scroll-margin-top: 70px; }
.cls-q.flagged { box-shadow: inset 3px 0 0 #f59e0b; }
.cls-q.flash { animation: mockFlash 1.2s ease; }
.cls-q-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.cls-q-h .mock-flag { margin-left: auto; }
.cls-q-p { margin-bottom: 8px; font-size: 14.5px; }
.cls-q input, .cls-q textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 14px; margin-bottom: 6px; }
.cls-q .tbq-points { width: 90px; }
.cls-x { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 14px; }
.tbq-opt { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tbq-opt input[type=radio] { width: auto; margin: 0; flex-shrink: 0; }
.tbq-opt .tbq-optxt { margin-bottom: 0; }
.cls-qadd { display: flex; gap: 8px; margin: 8px 0; }
.cls-result-hero { text-align: center; padding: 20px; background: var(--accent-bg); border-radius: 14px; margin: 12px 0; }
.cls-score { font-size: 40px; font-weight: 800; color: var(--brand-ink); }
.cls-io { background: var(--accent-bg); border: 1px solid #ccfbf1; border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; font-size: 14px; }
.cls-delta { font-weight: 700; font-size: 13px; margin-left: 6px; }
.cls-delta.up { color: #059669; } .cls-delta.down { color: #dc2626; }

/* Đồng hồ làm bài KT */
.cls-timer { display: inline-block; background: var(--accent-bg); border: 1px solid #ccfbf1; color: var(--brand-ink);
  font-weight: 800; font-size: 18px; padding: 6px 14px; border-radius: 10px; margin-bottom: 10px;
  font-variant-numeric: tabular-nums; }
.cls-timer.warn { background: #fef2f2; border-color: #fecaca; color: #dc2626; animation: micpulse 1s infinite; }

/* Chuyển chế độ Lớp quản lý / Khóa tự học */
.cls-mode { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 3px; margin-bottom: 12px; gap: 3px; }
.cls-modebtn { background: none; border: none; padding: 7px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.cls-modebtn.on { background: var(--brand-solid); color: #fff; }
.cls-course-cat { display: flex; flex-direction: column; gap: 6px; }
.cls-course-desc { font-size: 13px; color: #4b5563; }
.cls-course-cat .cls-mini { align-self: flex-start; margin-top: 4px; }

/* Khóa học chuẩn */
.cr-subtitle { font-size: 15px; color: var(--text-2); margin: -4px 0 8px; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cr-chip { background: #f2faf9; border: 1px solid #ccfbf1; color: #0f766e; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.cr-progress { margin: 8px 0 4px; }
.cr-outcomes { margin: 4px 0; padding-left: 20px; }
.cr-outcomes li { margin: 3px 0; font-size: 14px; }
.cr-module { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.cr-module-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--panel-2); padding: 11px 14px; font-size: 14.5px; }
.cr-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #f3f3f8; cursor: pointer; }
.cr-item:hover { background: var(--accent-bg); }
.cr-item-ic { font-size: 16px; flex-shrink: 0; }
.cr-item-t { flex: 1; font-size: 14px; }
.cr-item-ty { font-size: 11px; color: var(--muted); background: var(--panel-3); padding: 2px 8px; border-radius: 6px; }
.cr-del { flex-shrink: 0; border: none; background: none; cursor: pointer; font-size: 14px; opacity: 0; padding: 4px 6px; border-radius: 7px; transition: opacity .12s, background .12s; }
.cr-item:hover .cr-del { opacity: .55; }
.cr-del:hover { opacity: 1; background: #fee2e2; }
.cr-additem { margin: 8px 14px; }
.cr-video { margin: 8px 0; }
.cr-field { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 14px; margin-bottom: 8px; outline: none; }
.cr-field:focus { border-color: #14b8a6; }

/* Chứng chỉ + đánh giá khóa học */
.cr-rating { font-size: 15px; margin: -2px 0 8px; }
.cr-stars { font-size: 26px; color: #d1d5db; cursor: default; user-select: none; }
.cr-star { cursor: pointer; transition: color .1s; }
.cr-star.on { color: #f59e0b; }
.cr-star:hover { color: #fbbf24; }
.cr-stars-sm { color: #f59e0b; font-size: 13px; }
.cr-review { border-top: 1px solid #f3f3f8; padding: 9px 0; font-size: 14px; }
.cr-review-h { margin-bottom: 3px; }
.cert { border: 3px double #0f766e; border-radius: 16px; padding: 28px 22px; text-align: center;
  background: linear-gradient(160deg, #f0fdfa, #fff); box-shadow: 0 8px 30px rgba(15,118,110,.12); }
.cert-badge { font-size: 46px; }
.cert-sub { letter-spacing: 3px; font-size: 12px; font-weight: 700; color: var(--brand-ink); margin-top: 6px; }
.cert-title { font-size: 22px; font-weight: 800; color: #14324a; margin: 10px 0; }
.cert-name { font-size: 15px; margin: 4px 0; }
.cert-grade { font-size: 15px; color: var(--brand-ink); margin: 4px 0; }
.cert-meta { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.cert-brand { margin-top: 14px; font-weight: 700; color: var(--brand-ink); }
@media print { header, nav, .cls-back, #cPrint, .cls-mode { display: none !important; } }

/* Drip + thảo luận */
.cr-mod-actions { display: flex; gap: 8px; padding: 8px 14px; }
.cr-cmt { border-top: 1px solid #f3f3f8; padding: 8px 0; font-size: 14px; }
.cr-cmt-h { margin-bottom: 2px; font-size: 13px; }

/* Điểm danh */
.att { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.att-present { background: #dcfce7; color: #166534; }
.att-late { background: #fef3c7; color: #b45309; }
.att-absent { background: #fee2e2; color: #dc2626; }
.att-excused { background: #dbeafe; color: #1d4ed8; }
.att-none { background: var(--panel-3); color: var(--muted); }
.att-sel { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 13px; }

/* Học bạ */
.cls-row-click { cursor: pointer; }
.cls-row-click:hover { background: var(--accent-bg); }
.report { background: var(--panel); }
.rp-att { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media print { .cls-subnav, .cls-back, #rpSave, #rpPrint, .cls-mode { display: none !important; } }

/* Học phí */
.tui-debt { color: #dc2626; }
.tui-ok { color: #059669; }

/* Bảng điều khiển */
.dash-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.dash-stat { flex: 1 1 120px; min-width: 110px; background: linear-gradient(180deg,#f0fdfa,#fff); border: 1px solid #d5f5ef; border-radius: 14px; padding: 14px 16px; }
.dash-ic { font-size: 20px; line-height: 1; margin-bottom: 6px; }
.dash-n { font-size: 23px; font-weight: 800; color: var(--brand-ink); line-height: 1.05; }
.dash-l { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dash-stat.tone-debt { background: linear-gradient(180deg,#fef2f2,#fff); border-color: #fecaca; }
.dash-stat.tone-debt .dash-n { color: #dc2626; }
.dash-stat.tone-ok { background: linear-gradient(180deg,#f0fdf4,#fff); border-color: #bbf7d0; }
.dash-stat.tone-ok .dash-n { color: #059669; }

/* Bảng quản lý: cuộn ngang khi hẹp + số căn phải + thanh mini */
.cls-tablewrap { overflow-x: auto; border: 1px solid #f0f0f6; border-radius: 12px; margin-top: 6px; }
.cls-tablewrap .cls-table { margin: 0; }
.cls-tablewrap .cls-table th { padding: 10px 12px; background: var(--panel-2); }
.cls-tablewrap .cls-table td { padding: 11px 12px; vertical-align: middle; }
.cls-table tbody tr:hover { background: var(--panel-2); }
.cls-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.num-pct { display: inline-block; min-width: 34px; font-variant-numeric: tabular-nums; }
.dbar { display: inline-block; vertical-align: middle; width: 54px; height: 6px; margin-left: 8px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.dbar > span { display: block; height: 100%; border-radius: 999px; }

/* Org card (Admin) trong bảng điều khiển */
.org-card { background: var(--panel); border: 1px solid #e6f7f3; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.org-head { font-size: 15px; }
.org-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.org-chips span { background: #f1f5f9; color: #334155; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.org-tui-bar { height: 8px; background: #fee2e2; border-radius: 999px; overflow: hidden; }
.org-tui-bar > span { display: block; height: 100%; background: linear-gradient(90deg,#10b981,#34d399); border-radius: 999px; }
.org-tui-t { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* Tổng quan tổ chức: hero đầu vào → đầu ra */
.ov-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: linear-gradient(120deg,#ecfeff,#f0fdfa); border: 1px solid #cffafe; border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; }
.ov-hero-l { min-width: 210px; }
.ov-hero-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.ov-hero-io { font-size: 20px; font-weight: 800; color: var(--brand-ink); display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.ov-in { color: var(--text-2); } .ov-arrow { color: var(--muted); } .ov-out { color: var(--brand-ink); }
.ov-hero-bar { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 5px; }
.ov-hero-bar > span { display: block; height: 9px; border-radius: 999px; }
.ov-in-f { background: linear-gradient(90deg,#cbd5e1,#94a3b8); }
.ov-out-f { background: linear-gradient(90deg,#2dd4bf,#0d9488); }
.ovpair { display: inline-flex; flex-direction: column; gap: 3px; width: 90px; vertical-align: middle; }
.ovpair > span { display: block; height: 5px; border-radius: 999px; }
.ovpair-in { background: #94a3b8; } .ovpair-out { background: #14b8a6; }

/* Dashboard toàn hệ thống (superadmin) */
.dash-sys { background: linear-gradient(135deg,#0f766e,#0e7490); border-radius: 14px; padding: 14px; margin-bottom: 14px; color: #fff; }
.dash-sys .dash-stat { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); }
.dash-sys .dash-n { color: #fff; }
.dash-sys .dash-l { color: rgba(255,255,255,.85); }
.dash-sys .cls-io { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
.dash-sys .cls-table th { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.2); }
.dash-sys .cls-table td { border-color: rgba(255,255,255,.12); }

/* ============ Thi thử (đề chuẩn hóa) + trình soạn thảo Word (Tiptap) ============ */
.mock-types { display: flex; gap: 8px; align-items: center; margin: 14px 0; }
.mock-typebtn { padding: 8px 18px; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--text-2); }
.mock-typebtn.on { background: linear-gradient(135deg,#14b8a6,#0d9488); color: #fff; border-color: transparent; }
.mock-grow { flex: 1; }
.mock-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 14px; }
.mock-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.mock-card-h { font-size: 16px; }
.mock-badge { font-size: 11px; background: var(--accent-bg2); color: var(--brand-ink); padding: 2px 8px; border-radius: 999px; font-weight: 700; vertical-align: middle; }
.mock-card .primary { margin-top: auto; }

.mock-exam { max-width: 860px; margin: 0 auto; }
.mock-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; background: var(--panel); border-bottom: 1px solid var(--line); padding: 10px 4px; margin-bottom: 8px; }
.mock-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brand-ink); }
.mock-timer-low { color: var(--err-ink); }
.mock-sec { border: 1px solid #ececf3; border-radius: 12px; padding: 16px; margin: 18px 0; }
.mock-sec-h { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.mock-part { border-top: 1px dashed #e6e6ee; padding-top: 14px; margin-top: 14px; }
.mock-part:first-of-type { border-top: none; }
.mock-part-h { font-weight: 700; color: var(--brand-ink); margin-bottom: 4px; }
.mock-inst { margin: 2px 0 10px; }
.mock-passage { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px; line-height: 1.7; margin-bottom: 12px; white-space: pre-wrap; }
.mock-img img { display: block; max-width: min(560px, 100%); max-height: 420px; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0 4px; }
.mock-audio { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.mock-q { margin: 12px 0; scroll-margin-top: 70px; border-radius: 8px; }
.mock-q-p { font-weight: 600; margin-bottom: 6px; }
.mock-qn { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px;
  margin-right: 8px; border-radius: 6px; background: var(--accent-bg2); color: var(--brand-ink); font-size: 12px; font-weight: 800; vertical-align: middle; }
.mock-q.flash { animation: mockFlash 1.2s ease; }
@keyframes mockFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent-bg2); background: var(--accent-bg); } 100% { box-shadow: none; background: transparent; } }
/* Bảng điều hướng câu — sticky đáy khung thi (mô phỏng IELTS CD) */
.mock-nav { position: sticky; bottom: 0; z-index: 15; margin-top: 16px; padding: 10px 12px;
  background: var(--panel); border-top: 1px solid var(--line); border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 14px rgba(0,0,0,.06); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mock-nav-lab { font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.mock-nav-lab #mockNavDone, .mock-nav-lab #takeNavDone { color: var(--brand-ink); }
.mock-nav-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.mock-navbtn { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2);
  border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; font-variant-numeric: tabular-nums; }
.mock-navbtn:hover { border-color: var(--brand-ink); }
.mock-navbtn.done { background: var(--brand-solid); color: #fff; border-color: var(--brand-ink); }
/* Tô sáng đoạn Đọc: bút dạ vàng CỐ ĐỊNH (chữ tối) — đọc được ở cả sáng/tối */
.mock-hl { background: #fde68a; color: #1a1a2e; border-radius: 2px; cursor: pointer; }
.mock-hltip { position: absolute; z-index: 50; }
.mock-hl-add { background: var(--brand-solid); color: #fff; border: none; border-radius: 8px; padding: 6px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.25); white-space: nowrap; }
/* ===== Thi mô phỏng IELTS CD: từng phần một + stepper + 2 cột Đọc + review ===== */
.mock-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
.mock-timer-total { font-weight: 600; color: var(--muted); font-size: 12.5px; }
.mock-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.mock-step { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text-2); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mock-step-n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--line); color: var(--text-2); font-size: 11px; font-weight: 800; }
.mock-step.on { border-color: var(--brand-ink); background: var(--accent-bg2); color: var(--brand-ink); }
.mock-step.on .mock-step-n { background: var(--brand-solid); color: #fff; }
.mock-step.done .mock-step-n { background: var(--brand-solid); color: #fff; }
.mock-step:disabled { opacity: .45; cursor: not-allowed; }
/* Chỉ hiện phần đang làm (thi từng kỹ năng một) */
.mock-sec { display: none; }
.mock-sec.active { display: block; }
.mock-sec.locked .mock-sec-h::after { content: " 🔒 đã hết giờ — không sửa được"; color: var(--err-ink); font-size: 12.5px; font-weight: 600; }
.mock-sec.locked .mock-q { opacity: .8; }
.mock-play.played { opacity: .7; cursor: default; }
/* Bố cục 2 cột cho Đọc: đoạn văn trái cuộn riêng, câu hỏi phải */
.mock-2col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: start; }
.mock-col-read { position: sticky; top: 8px; max-height: calc(100vh - 220px); overflow: auto; padding-right: 4px; }
.mock-col-q { min-width: 0; }
@media (max-width: 900px) { .mock-2col { grid-template-columns: 1fr; } .mock-col-read { position: static; max-height: 340px; } }
/* Cờ đánh dấu xem lại */
.mock-q-p { display: flex; align-items: flex-start; gap: 6px; }
.mock-q-txt { flex: 1; }
.mock-flag { flex: 0 0 auto; background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--muted); padding: 0 2px; opacity: .5; }
.mock-flag:hover { opacity: 1; }
.mock-q.flagged { box-shadow: inset 3px 0 0 #f59e0b; padding-left: 8px; }
.mock-q.flagged .mock-flag { color: #f59e0b; opacity: 1; }
.mock-navbtn.flagged { box-shadow: 0 0 0 2px #f59e0b inset; }
.mock-secbtn { white-space: nowrap; }
/* Màn xem lại trước khi nộp */
.mock-review-ov { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.4); }
.mrv-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; width: 100%; max-width: 640px;
  max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.mrv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 17px; }
.mrv-warn { color: var(--warn-ink); font-weight: 600; font-size: 13.5px; margin: 4px 0; }
.mrv-flagn { color: var(--warn-ink); font-weight: 600; }
.mrv-body { overflow: auto; margin: 8px 0; }
.mrv-sec { margin-bottom: 14px; }
.mrv-sec-h { font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--text); }
.mrv-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.mrv-cell { min-width: 34px; height: 32px; padding: 0 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2);
  border-radius: 7px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mrv-cell.done { background: var(--brand-solid); color: #fff; border-color: var(--brand-ink); }
.mrv-cell.flagged { box-shadow: 0 0 0 2px #f59e0b inset; }
.mrv-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.mock-opts { display: flex; flex-direction: column; gap: 6px; }
.mock-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.mock-opt:hover { background: var(--accent-bg); border-color: #99f6e4; }
.mock-fill { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; box-sizing: border-box; }
.mock-speak { display: flex; flex-direction: column; gap: 8px; }
.mock-grading { text-align: center; padding: 60px 20px; }
/* Lớp phủ lúc chấm bài: KHÔNG thay innerHTML của #mockRoot nữa — làm vậy là xoá bài làm
   TRƯỚC khi biết nộp có thành công không, nộp lỗi là mất trắng cả buổi thi. */
.mock-grading-ov { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center;
  background: var(--panel); opacity: .96; border-radius: 12px; }
.mock-result { max-width: 560px; margin: 20px auto; text-align: center; }
.mock-result-big { font-size: 26px; font-weight: 800; color: var(--brand-ink); margin-bottom: 16px; }
.mock-result-tbl { width: 100%; border-collapse: collapse; }
.mock-result-tbl td, .mock-result-tbl th { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; }
.mock-score { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mock-rev { border-left: 3px solid #ddd; padding: 8px 12px; margin: 8px 0; background: var(--panel-2); border-radius: 0 8px 8px 0; }
.mock-rev-ok { border-left-color: #0d9488; }
.mock-rev-no { border-left-color: #dc2626; }
.mock-rev-q { font-weight: 600; }
.mock-rev-fb { margin-top: 6px; font-size: 13px; background: var(--accent-bg); border-radius: 6px; padding: 8px; white-space: pre-wrap; }

/* Editor kiểu Word */
.ee-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ee-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.ee-btn { min-width: 30px; height: 30px; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--text); }
.ee-btn:hover { background: var(--panel-3); }
.ee-btn.on { background: #0d9488; color: #fff; }
.ee-grow { flex: 1; }
.ee-wc { font-size: 13px; color: var(--err-ink); padding-right: 6px; }
.ee-wc.ok { color: var(--brand-ink); }
.ee-host .ee-content { min-height: 200px; padding: 14px; outline: none; line-height: 1.7; }
.ee-host .ee-content:focus { outline: none; }

/* Trắc nghiệm nhanh (tab Luyện thi) */
.mcq-quiz { margin-top: 8px; }
.mcq-title { font-weight: 700; color: var(--brand-ink); margin-bottom: 10px; }
.mcq-q { margin: 14px 0; }
.mcq-q-p { font-weight: 600; margin-bottom: 6px; }
.mcq-q .mock-opt { margin: 5px 0; }
.mcq-correct { background: #ecfdf5 !important; border-color: #6ee7b7 !important; }
.mcq-correct span::after { content: " ✓"; color: #059669; font-weight: 700; }
.mcq-wrong { background: #fef2f2 !important; border-color: #fca5a5 !important; }
.mcq-explain { margin-top: 6px; font-size: 13px; background: var(--accent-bg); border-radius: 8px; padding: 8px 10px; color: #0f5e57; }
.mcq-score { margin-top: 14px; font-size: 16px; background: var(--accent-bg2); color: var(--brand-ink); padding: 10px 14px; border-radius: 10px; display: inline-block; }

/* ============ Khóa học tự học ============ */
.uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 6px; }
.uc-card { display: flex; flex-direction: column; text-align: left; padding: 0; background: var(--panel);
  border: 1px solid #e8e8f0; border-radius: 14px; overflow: hidden; cursor: pointer; font-family: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s; }
.uc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(20,30,50,.13); border-color: #99f6e4; }
.uc-thumb { height: 108px; display: flex; align-items: center; justify-content: center; position: relative;
  background: linear-gradient(135deg, var(--g1, #2dd4bf), var(--g2, #0d9488)); }
.uc-thumb span { font-size: 40px; font-weight: 800; color: rgba(255,255,255,.92); letter-spacing: -1px; }
.uc-thumb .uc-tag { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.28); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.uc-body { padding: 14px 16px 8px; flex: 1; }
.uc-title { font-weight: 700; font-size: 15.5px; line-height: 1.35; color: var(--text); }
.uc-sub { font-size: 13px; color: var(--muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uc-rating { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.uc-stars { color: #f59e0b; letter-spacing: 1px; font-size: 13px; }
.uc-rating b { color: #b45309; }
.uc-meta { font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.uc-foot { padding: 10px 16px 14px; border-top: 1px solid var(--panel-3); margin-top: 4px; }
.uc-cta { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13.5px; color: var(--brand-ink); }
.uc-card:hover .uc-cta { text-decoration: underline; }
.uc-card.enrolled .uc-thumb { background: linear-gradient(135deg, #14b8a6, #0f766e); }

/* Hero trang khóa */
.ch-hero { background: linear-gradient(135deg, #0f766e, #134e4a); color: #fff; border-radius: 16px; padding: 26px 26px 24px; margin: 6px 0 18px; }
.ch-hero h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.25; }
.ch-hero .ch-sub { opacity: .9; font-size: 15px; margin-bottom: 12px; }
.ch-hero .ch-metaline { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; opacity: .95; align-items: center; }
.ch-hero .uc-stars { color: #fde68a; }
.ch-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; background: var(--panel); color: var(--brand-ink);
  border: none; border-radius: 11px; padding: 12px 22px; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.ch-cta:hover { transform: translateY(-2px); }
.ch-prog { margin-top: 16px; }
.ch-prog .cls-bar { background: rgba(255,255,255,.25); }
.ch-prog .cls-bar-f { background: #5eead4; }
.ch-prog .muted { color: rgba(255,255,255,.85) !important; }

/* "Bạn sẽ học được gì" dạng lưới tick */
.ch-learn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.ch-learn li { list-style: none; padding-left: 26px; position: relative; font-size: 14px; line-height: 1.5; }
.ch-learn li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand-ink); font-weight: 800; }
@media (max-width: 560px) { .ch-learn { grid-template-columns: 1fr; } }

/* Syllabus accordion */
.cr-module.acc .cr-module-h { cursor: pointer; user-select: none; }
.cr-module.acc .cr-module-h::after { content: "▾"; margin-left: 8px; transition: transform .2s; color: var(--muted); }
.cr-module.acc.collapsed .cr-module-h::after { transform: rotate(-90deg); }
.cr-module.acc.collapsed .cr-item, .cr-module.acc.collapsed .cr-mod-actions, .cr-module.acc.collapsed .cr-mod-empty { display: none; }
.cr-item.preview-lock { opacity: .7; }
.cr-item.preview-lock .cr-item-ic::after { content: " 🔒"; }

/* ============ Slide bài giảng (reveal.js iframe) ============ */
.deck { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.deck-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 13px; }
.deck-frame-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--panel); }
.deck-frame-wrap:fullscreen { aspect-ratio: auto; height: 100%; }
.deck-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.deck-frame-wrap:fullscreen .deck-frame { height: 100%; }

/* Overlay xem trước slide */
.slide-ov { position: fixed; inset: 0; z-index: 3000; background: rgba(10,15,20,.72); display: flex; align-items: center; justify-content: center; padding: 24px; }
.slide-ov-box { position: relative; width: min(1100px, 96vw); background: var(--panel); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.slide-ov-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 16px; cursor: pointer; }
.slide-ov-x:hover { background: rgba(0,0,0,.7); }

/* Thanh công cụ Markdown (soạn slide) */
.md-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; }
.md-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 7px; padding: 5px 10px; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--text-2); }
.md-btn:hover { background: var(--accent-bg); border-color: #99f6e4; }

/* Trình soạn slide 2 cột (soạn | xem trước) + panel AI */
.sl-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--accent-bg); border: 1px solid #ccfbf1; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.sl-ai input { flex: 1; min-width: 180px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; }
.sl-ai select { border: 1px solid var(--line); border-radius: 8px; padding: 7px; font: inherit; }
.sl-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.sl-edit { display: flex; flex-direction: column; }
.sl-textarea { width: 100%; min-height: 420px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6; resize: vertical; }
.sl-preview { position: sticky; top: 12px; }
.sl-preview-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sl-prev-wrap { aspect-ratio: 16/9; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.sl-prev-wrap:fullscreen { aspect-ratio: auto; }
.sl-prev-frame { width: 100%; height: 100%; border: 0; display: block; }
select.md-btn { padding: 4px 8px; }
@media (max-width: 820px) { .sl-wrap { grid-template-columns: 1fr; } .sl-preview { position: static; } }

/* Dải slide kéo-thả */
.sl-strip-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sl-strip { display: flex; gap: 8px; overflow-x: auto; flex: 1; padding: 4px 2px; }
.sl-chip { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; background: var(--panel); border: 1px solid #dfe3ea; border-radius: 8px; padding: 6px 8px 6px 10px; font-size: 12.5px; cursor: grab; user-select: none; max-width: 190px; }
.sl-chip:hover { border-color: #99f6e4; background: var(--accent-bg); }
.sl-chip.dragging { opacity: .5; cursor: grabbing; }
.sl-chip-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sl-chip-x { border: none; background: none; color: #b91c1c; cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
.sl-chip-x:hover { color: #dc2626; }

/* Trình soạn canvas WYSIWYG (kéo-thả element) */
.ce-tools { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ce-main { display: grid; grid-template-columns: 1fr 230px; gap: 14px; align-items: start; }
.ce-stage { position: relative; width: 100%; aspect-ratio: 16/9; container-type: size; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); user-select: none; touch-action: none; }
.ce-el { position: absolute; overflow: visible; cursor: move; outline: 1px dashed transparent; }
.ce-el:hover { outline-color: #99f6e4; }
.ce-el.sel { outline: 2px solid #0d9488; }
.ce-el .ce-txt { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; padding: 2%; white-space: pre-wrap; word-break: break-word; overflow: hidden; }
.ce-el .ce-txt[contenteditable="true"] { cursor: text; outline: none; background: rgba(13,148,136,.06); }
.ce-h { position: absolute; right: -6px; bottom: -6px; width: 13px; height: 13px; background: #0d9488; border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; display: none; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.ce-el.sel .ce-h { display: block; }
.ce-props { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--panel-2); position: sticky; top: 12px; }
.ce-ptitle { font-weight: 700; margin-bottom: 8px; color: var(--brand-ink); }
.ce-prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 7px 0; font-size: 13px; }
.ce-prow input[type=color] { width: 34px; height: 24px; border: 1px solid var(--line); padding: 0; background: none; cursor: pointer; border-radius: 4px; }
@media (max-width: 820px) { .ce-main { grid-template-columns: 1fr; } .ce-props { position: static; } }

/* Canvas phase 2: đường căn (snap guide) + trạng thái nút bật */
.ce-guide { position: absolute; display: none; z-index: 5; pointer-events: none; }
.ce-gv { top: 0; bottom: 0; width: 0; border-left: 1px dashed #f59e0b; }
.ce-gh { left: 0; right: 0; height: 0; border-top: 1px dashed #f59e0b; }
.md-btn.on { background: #0d9488; color: #fff; border-color: #0d9488; }
.md-btn:disabled { opacity: .4; cursor: default; }

/* Canvas phase 5: bảng icon/emoji */
.ce-iconpop { position: absolute; z-index: 50; top: 110%; left: 0; background: var(--panel); border: 1px solid #dfe3ea; border-radius: 10px; box-shadow: 0 12px 30px rgba(20,20,40,.16); padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 300px; }
.ce-ico { border: none; background: none; font-size: 20px; cursor: pointer; padding: 4px; border-radius: 6px; line-height: 1; }
.ce-ico:hover { background: var(--accent-bg); }

/* Canvas phase 6: ghi chú giảng viên */
.ce-note { width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 60px; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; background: #fffdf5; }

/* Canvas phase 7: khung quét chọn nhiều */
.ce-rubber { position: absolute; z-index: 6; border: 1px solid #0d9488; background: rgba(13,148,136,.12); pointer-events: none; }

/* ============ Canvas editor: TRANG RIÊNG toàn màn hình (chuẩn Canva/Slides) ============ */
.ce-ov { position: fixed; inset: 0; z-index: 2000; background: #0e1116; display: flex; flex-direction: column; }
.ce-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ce-x { width: 34px; height: 34px; border: 1px solid var(--line-2); background: var(--panel); border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; }
.ce-x:hover { background: #fef2f2; color: #dc2626; }
.ce-title { font-size: 15px; margin-right: 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-topai { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-bg); border: 1px solid #ccfbf1; border-radius: 999px; padding: 4px 10px; flex-wrap: wrap; }
.ce-topai input { border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; min-width: 200px; font: inherit; }
.ce-topai select { border: 1px solid var(--line); border-radius: 6px; padding: 4px; font: inherit; }
.ce-workspace { flex: 1; display: grid; grid-template-columns: 176px 1fr 268px; min-height: 0; }
.ce-rail-l { background: #f5f6f8; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.ce-slides { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.ce-rail-add { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.ce-addslide { flex: 1; }
.ce-thumb { position: relative; border: 2px solid transparent; border-radius: 8px; cursor: pointer; padding-left: 16px; }
.ce-thumb.on { border-color: #0d9488; }
.ce-thumb-n { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; text-align: center; font-size: 11px; color: var(--muted); }
.ce-thumb-c { position: relative; width: 100%; aspect-ratio: 16/9; container-type: size; overflow: hidden; border: 1px solid #dfe3ea; border-radius: 6px; pointer-events: none; }
.ce-thumb-c .pel { position: absolute; overflow: hidden; }
.ce-thumb-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; background: rgba(0,0,0,.4); color: #fff; border-radius: 50%; font-size: 10px; cursor: pointer; opacity: 0; }
.ce-thumb:hover .ce-thumb-x { opacity: 1; }
.ce-center { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px; overflow: auto; gap: 12px; }
.ce-stagewrap { width: 100%; max-width: min(100%, 1040px); box-shadow: 0 12px 44px rgba(0,0,0,.45); border-radius: 8px; }
.ce-hint { color: #aeb4bd !important; font-size: 12px; text-align: center; }
.ce-rail-r { background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.ce-rail-r .ce-tools { margin-bottom: 0; }
.ce-rail-r .ce-props { position: static; }
@media (max-width: 900px) {
  .ce-workspace { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .ce-rail-l { flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--line); }
  .ce-slides { flex-direction: row; }
  .ce-rail-add { flex-direction: column; border-top: none; border-left: 1px solid var(--line); }
  .ce-rail-r { border-left: none; border-top: 1px solid var(--line); }
}

/* Popup modal chung (Thêm mục học…) */
.kmodal-ov { position: fixed; inset: 0; z-index: 2200; background: rgba(15,20,25,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.kmodal { width: min(560px, 96vw); max-height: 90vh; background: var(--panel); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.kmodal-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 16px; }
.kmodal-x { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); width: 32px; height: 32px; border-radius: 8px; }
.kmodal-x:hover { background: var(--panel-3); color: #111; }
.kmodal-b { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.kmodal-b .cr-field { width: 100%; box-sizing: border-box; }
.kmodal-f { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel-2); }

/* Dashboard "Tiến bộ của tôi" */
.prog-streak { display: flex; align-items: center; gap: 10px; }
.prog-flame { font-size: 26px; font-weight: 800; color: #f97316; }
.prog-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.prog-tile { background: var(--panel-3); border-radius: 10px; padding: 10px; text-align: center; }
.prog-tile b { display: block; font-size: 20px; color: var(--text); }
.prog-tile span { font-size: 12px; color: var(--muted); }
.prog-lbl { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.hm-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); grid-auto-columns: 12px; gap: 3px; overflow-x: auto; padding-bottom: 2px; }
.hm-c { width: 12px; height: 12px; border-radius: 3px; background: var(--panel-3); display: inline-block; }
.hm-1 { background: #a7f3d0; } .hm-2 { background: #34d399; } .hm-3 { background: #059669; }
.hm-key { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); margin-top: 6px; }
.ms-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--panel-3); }
.ms-bar span { display: block; }
.ms-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ms-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.prog-rec { background: var(--accent-bg); color: var(--text-2); padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }

/* Sổ lỗi */
.mk-item { background: var(--panel-3); border-radius: 10px; padding: 10px 12px; }
.mk-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.mk-wrong { color: #dc2626; text-decoration: line-through; }
.mk-arrow { color: var(--muted); }
.mk-right { color: #059669; font-weight: 600; }
.mk-why { font-size: 13px; color: var(--muted); margin-top: 4px; }
.mk-done { margin-top: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 13px; color: var(--text-2); }
.mk-done:hover { background: var(--accent-bg); }

/* Ghi chú quy mô đề trên thẻ Thi thử: đề Kavo ngắn hơn đề thật nhiều, phải nói rõ để người
   học không tin nhầm vào điểm quy đổi. Dùng token để đạt tương phản ở cả 2 chế độ. */
.mock-scale { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--warn-ink);
  background: var(--panel-2); border-left: 3px solid var(--warn-ink); border-radius: 0 6px 6px 0;
  padding: 6px 10px; }

/* ---- Thi đấu giữa học viên (contests.js) ---- */
.ct-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ct-join { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.ct-join input { flex: 0 1 260px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--text); font: inherit; letter-spacing: 2px; text-transform: uppercase; }
.ct-lb { display: block; margin: 12px 0; font-weight: 600; }
.ct-lb select, .ct-lb input { display: block; width: 100%; max-width: 520px; margin-top: 5px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); font: inherit; font-weight: 400; }
.ct-lb .muted { font-weight: 400; font-size: 12.5px; }
.ct-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ct-row .ct-lb { flex: 1 1 220px; }
.ct-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
.ct-card:hover { border-color: var(--brand-ink); }
.ct-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ct-mode { font-size: 12.5px; color: var(--text-2); }
.ct-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.ct-tag.live { background: var(--accent-bg); color: var(--ok-ink); border-color: var(--ok-ink); }
.ct-tag.soon { background: var(--panel-3); color: var(--warn-ink); border-color: var(--warn-ink); }
.ct-tag.off { color: var(--text-2); }
.ct-code { letter-spacing: 3px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ct-codebox { margin: 10px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-room-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-actions { margin: 14px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ct-done { background: var(--accent-bg); border: 1px solid var(--ok-ink); color: var(--text);
  padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.ct-wait, .ct-hidden { background: var(--panel-2); border: 1px solid var(--line);
  padding: 10px 14px; border-radius: 10px; color: var(--text-2); }
.ct-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.ct-table th, .ct-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.ct-table th { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.ct-table tr.me { background: var(--panel-2); font-weight: 600; }
.ct-you { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--line); font-weight: 600; }
.mock-card-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .ct-table th:nth-child(4), .ct-table td:nth-child(4) { display: none; } }

/* Lời mời bật nhắc học sau buổi ôn. Nằm trong màn "hết thẻ" nên phải nhẹ nhàng —
   đây là lời mời, không phải cảnh báo. */
.nhac-moi { margin: 22px auto 0; max-width: 460px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.nhac-moi p { margin: 6px 0 12px; }
.nhac-moi .addrow { gap: 8px; }

/* Cảnh báo câu chờ chấm tay + form chấm. Dùng token để không chìm ở giao diện tối. */
.cls-cho { background: var(--panel-2); border: 1px solid var(--warn-ink); border-radius: 12px;
  padding: 12px 14px; margin: 10px 0; color: var(--text); }
.cls-cho .cls-mini { margin-left: 8px; }
.cls-cham { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; margin: 12px 0; }
.cls-cham > div { margin-bottom: 6px; }
.cls-cham-bl { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; white-space: pre-wrap; }
.cls-cham .cham-nx { flex: 1 1 220px; }
/* Khoản thu đã huỷ: vẫn hiện để đối chiếu, nhưng phải nhìn ra ngay là không tính. */
.cls-table tr.tu-huy td { text-decoration: line-through; color: var(--muted); }