/* ============================================================================
 *  GIAO DIỆN HỌC & ÔN THI TIN HỌC THPT QUỐC GIA (GAMIFIED MODERN EDITION)
 *  System Fonts: Plus Jakarta Sans, Outfit, JetBrains Mono
 *  Interactive Mascot Reactions & Dynamic Gamified Progress System
 * ==========================================================================*/

:root {
  --bg:           #f8fafc;
  --bg-card:      #ffffff;
  --bg-soft:      #f1f5f9;
  --text:         #0f172a;
  --text-soft:    #475569;
  --border:       #e2e8f0;
  --border-strong:#cbd5e1;

  --primary:      #4f46e5;
  --primary-d:    #3730a3;
  --primary-soft: #eef2ff;

  --success:      #10b981;
  --success-soft: #ecfdf5;

  --danger:       #f43f5e;
  --danger-soft:  #fff1f2;

  --warning:      #f59e0b;
  --warning-soft: #fffbeb;

  --info:         #0d9488;
  --info-soft:    #ccfbf1;

  --shadow:       0 4px 14px rgba(15, 23, 42, 0.05);
  --shadow-xs:    0 1px 4px rgba(15, 23, 42, 0.08);
  --shadow-lg:    0 16px 36px rgba(79, 70, 229, 0.15);
  
  --radius:       16px;
  --radius-sm:    10px;

  --font-sans:    'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Quicksand', var(--font-sans);
  /* Chuỗi dự phòng dài là BẮT BUỘC, không phải cho đẹp. Google Fonts cắt
     JetBrains Mono theo unicode-range và KHÔNG phủ khối vẽ khung (U+2500–257F),
     mũi tên (U+2190/2192) hay chỉ số dưới (U+2080–2089). Đo được: ASCII rộng
     8,4px còn "─ │ ├ → ₂" chỉ 7,7px — lệch 8,3%, tức dải 52 dấu gạch ngắn hơn
     52 chữ tới 4,4 cột, đủ làm mọi bảng kẻ và cây thư mục chạy lệch hàng. Các
     phông dưới đây đều CÓ những khối ấy và đều đơn cách, nên rơi vào cái nào
     cũng vẫn thẳng cột. */
  --font-mono:    'JetBrains Mono', ui-monospace, 'DejaVu Sans Mono',
                  'Roboto Mono', Menlo, 'Cascadia Mono', 'Courier New', monospace;

  /* Mặt phẳng chứa CODE (khung soạn code, ô kết quả, khối code trong bài học).
     Trước đây cắm cứng màu tối, nên giao diện Sáng vẫn có một tảng đen giữa
     trang — đúng chỗ học sinh nhìn lâu nhất. Đặt thành biến để cả hai giao diện
     dùng chung một bộ quy tắc, đổi theme là đổi theo. */
  /* Nền code KHÔNG lấy trắng: thẻ bọc ngoài (.pg) đã trắng, hai mặt phẳng cùng
     màu thì không còn thấy "đây là khung code". Xám xanh nhạt hơn thẻ một bậc rõ
     là đủ, mà vẫn giữ độ tương phản chữ trên 5:1. */
  --code-bg:      #eef2f8;
  --code-text:    #0f172a;
  --code-line:    #d7dfec;
  --code-out:     #047857;   /* chữ kết quả — xanh đậm để đọc được trên nền sáng */
  --code-err:     #b91c1c;
}

[data-theme="dark"] {
  --bg:           #090d16;
  --bg-card:      #141c2e;
  --bg-soft:      #1e293b;
  --text:         #f8fafc;
  --text-soft:    #94a3b8;
  --border:       #1e293b;
  --border-strong:#334155;

  --primary:      #6366f1;
  --primary-d:    #4f46e5;
  --primary-soft: #1e1b4b;

  --success:      #34d399;
  --success-soft: #064e3b;

  --danger:       #fb7185;
  --danger-soft:  #4c0519;

  --warning:      #fbbf24;
  --warning-soft: #451a03;

  --info:         #2dd4bf;
  --info-soft:    #134e4a;

  --shadow:       0 4px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.55);

  /* Giao diện Tối giữ đúng bộ màu code cũ — chỗ này vốn đã đúng từ đầu */
  --code-bg:      #0d1526;
  --code-text:    #e6edf7;
  --code-line:    #1e293b;
  --code-out:     #a7f3d0;
  --code-err:     #fca5a5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

img { max-width: 100%; height: auto; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  transition: background 0.25s, color 0.25s;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------- Thanh tiêu đề ------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px clamp(14px, 4vw, 40px);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  /* Bỏ backdrop-filter: nền --bg-card đục hoàn toàn nên chẳng có gì để làm
     mờ, mà vẫn bắt trình duyệt dựng layer và composite lại mỗi khung hình
     lúc cuộn — nguyên nhân giật rất hay gặp trên Android tầm thấp. */
}

.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.brand-logo { font-size: 28px; line-height: 1; color: var(--primary); }
.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; font-weight: 800; }
.brand-text small { color: var(--text-soft); font-size: 11.5px; font-weight: 600; }
.topnav { display: flex; align-items: center; gap: 6px; }

.nav-btn {
  border: none; background: transparent; color: var(--text-soft);
  font-size: 14px; font-weight: 650; padding: 9px 14px;
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s;
  font-family: var(--font-sans);
}
.nav-btn:hover { background: var(--bg-soft); color: var(--primary); }

/* ------------------------- Bố cục chính ------------------------- */
.app-main {
  flex: 1; width: 100%; max-width: 980px;
  margin: 0 auto; padding: clamp(20px, 3.5vw, 36px) clamp(16px, 4vw, 28px);
  animation: fade 0.3s ease;
}
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.footer {
  text-align: center; padding: 18px; color: var(--text-soft);
  font-size: 13px; border-top: 1px solid var(--border);
}

/* ------------------------- Nút bấm & Element styling ------------------------- */
.btn {
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 700;
  padding: 11px 20px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex; align-items: center; gap: 8px; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-d)); color: #fff; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4); }
.btn-ghost { background: var(--bg-card); color: var(--text); border-color: var(--border); box-shadow: var(--shadow); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-success { background: var(--success); color: #fff; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: var(--radius); }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* FIX BROKEN BUTTON OUTLINES FOR BACK-LINK AND FLAG-BTN */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 18px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: inherit;
  box-shadow: var(--shadow);
  transition: all 0.18s;
  outline: none;
}

.back-link:hover {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateX(-3px);
  background: var(--primary-soft);
}

.flag-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
  font-family: inherit;
  box-shadow: var(--shadow);
  transition: all 0.18s;
  outline: none;
}

.flag-btn:hover {
  border-color: var(--warning);
  color: var(--warning);
  transform: translateY(-1px);
}

.flag-btn.on {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: var(--warning);
}

/* Modal Fix */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(9, 13, 22, 0.65);
  display: grid; place-items: center; z-index: 100; padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--bg-card); border-radius: var(--radius); padding: 28px;
  max-width: 440px; width: 100%; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  animation: pop 0.2s ease;
}

/* ------------------------- PLAYGROUND & CODE EDITORS STYLING ------------------------- */
/* Chỉ các textarea bên trong .pg mới mang màu của mặt phẳng code (xem --code-*) */
.pg textarea, .pg-editor, #codeArea {
  width: 100%;
  min-height: 160px;
  background: var(--code-bg);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.6;
  padding: 16px 18px;
  border-radius: 0;
  border: none;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  display: block;
}

.pg textarea:focus, .pg-editor:focus, #codeArea:focus {
  box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.5);
}

/* Form inputs và selects thông thường */
select, input[type="text"], input[type="number"] {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

select:focus, input[type="text"]:focus, input[type="number"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.pg-out {
  background: var(--code-bg);
  color: var(--code-out);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--code-line);
  min-height: 64px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* pre chứ KHÔNG pre-wrap: đã có khung cuộn ngang ngay trên thì pre-wrap chỉ
     làm dòng gãy về cột 0, hỏng đúng những bảng học sinh vừa in bằng print(). */
  white-space: pre;
  display: block;
}

.pg-out.has-error { color: var(--code-err); }

.pg-preview {
  width: 100%;
  min-height: 240px;
  border: none;
  background: #ffffff;
  display: block;
}

/* Dòng dặn dưới khung xem thử: chỉ hiện khi đoạn mã có thẻ <a>. */
.pg-preview-ghi {
  margin: 0;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.pg {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.pg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.pg-title {
  font-weight: 750;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.pg-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pg-out-label {
  font-size: 13px;
  font-weight: 750;
  color: var(--text-soft);
  padding: 8px 16px 4px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

/* ------------------------- PERSISTENT FLOATING FIXED MASCOT ASSISTANT ------------------------- */
.floating-mascot-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.floating-mascot-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: auto;
}

.floating-mascot-bubble {
  background: var(--bg-card);
  border: 2px solid var(--primary);
  border-radius: 16px;
  padding: 14px 18px;
  max-width: 280px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 12px;
  position: relative;
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom right;
}

.floating-mascot-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  right: 28px;
  width: 14px;
  height: 14px;
  background: var(--bg-card);
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
}

.floating-mascot-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.floating-mascot-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: var(--primary);
  padding: 2px 8px;
  border-radius: 8px;
  /* Nhãn này gồm cả TÊN RIÊNG của linh vật (Sola/Luna) ghép vào chuỗi viết hoa
     sẵn — để CSS viết hoa thì không phải nhớ viết hoa tên ở chỗ ghép chuỗi, và
     mọi nhãn luôn cùng một kiểu chữ. */
  text-transform: uppercase;
}

.floating-mascot-close {
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px;
}

.floating-mascot-text {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.45;
}

/* Nút mở gia sư AI ngay trong bóng thoại của Robot — chỉ hiện khi máy chủ bật AI */
.floating-mascot-ask {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.floating-mascot-ask:hover {
  background: var(--primary);
  color: #fff;
}

.floating-mascot-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2.5px solid var(--primary);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.floating-mascot-btn:hover {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.5);
  border-color: var(--warning);
}

.floating-mascot-btn:active {
  transform: scale(0.95);
}

.floating-mascot-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}

.floating-mascot-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  animation: mascotGlowPulse 2s infinite;
  pointer-events: none;
}

@keyframes mascotGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 0.1; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ------------------------- Trang chủ & Dashboard ------------------------- */
.hero {
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  color: #fff; border-radius: var(--radius); padding: 32px;
  box-shadow: var(--shadow-lg); margin-bottom: 26px; position: relative; overflow: hidden;
}
.hero h1 { font-family: var(--font-display); font-size: clamp(24px, 4.5vw, 34px); margin-bottom: 8px; font-weight: 800; }
.hero p { opacity: 0.92; font-size: 15.5px; max-width: 640px; }
.hero-stats { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.hero-stat b { font-family: var(--font-display); font-size: 26px; display: block; font-weight: 800; line-height: 1; }
.hero-stat span { font-size: 12.5px; opacity: 0.85; }

.section-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin: 28px 0 16px; display: flex; align-items: center; gap: 10px; }

.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
/* Ô Premium ở trang chủ: nhạt đi và đổi nhãn thành "Premium", nhưng VẪN bấm được
   để hiện lời mời nâng cấp — chặn hẳn thì học sinh không biết mình bỏ lỡ gì. */
.mode-card.khoa-pre { opacity: .72; }
.mode-card.khoa-pre:hover { opacity: 1; }
.mode-card.khoa-pre .m-badge {
  background: var(--accent-amber-soft, #fef3c7);
  color: var(--accent-amber, #d97706);
  border-color: var(--accent-amber, #d97706);
}

.mode-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; cursor: pointer;
  transition: all 0.2s; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.mode-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.mode-card .m-icon { font-size: 32px; margin-bottom: 12px; }
.mode-card h3 { font-family: var(--font-display); font-size: 18px; margin-bottom: 6px; font-weight: 800; }
.mode-card p { color: var(--text-soft); font-size: 13.5px; line-height: 1.5; }
.mode-card .m-badge {
  position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary); padding: 4px 10px; border-radius: 20px;
}

/* ------------------------- Danh sách chủ đề ------------------------- */

/* Config Cards */
.config-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); margin-bottom: 20px;
}
.config-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.config-row:last-child { border-bottom: none; }
.config-row > label { font-weight: 700; font-size: 14.5px; }
.chip-group { display: flex; gap: 8px; flex-wrap: wrap; }
/* Ô chọn dài (danh sách bài) phải co theo bề ngang khung. Bề rộng NỘI TẠI của
   một <select> bằng lựa chọn dài nhất của nó — ở đây là "Bài 12. Bảng mã kí tự
   và dung lượng của tệp văn bản (14 câu)", ~700px. Không chặn thì con số đó đẩy
   cả hàng ra ngoài mép màn điện thoại (max-width:100% một mình không đủ: nó đo
   theo vỏ .chip-group, mà chính vỏ đã bị nong rộng theo select). */
.config-row > .sel-wrap { flex: 1 1 240px; min-width: 0; max-width: 100%; }
.sel-wrap > select { width: 100%; min-width: 0; }
.chip {
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-soft);
  padding: 8px 16px; border-radius: 20px; font-size: 13.5px; font-weight: 650; cursor: pointer; transition: all 0.15s;
}
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3); }

/* ------------------------- DYNAMIC GAMIFIED PROGRESS BAR ------------------------- */
.progress-container {
  margin-bottom: 22px;
}

.progress-track-wrapper {
  position: relative;
  height: 12px;
  background: var(--bg-soft);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--info) 50%, var(--success) 100%);
  border-radius: 20px;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
  position: relative;
}

.progress-fill::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  animation: shine 2s infinite;
}
@keyframes shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.progress-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 650;
}

.streak-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--warning);
  background: var(--warning-soft);
  padding: 3px 10px;
  border-radius: 12px;
}

/* Nhãn chế độ làm bài (luyện tập / thi thử) */
.pill.pill-mode { background: var(--bg-soft); color: var(--text-soft); border: 1px solid var(--border); }

/* Sắc thái bóng thoại của Robot trợ lý khi chấm xong một câu */
.floating-mascot-bubble.tone-correct { border-color: var(--success); }
.floating-mascot-bubble.tone-correct .floating-mascot-badge { background: var(--success); }
.floating-mascot-bubble.tone-correct::after { border-top-color: var(--success); }
.floating-mascot-bubble.tone-wrong { border-color: var(--danger); }
.floating-mascot-bubble.tone-wrong .floating-mascot-badge { background: var(--danger); }
.floating-mascot-bubble.tone-wrong::after { border-top-color: var(--danger); }
.floating-mascot-bubble.tone-streak { border-color: var(--warning); }
.floating-mascot-bubble.tone-streak .floating-mascot-badge { background: var(--warning); }
.floating-mascot-bubble.tone-streak::after { border-top-color: var(--warning); }

/* ------------------------- Màn hình làm bài ------------------------- */
.quiz-header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.quiz-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill { font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 20px; background: var(--bg-soft); color: var(--text-soft); }
.pill.type-mc { background: var(--primary-soft); color: var(--primary); }
.pill.type-tf { background: var(--warning-soft); color: var(--warning); }
.pill.type-sa { background: var(--success-soft); color: var(--success); }

/* Nhãn MỨC ĐỘ của câu hỏi - Nhận biết / Thông hiểu / Vận dụng.
   Trước đây dùng .pill trơn nên nằm lẫn giữa "Lớp 12" và tên bài, không ai đọc
   ra đó là độ khó. Tô ba màu theo thang quen thuộc của app (xanh lá = an toàn,
   hổ phách = phải nghĩ, hồng = khó) và thêm một chấm tròn đứng trước để phân
   biệt được cả khi in đen trắng hoặc khi người dùng không phân biệt được màu. */
.pill.pill-lv { display: inline-flex; align-items: center; gap: 6px; }
/* flex:none là BẮT BUỘC, không phải cho gọn: ::before là một flex item, mà
   flex item mặc định co được (flex-shrink:1). Đo được chấm bị bóp còn 3,56px
   thay vì 6px trên nhãn dài như "Thông hiểu" - méo thành hình bầu dục. */
.pill.pill-lv::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.lv-easy   { background: var(--success-soft); color: var(--success); }
.pill.lv-medium { background: var(--warning-soft); color: var(--warning); }
.pill.lv-hard   { background: var(--danger-soft);  color: var(--danger); }
/* Một / hai / ba chấm theo bậc. Vẽ chấm thứ hai và ba bằng box-shadow của chính
   ::before (bóng không chiếm chỗ) rồi chừa chỗ lại bằng margin-right, nên vẫn
   chỉ một phần tử giả và mọi chấm đều đứng TRƯỚC chữ - không lệch hai bên. */
.pill.lv-medium::before { box-shadow: 9px 0 0 currentColor; margin-right: 9px; }
.pill.lv-hard::before   { box-shadow: 9px 0 0 currentColor, 18px 0 0 currentColor; margin-right: 18px; }

/* Hàng nhãn trong "Xem lại từng câu" */
.review-tags { margin: 6px 0 2px; }
.review-tags .pill { font-size: 11.5px; padding: 4px 11px; }
.timer { font-family: var(--font-mono); font-size: 18px; font-weight: 800; padding: 7px 16px; border-radius: 12px; background: var(--bg-soft); font-variant-numeric: tabular-nums; }
.timer.danger { background: var(--danger-soft); color: var(--danger); animation: pulse 1s infinite; }

.question-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(20px, 3.5vw, 32px); box-shadow: var(--shadow); margin-bottom: 20px;
}
.q-number { color: var(--primary); font-family: var(--font-mono); font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.q-text { font-size: 17px; font-weight: 650; margin-bottom: 10px; white-space: pre-wrap; line-height: 1.6; }
.q-code {
  background: var(--code-bg); color: var(--code-text); font-family: var(--font-mono);
  font-size: 14px; padding: 16px 18px; border-radius: 12px; margin: 16px 0;
  white-space: pre; overflow-x: auto; line-height: 1.55; border: 1px solid var(--code-line);
}
/* Khối mã KHÔNG phải hình vẽ / bảng căn cột (maXuongDong() quyết định lúc dựng)
   thì cho tự xuống dòng thay vì bắt cuộn ngang. Vẫn là pre-wrap nên thụt đầu dòng
   của Python còn nguyên; chỉ dòng nào dài quá mép mới bị gấp xuống.
   overflow-wrap để một chuỗi dài không có khoảng trắng (đường dẫn, tên biến dài)
   cũng gấp được, chứ nó thì pre-wrap bó tay và vẫn tràn. */
.q-code.q-code-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Lựa chọn trắc nghiệm */
.options { display: grid; gap: 12px; margin-top: 18px; }
.option {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s; background: var(--bg-card); font-size: 15.5px;
}
.option:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateX(2px); }
.option.selected { border-color: var(--primary); background: var(--primary-soft); font-weight: 700; box-shadow: var(--shadow-xs); }
.option .opt-key {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center;
  background: var(--bg-soft); font-family: var(--font-mono); font-weight: 800; font-size: 14px; color: var(--text-soft);
}
.option.selected .opt-key { background: var(--primary); color: #fff; }
.option.correct { border-color: var(--success); background: var(--success-soft); }
.option.correct .opt-key { background: var(--success); color: #fff; }
.option.wrong { border-color: var(--danger); background: var(--danger-soft); }
.option.wrong .opt-key { background: var(--danger); color: #fff; }

/* Ô lựa chọn CHỨA MỘT ĐOẠN MÃ - dạng "đoạn nào làm đúng yêu cầu" của đề thật.
   Ô lựa chọn vốn dựng cho một dòng chữ, thả khối mã vào là vỡ ba chỗ:
     · căn giữa theo chiều dọc làm chữ cái A/B/C/D trôi xuống lưng chừng khối mã
       thay vì nằm ngang dòng đầu -> đọc bốn phương án phải dò mắt lên xuống;
     · lề 16px của .q-code vốn dành cho khối mã đứng riêng giữa trang, nhét vào
       ô lựa chọn thì bốn ô phình gấp rưỡi, hết một màn hình điện thoại;
     · min-width: 0 - thẻ chữ trong flex mặc định KHÔNG co dưới bề rộng nội dung,
       nên một dòng mã dài đẩy tràn cả ô ra ngoài thẻ câu hỏi thay vì cuộn ngang
       bên trong. Đây là chỗ hỏng duy nhất không nhìn thấy trên máy tính. */
.option.option-ma { align-items: flex-start; }
.option.option-ma .opt-text { min-width: 0; flex: 1; }
.option.option-ma .q-code {
  margin: 0; padding: 10px 12px; font-size: 13px; border-radius: 9px;
}
/* Ô lựa chọn nhích 2px khi rê chuột: với khối mã dài đang cuộn ngang thì cú
   nhích đó làm mép phải giật, nên bỏ riêng cho ô có mã. */
.option.option-ma:hover { transform: none; }

/* Bấm "Kiểm tra" mà chưa chọn đáp án: nháy nhẹ khối đáp án cho biết phải nhìn
   đâu. Lời nhắc chứ không phải báo lỗi, nên chỉ hai nhịp ngắn và viền vàng —
   để dành đỏ cho lúc chấm ra đáp án sai thật. */
.nhac-chon { animation: nhacChon .4s ease; }
.nhac-chon .option, .nhac-chon .tf-row, .nhac-chon .sa-input { border-color: var(--warning); }
@keyframes nhacChon {
  0%, 100% { transform: none; }
  30%      { transform: translateX(-5px); }
  70%      { transform: translateX(5px); }
}
/* Ai đã tắt hiệu ứng chuyển động trong hệ điều hành thì giữ lại mỗi viền vàng. */
@media (prefers-reduced-motion: reduce) { .nhac-chon { animation: none; } }

/* Đúng/Sai */
.tf-table { display: grid; gap: 12px; margin-top: 18px; }
.tf-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
}
.tf-row .tf-text { flex: 1; font-size: 15px; }
.tf-choices { display: flex; gap: 8px; flex-shrink: 0; }
.tf-choices button {
  border: 1.5px solid var(--border); background: var(--bg-soft); color: var(--text-soft);
  font-weight: 750; font-size: 13.5px; padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: all 0.13s; font-family: var(--font-sans);
}
.tf-choices button.sel-true { background: var(--success); color: #fff; border-color: var(--success); }
.tf-choices button.sel-false { background: var(--danger); color: #fff; border-color: var(--danger); }
.tf-row.reveal-correct { border-color: var(--success); }
.tf-row.reveal-wrong { border-color: var(--danger); }

/* Ô giải thích */
.explain-box {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--info-soft); border-left: 4px solid var(--info); font-size: 14.5px;
}
.explain-box b { color: var(--info); }

/* Lời giải câu Đúng/Sai tách thành từng ý (xem fmtGiaiThich trong app.js).
   Không dùng chấm đầu dòng: mỗi ý đã mở đầu bằng (1)(2)(3)(4) rồi, thêm chấm là
   thừa hai lớp đánh dấu. Gạch mảnh giữa các ý đủ để mắt tách dòng. */
.gt-y { list-style: none; margin: 6px 0 0; padding: 0; }
.gt-y li { padding: 4px 0; }
.gt-y li + li { border-top: 1px dashed var(--border); }
.result-flag { font-weight: 800; margin-bottom: 6px; }
.result-flag.ok { color: var(--success); }
.result-flag.no { color: var(--danger); }

/* Bảng câu hỏi (palette) */
.palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; }
.palette-btn {
  width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--bg-card); color: var(--text-soft); font-family: var(--font-mono); font-weight: 750; font-size: 14px;
  cursor: pointer; transition: all 0.12s;
}
.palette-btn:hover { border-color: var(--primary); }
.palette-btn.answered { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.palette-btn.current { outline: 3px solid var(--primary); outline-offset: 1px; }
.palette-btn.correct { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.palette-btn.wrong { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
/* Câu đã đánh dấu để soát lại: gạch cờ vàng ở góc trên phải */
.palette-btn.flagged { position: relative; border-color: var(--warning); }
.palette-btn.flagged::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--warning); border: 2px solid var(--bg-card);
}

/* ---------------------------------------------------------------------------
 *  CHẾ ĐỘ CUỘN DỌC — cả đề trên một trang (thi thử)
 *  Máy tính: bảng câu hỏi dính bên phải; điện thoại: thu thành thanh dính ở trên.
 * ------------------------------------------------------------------------- */
.quiz-scroll { display: grid; grid-template-columns: minmax(0, 1fr) 216px; gap: 22px; align-items: start; }
.quiz-scroll-main { min-width: 0; display: grid; gap: 18px; }

/* min-width:0 là bắt buộc: thẻ câu hỏi là ô của lưới, để mặc định (auto) thì nội
   dung dài (đoạn mã, chuỗi không xuống dòng) sẽ nong thẻ ra và trang bị tràn ngang
   trên điện thoại. Có nó thì đoạn mã tự cuộn ngang trong khung của nó. */
.qs-card { margin-bottom: 0; min-width: 0; scroll-margin-top: calc(var(--topbar-h, 72px) + 16px); }
.qs-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.qs-head .q-number { margin-bottom: 0; font-size: 15px; }
.qs-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.qs-tags .pill { font-size: 11.5px; padding: 4px 11px; }
.flag-btn.flag-mini { padding: 5px 12px; font-size: 12.5px; gap: 5px; box-shadow: none; }

.qs-end {
  text-align: center; background: var(--bg-card); border: 1px dashed var(--border-strong);
  border-radius: var(--radius); padding: 24px 20px;
}
.qs-end p { color: var(--text-soft); font-size: 14.5px; margin-bottom: 14px; }

.palette-side {
  position: sticky; top: calc(var(--topbar-h, 72px) + 16px); order: 2;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
}
.palette-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.palette-side-title { font-size: 13.5px; font-weight: 800; color: var(--text-soft); }
.palette-side .palette { margin: 12px 0 10px; gap: 7px; }
.palette-side .palette-btn { width: 38px; height: 38px; }
.palette-toggle {
  display: none; align-items: center; gap: 6px;
  border: 1.5px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
}
.palette-side:not(.closed) .palette-toggle .ic { transform: rotate(180deg); }
.palette-legend {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-size: 11.5px; color: var(--text-soft); font-weight: 650; margin-bottom: 12px;
}
.palette-legend i.lg {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  border: 1.5px solid var(--border); vertical-align: -1px; margin-right: 4px;
}
.palette-legend .lg-answered { background: var(--primary-soft); border-color: var(--primary); }
.palette-legend .lg-flagged { background: var(--warning); border-color: var(--warning); }
.palette-legend .lg-empty { background: var(--bg-card); }
.palette-submit { font-size: 13.5px; padding: 10px 16px; }

/* Một cột khi màn hẹp: bảng câu hỏi lên trên, thu gọn lại, bấm mới mở */
@media (max-width: 860px) {
  .quiz-scroll { grid-template-columns: 1fr; gap: 14px; }
  .palette-side {
    order: -1; top: var(--topbar-h, 72px); z-index: 20; padding: 10px 12px;
    border-radius: var(--radius-sm);
  }
  .palette-toggle { display: inline-flex; }
  .palette-side.closed .palette,
  .palette-side.closed .palette-legend,
  .palette-side.closed .palette-submit { display: none; }
  .palette-side .palette { max-height: 42vh; overflow-y: auto; }
  /* nhảy tới câu nào thì câu đó phải nằm dưới CẢ thanh tiêu đề lẫn thanh bảng câu */
  .qs-card { scroll-margin-top: calc(var(--topbar-h, 72px) + var(--palbar-h, 54px) + 12px); }
}

/* Màn hình kết quả */
.result-hero { text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 24px; box-shadow: var(--shadow); margin-bottom: 24px; }
.score-ring { width: 160px; height: 160px; margin: 0 auto 18px; position: relative; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .score-num { position: absolute; inset: 0; display: grid; place-items: center; flex-direction: column; }
.score-ring .score-num b { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 800; }
.score-ring .score-num span { font-size: 13px; color: var(--text-soft); }

/* Màn kết quả của ô "Luyện tập"/"Thi thử" trên bản đồ lộ trình — sao thay vòng
   tròn %, khớp đúng ngôn ngữ mà chính ô đó đang hiển thị trên bản đồ. */
.result-stars { display: flex; justify-content: center; gap: 10px; margin: 0 auto 18px; }
.result-star { width: 56px; height: 56px; fill: var(--border); flex: none; }
.result-star.on { fill: #ffc107; filter: drop-shadow(0 3px 7px rgba(255, 193, 7, 0.55)); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; text-align: center; }
.stat-box b { font-family: var(--font-display); font-size: 26px; display: block; font-weight: 800; }
.stat-box.g b { color: var(--success); }
.stat-box.r b { color: var(--danger); }

/* Responsive */
@media (max-width: 560px) {
  .brand-text small { display: none; }
  .nav-label { display: none; }
  /* 7 mục điều hướng không vừa bề ngang điện thoại: thu đệm lại, và cho THANH
     NAV tự cuộn ngang. Không có van này thì cả TRANG bị đẩy rộng ra — khách từ
     Google vào bằng điện thoại gặp ngay một trang trượt qua trượt lại. */
  .topbar { padding-left: 10px; padding-right: 10px; }
  .topnav { gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav .nav-btn { padding: 8px 7px; flex: none; }
  .hero { padding: 24px; }
  .hero h1 { font-size: 24px; }
  .floating-mascot-container { bottom: 80px; right: 14px; z-index: 99; }
  .floating-mascot-container { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .floating-mascot-bubble { max-width: 220px; font-size: 12.5px; }
  .floating-mascot-btn { width: 52px; height: 52px; }
  .floating-mascot-img { width: 44px; height: 44px; }
}

/* ===========================================================================
 *  TRANG BÀI HỌC (LESSON)
 * ========================================================================= */

/* Nội dung bài học */
.lesson-body {
  margin-bottom: 24px;
}

.ls-p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 14px;
}

.ls-h {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--primary);
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary-soft);
}

.ls-list {
  margin: 10px 0 16px 20px;
  display: grid;
  gap: 7px;
}

.ls-list li {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
}

.ls-list li::marker {
  color: var(--primary);
  font-weight: 800;
}

/* Hộp câu chuyện / hình dung */
.ls-story {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.04));
  border: 1.5px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin: 16px 0;
  font-size: 15px;
  line-height: 1.65;
}

.ls-story-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Hộp lưu ý */
.ls-note {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.04));
  border-left: 4px solid var(--warning);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px;
  margin: 14px 0;
  font-size: 14.5px;
  line-height: 1.6;
}

/* Dòng nhắc THÔNG TIN, không phải cảnh báo: .ls-note mặc định màu hổ phách nên
   dùng cho mẹo hay lưu ý "coi chừng"; còn câu kiểu "lần chạy đầu cần mạng" chỉ là
   thông tin, tô vàng lên là học sinh tưởng app đang lỗi. */
.ls-note.tin {
  background: linear-gradient(135deg, color-mix(in srgb, var(--info) 12%, transparent), color-mix(in srgb, var(--info) 4%, transparent));
  border-left-color: var(--info);
  color: var(--text-soft);
}

/* Hộp ví dụ */
.ls-ex {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 16px 0;
  box-shadow: var(--shadow);
}

.ls-ex-tag {
  background: linear-gradient(90deg, var(--primary), var(--primary-d));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  text-transform: uppercase;
}

.ls-ex .ls-p {
  padding: 12px 16px 0;
  margin-bottom: 0;
}

.ls-ex .q-code {
  margin: 8px 0 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* Ô "Kết quả:" của khối ví dụ. TRƯỚC ĐÂY là display:flex + white-space mặc
   định, nên 49 khối output nhiều dòng — chủ yếu là bảng kết quả truy vấn SQL —
   bị gộp hết xuống MỘT dòng chữ liền, mất sạch hàng cột. Phải để block + pre. */
.ls-out {
  padding: 10px 14px;
  background: var(--success-soft);
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  border-top: 1px solid var(--border);
  display: block;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* Nhãn "Kết quả:" nằm cùng dòng với icon, phần dữ liệu xuống dòng riêng và
   giữ nguyên khoảng trắng. */
.ls-out > b { display: block; white-space: pre; margin-top: 4px; font-weight: 700; }
/* Kết quả là CÂU VĂN chứ không phải bảng căn cột (maXuongDong() quyết định lúc
   dựng) thì cho xuống dòng. pre-wrap chứ không phải normal: vẫn giữ nguyên khoảng
   trắng và các dấu xuống dòng người soạn đã gõ, chỉ thêm việc tự ngắt khi chạm mép. */
.ls-out > b.ls-out-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Hộp cần nhớ */
.ls-keypoints {
  background: linear-gradient(135deg, var(--danger-soft), rgba(244, 63, 94, 0.02));
  border: 1.5px solid rgba(244, 63, 94, 0.2);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 24px 0;
}

.ls-keypoints > b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15.5px;
  color: var(--danger);
  margin-bottom: 12px;
}

.ls-keypoints ul {
  list-style: none;
  display: grid;
  gap: 8px;
  padding: 0;
}

.ls-keypoints ul li {
  font-size: 14.5px;
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}

.ls-keypoints ul li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--danger);
  font-size: 11px;
  top: 3px;
}

/* Nút hành động cuối bài học */
.ls-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}

/* Điều hướng bài học (Prev / Next) */
.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.quiz-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Sách giáo khoa tích hợp */
.sgk-box {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.sgk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  cursor: pointer;
  font-weight: 750;
  font-size: 14.5px;
  transition: background 0.15s;
}

.sgk-head:hover {
  background: var(--primary-soft);
}

.sgk-head small {
  color: var(--text-soft);
  font-size: 12px;
  flex: 1;
  text-align: right;
}

.sgk-pages {
  padding: 10px;
  display: grid;
  gap: 8px;
}

.sgk-img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.sgk-missing {
  background: var(--warning-soft);
  color: var(--warning);
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
}

/* Inline code trong bài học */
code.ic {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: var(--bg-soft);
  color: var(--primary);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-weight: 700;
}

/* Code run bar (nút "Chạy thử" / "Xem thử" inline trong bài học) */
.code-run-bar {
  margin-top: -4px;
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-end;
}



/* Trả lời ngắn (SA) */
.sa-input {
  width: 100%;
  padding: 13px 16px;
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: 650;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-top: 14px;
}

.sa-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.sa-input.correct {
  border-color: var(--success);
  background: var(--success-soft);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.sa-input.wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.12);
}

/* ===========================================================================
 *  LỊCH SỬ & THỐNG KÊ
 * ========================================================================= */

.history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 10px;
  transition: all 0.15s;
}

.history-item:hover {
  border-color: var(--primary);
  transform: translateX(3px);
}

.history-score {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.history-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.history-info b {
  font-size: 14.5px;
  font-weight: 750;
}

.history-info small {
  font-size: 12.5px;
  color: var(--text-soft);
}

/* ===========================================================================
 *  KẾT QUẢ BÀI THI — REVIEW LIST
 * ========================================================================= */

.review-item {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 14px;
}

.review-item.ok {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.03);
}

.review-item.no {
  border-color: rgba(244, 63, 94, 0.35);
  background: rgba(244, 63, 94, 0.03);
}

.review-q {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  /* Phải khớp .q-text: thiếu dòng này thì màn Xem lại XOÁ SẠCH thụt lề, mà
     nhiều câu hỏi lấy chính thụt lề làm đáp án (dòng print nào chạy). Học sinh
     sai câu đó, mở ra xem lại, thì thứ quyết định đáp án đã biến mất. */
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Kết quả thông báo */
.result-msg {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===========================================================================
 *  TRẠNG THÁI RỖNG (EMPTY STATE)
 * ========================================================================= */

.empty-state {
  text-align: center;
  padding: 60px 24px;
}

.empty-state .big {
  margin-bottom: 16px;
}

.empty-state h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--text-soft);
  font-size: 15px;
  max-width: 400px;
  margin: 0 auto;
}

/* ===========================================================================
 *  TOAST NOTIFICATION
 * ========================================================================= */

.toast {
  position: fixed;
  bottom: 100px;
  bottom: calc(100px + env(safe-area-inset-bottom));   /* khỏi đè lên thanh dưới ở iPhone có vạch Home */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  padding: 11px 22px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  z-index: 9998;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 40px);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===========================================================================
 *  MODAL HỘP THOẠI
 * ========================================================================= */

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.modal-box h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}

.modal-box p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ===========================================================================
 *  THÊM RESPONSIVE CHO MÀN HÌNH NHỎ
 * ========================================================================= */

@media (max-width: 640px) {
  .ls-actions { flex-direction: column; }
  .ls-actions .btn { width: 100%; justify-content: center; }
  .quiz-nav { flex-direction: row; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .tf-row { flex-wrap: wrap; }
  .tf-choices { width: 100%; }
  .history-item { flex-wrap: wrap; }
  .pg-editor { min-height: 120px; font-size: 13px; }
}

@media (max-width: 400px) {
  .palette-btn { width: 34px; height: 34px; font-size: 12px; }
  .quiz-nav { gap: 8px; }
  .quiz-nav .btn { padding: 9px 14px; font-size: 13px; }
}


/* ------------------------- Tab chọn cách luyện tập ------------------------- */
.ptabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.ptab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-soft);
  color: var(--text-soft); font-size: 14px; font-weight: 700; font-family: inherit;
}
.ptab:hover { border-color: var(--primary); color: var(--text); }
.ptab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip small { opacity: .72; font-weight: 600; font-size: 11.5px; margin-left: 3px; }
.chip[disabled] { opacity: .38; cursor: not-allowed; }

/* --------------------- Thanh nhắc "đang học ở chế độ khách" ---------------------
   Chưa đăng nhập vẫn học được hết phần miễn phí; thanh này chỉ nói rõ tiến độ
   đang nằm ở đâu, KHÔNG chặn đường học. */
.guest-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fffbeb; border: 1px solid #f59e0b; border-radius: var(--radius);
  padding: 12px 15px; margin: 0 0 16px;
}
.guest-ic { display: flex; flex: none; }
.guest-txt { flex: 1; min-width: 180px; }
.guest-txt b { display: block; font-size: 14.5px; color: #92400e; }
.guest-txt small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: #a16207; }
.guest-bar .btn { white-space: nowrap; }
[data-theme="dark"] .guest-bar { background: #2a2008; border-color: #b45309; }
[data-theme="dark"] .guest-txt b { color: #fcd34d; }
[data-theme="dark"] .guest-txt small { color: #d6bb7a; }
@media (max-width: 560px) {
  .guest-bar { padding: 10px 12px; gap: 9px; }
  .guest-bar .btn { width: 100%; padding: 9px 14px; font-size: 14px; }
  .guest-txt small { font-size: 12px; }
}

/* ===========================================================================
 *  VÙNG BẤM & CHUYỂN ĐỘNG
 *  Đối tượng dùng chủ yếu là điện thoại. Chuẩn tối thiểu cho ngón tay là 44px;
 *  đo được nhiều nút cốt lõi chỉ 14–40px. Đặt cuối tệp để thắng luật phía trên
 *  mà không phải sửa rải rác.
 * ========================================================================= */
@media (max-width: 640px) {
  /* Thanh điều hướng chính của app */
  .nav-btn { min-height: 44px; }

  /* Hai nút Đúng/Sai là thao tác cốt lõi của Phần II đề thi: trước đây cao 38px
     và không giãn, dồn về trái chừa một mảng trống. */
  .tf-choices { display: flex; gap: 10px; }
  .tf-choices button { flex: 1; min-height: 44px; }

  /* Lưới nhảy câu: bấm nhầm là nhảy sai câu giữa lúc tính giờ. */
  .palette-btn { min-width: 44px; min-height: 44px; font-size: 13px; }

  /* --- iOS TỰ PHÓNG TO CẢ TRANG khi chạm vào ô nhập có cỡ chữ dưới 16px.
     Không phải chuyện thẩm mỹ: phóng rồi thì trang trượt ngang, phải chụm hai
     ngón kéo lại mới đọc tiếp được. Đo được 14px ở luật select/input chung,
     13px ở khung soạn code. Một luật ở đây vá hết ~13 chỗ. --- */
  /* input[type] chứ không phải input trần: luật gốc ở trên dùng
     input[type="text"] có specificity (0,1,1), luật trần (0,0,1) thua nó. */
  input, input[type], select, textarea,
  .pg-editor, #codeArea, .sqx-editor, .wbx-editor, .tt-foot textarea,
  .mh input.mh-o-nhap, .mh .mh-nhap select { font-size: 16px; }

  /* --- Nút bấm cốt lõi. Khối này trước đây bỏ sót chính .btn — nút bấm nhiều
     nhất app (Câu trước/Câu sau/Nộp bài, 28 câu mỗi đề), đo được 42,8px và tụt
     còn 36,6px ở màn ≤400px. --- */
  .btn, .quiz-nav .btn, .flag-btn, .back-link, .chip, .ptab,
  .mh-btn, .mh4-nut, .on-chip, .on-tab, .sod-btn, .ac-tab, .ac-mini,
  .gam-chip, .sqx-chip, .tt-chip, .tt-x, .tt-send, .voc-mode, .voc-vtest,
  .voc-say, .pay-x, .pay-chep, .um-item, .um-trigger, .glab-mi,
  .ex-actions .btn, .sqx-actions .btn, .wbx-actions .btn, .glab-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Nhãn ô tích trong mô phỏng: chữ 12,5px + ô 16px = vùng chạm 22px, đúng một
     nửa chuẩn. 34 chỗ dùng. */
  .mh3-tick, .mh4-tick, .mh5-tick, .mh6-tick, .mh7-tick { min-height: 44px; padding: 2px 0; }
  .mh3-tick input, .mh4-tick input, .mh5-tick input,
  .mh6-tick input, .mh7-tick input { width: 22px; height: 22px; }

}
/* ===========================================================================
 *  BẢNG TRONG BÀI HỌC  (khối {t:"bang"})
 *  Thay cho bảng vẽ bằng dấu cách trong <pre>. Ở màn hẹp KHÔNG cuộn ngang mà
 *  xếp lại: mỗi hàng thành một thẻ, mỗi ô một dòng "Nhãn — giá trị". Nhãn lấy
 *  từ data-nhan mà renderBlocks đã gắn sẵn theo tiêu đề cột.
 * ========================================================================= */
.ls-bang { margin: 16px 0; }
.ls-bang figcaption { font-size: 13.5px; color: var(--text-soft); margin-bottom: 7px; line-height: 1.5; }
.ls-bang-cuon { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 10px; border: 1px solid var(--border); }
.ls-bang table { border-collapse: collapse; width: 100%; font-size: 14px; }
.ls-bang th, .ls-bang td { padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.ls-bang thead th { background: var(--bg-soft); font-weight: 800; font-size: 13px; white-space: nowrap; }
.ls-bang tbody tr:last-child td { border-bottom: 0; }
.ls-bang tbody tr:nth-child(even) { background: var(--bg-soft); }

@media (max-width: 560px) {
  /* Xếp thẻ. Bảng nhiều cột đọc trên màn 360px mà không phải kéo ngang. */
  .ls-bang-cuon { border: 0; overflow-x: visible; }
  .ls-bang table, .ls-bang tbody, .ls-bang tr, .ls-bang td { display: block; width: 100%; }
  .ls-bang thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ls-bang tbody tr {
    border: 1px solid var(--border); border-radius: 10px;
    margin-bottom: 9px; padding: 4px 2px; background: var(--bg-card);
  }
  .ls-bang tbody tr:nth-child(even) { background: var(--bg-card); }
  .ls-bang td { border-bottom: 0; padding: 5px 11px; display: flex; gap: 10px; }
  .ls-bang td::before {
    content: attr(data-nhan) ; flex: 0 0 40%;
    font-weight: 800; font-size: 12.5px; color: var(--text-soft);
  }
  .ls-bang td[data-nhan=""] { display: block; }
  .ls-bang td[data-nhan=""]::before { content: none; }
}

/* Thanh trượt sửa thẳng ở .mhN-range trong minh-hoa-3/4/5.js, KHÔNG vá ở đây:
   luật ".mh input.mh3-range" có specificity (0,2,1) bằng đúng luật tương đương
   viết được ở tệp này, mà CSS của các đợt lại nạp lúc chạy nên xuống sau và
   thắng hoà. Vá ở đây là phải dùng !important — thà sửa đúng chỗ. */

/* Nút của linh vật nổi — nhỏ nhất toàn site (đo được 14px và 27px).
   .floating-mascot-bubble có transform:scale(.8) nên kích thước NHÌN THẤY chỉ
   bằng 80% số đặt ở đây — đặt 44/52 để lúc hiện ra vẫn đạt ~35/42px thật. */
.floating-mascot-close { min-width: 44px; min-height: 44px; }
.floating-mascot-ask { min-height: 52px; }

/* ===========================================================================
 *  KHỐI AVATAR / MENU TÀI KHOẢN Ở THANH TRÊN (xem index.html #umWrap)
 *  Đặt cuối tệp để thắng .topnav .nav-btn (đặc trưng 0,2,0) ở màn hẹp — hai nút
 *  "Hồ sơ"/"Tài khoản" bên trong menu vẫn giữ class .nav-btn để dùng lại nguyên
 *  logic điều hướng có chặn (guardLeave) và ẩn/hiện lúc chờ đăng nhập, nên phải
 *  đặt luật ghi đè ở đây thay vì sửa rải rác .nav-btn phía trên.
 * ========================================================================= */
.um-wrap { position: relative; flex: none; }
.um-trigger {
  display: flex; align-items: center; gap: 8px; border: 1px solid transparent; background: transparent;
  padding: 5px 10px 5px 6px; border-radius: 999px; cursor: pointer; font-family: var(--font-sans);
  color: var(--text); user-select: none;
}
.um-trigger * { pointer-events: none; }
.um-trigger:hover, .um-trigger.open { background: var(--bg-soft); border-color: var(--border); }
.um-name { font-size: 13.5px; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-chev { display: flex; color: var(--text-soft); transition: transform 0.18s; }
.um-trigger.open .um-chev { transform: rotate(180deg); }

.um-avatar, .um-head-ava {
  display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  border-radius: 50%; background: var(--primary-soft); line-height: 1;
}
.um-avatar { width: 28px; height: 28px; font-size: 16px; }
.um-head-ava { width: 40px; height: 40px; font-size: 21px; }
.um-avatar img, .um-head-ava img { width: 100%; height: 100%; object-fit: cover; }

.um-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000;
  width: 250px; max-width: calc(100vw - 16px); box-sizing: border-box;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 6px; animation: umPop 0.15s ease;
  max-height: calc(100vh - 76px); overflow-y: auto; scrollbar-width: thin;
}
@keyframes umPop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

.um-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px; }
.um-head-txt { min-width: 0; }
.um-head-txt b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-head-txt small { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--text-soft); font-size: 11.5px; margin-top: 2px; max-width: 100%; }
.um-email { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-plan {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; padding: 1px 6px;
  border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft);
}
.um-plan-pre { background: color-mix(in srgb, #b45309 15%, transparent); border-color: #b45309; color: #b45309; }

.um-grid-2 {
  display: flex; gap: 4px; width: 100%;
}
.um-grid-2 #umMenu .um-item,
.um-grid-2 .um-item {
  flex: 1; min-width: 0; justify-content: center;
  padding: 6px 4px; font-size: 12.5px; white-space: nowrap;
}
.um-grid-2 .um-item:hover {
  background: var(--bg-soft);
}

#umMenu .um-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px 8px; border-radius: 7px; font-size: 13px; font-weight: 650;
  border: none; background: none; color: var(--text); cursor: pointer; font-family: var(--font-sans);
}
.um-item-ic { display: flex; color: var(--text-soft); flex: none; }
#umMenu .um-danger { color: #be123c; }
[data-theme="dark"] #umMenu .um-danger { color: var(--danger, #fb7185); }
.um-danger:hover { background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent); }

.um-item:focus-visible, .um-switch:focus-visible, .um-trigger:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

.um-sep { height: 1px; background: var(--border); margin: 4px 2px; }

.um-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 7px; cursor: pointer; }
.um-row:hover { background: var(--bg-soft); }
.um-row-txt { font-size: 12.5px; font-weight: 650; color: var(--text); }
.um-switch {
  flex: none; width: 36px; height: 22px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; color: var(--text-soft);
}
.um-switch[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.um-switch .ic { width: 13px; height: 13px; }

.um-block { padding: 5px 8px 6px; }
.um-block .um-row-txt { display: block; margin-bottom: 5px; }
.um-seg {
  display: flex; gap: 2px; padding: 2px; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--border);
}
.um-seg button {
  flex: 1; min-width: 0; padding: 4px 2px; border: 0; border-radius: 6px;
  background: none; color: var(--text-soft); cursor: pointer;
  font: 700 11.5px var(--font-sans); white-space: nowrap;
}
.um-seg button:hover { color: var(--primary); }
.um-seg button[aria-checked="true"] {
  background: var(--bg-card); color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.um-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.um-hint { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--text-soft); }

@media (max-width: 560px) {
  .um-name { display: none; }
  .um-trigger { padding: 4px 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; }
  .um-menu { right: -6px; }
}

/* Bốn animation chạy infinite repaint không ngừng kể cả lúc học sinh đang đọc
   đề — tốn pin và giật trên máy yếu. Tôn trọng lựa chọn giảm chuyển động của
   hệ điều hành. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Subscript & Superscript formatting for binary/decimal bases (e.g. 5₁₀, 101₂) */
sub, sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* Enhanced Syntax & Code styling */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  color: var(--primary);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--code-line);
}

pre code {
  background: transparent;
  padding: 0;
  border: none;
  color: var(--code-text);
}

/* SQL Result Table formatting for mobile friendliness */
.sql-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 12px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.sql-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13.5px;
}
.sql-table th, .sql-table td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: left;
}
.sql-table th {
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 700;
}

/* ============================================================================
 * THANH ĐIỀU HƯỚNG DƯỚI (DI ĐỘNG) & CHẾ ĐỘ ĐỌC BÀI THEO THẺ
 * ========================================================================== */

/* Mobile Bottom Navigation Bar */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 990;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  body {
    padding-bottom: 72px; /* Prevent bottom nav overlay */
    /* Thanh dưới tự cao thêm đúng bằng vùng an toàn (vạch Home của iPhone), nên
       chỗ chừa cho nó cũng phải cao thêm chừng ấy — nếu không thì dòng cuối của
       trang chui xuống dưới thanh. Dòng trên giữ nguyên làm bản dự phòng cho
       trình duyệt không hiểu env(). */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .topnav .nav-btn {
    display: none; /* Hide topnav text links on mobile */
  }
}

.bnav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 12px;
  transition: all 0.2s;
  flex: 1;
}

.bnav-btn .bnav-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.bnav-btn.active, .bnav-btn:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

/* --- Chế độ đọc bài theo THẺ (bật/tắt trong menu tài khoản) -----------------
   Bộ thẻ KHÔNG có khung riêng bao ngoài: mỗi phần (.ls-pha) tự đã là một thẻ có
   viền và nền rồi, bọc thêm một lớp nữa thành hai lớp viền lồng nhau, mà trên
   điện thoại hai lớp đệm ăn mất ~40px bề ngang của phần chữ. */
.the-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}
.the-track {
  flex: 1;
  height: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.the-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--info));
  border-radius: 999px;
  transition: width 0.3s ease;
}
.the-dem {
  flex: none;
  font: 800 12px var(--font-mono);
  color: var(--primary);
  background: var(--primary-soft);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.the-card { display: none; }
.the-card.hien {
  display: block;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
  animation: theHien 0.22s ease-out;
}
@keyframes theHien {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Đầu thẻ: số PHẦN + tên phần ở dòng nhỏ, tên khối ở dòng lớn. Một thẻ giờ chỉ là
   một khối trong phần chứ không còn là cả phần, nên phải nói rõ đang ở phần nào —
   không thì đọc tới thẻ 6 là mất hẳn mạch. Đây là NHÃN, không phải nút: không có
   mũi tên, không đổi màu khi rê chuột. */
.the-dau {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.the-so {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 900 13px var(--font-mono);
}
.the-tit { min-width: 0; display: flex; flex-direction: column; }
.the-tit small {
  font: 700 11px var(--font-sans);
  color: var(--text-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.the-tit b { font: 800 15.5px var(--font-display); line-height: 1.3; }
.the-than { padding: 15px 16px; }

/* Khối đứng đầu thẻ đã cho tên cho cả thẻ — ẩn tiêu đề riêng của nó đi, không thì
   cùng một dòng chữ hiện hai lần chồng nhau. Cần đặc trưng (0,2,0) để thắng luật
   display của chính các tiêu đề đó (.section-title, .mh h4). */
.the-an-dau > .ls-nhom-d { display: none; }
.the-than .the-dau-an { display: none; }
/* Khối đầu tiên trong thẻ không cần gạch ngăn phía trên: cạnh trên của nó chính
   là đường viền dưới của đầu thẻ. */
.the-than > .ls-nhom:first-child { border-top: 0; margin-top: 0; }
.the-than > *:last-child { margin-bottom: 0; }

.the-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.the-nav .btn { flex: none; }
.the-cham {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
}
.the-cham-b {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: width 0.2s, background 0.2s;
}
.the-cham-b.qua { background: var(--primary-soft); }
.the-cham-b.hien { width: 22px; border-radius: 999px; background: var(--primary); }
.the-cham-b:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Chấm tròn 9px là mục tiêu bấm quá nhỏ trên điện thoại (khuyến nghị 44px).
   Nới vùng bấm bằng ::after trong suốt, giữ nguyên chấm nhìn thấy được. */
@media (max-width: 768px) {
  .the-cham-b { position: relative; }
  .the-cham-b::after {
    content: "";
    position: absolute;
    inset: -16px -6px;
  }
  /* Chấm + hai nút nằm chung MỘT hàng chỉ đủ chỗ khi bài có ít thẻ: bài 9 thẻ đã
     cần 118 (Thẻ trước) + 150 (chấm) + 109 (Thẻ tiếp) + khoảng cách = 397px,
     tràn khỏi bề ngang 343px của khung, và thứ bị đẩy ra ngoài mép màn là nút
     "Thẻ tiếp" — đúng nút hay bấm nhất. Trên điện thoại tách làm hai hàng: hàng
     chấm ở trên (tự xuống dòng nếu vẫn chật), hai nút chia đôi hàng dưới. */
  .the-nav { flex-wrap: wrap; row-gap: 14px; }
  .the-cham { order: -1; flex: 1 0 100%; flex-wrap: wrap; row-gap: 16px; }
  /* Bài trên 12 thẻ không dựng chấm nào — vỏ rỗng vẫn chiếm trọn một hàng kèm
     row-gap, để lại một khoảng hở không hiểu vì đâu. */
  .the-cham:empty { display: none; }
  .the-nav .btn { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }
}

/* Nút đang chờ mở khoá ("Đọc hết bài rồi đánh dấu"). Không dùng [disabled] trơn
   vì trình duyệt làm mờ hẳn thành ra như nút hỏng; ở đây nó là nút SẼ dùng được,
   nên giữ chữ đọc rõ và chỉ bỏ mọi tín hiệu bấm được. */
/* Nút mở Mô phỏng / Thực hành ở cuối bài, kèm trạng thái đã làm tới đâu. */
.ls-man-b small {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-soft);
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-soft);
}
.ls-man-b.xong { border-color: var(--success); color: var(--success); }
.ls-man-b.xong small { background: var(--success-soft); color: var(--success); }

.btn.btn-cho,
.btn.btn-cho:hover {
  background: var(--bg-soft);
  border: 1.5px dashed var(--border);
  color: var(--text-soft);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  opacity: 1;
}

/* ===========================================================================
 *  GIA SƯ AI MASCOT HERO TAB TRÊN BOTTOM NAV (MOBILE)
 * ========================================================================= */
.bnav-mascot {
  position: relative;
  overflow: visible !important;
}
.bnav-mascot-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #06b6d4, #a855f7);
  background-size: 200% 200%;
  animation: bnavGlow 3s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.55), 0 0 10px rgba(168, 85, 247, 0.35);
  margin-top: -10px;
  margin-bottom: 2px;
  border: 2px solid var(--bg-card);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s;
}
.bnav-btn:hover .bnav-mascot-btn,
.bnav-btn.active .bnav-mascot-btn {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 22px rgba(99, 102, 241, 0.75), 0 0 14px rgba(168, 85, 247, 0.5);
}
.bnav-mascot-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}
.bnav-mascot-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(168, 85, 247, 0.75);
  animation: bnavPulse 2s ease-in-out infinite;
  pointer-events: none;
}
.bnav-mascot-label {
  font-weight: 800 !important;
  color: #818cf8 !important;
  font-size: 10.5px !important;
  letter-spacing: -0.2px;
  margin-top: 1px;
}
.bnav-btn.active .bnav-mascot-label {
  color: #c084fc !important;
}

@keyframes bnavGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes bnavPulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.22); opacity: 0.2; }
  100% { transform: scale(1); opacity: 0.9; }
}

/* Trên màn hình nhỏ (Mobile), góc phải không cần floating button nữa
   vì chính tab thứ 5 của Bottom Nav ĐÃ LÀ nút Gia sư AI nổi bật! */
@media (max-width: 768px) {
  #floatingMascot {
    display: none !important;
  }
}




/* ---- Tra bài theo số bài SGK (js/tra-sgk.js) ---- */
.tra-sgk { margin-bottom: 16px; }
.tra-sgk label { display: block; font-size: 15px; margin-bottom: 4px; }
.tra-sgk-mo { margin: 0 0 10px; font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.tra-sgk-hang { display: flex; gap: 8px; flex-wrap: wrap; }
.tra-sgk-hang .pf-input { flex: 1; min-width: 120px; max-width: 190px; }
.tra-sgk-kq { margin-top: 10px; }
.tra-sgk-hit {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; font: inherit; color: var(--text);
}
.tra-sgk-hit:hover { border-color: var(--primary); }
.tra-sgk-hit b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.tra-sgk-hit span { font-size: 12.5px; color: var(--text-soft); }
.tra-sgk-khong { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.55; }
/* Nhãn số bài SGK ở đầu trang bài - màu riêng để không lẫn với các nhãn khác. */
.pill-sgk { background: var(--primary-soft); color: var(--primary-d); border-color: transparent; }