/* Theme (U20, retheme lần 3 — 2026-09-15, khớp màu logo thật "lopta.vn") — bản retheme lần 2
   dùng chàm/indigo-tím (#4f46e5) không khớp màu XANH DƯƠNG thật của logo (assets/brand/) —
   đổi sang đúng tông "Cobalt Blue" của logo (#2563eb, phần thân người màu xanh giữa logo)
   + "Indigo" đậm (#1e3a8a, dùng cho chữ/hover — đủ tương phản trên nền trắng). Toàn bộ
   ~700 dòng CSS bên dưới CHỈ dùng biến (--accent/--card/--bg/--text/--muted...), không
   hardcode màu, nên đổi GIÁ TRỊ ở đây là đủ, không phải sửa từng selector. Xem thêm
   rgba(37,99,235,…) hardcode ở host/math-editor.css (bảng công thức) — đã đổi tương ứng.
*/
:root {
  --bg: #ffffff;
  --card: #f9fafb;
  --card-border: #e5e7eb;
  --accent: #2563eb;
  --accent-strong: #1e3a8a;
  --accent-weak: #eff6ff;
  --accent-ink: #ffffff;
  --text: #1f2937;
  --muted: #4b5563;
  --danger: #dc2626;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: #f5f6fb;
  color: var(--text);
  font-family: system-ui, "Segoe UI", sans-serif;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }

.screen.center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.card {
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.logo { font-size: 48px; margin-bottom: 8px; }
h1 { margin: 0 0 8px; }
.subtitle { color: var(--muted); margin: 0 0 28px; }
.link { color: var(--accent-strong); text-decoration: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.85);
  position: sticky;
  top: 0;
  backdrop-filter: blur(6px);
}
.brand { font-weight: 700; font-size: 18px; }
.account { display: flex; align-items: center; gap: 12px; }

.testing-banner {
  margin: 0;
  padding: 8px 24px;
  background: var(--accent-weak);
  border-bottom: 1px solid rgba(79, 70, 229, 0.35);
  color: var(--accent-strong);
  font-size: 14px;
  text-align: center;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

/* U22 — chạm tối thiểu 44px (.btn) / 40px (.btn-sm), khớp --tap/--tap-sm của shared/ui.css. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--card-border); }
.btn-ghost { background: transparent; color: var(--muted); }
/* U23 — nút Xóa tách nhóm: chữ+viền đỏ (khác hẳn Sửa/Chuyển màu trung tính) + đặt ĐẦU dãy
   nút với margin-right:auto để đẩy các nút còn lại về cuối, tách vị trí rõ ràng. */
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-danger.card-action-first { margin-right: auto; }
.btn-google {
  width: 100%;
  background: #fff;
  color: #1f1f1f;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }

.field {
  display: block;
  margin-bottom: 16px;
}
/* Chữ nhãn của ô. Không áp cho các span bên trong ô soạn công thức liền mạch (.fe-rich): công thức, bảng, đồ thị ở đó
   dựng bằng span và sẽ vỡ hình nếu bị ép thành khối. :where giữ nguyên độ ưu tiên của quy tắc cũ. */
.field span:not(:where(.fe-rich *)) {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="email"] {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  font-size: 15px;
}
.race-duration-field { max-width: 220px; margin: 0 auto 16px; }

/* U24 — trạng thái trống LUÔN có 1 câu giá trị + 1 nút hành động (không chỉ chữ "Trống"
   trơ) — dùng chung cho mọi danh sách rỗng ở host/ và student/ (cùng nạp host/style.css). */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 48px 16px;
}
.empty-state-line { font-size: 15px; color: var(--muted); max-width: 42ch; margin: 0; }

.dashboard-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.breadcrumb-item {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
  font-family: inherit;
}
.breadcrumb-item:hover { color: var(--text); }
.breadcrumb-item.active { color: var(--accent-strong); cursor: default; }
.breadcrumb-sep { color: var(--card-border); font-size: 14px; }

.folder-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.folder-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 10px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.folder-open-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 0;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.folder-open-btn:hover { color: var(--accent-strong); }
.folder-icon { font-size: 20px; }
.folder-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.quiz-list { display: flex; flex-direction: column; gap: 12px; }
.quiz-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.quiz-card-icon { font-size: 20px; }
.quiz-card-body { flex: 1; min-width: 160px; }
.quiz-card-title { margin: 0 0 4px; }
.quiz-card-meta { margin: 0; font-size: 13px; }
/* PB-I41: thẻ bài có bài nộp trễ chờ giáo viên quyết định */
.assignment-card-late { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: #b54708; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.quiz-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* U21 — cả thẻ (icon+tiêu đề) bấm được để mở, giống .folder-open-btn (đã có từ trước). */
.quiz-card-open {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex: 1;
  min-width: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}
.quiz-card-open:hover .quiz-card-title { color: var(--accent-strong); }

/* U21 — menu thả xuống dùng chung cho "Dùng bộ này ▾" và "⋯" (dashboard.js#wireMenu quản lý
   đóng/mở, chỉ 1 menu mở tại 1 thời điểm, đóng khi click ra ngoài hoặc bấm Esc). */
.menu-wrap { position: relative; display: inline-block; }
.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.menu-item:hover { background: rgba(0, 0, 0, 0.05); }
.menu-item-danger { color: var(--danger); }
.menu-item-danger:hover { background: rgba(220, 38, 38, 0.08); }

/* U21 — tabs gạch chân (thay btn-accent/btn-outline ở showClassDetailTab, chỉ giữ 1 màu
   nhấn/màn — xem host/views/classes.js). */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--card-border); margin-bottom: 16px; }
.tab-item {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.tab-item:hover { color: var(--text); }
.tab-item.active { color: var(--accent-strong); border-bottom-color: var(--accent); }

.history-list { display: flex; flex-direction: column; gap: 12px; }
.history-game-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.history-game-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.history-game-title { font-weight: 600; }
.history-game-meta { font-size: 13px; }
.history-game-detail { border-top: 1px solid var(--card-border); padding: 12px 16px; }

.question-stats { display: flex; flex-direction: column; gap: 14px; }
.question-stat-row { }
.question-stat-header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.question-stat-type { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-strong); }
.question-stat-text { font-size: 14px; }
.question-stat-bar { height: 8px; border-radius: 4px; background: var(--card-border); overflow: hidden; }
.question-stat-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.question-stat-count { font-size: 12px; margin-top: 4px; }
.question-stat-statements { margin: 8px 0 0; padding-left: 20px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.question-stat-statements li.is-correct { color: #166534; font-weight: 600; }

.solution-block { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--card-border); }
.solution-block textarea.question-solution { width: 100%; margin-top: 6px; }

.usage-meter { margin-top: 8px; font-size: 12px; }
.usage-meter-label { color: var(--muted); }
.usage-meter-bar { height: 6px; border-radius: 3px; background: var(--card-border); overflow: hidden; margin-top: 4px; }
.usage-meter-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.usage-meter-fill.is-full { background: #ef4444; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal-box {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  /* Thân modal cuộn nội bộ, tiêu đề + nút Hủy/Xác nhận luôn nằm trong khung nhìn. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-box h3 { margin: 0 0 16px; flex: none; }
.modal-box #modalBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 4px 2px 0; }
.modal-box .modal-error { flex: none; }
.modal-box .modal-actions { flex: none; padding-top: 14px; border-top: 1px solid var(--card-border); background: var(--card); }
.modal-box .modal-actions .btn { min-height: 44px; }
@media (max-width: 640px) {
  .modal-overlay { padding: 10px; align-items: flex-end; }
  .modal-box { padding: 16px; border-radius: 14px 14px 10px 10px; }
  .modal-box .modal-actions { gap: 8px; }
  .modal-box .modal-actions .btn { flex: 1 1 0; }
}
.modal-input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}
.modal-error { color: var(--danger); font-size: 13px; margin: 10px 0 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* Modal rộng hơn — dùng cho màn "xem trước câu hỏi AI" (host/views/editor-ai.js > openAiReviewModal),
   cần đủ chỗ hiển thị văn bản gốc + danh sách câu hỏi để giáo viên đối chiếu. */
.modal-box.modal-wide { max-width: 900px; }

.ai-review-source {
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 12px;
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 16px;
}
.ai-review-pages { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow-y: auto; margin: 0 0 16px; }
.ai-review-page-thumb {
  height: 140px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  cursor: zoom-in;
  object-fit: contain;
  background: #fff;
}
.ai-review-page-thumb:hover { border-color: var(--accent); }
.ai-review-page-thumb.is-magnifying { cursor: none; }

.ai-review-lens {
  position: fixed;
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-color: #fff;
  pointer-events: none;
  z-index: 200;
}

.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  cursor: zoom-out;
}
.image-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.ai-review-list { display: flex; flex-direction: column; gap: 12px; max-height: 50vh; overflow-y: auto; }
/* N3b — Nhóm kiến thức (cây LQS) trong khối Phân loại + dòng gợi ý chỉ đọc ở màn rà soát. Chip tự tiêm style riêng (host/taxonomy-chips.js). */
.tag-taxonomy-block { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--card-border); }
.tag-taxonomy-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-strong); font-size: 12px; font-weight: 600; vertical-align: middle; }
.tag-taxonomy-badge.hidden { display: none; }
.ai-review-taxonomy { color: var(--accent-strong); overflow-wrap: anywhere; }
.ai-review-question { border: 1px solid var(--card-border); border-radius: 8px; padding: 12px; }
.ai-review-question.has-warning { border-color: #f59e0b; }
.ai-review-question.is-blocked { border-color: #dc2626; }
.ai-review-warning.is-blocker { color: #dc2626; }
.ai-review-question-header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.ai-review-question-index { font-weight: 600; }
.ai-review-question-type { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.ai-review-question-image {
  display: block;
  max-width: 100%;
  max-height: 180px;
  margin: 6px 0;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
}
.ai-review-choices { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ai-review-choices li { padding: 4px 8px; border-radius: 6px; background: var(--bg); }
.ai-review-choices li.is-correct { background: rgba(34, 197, 94, 0.15); color: #166534; }
.ai-review-choices li.is-wrong { opacity: 0.7; }
.ai-review-answers { font-size: 13px; margin: 8px 0 0; }
.ai-review-warning { color: var(--accent-strong); font-size: 13px; font-weight: 600; margin: 8px 0 0; }
p.hint.ai-review-warning { margin: 0 0 12px; color: var(--accent-strong); }

/* Bước 2 mục 10.11 (FABLE) — đèn xanh/đỏ thống nhất ở màn "Rà soát câu trước khi chèn" (host/views/editor-ai.js). */
.ai-review-lights { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--bg); }
.ai-review-light-summary { margin: 0; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.ai-review-light-sep { opacity: 0.5; margin: 0 2px; }
.ai-review-light-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; }
.ai-review-light-dot.is-green { background: #16a34a; }
.ai-review-light-dot.is-red { background: #dc2626; }
.ai-review-only-red { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.ai-review-light-hint { margin: 0 0 8px; }
.ai-review-light { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.ai-review-light.is-green { background: rgba(22, 163, 74, 0.12); color: #166534; border-color: rgba(22, 163, 74, 0.4); }
.ai-review-light.is-red { background: rgba(220, 38, 38, 0.12); color: #991b1b; border-color: rgba(220, 38, 38, 0.4); }
.ai-review-question.is-red { border-color: #dc2626; border-left-width: 4px; }
.ai-review-question.is-green { border-left: 4px solid #16a34a; }
.ai-review-question.is-approved .ai-review-light.is-green { background: #16a34a; color: #fff; }
.ai-review-question.is-filtered-out { display: none; }
.ai-review-reasons { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: #991b1b; }
.ai-review-reasons li { margin: 2px 0; }
@media (max-width: 600px) {
  .ai-review-lights { gap: 8px; }
  .ai-review-lights .btn { width: 100%; }
}

/* ASM-03 (Wave 4) — danh sách checkbox chọn học sinh giao bài, modal "Giao bài tập mới". */
.student-target-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin: 4px 0 12px; padding: 8px; border: 1px solid var(--card-border); border-radius: 8px; }
.student-target-item { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 2px; }
.student-target-item input { width: auto; }

.folder-tree { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.folder-tree-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.folder-tree-item:hover { background: rgba(0,0,0,0.05); border-color: var(--card-border); }
.folder-tree-item.active { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-strong); }

/* CNT-10 (soft-delete/Thùng rác) — danh sách bộ câu hỏi đã xóa mềm trong modal. */
.trash-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.trash-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
}
.trash-item-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-item-actions { display: flex; gap: 8px; flex-shrink: 0; }

.question-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.question-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-attach-block { margin: 4px 0 16px; }
.image-attach-actions { display: flex; gap: 8px; }
.question-image-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  margin-top: 8px;
  object-fit: contain;
  background: #fff;
}

/* Biểu tượng xoay báo đang xử lý — dùng khi AI đang tạo/thay câu hỏi (gọi API mất
   vài giây, không có biểu tượng này giáo viên dễ tưởng web treo rồi bấm lại). */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.btn.is-loading {
  cursor: wait;
  opacity: 0.85;
}
/* U22 — 1 cột (thay vì 2 cột trước đây) để mỗi hàng đáp án đủ rộng cho ngón tay chạm,
   không bị bóp hẹp cạnh nhau; cả hàng (không chỉ nút tròn nhỏ) đều chạm được nhờ radio
   bọc trong <label class="choice-field"> (đã có sẵn ở #questionTemplate). */
.choices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.choice-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 10px;
}
.choice-field input[type="text"] {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

.field select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  font-size: 15px;
}

/* Dạng 2: Đúng/Sai 4 ý */
.type-section { margin-bottom: 8px; }
.statement-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.statement-letter { font-weight: 600; color: var(--muted); flex-shrink: 0; }
.statement-body { flex: 1; min-width: 0; }
.statement-body input[type="text"] {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.statement-tf { display: flex; gap: 10px; flex-shrink: 0; }
.statement-tf label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }

@media (max-width: 480px) {
  /* .choices-grid đã mặc định 1 cột từ U22, không cần lặp lại ở đây nữa. */
  .statement-row { flex-wrap: wrap; }
  .statement-tf { width: 100%; justify-content: flex-end; }
}

/* Room / lobby */
.room-container { max-width: 900px; }
.room-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0 28px;
}
@media (max-width: 700px) {
  .room-grid { grid-template-columns: 1fr; }
}
.join-panel, .players-panel {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.qr-box {
  display: inline-block;
  background: #fff;
  padding: 12px;
  border-radius: 12px;
  margin: 8px 0;
}
.join-url { font-size: 14px; color: var(--accent-strong); margin: 0; word-break: break-all; }
.room-code {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 6px;
  margin-top: 8px;
}
.players-panel { text-align: left; }
.player-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.player-list li {
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 12px;
}
.btn-large { width: 100%; padding: 16px; font-size: 18px; }

/* Đua (self-paced — mỗi người chơi tự trả lời theo tốc độ riêng) */
.race-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.race-countdown {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.race-toolbar-actions { display: flex; align-items: center; gap: 10px; }
/* Tỉ lệ cố định 3:4 (dọc) lúc xem thường — giữ khung đua không bị bẹt ngang.
   width dùng min() để khung không vượt quá chiều rộng khung chứa (900px) LẪN
   không vượt quá chiều cao khả dụng của màn hình (75vh, quy đổi ngược ra width
   theo tỉ lệ 3/4) — luôn hiện trọn khung, không bị cắt hay tràn trang. */
.race-canvas {
  display: block;
  aspect-ratio: 3 / 4;
  width: min(100%, calc(75vh * 3 / 4));
  height: auto;
  max-height: 75vh;
  min-height: 320px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
}

/* Chế độ toàn màn hình (host bấm ⛶ trên toolbar) — #raceView tự chiếm trọn cửa sổ
   Fullscreen API. Bỏ hẳn tỉ lệ 3:4 ở đây: canvas giãn theo flex:1 để lấp đầy
   đúng phần chiều cao còn lại (trừ toolbar) theo tỉ lệ MÀN HÌNH THẬT, không bị
   kẹp theo tỉ lệ 3:4 như lúc xem thường. */
#raceView:fullscreen {
  background: var(--bg);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
#raceView:fullscreen .race-canvas {
  flex: 1;
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  max-height: none;
  min-height: 0;
}

.leaderboard-list {
  list-style: none;
  margin: 20px 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leaderboard-item {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.leaderboard-item .rank { font-weight: 800; color: var(--accent-strong); min-width: 34px; }
.leaderboard-item .name { flex: 1; }
.leaderboard-item .score { color: var(--muted); }

@media (max-width: 480px) {
  .choices-display { grid-template-columns: 1fr; }
}

/* Tạo lời giải AI cả bộ (host/views/editor-solutions.js) — chọn chế độ duyệt/tự áp dụng + bước duyệt. */
.ai-batch-mode { border: 1px solid var(--card-border); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
.ai-batch-mode legend { padding: 0 6px; font-size: 14px; color: var(--muted); }
.ai-batch-option { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.ai-batch-option input { margin-top: 4px; }
.ai-batch-actions { flex-wrap: wrap; }
.ai-batch-headline { font-weight: 600; margin: 0 0 8px; }
.ai-batch-skipped { margin: 4px 0 12px; padding-left: 20px; font-size: 13px; }

/* Luồng rà đề trước khi giao. */
.editor-review-summary { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:18px 0; padding:16px 18px; border:1px solid #cfe0f7; border-radius:14px; background:#f1f7ff; }
.editor-review-summary strong { display:block; margin:4px 0; color:#173d78; }
.editor-review-summary p { margin:0; }
.question-ai-review-state { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:10px 0 14px; padding:11px 12px; border:1px solid #d8e4f3; border-radius:10px; background:#f7faff; }
.question-ai-review-state.is-warning { border-color:#efd28b; background:#fff9e9; color:#81550d; }
.question-ai-review-state.is-reviewed { border-color:#b9e2d3; background:#eefaf5; color:#176c50; }
.question-ai-review-label { font-size:13px; font-weight:700; }

/* Báo cáo bài giao: làm rõ mẫu số và nhóm làm lại. */
.assignment-report-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:2px 0 13px; }
.assignment-report-metrics article { padding:14px; border:1px solid var(--card-border); border-radius:12px; background:var(--card); }
.assignment-report-metrics small,.assignment-report-metrics span { display:block; color:var(--muted); }
.assignment-report-metrics strong { display:block; margin:4px 0; color:var(--accent-strong); font-size:25px; }
.assignment-report-metrics span { font-size:12px; }
.assignment-report-summary { padding:10px 12px; border-radius:9px; background:var(--bg); }
.assignment-report-caveat { margin:8px 0 14px; padding:10px 12px; border:1px solid #efd28b; border-radius:9px; background:#fff9e9; color:#81550d; font-size:13px; }

@media (max-width: 640px) {
  .editor-review-summary { align-items:flex-start; flex-direction:column; }
  .assignment-report-metrics { grid-template-columns:1fr; }
  .question-ai-review-state { align-items:flex-start; flex-direction:column; }
}

/* PB-F81: câu báo lớp đã lưu trữ trên trang lớp (host/views/classes.js applyArchivedLock). */
.class-archived-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #fff6e0; border: 1px solid #f0d27a; color: #6b4a00; font-size: 14px; line-height: 1.45; }