/* AlphaMock Business — Redesign 2026 — Be Vietnam Pro + Playfair display + Brand Blue */
/* Playfair 900 là cho wordmark logo AlphaMock ("Alpha" = 900, "Mock" = 600).
   Thiếu 900 ở đây thì trình duyệt tự bôi đậm giả từ 700, nét bị bệt và lệch design. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;900&family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

/* ==================== DESIGN TOKENS ==================== */
:root, [data-theme="light"] {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #eef3f9;
  --border: #e2e8f0;
  --border-2: #cbd5e1;
  --text: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;
  --brand: #2563eb;
  --brand-2: #3b82f6;
  --brand-soft: #eff6ff;
  --grad: linear-gradient(135deg, #2563eb, #3b82f6);
  --success: #10b981;
  --success-soft: #e7f8f1;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --warning: #d97706;
  --warning-soft: #fdf3e3;
  --streak: #f97316;
  --cfa: #5aa732;
  --frm: #1e3a6e;
  --acca: #c8102e;
  --cma: #0f7b6c;
  --shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --shadow-lg: 0 4px 12px rgba(15,23,42,.08), 0 20px 48px rgba(15,23,42,.10);
  --font-display: "Playfair Display", Cambria, "Times New Roman", serif;
  /* compat aliases */
  --bg-soft: #eef3f9;
  --fg: #0f172a;
  --muted: #64748b;
  --card: #ffffff;
  --accent: #2563eb;
  --accent-fg: #ffffff;
  --link: #2563eb;
  --ok: #10b981;
  --ok-bg: #e7f8f1;
  --warn: #d97706;
  --warn-bg: #fdf3e3;
  --radius: 12px;
  --radius-lg: 14px;
}

[data-theme="dark"] {
  --bg: #0c1424;
  --surface: #131e33;
  --surface-2: #1a2740;
  --border: #263650;
  --border-2: #33476b;
  --text: #f1f5f9;
  --text-2: #b8c4d8;
  /* #7d8ca6 chỉ đạt 4.38:1 trên --surface-2 -> #94a3b8 đạt 5.8–7.2:1 mọi nền */
  --text-3: #94a3b8;
  --brand: #60a5fa;
  --brand-2: #93c5fd;
  --brand-soft: #1b2b4d;
  /* Gradient tối hơn để chữ TRẮNG trên nền gradient còn đọc được (≥3.7:1) */
  --grad: linear-gradient(135deg, #1d4ed8, #3b82f6);
  --success: #34d399;
  --success-soft: #0c2f24;
  --danger: #f26666;
  --danger-soft: #3a1620;
  --warning: #f5a623;
  --warning-soft: #362a12;
  --streak: #fb923c;
  --cfa: #7ac143;
  --frm: #5b83c9;
  --acca: #e8556d;
  --cma: #2dd4bf;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.4);
  --font-display: "Playfair Display", Cambria, "Times New Roman", serif;
  --bg-soft: #1a2740;
  --fg: #f1f5f9;
  --muted: #94a3b8;
  --card: #131e33;
  --accent: #60a5fa;
  --accent-fg: #ffffff;
  --link: #93c5fd;
  --ok: #34d399;
  --ok-bg: #0c2f24;
  --warn: #f5a623;
  --warn-bg: #362a12;
}

[data-theme="hc"] {
  --bg: #000000;
  --surface: #000000;
  --surface-2: #111111;
  --border: #ffffff;
  --border-2: #ffffff;
  --text: #ffffff;
  --text-2: #ffff00;
  --text-3: #aaaaaa;
  --brand: #ffff00;
  --brand-2: #ffff00;
  --brand-soft: #222200;
  --grad: linear-gradient(135deg, #ffff00, #ffcc00);
  --success: #00ff00;
  --success-soft: #002200;
  --danger: #ff6666;
  --danger-soft: #220000;
  --warning: #ffff00;
  --warning-soft: #222200;
  --streak: #ffaa00;
  --cfa: #88ff44;
  --frm: #88aaff;
  --acca: #ff6680;
  --cma: #33ffdd;
  --shadow: none;
  --shadow-lg: none;
  --bg-soft: #111111;
  --fg: #ffffff;
  --muted: #ffff00;
  --card: #000000;
  --accent: #ffff00;
  --accent-fg: #000000;
  --link: #00ffff;
  --ok: #00ff00;
  --ok-bg: #002200;
  --warn: #ffff00;
  --warn-bg: #222200;
  --radius: 4px;
}

/* ==================== BASE ==================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.55 "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; width: min(1200px, 96vw); margin: 0 auto; padding-bottom: 48px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--brand-2); }
h1 { font-family: var(--font-display); font-size: 1.9rem; margin: .4em 0; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 1.4em 0 .6em; font-weight: 700; }
.muted { color: var(--text-3); }
.small { font-size: .85rem; }
.font-display { font-family: var(--font-display); letter-spacing: -.01em; }

/* ==================== NAV (glass pill, khớp landing) ==================== */
.nav {
  display: flex; align-items: center; gap: 0;
  /* flex-wrap: lưới an toàn — nội dung dài (tên user, chip D-day, nút Admin)
     xuống dòng trong pill thay vì lòi ra ngoài viền bo tròn.
     1320px: đủ chứa 7 tab + chip đếm ngày + avatar trên 1 hàng ở màn rộng. */
  flex-wrap: wrap; row-gap: 8px;
  width: min(1320px, calc(100% - 32px)); margin: 14px auto 0;
  padding: 10px 18px; height: auto;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(15,23,42,.05);
  position: sticky; top: 14px; z-index: 50;
}
[data-theme="dark"] .nav { background: rgba(19,30,51,.72); border-color: rgba(255,255,255,.08); }
[data-theme="hc"] .nav { background: #000; border-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* ===== LOGO AlphaMock (theo "AlphaMock Logo.dc.html") =====
   Tỉ lệ nav trong file design: badge 34 / glyph 25 / gap 11 / bo góc 9 / chữ 22.
   Chuẩn hoá theo cỡ chữ logo (=1em) -> badge 1.545em, glyph .735 badge, gap .5em,
   bo góc .265 badge. Để hết bằng em nên 2 breakpoint sẵn có (700px: 16px,
   460px: 15px) tự thu nhỏ cả badge, không cần thêm media query.
   GIỮ cỡ chữ 18px như cũ: nav cần ~860px cho một hàng, phóng to logo theo đúng
   34px của file design sẽ đẩy nav vỡ trước mốc gộp 900px. */
.logo {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: 18px; color: var(--text);
  text-decoration: none; flex: none;
  margin-right: 24px;
}
.logo-mark {
  width: 1.545em; height: 1.545em; border-radius: .409em; /* .409 = 1.545 × .265 */
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
/* α phải là serif CÓ Greek: Playfair Display (var(--font-display)) KHÔNG chứa α,
   nên đặt Cambria/Times trước, nếu không glyph rơi về sans và lệch hẳn wordmark. */
.logo-mark i {
  font-family: Cambria, "Times New Roman", "Source Serif 4", serif;
  font-style: normal; font-weight: 700; color: #fff;
  font-size: 1.136em; line-height: 1;   /* 1.545 × .735 */
  transform: translateY(-.04em);         /* căn quang học như file design */
}
/* Wordmark dùng luôn --font-display (Playfair) — chính rationale của file design:
   "cùng một giọng với headline, không cần thêm font mới". */
.logo-word {
  font-family: var(--font-display);
  font-weight: 900; letter-spacing: -.025em; line-height: 1;
}
.logo-word span { font-weight: 600; color: var(--text-3); }
.nav-links {
  display: flex; gap: 4px; flex: 1; justify-content: center;
}
.nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--brand); background: var(--brand-soft); }
.nav-links a.active { font-weight: 600; color: var(--brand); background: var(--brand-soft); }
.nav-right { display: flex; align-items: center; gap: 10px; margin-left: 0; }

/* Nút menu 3 gạch — chỉ hiện trên màn hình hẹp (xem @media ở dưới) */
.nav-toggle {
  display: none; flex: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-right: 8px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text-2);
  cursor: pointer; font-family: inherit;
  transition: color .15s, background .15s;
}
.nav-toggle:hover { color: var(--brand); background: var(--brand-soft); }
.nav-toggle[aria-expanded="true"] { color: var(--brand); background: var(--brand-soft); border-color: var(--brand); }

/* Nav thu gọn: dưới ngưỡng này gộp hết vào menu xổ xuống, chỉ giữ logo + nút
   đăng nhập trên thanh để không mất lối vào chính.
   NGƯỠNG 1280px — đo thật 2026-07-28, không phải chọn bừa: hàng nav đầy đủ cần
   logo 126 + nút chứng chỉ 83 + 7 link 582 + (đổi ngôn ngữ 101 + giao diện 93 +
   đăng nhập 166) + padding 36 ≈ 1208px, tức viewport ~1240px mới đủ. Ngưỡng cũ
   900px khiến cả dải 900–1240px bị nav xuống 2 hàng mà không có nút menu.
   Lưu ý: nav đã chật SẴN từ trước khi thêm tab "Trang chủ" — với 6 link ngưỡng
   vỡ đã là ~1170px. Để dư tới 1280 vì người đã đăng nhập có khu vực tài khoản
   rộng hơn nút "Đăng nhập / Đăng ký" (tên dài, thêm nút Admin).
   Nâng lên 1350px: bật font that Playfair Display/Be Vietnam Pro (truoc chi
   la font he thong du phong) khien 7 link rong hon mot chut — do thuc te
   1281px da vo hang, 1340px thi vua. .nav van cap o 1320px (khong doi, man
   rong van du cho).
   ĐỔI SỐ NÀY THÌ PHẢI ĐỔI CẢ `window.innerWidth > 1350` trong biz.js. */
@media (max-width: 1350px) {
  .nav { flex-wrap: wrap; row-gap: 10px; column-gap: 8px; }
  .nav-toggle { display: inline-flex; }
  .logo { margin-right: auto; }

  /* .nav-right tan ra để từng phần tử con tự xếp chỗ trong .nav */
  .nav-right { display: contents; }

  /* Mặc định đóng: ẩn link + đổi ngôn ngữ + đổi giao diện.
     Cần tiền tố .nav để thắng quy tắc .theme-toggle khai báo ở phần dưới file. */
  .nav .nav-links, .nav #langSwitch, .nav .theme-toggle { display: none; }

  /* Mở menu: các phần này xuống hàng dưới, chiếm trọn bề ngang */
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    flex-basis: 100%; order: 10; gap: 2px;
    padding-top: 10px; border-top: 1px solid var(--border);
  }
  .nav.open .nav-links a { padding: 10px 12px; font-size: 14.5px; }
  .nav.open #langSwitch,
  .nav.open .theme-toggle { display: inline-flex; order: 11; }
}

/* Máy tablet nhỏ & điện thoại: thu gọn logo + nút CTA để cả hàng đầu vừa một
   dòng (logo + nút menu + đăng nhập), tránh nav cao gấp đôi. */
@media (max-width: 700px) {
  .nav { padding: 10px 14px; }
  .logo { font-size: 16px; }
  .nav-cta { padding: 8px 13px !important; font-size: 12.5px !important; }
  .nav #authArea { min-width: 0; }
  .nav #authArea .nav-cta { white-space: nowrap; }
}

@media (max-width: 460px) {
  /* Đếm ngược/streak nhường chỗ cho nút đăng nhập trên máy nhỏ */
  .nav #countdownChip, .nav .streak-chip { display: none; }
  /* Ở 375px: cần ~368px mà chỉ có 351px -> nút đăng nhập rớt xuống hàng hai,
     nav cao 94px. Bỏ chữ "AlphaMock" (đo được 106px) chỉ giữ dấu α (~24px) là
     dư chỗ. Dấu α vẫn là logo nhận ra được, và đây là nếp quen của mobile.
     Giữ chữ cho trình đọc màn hình bằng clip chứ không display:none. */
  .logo-word {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .logo { font-size: 15px; margin-right: 0; }
  .nav-toggle { width: 34px; height: 34px; margin-right: 6px; }
  /* Bóp vừa đủ để logo + ☰ + nút đăng nhập nằm chung một hàng (đỡ ~45px chiều
     cao, nav lại dính trên nên tiết kiệm này thấy rõ ở mọi trang). */
  .nav { column-gap: 6px; padding: 8px 12px; }
  .nav .nav-cta { padding: 7px 10px !important; font-size: 11.5px !important; box-shadow: none; }
}

/* Máy rất hẹp (iPhone SE ~320px): thanh nav còn có lề 16px mỗi bên nên bề ngang
   dùng được chỉ 262px, ẩn chữ logo rồi vẫn thiếu ~4px. Bóp nốt padding và
   khoảng cách giữa các mục. */
@media (max-width: 360px) {
  .nav { padding: 8px; column-gap: 4px; }
  .logo { margin-right: 4px; }
  .nav-toggle { margin-right: 4px; }
}

/* ============ CHẾ ĐỘ CHỨNG CHỈ (nút cạnh logo, kiểu pill) ============
   Cả web chạy theo 1 chứng chỉ — nút này là chỗ DUY NHẤT đổi CFA/FRM/CMA,
   nên các trang không còn hàng pill lọc chứng chỉ nữa. */
.cert-mode { position: relative; flex: none; margin-right: 12px; }
.cert-mode-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700;
  line-height: 1; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.cert-mode-btn:hover { border-color: var(--brand); color: var(--brand); }
.cert-mode.open .cert-mode-btn { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.cert-mode-btn svg { opacity: .55; transition: transform .15s; }
.cert-mode.open .cert-mode-btn svg { transform: rotate(180deg); }
.cert-mode-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-3); }
.cd-cfa { background: var(--cfa); }
.cd-frm { background: var(--frm); }
.cd-cma { background: var(--cma); }

.cert-mode-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 232px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
}
.cmp-head {
  padding: 7px 10px 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.cmp-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 8px; background: none;
  font-family: inherit; font-size: 13.5px; color: var(--text-2);
  text-align: left; cursor: pointer; transition: background .13s, color .13s;
}
.cmp-item:hover { background: var(--surface-2); color: var(--text); }
.cmp-item.active { background: var(--brand-soft); color: var(--text); }
.cmp-name { font-weight: 700; }
.cmp-meta { margin-left: auto; font-size: 11px; color: var(--text-3); font-weight: 600; }
.cmp-soon {
  margin-left: auto; font-size: 10px; font-weight: 800; padding: 2px 7px;
  border-radius: 999px; letter-spacing: .02em;
  background: var(--warning-soft); color: var(--warning);
}
.cmp-tick { flex: none; width: 12px; color: var(--brand); font-weight: 800; opacity: 0; }
.cmp-item.active .cmp-tick { opacity: 1; }
.cmp-foot {
  padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--border);
  font-size: 11px; line-height: 1.45; color: var(--text-3);
}

/* Nav thu gọn: nút chế độ vẫn đứng NGAY SAU logo (không bị menu ☰ nuốt mất).
   Ở mốc 900px, .logo đang giữ margin-right:auto để đẩy phần còn lại sang phải —
   chuyển cái auto đó sang .cert-mode để hai thứ dính liền nhau bên trái. */
@media (max-width: 900px) {
  .logo { margin-right: 8px; }
  .cert-mode { margin-right: auto; }
}
@media (max-width: 460px) {
  .cert-mode { margin-right: 6px; }
  .cert-mode-btn { padding: 6px 8px; font-size: 11.5px; }
  .cert-mode-panel { min-width: 200px; }
}

/* Nhãn chứng chỉ nhỏ cạnh tiêu đề trang — nhắc người dùng đang ở chế độ nào
   (thay cho hàng pill lọc chứng chỉ đã bỏ). */
.page-cert-tag {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}
html[data-cert="CFA"] .page-cert-tag { color: var(--cfa); border-color: color-mix(in srgb, var(--cfa) 35%, transparent); background: color-mix(in srgb, var(--cfa) 10%, transparent); }
html[data-cert="FRM"] .page-cert-tag { color: var(--frm); border-color: color-mix(in srgb, var(--frm) 35%, transparent); background: color-mix(in srgb, var(--frm) 10%, transparent); }
html[data-cert="CMA"] .page-cert-tag { color: var(--cma); border-color: color-mix(in srgb, var(--cma) 35%, transparent); background: color-mix(in srgb, var(--cma) 10%, transparent); }

/* ==================== TRANG "SẮP CÓ" (FRM / CMA) ==================== */
.soon-page {
  width: min(1320px, calc(100% - 32px)); margin: 40px auto 64px;
  display: flex; justify-content: center;
}
.soon-card {
  width: min(620px, 100%); padding: 40px 36px;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--text-3);
  border-radius: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.soon-card.cert-cfa { border-top-color: var(--cfa); }
.soon-card.cert-frm { border-top-color: var(--frm); }
.soon-card.cert-cma { border-top-color: var(--cma); }
.soon-icon {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-3);
}
.soon-chip {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 11px; border-radius: 999px; margin-bottom: 12px;
  background: var(--warning-soft); color: var(--warning);
}
.soon-card h1 { margin: 0 0 10px; font-size: 22px; line-height: 1.35; }
.soon-lead { margin: 0 0 22px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.soon-list {
  width: 100%; display: grid; gap: 8px; margin-bottom: 26px;
  padding: 16px; border-radius: 12px; background: var(--surface-2); text-align: left;
}
.soon-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.soon-x { color: var(--text-3); font-size: 11px; flex: none; }
.soon-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.soon-hint { margin: 18px 0 0; }

@media (max-width: 560px) {
  .soon-card { padding: 30px 20px; }
  .soon-card h1 { font-size: 19px; }
  .soon-actions .btn { width: 100%; }
}

/* Countdown chip */
#countdownChip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cfa) 12%, transparent);
  color: var(--cfa);
}
/* Màu chip theo chế độ chứng chỉ đang chọn (mặc định ở trên là CFA) */
html[data-cert="FRM"] #countdownChip { background: color-mix(in srgb, var(--frm) 12%, transparent); color: var(--frm); }
html[data-cert="CMA"] #countdownChip { background: color-mix(in srgb, var(--cma) 12%, transparent); color: var(--cma); }
#countdownChip.warn { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }
#countdownChip.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* Streak chip */
.streak-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, #f97316 14%, transparent);
  color: var(--streak);
}

/* Avatar chip */
.avatar-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px 5px 5px;
  cursor: pointer;
}
.avatar-chip .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}

/* CTA button in nav */
.nav-cta {
  background: var(--brand); color: #fff !important; border: none !important;
  font-weight: 700; padding: 9px 18px !important;
  border-radius: 10px; font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.28);
  cursor: pointer; font-family: inherit; transition: background .2s, transform .12s;
}
.nav-cta:hover { background: #1d4ed8; transform: translateY(-1px); }
[data-theme="dark"] .nav-cta:hover { background: #3b82f6; }

/* User dropdown menu */
.user-menu { position: relative; display: inline-block; }
.user-menu .avatar-chip {
  cursor: pointer; user-select: none;
  padding: 5px 12px 5px 5px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.user-menu .avatar-chip:hover { background: var(--surface); border-color: var(--border-2); }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 180px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 30;
  display: flex; flex-direction: column;
}
.user-menu-item {
  display: block; width: 100%;
  padding: 8px 12px;
  font: inherit; font-size: 13px; text-align: left;
  color: var(--text); text-decoration: none;
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer;
}
.user-menu-item:hover { background: var(--surface-2); color: var(--brand); }

/* Theme select */
.theme-select, select {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font: inherit;
  font-size: 13px;
}

/* Bộ chọn giao diện: 3 icon 1 hàng (Light / Dark / System) + tooltip khi rê chuột */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 2px;
}
.theme-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border: 0; background: transparent; color: var(--text-3);
  border-radius: 7px; cursor: pointer; transition: color .15s, background .15s;
}
.theme-btn:hover { color: var(--text); background: var(--surface); }
.theme-btn.active { background: var(--brand); color: #fff; }
.theme-btn::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text); color: var(--bg); font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s ease, transform .15s ease; z-index: 60;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.theme-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Auth area in nav */
#authArea { display: flex; align-items: center; gap: 10px; }
.user-name { font-weight: 600; color: var(--text); font-size: 13px; }
.chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: .85rem; color: var(--text);
}
.chip.countdown { font-weight: 700; }
.chip.countdown.warn { color: var(--warning); background: var(--warning-soft); border-color: var(--warning); }
.chip.countdown.danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.resume-btn { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-block; padding: 11px 20px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 700; text-decoration: none; text-align: center;
  font-size: 13px; transition: background .2s, transform .12s, box-shadow .2s, opacity .15s;
}
.btn:hover { background: var(--surface-2); }
.btn.primary {
  background: var(--brand); color: #fff; border: none;
  box-shadow: 0 2px 10px rgba(37,99,235,.28);
}
.btn.primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.28); }
[data-theme="dark"] .btn.primary:hover { background: #1d4ed8; }
.btn.success { background: var(--success); color: #fff; border: none; }
.btn.success:hover { background: #059669; transform: translateY(-1px); }
.btn.ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--border-2); }
.btn.wide { width: 100%; }
.btn.small-btn { padding: 6px 14px; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid transparent; }
.btn.success-outline { background: transparent; color: var(--success); border: 1.5px solid var(--success); }

/* ==================== PILLS ==================== */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 12.5px; font-weight: 500;
}
.pill.active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 700; }
[data-theme="hc"] .pill.active { background: var(--brand); color: #000; }

/* ==================== FLOAT CONTACT ==================== */
.float-contact {
  position: fixed; right: 18px; bottom: 20px; z-index: 40;
  display: flex; flex-direction: column; gap: 10px;
}
.fc-items { display: flex; flex-direction: column; gap: 10px; }
/* Nút gộp: ẩn trên desktop, chỉ bật ở @media 700px cuối file */
.float-contact .fc-toggle { display: none; border: 0; padding: 0; cursor: pointer; background: var(--brand); }
.float-contact .fc-ico-close { display: none; }
.fc-btn {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; font-weight: 800; font-size: .78rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform .12s;
}
.fc-btn:hover { transform: scale(1.1); }
/* Icon vẽ bằng currentColor nên BẮT BUỘC giữ màu trắng. Trang chủ có
   body class="landing", mà landing.css khai `.landing a { color: inherit }`
   (0,1,1) — thắng `.fc-btn` (0,1,0) ở trên, làm icon lấy màu chữ body:
   theme sáng ra navy #0f172a trên nền xanh/đỏ. Nâng specificity để chặn. */
.float-contact .fc-btn { color: #fff; }
.fc-fb { background: #0084ff; }
.fc-mail { background: #ea4335; }   /* đỏ Gmail */

/* ==================== HERO (HOME) ==================== */
.hero-band {
  background: linear-gradient(180deg, var(--brand-soft), var(--bg));
  padding: 44px 0 36px; text-align: center; margin: 0 calc(-50vw + 50%);
  padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--brand);
  background: var(--brand-soft); border: 1px solid transparent;
  border-radius: 999px; padding: 6px 14px; margin-bottom: 14px;
}
.hero-band h1 {
  font-family: var(--font-display);
  margin: 0; font-size: clamp(30px, 4.5vw, 44px); font-weight: 700;
  letter-spacing: -.02em; color: var(--text);
}
.hero-band p {
  margin: 10px auto 20px; max-width: 560px;
  font-size: 14.5px; line-height: 1.6; color: var(--text-2);
}
.hero-ctas { display: flex; gap: 12px; justify-content: center; }
.hero-stats { display: flex; gap: 28px; justify-content: center; margin-top: 24px; font-size: 12px; color: var(--text-3); }
.hero-stats strong { color: var(--text); font-size: 15px; }

/* Old hero compat */
.hero { padding: 44px 0 36px; }
.hero p { color: var(--text-2); max-width: 680px; }

/* ==================== WELCOME HOME (trang chào mừng) ==================== */
.home-hero { padding: 26px 0 6px; }
.home-hero h1 { margin: 0; font-size: clamp(26px, 3.6vw, 38px); }
.home-hero .home-sub { margin: 8px 0 0; font-size: 15px; color: var(--text-2); }

.home-continue {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 20px 0; padding: 18px 22px; text-decoration: none;
  background: var(--brand-soft); border: 1px solid var(--brand);
  border-radius: var(--radius-lg);
  transition: transform .12s, box-shadow .2s;
}
.home-continue:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.home-continue .hc-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.home-continue .hc-icon {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--brand); color: #fff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.home-continue .hc-title { display: block; font-weight: 700; color: var(--text); font-size: 15px; }
.home-continue .hc-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }
.home-continue .hc-cta { flex: none; font-weight: 700; color: var(--brand); white-space: nowrap; }

.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.hstat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px; text-align: center;
}
.hstat-num { font-size: 26px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; }
.hstat-lab { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }

.home-tiles-h { margin: 26px 0 12px; }
.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.home-tile {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: transform .12s, box-shadow .2s, border-color .2s;
}
.home-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); }
.home-tile-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.home-tile-body { min-width: 0; }
.home-tile-title { display: block; font-weight: 700; color: var(--text); font-size: 14.5px; }
.home-tile-desc { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }

@media (max-width: 560px) {
  .home-stats { grid-template-columns: 1fr 1fr; }
  .home-continue { flex-direction: column; align-items: flex-start; }
}

/* ==================== CERT TABS ==================== */
.cert-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  margin: 18px 0 0;
}
.cert-tab {
  padding: 10px 18px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  background: none; border: none; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cert-tab:hover { color: var(--text); }
.cert-tab.active.cfa { color: var(--cfa); border-bottom-color: var(--cfa); font-weight: 700; }
.cert-tab.active.frm { color: var(--frm); border-bottom-color: var(--frm); font-weight: 700; }
.cert-tab.active.acca { color: var(--acca); border-bottom-color: var(--acca); font-weight: 700; }
.cert-tab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 700; }

/* ==================== KHO ĐỀ SIDEBAR LAYOUT ==================== */
.kho-layout { display: flex; gap: 24px; margin-top: 24px; }
.kho-sidebar {
  width: 230px; flex: none;
  display: flex; flex-direction: column; gap: 18px;
  padding: 16px 0;
}
.kho-main { flex: 1; min-width: 0; }
.sidebar-section { display: flex; flex-direction: column; gap: 8px; }
.sidebar-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3);
}
.cert-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  border: none; background: none; width: 100%; text-align: left; font-family: inherit;
}
.cert-list-item:hover { background: var(--surface-2); }
.cert-list-item.active { background: var(--surface-2); font-weight: 700; color: var(--text); }
.cert-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sidebar-check {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  cursor: pointer; font-size: 13px; color: var(--text-2);
}
.sidebar-check input { accent-color: var(--brand); }
.sidebar-check.active { color: var(--text); font-weight: 600; }
.search-wrap { position: relative; }
.exam-search {
  padding: 8px 14px 8px 30px; border: 1px solid var(--border-2); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; width: 200px;
}

/* ==================== CONTROLS (filter bar — legacy/compat) ==================== */
.controls { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; padding: 16px 0; }
.control-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.control-label {
  width: 78px; color: var(--text-3); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}

/* ==================== EXAM CARDS ==================== */
.exams-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.vt-btn {
  padding: 7px 10px; font-size: 1rem; cursor: pointer; border: none;
  background: var(--surface); color: var(--text-3);
}
.vt-btn.active { background: var(--surface-2); color: var(--text); }
.exam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.exam-grid.list-view { grid-template-columns: 1fr; gap: 10px; }
.exam-grid.list-view .exam-card { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; }
.exam-grid.list-view .exam-badges { flex: 0 0 auto; order: 2; }
.exam-grid.list-view .exam-title { flex: 1; order: 1; }
.exam-grid.list-view .exam-meta { flex: 0 0 auto; order: 3; white-space: nowrap; }
.exam-grid.list-view .btn { flex: 0 0 auto; order: 4; min-width: 130px; }
.exam-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--cfa);
  border-radius: 12px; background: var(--surface);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
}
.exam-card.frm { border-left-color: var(--frm); }
.exam-card.acca { border-left-color: var(--acca); }
/* Không mờ cả card (opacity kéo chữ xuống dưới 4.5:1) — chỉ giảm bão hoà */
.exam-card.locked { filter: saturate(.65); }
.exam-card.upsell {
  border: 1.5px dashed var(--border-2); border-left: none;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 8px;
}
.exam-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.badge.mock { color: var(--brand); background: var(--brand-soft); border: none; }
.badge.subject { color: var(--cfa); background: color-mix(in srgb, var(--cfa) 14%, transparent); border: none; }
.badge.demo { color: var(--warning); background: var(--warning-soft); border: 1px solid currentColor; }
.badge.provider { color: var(--brand); border-color: var(--brand); background: transparent; font-weight: 800; }
.badge.done-ok { color: var(--success); background: var(--success-soft); border: none; font-weight: 800; }
.badge.done-mid { color: var(--warning); background: var(--warning-soft); border: none; font-weight: 800; }
.badge.today { color: var(--brand); background: var(--brand-soft); border: none; font-weight: 700; }
.exam-title { font-weight: 700; line-height: 1.35; flex: 1; color: var(--text); font-size: 15px; }
.exam-meta { color: var(--text-3); font-size: 12px; }
.exam-progress { display: flex; align-items: center; gap: 8px; }
.exam-progress-bar {
  flex: 1; height: 5px; border-radius: 99px;
  background: var(--surface-2); border: 1px dashed var(--border-2); overflow: hidden;
}
.exam-progress-bar > div { height: 100%; background: var(--success); border-radius: 99px; }
.empty { color: var(--text-3); padding: 30px 0; text-align: center; }

/* ==================== TOAST ==================== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); border-radius: 10px;
  padding: 10px 18px; font-weight: 600; font-size: 13.5px;
  box-shadow: var(--shadow-lg); z-index: 100;
}

/* ==================== AUTH ==================== */
.auth-wrap {
  display: flex; justify-content: center; align-items: stretch;
  min-height: calc(100vh - 80px);
}
.auth-layout {
  display: flex; width: 100%; max-width: 900px; align-self: center;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-lg); margin: 32px 0;
}
.auth-form-panel {
  flex: 1; padding: 48px 40px;
  display: flex; flex-direction: column; gap: 24px;
  background: var(--bg);
}
.auth-form-panel h1 { margin: 0; font-size: 28px; }
.auth-form-panel p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); }
.auth-promo-panel {
  width: 340px; flex: none;
  background: var(--grad); padding: 48px 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.auth-promo-panel h2 { margin: 0; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.3; }
.auth-promo-list { display: flex; flex-direction: column; gap: 12px; }
.auth-promo-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.9); }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.auth-tab {
  flex: 1; padding: 9px; font: inherit; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); border-radius: 10px;
}
.auth-tab.active { background: var(--grad); color: #fff; border: none; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 12px; color: var(--text); }
.field-header { display: flex; justify-content: space-between; align-items: center; }
.field input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border-2); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
.field input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.form-error {
  color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; font-size: .9rem;
}
.divider { display: flex; align-items: center; gap: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.divider span { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.google-btn {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 10px;
  padding: 12px; font-size: 13.5px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
}

/* ==================== PRICING ==================== */
.pricing-page { padding: 40px 0 48px; }
.pricing-head { text-align: center; margin-bottom: 32px; }
.pricing-head h1 { font-size: 30px; margin: 0; }
.pricing-head p { margin: 8px 0 0; font-size: 14.5px; color: var(--text-2); }
.cert-level-tabs {
  display: flex; justify-content: center; gap: 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 0; padding-bottom: 0;
}
.level-pills { display: flex; justify-content: center; gap: 8px; margin: 14px 0 32px; }
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1060px; margin: 0 auto; align-items: start;
}
.tier-card {
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow); position: relative;
}
.tier-card.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); margin-top: -8px; }
.tier-card.best { border: 2px solid var(--success); }
.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 4px 14px;
  border-radius: 999px; text-transform: uppercase; white-space: nowrap;
}
.price-badge.save { background: var(--success); }
.tier-name { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.tier-desc { color: var(--text-2); font-size: 13px; line-height: 1.5; }
.tier-price { font-size: 36px; font-weight: 800; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tier-per { font-size: 13px; color: var(--text-3); }
.tier-years { display: flex; gap: 6px; }
.tier-years .pill { padding: 5px 12px; font-size: 12px; }
.tier-buy { margin: 4px 0 2px; }
.tier-feats {
  border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.tier-feat { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.tier-plus { font-weight: 600; font-size: 12px; color: var(--text-2); margin-bottom: -4px; }
.price-save { color: var(--success); font-weight: 600; font-size: 12.5px; margin-top: 4px; }
.owned-tag {
  color: var(--success); background: var(--success-soft); border: 1px solid var(--success);
  border-radius: 8px; padding: 6px 10px; text-align: center; font-weight: 700;
}
.expired-tag {
  color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger);
  border-radius: 8px; padding: 4px 10px; text-align: center; font-weight: 600; font-size: .85rem;
}

/* Checkout wizard */
.modal.checkout { width: min(1120px, 96vw); }
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; max-width: 1120px; margin: 0 auto; }
.co-step-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.co-step-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none;
}
.co-step-num.done { background: var(--success); }
.co-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px;
}
.co-summary { background: var(--surface-2); border-radius: 10px; padding: 12px; font-size: 12.5px; color: var(--text-2); }
.co-summary-row { display: flex; justify-content: space-between; line-height: 1.8; }
.co-total { border-top: 1px solid var(--border); padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.co-qr-placeholder {
  width: 180px; height: 180px; border-radius: 12px; background: var(--surface-2);
  border: 2px dashed var(--border-2); display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px; align-self: center;
}
.co-info { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface-2); border-radius: 10px; font-size: 12.5px; }
.co-info-row { display: flex; justify-content: space-between; }
.co-copy-btns { display: flex; gap: 8px; width: 100%; }
.co-copy-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px; font-size: 12px; font-weight: 600;
  color: var(--text-2); cursor: pointer; font-family: inherit;
}
.co-warn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--warning-soft); border-radius: 10px; }
.co-success-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--success-soft);
  display: flex; align-items: center; justify-content: center; align-self: center;
}
.co-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.co-step {
  flex: 1; text-align: center; font-size: .8rem; font-weight: 700; color: var(--text-3);
  padding: 7px 4px; border-bottom: 3px solid var(--border);
}
.co-step.active { color: var(--text); border-bottom-color: var(--brand); }
.co-step.done { color: var(--success); border-bottom-color: var(--success); }
.co-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: .92rem; align-items: baseline; }
.co-row:last-child { border-bottom: none; }
.pay-methods { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.pay-method {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; text-align: left; width: 100%;
}
.pay-method.active { border-color: var(--brand); border-width: 2px; background: var(--brand-soft); }
.pm-icon { font-size: 1.3rem; }
.pm-text { flex: 1; display: flex; flex-direction: column; }
.co-paywrap { display: flex; gap: 18px; align-items: flex-start; margin: 10px 0; }
.co-qr { flex: 0 0 auto; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.co-payinfo { flex: 1; min-width: 0; }
.co-center { text-align: center; padding: 18px 0; }
.co-check { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--success); color: #fff; font-size: 2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.spinner { width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--brand); animation: co-spin .8s linear infinite; }
@keyframes co-spin { to { transform: rotate(360deg); } }

/* ==================== DASHBOARD ==================== */
.dash-page { display: flex; flex-direction: column; gap: 20px; padding: 32px 0 48px; }
.dash-page h1 { margin: 0; font-size: 26px; }
.dash-page > p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); }
#dashBody { display: flex; flex-direction: column; gap: 20px; }
.countdown-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 20px; box-shadow: var(--shadow);
}
.countdown-bar-left { display: flex; align-items: center; gap: 12px; }
.countdown-icon {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: color-mix(in srgb, var(--cfa) 14%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.countdown-bar-right { display: flex; align-items: center; gap: 10px; }
.stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.stat-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; box-shadow: var(--shadow); text-align: center;
}
.stat-tile .stat-num { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.stat-tile .stat-label { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.stat-tile.streak .stat-num { color: var(--streak); }
.stat-tile.ok .stat-num { color: var(--success); }
.stat-tile.empty .stat-num { color: var(--text-3); }
.band-pie-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px; box-shadow: var(--shadow);
}
.dash-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 16px; color: var(--text); }
.band-score { font-size: 56px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.band-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; flex: 1; }
.band-stat { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
.band-stat .n { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.band-stat.ok .n { color: var(--success); }
.band-stat.bad .n { color: var(--danger); }
.band-stat .l { font-size: 11px; color: var(--text-3); }
.subject-bars { display: flex; flex-direction: column; gap: 10px; }
.subject-bar { display: grid; grid-template-columns: 180px 1fr 80px; align-items: center; gap: 12px; }
.subject-bar .name { font-size: 12.5px; color: var(--text); text-align: right; }
.bar-track { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: var(--success); }
.bar-fill.bad { background: var(--danger); }
.bar-fill.empty { border: 1px dashed var(--border-2); background: none; }
.subject-bar .pct { font-size: 12px; font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
.subject-bar .pct.bad { color: var(--danger); }
.subject-bar .pct.empty { color: var(--text-3); }
.mock-table { width: 100%; }
.mock-table-head { display: grid; grid-template-columns: 40px 1fr 100px 120px 100px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.mock-table-row { display: grid; grid-template-columns: 40px 1fr 100px 120px 100px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); align-items: center; }
.mock-table-row:last-child { border-bottom: none; }

/* Old compat */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow); }
.stat-card .stat-info { flex: 1; min-width: 0; }
.stat-card h3 { font-size: 1rem; margin: 0 0 8px; }
.stat-num { font-size: 1.6rem; font-weight: 800; }
.stat-label { color: var(--text-3); font-size: .83rem; }

/* ==================== DAILY QUIZ ==================== */
.daily-page { display: flex; flex-direction: column; gap: 20px; padding: 32px 0 48px; }
.daily-page h1 { margin: 0; font-size: 26px; }
.daily-page > p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); }
.daily-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.quiz-tabs { display: flex; gap: 6px; }
.quiz-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; padding: 8px 16px;
  border-radius: 999px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
}
.quiz-tab.active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 700; }
[data-theme="hc"] .quiz-tab.active { background: var(--brand); color: #000; }
.datenav { display: flex; align-items: center; gap: 14px; }
.datelabel { font-size: 15px; font-weight: 800; color: var(--text); }
.daily-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.daily-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.daily-card.today { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); }
.daily-card.upsell { border: 1.5px dashed var(--border-2); align-items: center; text-align: center; justify-content: center; min-height: 160px; }

/* Flashcard / self-grade */
.question-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow);
}
.question-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.question-card-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.answer-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  font: inherit; color: var(--text-2); width: 100%; text-align: left;
}
button.answer-opt:hover { border-color: var(--brand); color: var(--text); }
.answer-opt.correct, .answer-opt.wrong { cursor: default; color: var(--text); }
.tf-row { display: flex; gap: 8px; }
.tf-row .answer-opt { flex: 1; }
.dq-answer {
  border-left: 3px solid var(--success); padding: 12px 16px;
  background: var(--surface-2); border-radius: 0 10px 10px 0;
}
.dq-answer .label { font-size: 13px; font-weight: 700; color: var(--success); margin-bottom: 6px; }
.answer-opt.correct { background: var(--success-soft); border: 2px solid var(--success); }
.answer-opt.wrong { background: var(--danger-soft); border: 2px solid var(--danger); }
.answer-letter {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border-2); color: var(--text-2);
}
.answer-opt.correct .answer-letter { background: var(--success); color: #fff; border: none; }
.answer-opt.wrong .answer-letter { background: var(--danger); color: #fff; border: none; }
.explanation {
  border-left: 3px solid var(--danger); padding: 12px 16px;
  background: var(--surface-2); border-radius: 0 10px 10px 0;
}
.explanation .label { font-size: 13px; font-weight: 700; color: var(--danger); margin-bottom: 6px; }
.self-grade { display: flex; align-items: center; gap: 12px; }
.discussion { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.comment { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; }
.comment-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.comment-author { font-size: 12px; font-weight: 700; color: var(--text); }
.comment-time { font-size: 10.5px; color: var(--text-3); }
.comment-body { font-size: 13px; color: var(--text-2); }
.compose-row { display: flex; gap: 10px; align-items: flex-end; }
.compose-input {
  flex: 1; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text-3);
  min-height: 20px; font-family: inherit;
}

/* Old compat */
.daily-actions { display: flex; gap: 8px; margin: 14px 0; }
.dq-datenav { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.dq-datelabel { font-weight: 800; font-size: 1.05rem; min-width: 150px; text-align: center; }
.dq-startnote { margin-bottom: 14px; }
.dq-libgrid { margin-top: 6px; }
.dq-foot { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 8px; }
.qc-toggle { background: none; border: none; color: var(--brand); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 2px 0; display: inline-flex; align-items: center; }
.qc-panel { margin-top: 8px; }
.qc-feed { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.qc-row { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; }
.qc-row-head { font-size: .78rem; margin-bottom: 2px; }
.qc-row-body { font-size: .88rem; white-space: pre-wrap; word-break: break-word; }
.qc-compose { display: flex; gap: 8px; align-items: flex-end; }
.qc-compose textarea { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; font-size: .88rem; resize: vertical; }
.dq-streak { color: var(--warn); font-weight: 700; }
.dq-progress-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; display: flex; align-items: center; gap: 18px; justify-content: space-between; box-shadow: var(--shadow); }
.dq-progress-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.dq-sub { font-size: .83rem; color: var(--muted); line-height: 1.5; }
.dq-count { font-size: .95rem; color: var(--muted); flex-shrink: 0; }
.dq-count span { font-size: 1.9rem; font-weight: 800; color: var(--fg); }
.dq-bar { height: 8px; border-radius: 5px; background: var(--bg-soft); border: 1px solid var(--border); overflow: hidden; margin: 10px 0 18px; }
.dq-bar > div { height: 100%; background: var(--ok); transition: width 0.25s; }
.dq-summary { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; display: flex; gap: 24px; align-items: center; }

/* ==================== GROUPS ==================== */
.groups-page { display: flex; flex-direction: column; gap: 20px; padding: 32px 0 48px; }
.groups-page h1 { margin: 0; font-size: 26px; }
.groups-page > p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); }
.groups-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.join-form-inline { margin-bottom: 12px; }
.groups-header { display: flex; align-items: center; justify-content: space-between; }
.groups-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.group-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px;
}
.group-card-head { display: flex; align-items: center; justify-content: space-between; }
.group-icon {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.group-code {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-family: ui-monospace, monospace;
}
.group-members { display: flex; }
.member-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  border: 2px solid var(--surface);
}
.member-avatar + .member-avatar { margin-left: -6px; }
.group-last-msg { font-size: 12px; color: var(--text-3); }
.join-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 16px;
}
.join-icon {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  background: var(--brand-soft); display: flex; align-items: center; justify-content: center;
}
.code-input {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 9px;
  padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--text-3);
  font-family: ui-monospace, monospace; letter-spacing: .15em; width: 120px; text-align: center;
}

/* Chat */
.chat-page { display: flex; flex-direction: column; gap: 16px; padding: 24px 0 36px; }
.chat-header { display: flex; align-items: center; gap: 12px; }
.chat-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
}
.chat-messages { flex: 1; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; min-height: 360px; }
.msg { display: flex; gap: 10px; max-width: 70%; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; }
.msg-bubble { background: var(--surface-2); border-radius: 12px 12px 12px 4px; padding: 10px 14px; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.msg.mine .msg-bubble { background: var(--brand); color: #fff; border-radius: 12px 12px 4px 12px; }
.msg-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.msg-author { font-size: 12px; font-weight: 700; color: var(--text); }
.msg-time { font-size: 10px; color: var(--text-3); }
.msg.mine .msg-meta { justify-content: flex-end; }
.chat-input { border-top: 1px solid var(--border); padding: 14px 22px; display: flex; gap: 10px; align-items: flex-end; }
.chat-input .input, .chat-input textarea {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 16px; font-size: 13.5px; color: var(--text);
  min-height: 20px; font-family: inherit; resize: none;
}
.chat-input textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.chat-messages { max-height: 480px; overflow-y: auto; }

/* ==================== ACCOUNT ==================== */
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 20px; box-shadow: var(--shadow);
}
.card h2 { margin-top: 0; font-size: 15px; }
.profile-box { margin-bottom: 12px; }
/* Form đổi mật khẩu (trang Tài khoản) */
.pw-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pw-form input {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: .9rem;
}
.pw-form input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.pw-form .btn { align-self: flex-start; }
.ok-text { color: var(--success); }
.err-text { color: var(--danger); }
.date-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.date-row:last-child { border-bottom: none; }
.date-cert { font-weight: 800; width: 52px; }
.date-row input[type=date] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
.dday { font-weight: 700; }
.dday.warn { color: var(--warning); }
.dday.danger { color: var(--danger); }
.dday.ok { color: var(--success); }
.dev-row, .pur-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: .9rem; flex-wrap: wrap; }
.dev-row:last-child, .pur-row:last-child { border-bottom: none; }
.dev-ua { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.status-pill.active { color: var(--success); background: var(--success-soft); border: 1px solid var(--success); }
.status-pill.expired { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger); }
.status-pill.warn { color: var(--warning); background: var(--warning-soft); border: 1px solid var(--warning); }

/* ==================== ADMIN ==================== */
/* Dong nhac viec o tab Don hang: co don cho xac nhan thi doi mau de dap vao mat. */
.ord-note { margin: 0 0 12px; font-size: .88rem; color: var(--text-3); }
.ord-note.has-work {
  color: var(--warning); font-weight: 600;
  background: var(--warning-soft); border: 1px solid var(--warning);
  border-radius: var(--radius); padding: 10px 14px;
}
.admin-tabs { display: flex; gap: 6px; margin: 18px 0 14px; flex-wrap: wrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--surface); }
/* Chỉ header giữ nowrap; Ô DỮ LIỆU được xuống dòng — trước đây nowrap toàn bộ
   làm bảng rộng ~1600px trong khung 1200px, cột cuối (nút Gỡ) bị che mất. */
.admin-table th, .admin-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.admin-table th { white-space: nowrap; }
.admin-table td { white-space: normal; overflow-wrap: anywhere; }
/* Cột hành động (nút) luôn trên 1 dòng + dính mép phải khi bảng phải cuộn ngang */
.admin-table td:last-child { white-space: nowrap; position: sticky; right: 0; background: var(--surface); }
.admin-table th { background: var(--surface-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.admin-table tr:last-child td { border-bottom: none; }
/* minmax(0,1fr): select "Chế độ file" co option rat dai -> min-content cua cot
   phinh to lam ca luoi tran ra ngoai .card, keo theo o "Ten de" / "File de"
   (span 2 cot) tòi han ra ngoai khung. minmax(0,...) chan blowout do. */
.upload-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.upload-form .field { min-width: 0; }
.upload-form .field.full { grid-column: 1 / -1; }
.upload-form select, .upload-form input, .upload-form textarea {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  text-overflow: ellipsis;
}
/* Khung form nap de / dang sach: rong hon mac dinh, van co lai theo man hinh */
.admin-form-card { max-width: 920px; width: 100%; }
@media (max-width: 720px) {
  .upload-form { grid-template-columns: minmax(0, 1fr); }
}
/* Cot hanh dong cua bang admin: nhieu nut tren 1 hang, khong xuong dong */
.row-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.upload-result { border: 1px solid var(--success); background: var(--success-soft); border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: .9rem; }
.upload-result.err { border-color: var(--danger); background: var(--danger-soft); }
.bank-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bank-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bank-row label { font-weight: 600; font-size: .85rem; }
.bank-row input[type="text"], .bank-row input[type="password"] { flex: 1; min-width: 170px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
.bank-json { width: 100%; height: 140px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: 13px/1.5 Consolas, monospace; resize: vertical; margin-bottom: 10px; background: var(--bg); color: var(--fg); }
#aiLog { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font-size: .88rem; }

/* ==================== CHARTS / STATS ==================== */
.chart-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.chart-title { font-weight: 700; margin-bottom: 8px; font-size: .95rem; }
svg.chart { width: 100%; height: auto; display: block; }
.attempts-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.attempts-table th, .attempts-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.attempts-table th { background: var(--surface-2); color: var(--text-3); }
.stat-summary { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 20px; }
.stat-summary > div { flex: 1; min-width: 120px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; color: var(--text-3); font-size: .83rem; }
.stat-summary > div span { display: block; font-size: 1.65rem; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.stat-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-badges .badge.ok { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.stat-badges .badge.mid { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.stat-badges .badge.low { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.stat-del { color: var(--danger); font-size: .78rem; font-weight: normal; }
.danger-plain { color: var(--danger); border-color: var(--danger); }

/* ---- dashboard helpers (heatmap, ring, trend, recent) ---- */
.dash-card h3 { font-size: 15px; font-weight: 700; margin: 20px 0 16px; color: var(--text); }
.dash-card h3:first-child { margin-top: 0; }
.countdown-bar-right select, .countdown-bar-right input[type=date] {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 9px; padding: 7px 12px;
  font: inherit; font-size: 12.5px;
}
/* Chứng chỉ của ngày thi: nhãn cố định (chế độ ở nav), không còn <select> */
.df-cert-tag {
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 800;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text-2);
}
html[data-cert="CFA"] .df-cert-tag { color: var(--cfa); }
html[data-cert="FRM"] .df-cert-tag { color: var(--frm); }
html[data-cert="CMA"] .df-cert-tag { color: var(--cma); }
.dash-ready { display: flex; align-items: center; gap: 18px; }
.dq-ring {
  width: 120px; height: 120px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.dq-ring > div {
  width: 88px; height: 88px; border-radius: 50%; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tr-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 4px; }
.tr-row { display: flex; align-items: center; gap: 10px; }
.tr-verdict { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.hm-months { display: flex; gap: 3px; margin-bottom: 3px; }
.hm-month { width: 13px; font-size: 8.5px; color: var(--text-3); overflow: visible; white-space: nowrap; }
.hm-grid { display: flex; gap: 3px; }
.hm-col { display: flex; flex-direction: column; gap: 3px; }
.hm-cell {
  width: 13px; height: 13px; border-radius: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: inline-block;
}
.hm-cell.on { background: var(--success); border-color: var(--success); }
.hm-cell.pending { background: var(--brand-soft); border-color: var(--brand); border-style: dashed; }
.hm-cell.empty { background: transparent; border-color: transparent; }
.hm-legend { margin-top: 8px; font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.heatmap { overflow-x: auto; }
.ra-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.ra-row:last-child { border-bottom: none; }
.ra-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: var(--shadow); }
.stat-card .stat-info { flex: 1; min-width: 0; }
.lock-card {
  max-width: 460px; margin: 60px auto; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 40px 32px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.lock-icon { font-size: 2rem; }

/* ==================== FLASHCARD ==================== */
.fc-study-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap;
}
.fc-study-title { font-size: 18px; font-weight: 800; color: var(--text); }
.fc-study-progress {
  margin-left: auto; font-size: 13px; font-weight: 700;
  color: var(--brand); background: var(--brand-soft);
  padding: 4px 12px; border-radius: 999px;
}
.fc-card-container {
  display: flex; flex-direction: column; align-items: center; margin-bottom: 20px;
}
.fc-card {
  width: 100%; max-width: 600px; height: 320px; perspective: 1000px; cursor: pointer;
}
.fc-card-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .5s; transform-style: preserve-3d;
}
.fc-card-inner.flipped { transform: rotateY(180deg); }
.fc-card-front, .fc-card-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px; text-align: center; overflow-y: auto;
}
.fc-card-back { transform: rotateY(180deg); }
.fc-card-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3); margin-bottom: 16px;
}
.fc-card-front .fc-card-text {
  font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.3;
}
.fc-card-back .fc-card-text {
  font-size: 15px; font-weight: 500; color: var(--text-2); line-height: 1.6;
}
.fc-hint {
  margin-top: 12px; font-size: 12px; color: var(--text-3); text-align: center;
}
.fc-nav {
  display: flex; gap: 10px; justify-content: center; align-items: center;
}
.fc-nav .btn { min-width: 100px; }
.btn-resume { background: var(--brand); color: #fff; }
.btn-restart { opacity: .75; font-size: .82rem; }
.btn-restart:hover { opacity: 1; }

/* ==================== FOOTER ==================== */
.footer {
  text-align: center; padding: 20px; font-size: .8rem; color: var(--text-3);
  border-top: 1px solid var(--border); background: var(--surface);
}

/* ==================== HI-CONTRAST OVERRIDES ==================== */
[data-theme="hc"] .card, [data-theme="hc"] .btn, [data-theme="hc"] input,
[data-theme="hc"] select, [data-theme="hc"] .pill, [data-theme="hc"] .chip {
  border-width: 2px !important;
}

/* ==================== MOCK THI THẬT (kiểu onlymock) ==================== */
.mocks-page { max-width: 1120px; margin: 0 auto; padding: 26px 20px 60px; }
.mocks-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.mocks-head h1 { font-size: 26px; margin: 0 0 4px; }
.mocks-head p { margin: 0; font-size: 13.5px; }
.mocks-toggles { display: flex; gap: 10px; align-items: center; }
.seg {
  display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px; gap: 2px;
}
.seg-btn {
  border: 0; background: transparent; color: var(--text-2);
  font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 7px;
  cursor: pointer; font-family: inherit;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--card); color: var(--brand); box-shadow: var(--shadow); }
.seg-btn.soon { opacity: .5; }

.mocks-intro { margin-bottom: 18px; }
.intro-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; font-size: 13.5px; color: var(--text-2); line-height: 1.6;
}
.intro-card b { color: var(--text); }
.intro-free { color: var(--cfa); font-weight: 700; }

.mock-table {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow);
}
.mock-row {
  /* cột 1 = bìa tự sinh (trước là ô số 120px) */
  display: grid; grid-template-columns: 250px 1fr 1fr 1fr;
  align-items: stretch; border-top: 1px solid var(--border);
}
.mock-row:first-child { border-top: 0; }
.mock-row.head {
  background: var(--bg-soft); font-size: 11px; letter-spacing: .05em;
  color: var(--text-3); font-weight: 700;
}
.mock-row.head > div { padding: 12px 16px; display: flex; align-items: center; }
.mock-row.free { background: color-mix(in srgb, var(--cfa) 5%, transparent); }

.mock-col-no {
  padding: 18px 16px; display: flex; flex-direction: column; gap: 8px;
  justify-content: center; border-right: 1px solid var(--border);
}
.mock-no { font-size: 32px; font-weight: 800; color: var(--brand); line-height: 1; }
.mock-tag {
  align-self: flex-start; font-size: 9.5px; letter-spacing: .06em; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
}
.tag-free { background: color-mix(in srgb, var(--cfa) 18%, transparent); color: var(--cfa); }
.tag-premium { background: var(--brand-soft); color: var(--brand); }

/* Bìa tự sinh trong hàng mock — tái dùng .book-cover2, chỉnh cho khung hẹp */
.mock-cover.book-cover2 {
  aspect-ratio: auto; min-height: 128px;
  margin: 12px 0 12px 12px; border-radius: 10px; padding: 12px 14px; gap: 6px;
}
.mock-cover .bc-title { font-size: 17px; }
.mock-provider-pills { margin: -6px 0 16px; }
.bc-chip-free { background: rgba(122,193,67,.28) !important; }
.bc-chip-prem { background: rgba(232,194,104,.24) !important; color: #f0d48a !important; }

.sess-cell {
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid var(--border); min-height: 108px; justify-content: center;
}
.sess-cell:last-child { border-right: 0; }
.total-cell { background: color-mix(in srgb, var(--bg-soft) 55%, transparent); }
.sess-tag {
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
.sess-empty { font-size: 22px; color: var(--text-3); font-weight: 600; }
.sess-pct { font-size: 26px; font-weight: 800; line-height: 1; }
.sess-pct.good { color: var(--cfa); }
.sess-pct.ok { color: var(--streak); }
.sess-pct.bad { color: var(--acca); }
.sess-score { font-size: 13px; color: var(--text-2); font-weight: 600; }
.sess-meta { display: flex; gap: 12px; font-size: 11.5px; color: var(--text-3); flex-wrap: wrap; }
.sess-meta .partial { color: var(--streak); font-weight: 600; }
.sess-links { display: flex; gap: 12px; margin-top: 2px; }
.sess-link { font-size: 12px; font-weight: 700; color: var(--brand); }
.sess-link.retry { color: var(--text-3); }
.sess-start {
  align-self: flex-start; background: var(--brand); color: #fff; font-weight: 700;
  font-size: 13px; padding: 8px 16px; border-radius: 8px;
}
.sess-start:hover { background: var(--brand-2); color: #fff; }
.sess-start.resume { background: var(--cfa); }
.sess-lock {
  align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--text-3);
  border: 1px dashed var(--border); padding: 7px 14px; border-radius: 8px;
}
.sess-lock:hover { color: var(--brand); border-color: var(--brand); }

.mocks-note { margin-top: 14px; font-size: 12.5px; }

@media (max-width: 720px) {
  .mock-row { grid-template-columns: 1fr 1fr; }
  /* mobile: bìa nằm trọn hàng đầu, 2 session dưới, Total cuối */
  .mock-row .mock-cover { grid-column: 1 / -1; margin: 12px 12px 0; }
  .mock-row .total-cell { grid-column: 1 / -1; border-right: 0; border-top: 1px dashed var(--border); }
  .mock-row.head { display: none; }
  .mock-no { font-size: 24px; }
  .mocks-head { flex-direction: column; align-items: stretch; }
}

/* ==================== TIẾP THỊ LIÊN KẾT (referral) ==================== */
.card-wide { grid-column: 1 / -1; }
.ref-linkrow { display: flex; gap: 8px; margin: 10px 0 14px; }
.ref-linkrow input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text); font-size: 13px; font-family: monospace;
}
.ref-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ref-stat {
  flex: 1; min-width: 110px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; text-align: center;
}
.rs-num { font-size: 20px; font-weight: 800; color: var(--brand); }
.rs-lab { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.ref-list { display: flex; flex-direction: column; gap: 6px; }
.ref-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: 13px;
}
.ref-row b { color: var(--cfa); }
/* Nút liên hệ nổi CÓ CHUYỂN ĐỘNG: bob nhẹ lên xuống + vòng pulse lan toả */
.float-contact .fc-btn { position: relative; animation: fc-bob 2.6s ease-in-out infinite; }
.float-contact .fc-fb { animation-delay: 0s; }
.float-contact .fc-mail { animation-delay: .4s; }
.float-contact .fc-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; z-index: -1; animation: fc-pulse 2.2s ease-out infinite;
}
.float-contact .fc-mail::before { animation-delay: .4s; }
.float-contact .fc-btn:hover { transform: scale(1.12); animation-play-state: paused; }
@keyframes fc-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fc-pulse {
  0% { transform: scale(1); opacity: .5; }
  75% { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .float-contact .fc-btn, .float-contact .fc-btn::before { animation: none; }
}
/* MOBILE: gộp 2 nút liên hệ thành 1 nút nhỏ, bấm mới bung ra.
   Nút nổi là position:fixed nên luôn đè lên nội dung cuộn bên dưới: ở 375px nó
   che mất ~23px cuối của CTA "Xem Mock Level 2" (bấm vào đó lại mở Messenger).
   Thu còn 1 nút 44px (vẫn đủ chuẩn vùng bấm) và bỏ quầng pulse — quầng phóng 2x
   nên loang ra ~96px, che rộng hơn cả nút. Giữ nhịp bob để nút vẫn hút mắt.
   ĐẶT KHỐI NÀY SAU phần animation ở trên: media query KHÔNG tăng specificity,
   để trước sẽ bị `.float-contact .fc-btn { animation }` ghi đè lại. */
@media (max-width: 700px) {
  .float-contact { right: 12px; bottom: 14px; gap: 8px; }
  .float-contact .fc-btn { width: 44px; height: 44px; }
  .float-contact .fc-toggle { display: flex; }
  .float-contact .fc-items { display: none; }
  .float-contact.open .fc-items { display: flex; }
  .float-contact.open .fc-ico-chat { display: none; }
  .float-contact.open .fc-ico-close { display: block; }
  .float-contact .fc-btn::before { content: none; }
}

/* ============ Trang chủ hợp nhất (landing) ============ */
/* Section landing chạy full-bleed, không bị <main> bó vào 1200px */
body.page-home main { width: 100%; max-width: none; margin: 0; padding: 0; }
/* .landing đặt overflow-x:hidden -> ép body thành khung cuộn (làm hỏng window.scrollY
   -> mục lục không hiện). Trả lại cuộn cho window; chặn tràn ngang ở <main>. */
body.page-home { overflow-x: visible; }
body.page-home main { overflow-x: clip; }
/* Chip đếm ngược / streak không bị xuống dòng trong thanh nav */
#countdownChip, .streak-chip { white-space: nowrap; flex: none; }
#countdownChip span, .streak-chip span { white-space: nowrap; }
/* Cho phép co lại (min-width:0) để không đẩy avatar lòi khỏi pill nav */
.nav-right { min-width: 0; }
/* Tên user trong chip avatar: cắt bớt bằng … khi quá dài (tên đầy đủ ở title) */
.avatar-chip .avatar-name {
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==================== DARK: nền brand cho chữ trắng ====================
   --brand tối là #60a5fa (dành cho CHỮ xanh trên nền tối) nhưng nhiều control
   dùng nó làm NỀN sau chữ trắng -> chỉ còn 2.5:1. Đổi các nền đó về xanh đậm
   #2563eb: chữ trắng đạt 5.2:1, nhìn vẫn là "nút xanh thương hiệu". */
[data-theme="dark"] .nav-cta,
[data-theme="dark"] .btn.primary,
[data-theme="dark"] .theme-btn.active,
[data-theme="dark"] .float-contact .fc-toggle,
[data-theme="dark"] .home-continue .hc-icon,
[data-theme="dark"] .co-step-num,
[data-theme="dark"] .msg.mine .msg-bubble,
[data-theme="dark"] .btn-resume { background: #2563eb; }
[data-theme="dark"] .nav-cta:hover,
[data-theme="dark"] .btn-resume:hover { background: #1d4ed8; }

/* ==================== ADMIN: dùng màn hình rộng ====================
   Bảng admin nhiều cột — nới khung nội dung để chứa hết, đỡ phải cuộn ngang.
   Nav cũng nới theo: admin đăng nhập có thêm nút ⚙ + chip nên cần ~1350px
   mới đủ 1 hàng. */
body.page-admin main { width: min(1500px, 96vw); }
body.page-admin .nav { width: min(1500px, calc(100% - 32px)); }

/* ==================== SÁCH (PDF) ====================
   Card kiểu "bìa sách": PDF không có ảnh bìa nên bìa được TỰ SINH bằng CSS —
   gradient tối theo chứng chỉ + logo AlphaMock + badge + tên sách serif +
   watermark α. Bìa cố định tông tối ở cả 2 theme (là "artwork", không phải UI). */
.books-page h1 { margin-bottom: 4px; }
.book-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px; margin-top: 18px;
}
.book-card {
  display: flex; flex-direction: column; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; padding: 0;
  font: inherit; color: var(--text); cursor: pointer;
  transition: transform .15s, box-shadow .2s, border-color .15s;
}
.book-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.book-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- bìa tự sinh ---- */
.book-cover2 {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  aspect-ratio: 21 / 10; padding: 14px 16px; overflow: hidden; color: #fff;
}
.book-cover2.bc-gen { background: linear-gradient(135deg, #131e33 0%, #23355c 100%); }
.book-cover2.bc-cfa { background: linear-gradient(135deg, #0c2618 0%, #1d5236 100%); }
.book-cover2.bc-frm { background: linear-gradient(135deg, #0e1f33 0%, #24486e 100%); }
.book-cover2.bc-cma { background: linear-gradient(135deg, #0a2724 0%, #14574d 100%); }
.book-cover2::before {  /* vệt sáng chéo cho có chất "bìa in" */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.13) 0%, transparent 55%);
}
.book-cover2::after {   /* watermark chữ α của logo */
  content: "α"; position: absolute; right: -6px; bottom: -34px;
  font-size: 110px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.07);
  pointer-events: none;
}
.bc-brand {
  position: relative; display: flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .16em; color: rgba(255,255,255,.85);
}
.bc-brand i {
  font-style: normal; width: 16px; height: 16px; border-radius: 5px; flex: none;
  background: rgba(255,255,255,.16); display: inline-flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 800;
}
.bc-badge {
  position: relative; align-self: flex-start; padding: 3px 9px; border-radius: 4px;
  background: rgba(232,194,104,.14); border: 1px solid rgba(232,194,104,.5);
  color: #e8c268; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
}
.bc-title {
  position: relative; flex: 1; min-height: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; line-height: 1.22; letter-spacing: .01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-chips { position: relative; display: flex; gap: 6px; }
.bc-chips i {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.92);
}

/* ---- hàng pill lọc Chứng chỉ / Nguồn ---- */
.book-filter-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px;
}
.bf-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); margin-right: 4px; min-width: 74px;
}

/* ---- thân card ---- */
.book-body { display: flex; flex-direction: column; gap: 6px; padding: 13px 16px 14px; flex: 1; }
.book-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-prov {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.bt-cat {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
  background: var(--brand-soft); color: var(--brand);
}
.bt-fmt {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--text-3);
}
.book-title2 { font-size: 15px; line-height: 1.35; }
.book-author { font-size: .8rem; color: var(--text-2); }
.book-desc {
  font-size: .82rem; color: var(--text-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.book-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border);
}
.book-size { font-size: .74rem; color: var(--text-3); letter-spacing: .04em; }
.book-open { font-size: .84rem; font-weight: 800; color: var(--brand); }

.book-reader-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.book-reader-bar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Thanh lật trang tự làm — thay cho thanh công cụ có sẵn của trình duyệt
   (thanh đó kèm nút Tải xuống / In nên đã bỏ cùng với việc thôi nhúng PDF). */
.book-pager { display: flex; align-items: center; gap: 6px; flex: none; }
.book-pager .btn { padding: 6px 11px; font-size: 14px; line-height: 1; }
.book-pager .btn:disabled { opacity: .4; cursor: default; }
.bp-jump {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
}
#bookPageInput {
  width: 48px; padding: 3px 4px; text-align: center;
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
  background: transparent; border: none; color: var(--text);
}
#bookPageInput::-webkit-outer-spin-button,
#bookPageInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#bookPageInput { -moz-appearance: textfield; appearance: textfield; }
.bp-total { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.bp-zoom { display: inline-flex; gap: 4px; margin-left: 6px; }

/* Khung đọc: các trang xếp CHỒNG DỌC, cuộn liên tục như đọc PDF thật.
   Mỗi ô trang giữ sẵn đúng tỉ lệ (--page-ar) nên chiều cao cuộn ổn định ngay
   cả khi ảnh chưa tải -> loading="lazy" mới hoạt động đúng và trang không nhảy. */
.book-page-view {
  position: relative;
  height: calc(100vh - 190px); min-height: 480px;
  overflow-y: auto; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 14px;
  overscroll-behavior: contain;
}
.book-pages {
  width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.book-pg {
  position: relative; margin: 0; width: 100%;
  aspect-ratio: var(--page-ar, .72);
  background: #fff; border-radius: 6px; box-shadow: var(--shadow);
  overflow: hidden;
}
.book-pg img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
/* Số trang góc dưới — biết đang ở trang mấy khi cuộn nhanh */
.book-pg figcaption {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(15, 23, 42, .62); color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  pointer-events: none;
}

@media (max-width: 700px) {
  .book-reader-bar b { flex-basis: 100%; flex-grow: 0; }
  .book-pager { flex-wrap: wrap; }
  .bp-zoom { margin-left: 0; }
}

/* ============ PRACTICE PACK: bìa tự sinh ở chế độ LƯỚI ============
   Cả 2 view dùng chung DOM — list view ẩn bìa, giữ nguyên bố cục hàng cũ. */
.exam-grid.list-view .exam-card .book-cover2 { display: none; }
.exam-grid:not(.list-view) .exam-card { padding: 0; overflow: hidden; }
.exam-grid:not(.list-view) .exam-card > :not(.book-cover2) { margin-left: 16px; margin-right: 16px; }
.exam-grid:not(.list-view) .exam-card > .exam-badges { margin-top: 2px; }
.exam-grid:not(.list-view) .exam-card > .btn { margin-bottom: 14px; margin-top: 2px; }
.exam-grid:not(.list-view) .exam-card { transition: transform .15s, box-shadow .2s; }
.exam-grid:not(.list-view) .exam-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ============ Bìa cỡ nhỏ (Ôn thi, Flashcard) + sách khóa ============ */
.book-cover2.cover-sm { aspect-ratio: auto; min-height: 104px; padding: 11px 14px; gap: 5px; }
.book-cover2.cover-sm .bc-title { font-size: 15.5px; }
/* Ôn thi: bìa nằm gọn trong card (card có padding sẵn) */
.daily-card .book-cover2 { border-radius: 10px; }
/* Sách chưa mua: dịu màu + chân card đổi nhãn "Mua để mở khóa" */
.book-card.locked { filter: saturate(.6); }
.book-card.locked .book-open { color: var(--text-2); }

/* ============ DASHBOARD khóa: thống kê giả blur + thẻ mở khóa ============ */
.dash-locked-wrap { position: relative; min-height: 480px; }
.dash-locked-blur {
  filter: blur(7px); opacity: .55; pointer-events: none; user-select: none;
}
.dl-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dl-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
}
.dl-tile b { font-size: 26px; display: block; }
.dl-tile span { font-size: 12px; color: var(--text-3); }
.dl-chart {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-top: 14px;
}
.dl-chart-title { font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.dl-bars { display: flex; gap: 8px; align-items: flex-end; height: 90px; }
.dl-bars span { flex: 1; background: var(--brand-soft); border-radius: 4px 4px 0 0; }
.dash-locked-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.dlo-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 28px 30px; text-align: center;
  max-width: 400px; display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.dlo-icon { font-size: 34px; }
.dlo-card h2 { font-size: 19px; }
.dlo-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0; }
@media (max-width: 720px) { .dl-tiles { grid-template-columns: repeat(2, 1fr); } }

/* Đề ôn tập khóa (xem trước) — dịu màu như exam-card.locked */
.daily-card.locked { filter: saturate(.6); }

/* Khóa TỪNG khối thống kê (kiểu TaskFlow Pro-feature) — mỗi khối tự blur,
   thẻ mở khóa nhỏ nằm giữa khối đó */
.dash-lock-sec { position: relative; margin-bottom: 14px; }
.dash-lock-sec .dash-locked-blur { filter: blur(6px); }
.dlo-card.dlo-sm { padding: 16px 22px; gap: 7px; max-width: 330px; }
.dlo-card.dlo-sm .dlo-icon { font-size: 22px; }
.dlo-card.dlo-sm b { font-size: 14.5px; }
.dlo-card.dlo-sm h2 { font-size: 17px; }
.dlo-card.dlo-sm p { font-size: 12.5px; }
.dlo-card.dlo-sm .btn { padding: 8px 16px; font-size: 12.5px; }
.dlo-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Dashboard khóa v3 — các khối CAO BẰNG NHAU, xếp dọc full ngang, CÁCH NHAU
   rộng như TaskFlow để các thẻ Pro Feature không dính vào nhau */
.dash-locked-grid { display: flex; flex-direction: column; gap: 46px; }
.dash-lock-sec { position: relative; height: 400px; margin-bottom: 0; }
.dash-lock-sec .dash-locked-blur { height: 100%; }
.dash-lock-sec .dl-chart {
  height: 100%; margin-top: 0; display: flex; flex-direction: column;
  box-sizing: border-box;
}
.dash-lock-sec .dl-bars { flex: 1; height: auto; }
.dl-tiles-2 { grid-template-columns: 1fr 1fr; height: 100%; box-sizing: border-box; }
.dl-tiles-2 .dl-tile {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.dlo-crown { display: block; }
@media (max-width: 760px) {
  .dash-lock-sec { height: 300px; }
  .dash-locked-grid { gap: 32px; }
}

/* Mock: mỗi trung tâm ra đề một bảng riêng, có tiêu đề trung tâm phía trên */
.mock-provider-sec { margin-bottom: 32px; }
.mock-provider-sec:last-child { margin-bottom: 0; }
.mock-provider-head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px;
}
.mock-provider-head b { font-size: 17px; font-family: var(--font-display); }
.mock-provider-head span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  color: var(--text-3); text-transform: uppercase;
}