/* 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 Xoá 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;
}
.field span {
  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; }
.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: 80vh;
  overflow-y: auto;
}
.modal-box h3 { margin: 0 0 16px; }
.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: 18px; }

/* 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; }
.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); }

/* 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); }

.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; }
}