:root {
  --bg: #F1F2F8;
  --card-bg: #FFFFFF;
  --border: #E4E6F0;
  --text: #1F2233;
  --text-muted: #7C8194;
  --purple: #6C5DD3;
  --purple-light: #EFEBFC;
  --red: #FF3B30;
  --red-light: #FEE9E7;
  --blue: #2F80ED;
  --blue-light: #E8F1FE;
  --green: #22C55E;
  --violet: #8B5CF6;
  --pink: #EC4899;
  --orange: #F2994A;
  --teal: #14B8A6;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-card: 0 8px 24px rgba(31, 34, 51, 0.06);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Ghim header + cột "Câu hỏi" — #screen-builder chiếm trọn viewport, chỉ
   .content (danh sách câu hỏi) cuộn riêng bên trong, xem .builder-body bên
   dưới. Cùng cách dựng với #ai-chat-screen/#settings-screen (header cố
   định + vùng nội dung overflow-y:auto riêng), áp dụng luôn cho màn chính
   để lướt trang không kéo mất header/cột trái. */
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* ---------- Top bar ---------- */
.topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0 32px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.tab-group {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.is-active {
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(31, 34, 51, 0.1);
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.save-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.save-status .icon {
  width: 16px;
  height: 16px;
  color: var(--green);
}

.btn-next {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: var(--purple);
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn-next:hover {
  background: #5b4dc4;
}

.btn-next:active {
  transform: scale(0.97);
}

.btn-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-preview:hover {
  border-color: #C7CCDB;
  background: var(--bg);
}

/* ---------- Content ---------- */
.builder-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.content {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
}

/* Bọc riêng phần nội dung căn giữa (680px) bên trong .content — .content
   TỰ NÓ phải rộng hết phần còn lại của màn hình để thanh cuộn nằm sát mép
   phải trình duyệt như bình thường; nếu max-width/margin:auto đặt thẳng
   lên .content (chính là vùng cuộn), thanh cuộn sẽ bám theo mép phải của
   khối 680px đó, tức lơ lửng giữa màn hình — đúng lỗi "thanh trượt ở
   giữa" cần bỏ. */
.content-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* ---------- Cột "Câu hỏi" (điều hướng nhanh giữa các thẻ câu hỏi) ---------- */
.question-nav[hidden] {
  display: none;
}

.question-nav {
  flex-shrink: 0;
  width: 240px;
  height: 100%;
  overflow-y: auto;
  padding: 40px 16px 40px 20px;
}

.question-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.question-nav-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}

.question-nav-count {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.question-nav-count .icon {
  width: 14px;
  height: 14px;
}

.question-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.question-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.question-nav-item-number {
  flex-shrink: 0;
  width: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
}

.question-nav-item-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.question-nav-item-pill:hover {
  border-color: #C7CCDB;
}

.question-nav-item.is-active .question-nav-item-pill {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-light);
}

.question-nav-item-icon {
  flex-shrink: 0;
  display: flex;
}

.question-nav-item-icon .icon {
  width: 15px;
  height: 15px;
}

.question-nav-item-text {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.question-nav-shuffle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 10px;
  padding: 10px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.question-nav-shuffle-btn:not(:disabled):hover {
  background: var(--bg);
  color: var(--text);
}

.question-nav-shuffle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.question-nav-shuffle-btn .icon {
  width: 15px;
  height: 15px;
}

.ai-card {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 32px 32px;
}

.ai-heading {
  margin: 0 0 24px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  max-width: 460px;
  color: var(--text);
}

.ai-heading .accent {
  color: var(--purple);
}

.mascot {
  position: absolute;
  top: 22px;
  right: 28px;
}

.ai-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.ai-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.ai-option:hover {
  border-color: var(--purple);
  box-shadow: 0 4px 14px rgba(108, 93, 211, 0.14);
}

.ai-option:active {
  transform: scale(0.99);
}

.ai-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-icon .icon {
  width: 20px;
  height: 20px;
}

.icon-bg-purple {
  background: var(--purple-light);
  color: var(--purple);
}

.icon-bg-red {
  background: var(--red-light);
  color: var(--red);
}

.icon-bg-blue {
  background: var(--blue-light);
  color: var(--blue);
}

.ai-option-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ai-option-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-option-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.ai-option-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.badge-beta {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #B45309;
  background: #FEF3C7;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
}

/* ---------- Divider ---------- */
.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---------- Manual question-type grid ---------- */
.manual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 20px;
  column-gap: 12px;
}

.manual-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 999px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.manual-btn:hover {
  border-color: #C7CCDB;
  box-shadow: 0 4px 14px rgba(31, 34, 51, 0.08);
}

.manual-btn:active {
  transform: scale(0.99);
}

.manual-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.manual-icon .icon {
  width: 20px;
  height: 20px;
}

.color-green { color: var(--green); }
.color-blue { color: var(--blue); }
.color-violet { color: var(--violet); }
.color-pink { color: var(--pink); }
.color-orange { color: var(--orange); }
.color-teal { color: var(--teal); }

.manual-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manual-plus {
  flex-shrink: 0;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1;
}

.new-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card-bg);
  box-shadow: 0 0 0 1px var(--border);
}

.new-badge .icon {
  width: 16px;
  height: 16px;
  color: var(--blue);
}

/* ---------- Question list (populated once a type is chosen) ---------- */
.question-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.question-list li {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 0.875rem;
  color: var(--text);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(12px);
  background: #1F2233;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}

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

/* ---------- Responsive ---------- */
/* ============================================================================
   Màn hình "Hỏi AI" (#ai-chat-screen) — mở bằng animation trượt từ phải khi
   nhấn "Nhập chủ đề" ở màn chính (xem js/script.js openAiChatScreen()).
   Đè toàn màn hình (position:fixed inset:0), nên không cần ẩn/hiện
   #screen-builder bên dưới — nó vẫn nằm nguyên trong layout, chỉ bị che.
   ============================================================================ */
.ai-chat-screen[hidden] {
  display: none;
}

.ai-chat-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-chat-screen.is-open {
  transform: translateX(0);
}

.ai-chat-left {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 24px 40px 40px;
}

.ai-chat-left-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.icon-btn-square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s;
}

.icon-btn-square:hover {
  background: #E4E6F0;
}

.ai-chat-left-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.badge-free {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 2px 10px;
  border-radius: 999px;
}

.ai-chat-right {
  width: 460px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-left: 1px solid var(--border);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
}

.icon-btn-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.icon-btn-round:hover {
  border-color: #C7CCDB;
  background: var(--bg);
}

.btn-collapse-chat {
  border: 1px solid var(--purple);
  background: var(--card-bg);
  color: var(--purple);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-collapse-chat:hover {
  background: var(--purple-light);
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.chat-bot-msg {
  position: relative;
  padding-right: 8px;
}

.chat-bot-msg p {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
}

.chat-bot-msg p:last-of-type {
  margin-bottom: 8px;
}

.chat-msg-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
}

.chat-msg-copy:hover {
  background: var(--bg);
  color: var(--text);
}

.chat-msg-copy .icon {
  width: 15px;
  height: 15px;
}

.chat-suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.chat-suggestion-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 340px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 14px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.chat-suggestion-chip:hover {
  border-color: var(--purple);
  box-shadow: 0 4px 14px rgba(108, 93, 211, 0.14);
}

.chip-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.chip-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--text-muted);
}

.chat-msg-user {
  align-self: flex-end;
  max-width: 340px;
  background: var(--purple-light);
  color: var(--purple);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 14px;
}

.chat-msg-assistant p {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
}

.chat-msg-assistant.is-typing p {
  color: var(--text-muted);
}

.chat-input-area {
  padding: 8px 20px 16px;
}

.chat-input-box {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px 10px;
}

.chat-input {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  min-height: 22px;
  max-height: 120px;
}

.chat-input::placeholder {
  color: #A9AEBD;
}

.chat-input-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.chat-quota {
  flex: 1;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: #E4E6F0;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.chat-send-btn:hover {
  background: var(--purple);
  color: #fff;
}

.chat-disclaimer {
  margin: 10px 4px 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.chat-disclaimer a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}

.chat-disclaimer a:hover {
  text-decoration: underline;
}

/* ============================================================================
   Thẻ soạn câu hỏi "Trắc nghiệm" (#question-cards, .question-card) — xuất
   hiện với animation trượt+mờ dần khi nhấn nút "Trắc nghiệm" (xem
   insertQuestionCard() trong js/script.js). Container #question-cards được
   DI CHUYỂN (không nhân bản) giữa #screen-builder và #ai-chat-screen tuỳ
   màn nào đang mở, nên chỉ có 1 bộ DOM node duy nhất.
   ============================================================================ */
.question-cards[hidden] {
  display: none;
}

.question-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 20px;
}

.question-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(31, 34, 51, 0.05);
  padding: 24px 28px 20px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease;
}

.question-card.is-entering {
  opacity: 0;
  transform: translateY(-14px) scale(0.97);
}

.question-card.is-leaving {
  opacity: 0;
  transform: scale(0.97);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -24px;
  overflow: hidden;
}

/* Nhấp nháy nhẹ khi bấm 1 mục ở cột "Câu hỏi" để cuộn tới đúng thẻ đó */
.question-card.is-flash {
  box-shadow: 0 0 0 3px var(--purple-light);
}

.qc-drag-handle {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: grab;
}

.qc-drag-handle .icon {
  width: 16px;
  height: 16px;
}

.qc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  row-gap: 8px;
}

.qc-index {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}

.qc-type-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.qc-type-badge:hover {
  border-color: #C7CCDB;
}

.qc-type-icon {
  display: flex;
  color: var(--green);
}

.qc-type-icon .icon {
  width: 15px;
  height: 15px;
}

.qc-badge-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.qc-header-spacer {
  flex: 1;
}

.qc-shuffle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.qc-shuffle-btn .icon {
  width: 15px;
  height: 15px;
}

.qc-shuffle-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.qc-shuffle-btn.is-active {
  color: var(--purple);
  background: var(--purple-light);
}

.qc-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

.qc-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.qc-icon-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.qc-icon-btn .icon {
  width: 17px;
  height: 17px;
}

.qc-delete-btn:hover {
  color: var(--red);
}

.qc-question-input {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 2px solid transparent;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  padding-bottom: 6px;
  margin-bottom: 14px;
  min-height: 24px;
  cursor: text;
  word-wrap: break-word;
  transition: border-color 0.15s;
}

.qc-question-input:focus {
  border-color: var(--purple);
}

/* .qc-question-input giờ là <div contenteditable> (không còn <textarea>) để
   hỗ trợ định dạng thật (đậm/gạch chân/tô màu/công thức/ảnh) — placeholder
   mô phỏng bằng kỹ thuật :empty:before vì contenteditable không có thuộc
   tính placeholder gốc. */
.qc-question-input:empty:before {
  content: attr(data-placeholder);
  color: #A9AEBD;
  font-weight: 400;
}

.qc-question-input img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  margin: 6px 0;
}

.qc-question-input .katex {
  font-size: 1.05em;
}

.qc-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: max-height 0.22s ease, opacity 0.18s ease, margin-bottom 0.22s ease;
}

.qc-editor-toolbar.is-visible {
  max-height: 60px;
  opacity: 1;
  margin-bottom: 16px;
}

.qc-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.qc-toolbar-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.qc-toolbar-btn .icon {
  width: 16px;
  height: 16px;
}

.qc-toolbar-fx {
  font-style: italic;
  font-weight: 700;
  font-size: 0.8125rem;
}

.qc-toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

.qc-toolbar-main,
.qc-toolbar-colors {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.qc-toolbar-main[hidden],
.qc-toolbar-colors[hidden] {
  display: none;
}

.qc-color-back-btn,
.qc-color-none-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.qc-color-back-btn:hover,
.qc-color-none-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.qc-color-back-btn .icon,
.qc-color-none-btn .icon {
  width: 16px;
  height: 16px;
}

.qc-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(31, 34, 51, 0.08);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s;
}

.qc-color-swatch:hover {
  transform: scale(1.15);
}

.qc-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.qc-option {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qc-option-correct {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #D5D9E3;
  background: var(--card-bg);
  color: transparent;
  cursor: pointer;
}

.qc-option-correct .icon {
  width: 14px;
  height: 14px;
}

.qc-option-correct.is-correct {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.qc-option-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  padding: 4px 0;
}

.qc-option-input::placeholder {
  color: #A9AEBD;
}

.qc-option-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
}

.qc-option-remove:hover {
  background: #E4E6F0;
  color: var(--text);
}

.qc-option-remove .icon {
  width: 12px;
  height: 12px;
}

.qc-add-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border: 1px dashed var(--border);
  background: transparent;
  border-radius: 10px;
  padding: 10px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 14px;
}

.qc-add-option-btn .icon {
  width: 16px;
  height: 16px;
}

.qc-add-option-btn:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: var(--purple-light);
}

.qc-add-hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: #FEF9E7;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #92730B;
  cursor: pointer;
}

.qc-add-hint-btn .icon:first-child {
  width: 15px;
  height: 15px;
  color: #D4A72C;
}

.qc-add-hint-btn .icon:last-child {
  width: 14px;
  height: 14px;
}

.qc-hint-field[hidden] {
  display: none;
}

.qc-hint-field {
  margin-top: 12px;
}

.qc-hint-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text);
  resize: none;
  outline: none;
}

.qc-audio-field[hidden],
.qc-answer-audio-field[hidden] {
  display: none;
}

.qc-audio-field,
.qc-answer-audio-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.qc-audio-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--text-muted);
}

.qc-audio-icon .icon {
  width: 16px;
  height: 16px;
}

.qc-audio-player {
  flex: 1;
  height: 32px;
  min-width: 0;
}

.qc-audio-filename {
  font-size: 0.75rem;
  color: var(--text-muted);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.qc-audio-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.qc-audio-remove-btn:hover {
  background: #FEE2E2;
  color: #DC2626;
}

.chat-context-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chat-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--purple-light);
  color: var(--purple);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
}

.chat-context-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: var(--purple);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}

.chat-context-chip button:hover {
  background: rgba(108, 93, 211, 0.18);
}

/* ============================================================================
   Màn hình "Cài đặt" (#settings-screen) — mở bằng animation trượt từ phải
   khi nhấn "Tiếp" (đã tạo ít nhất 1 câu hỏi) hoặc tab "Cài đặt" (xem
   openSettingsScreen() trong js/script.js). Cùng kỹ thuật overlay
   position:fixed + transform như #ai-chat-screen.
   ============================================================================ */
.settings-screen[hidden] {
  display: none;
}

.settings-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.settings-screen.is-open {
  transform: translateX(0);
}

.settings-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
  padding: 0 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.settings-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
}

.settings-tab-group {
  justify-self: center;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 40px 20px 80px;
}

.settings-card {
  max-width: 620px;
  margin: 0 auto 20px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
}

.settings-card-title {
  margin: 0 0 18px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.map-picker {
  background: var(--purple-light);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.map-picker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  margin-bottom: 4px;
}

.map-picker-icon .icon {
  width: 20px;
  height: 20px;
}

.map-picker-label {
  margin: 0 0 16px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--purple);
}

.map-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.map-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 2px solid transparent;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.map-thumb:hover {
  transform: translateY(-2px);
}

.map-thumb.is-selected {
  border-color: var(--purple);
}

.map-thumb .icon {
  width: 24px;
  height: 24px;
}

.map-thumb-1 { background: linear-gradient(135deg, #FFB800, #FF8A00); }
.map-thumb-2 { background: linear-gradient(135deg, #2F80ED, #6C5DD3); }
.map-thumb-3 { background: linear-gradient(135deg, #EC4899, #F2994A); }
.map-thumb-4 { background: linear-gradient(135deg, #22C55E, #14B8A6); }
.map-thumb-5 { background: linear-gradient(135deg, #8B5CF6, #2F80ED); }

.settings-input {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  outline: none;
  margin-bottom: 16px;
}

.settings-input:focus {
  border-color: var(--purple);
}

.settings-input::placeholder {
  color: #A9AEBD;
}

.school-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.school-info-btn:hover {
  border-color: #C7CCDB;
  background: var(--bg);
}

.school-info-btn .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.required-star {
  color: var(--red);
}

.settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.settings-card > .settings-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.settings-row-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.settings-row-icon {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  color: var(--text-muted);
  margin-top: 2px;
}

.settings-row-text {
  min-width: 0;
}

.settings-row-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}

.settings-row-sub {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.pro-bolt {
  width: 14px;
  height: 14px;
  color: var(--purple);
}

.custom-select {
  position: relative;
  flex-shrink: 0;
  width: 200px;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  background: var(--card-bg);
  cursor: pointer;
}

.custom-select-trigger:hover {
  border-color: #C7CCDB;
}

.custom-select.is-open .custom-select-trigger {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-light);
}

.custom-select-chevron {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  transition: transform 0.15s;
}

.custom-select.is-open .custom-select-chevron {
  transform: rotate(180deg);
}

.custom-select-panel[hidden] {
  display: none;
}

.custom-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(31, 34, 51, 0.14);
}

.custom-select-option {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.custom-select-option:hover {
  background: var(--bg);
}

.custom-select-option.is-selected {
  background: var(--purple-light);
  color: var(--purple);
  font-weight: 700;
}

.toggle-switch {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #D5D9E3;
  border-radius: 999px;
  transition: background 0.15s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(31, 34, 51, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--purple);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

/* ============================================================================
   Modal chặn chuyển bước khi còn trường bắt buộc trống (xem
   showValidationModal() trong js/script.js).
   ============================================================================ */
.validation-modal-overlay[hidden] {
  display: none;
}

.validation-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 34, 51, 0.45);
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.validation-modal-overlay.is-visible {
  opacity: 1;
}

.validation-modal {
  width: 100%;
  max-width: 360px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transform: scale(0.95) translateY(8px);
  transition: transform 0.2s ease;
}

.validation-modal-overlay.is-visible .validation-modal {
  transform: scale(1) translateY(0);
}

.validation-modal-text {
  margin: 0 0 20px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.validation-modal-btn {
  display: block;
  width: 100%;
  border: none;
  background: var(--purple);
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 13px;
  border-radius: 12px;
  cursor: pointer;
}

.validation-modal-btn:hover {
  background: #5b4dc4;
}

/* ============================================================================
   Modal "Nhập công thức" (xem openFormulaModal() trong js/script.js) — cùng
   kỹ thuật overlay+animation với .validation-modal-overlay ở trên.
   ============================================================================ */
.formula-modal-overlay[hidden] {
  display: none;
}

.formula-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 34, 51, 0.45);
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.formula-modal-overlay.is-visible {
  opacity: 1;
}

.formula-modal {
  width: 100%;
  max-width: 380px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transform: scale(0.95) translateY(8px);
  transition: transform 0.2s ease;
}

.formula-modal-overlay.is-visible .formula-modal {
  transform: scale(1) translateY(0);
}

.formula-modal-title {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.formula-modal-input {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: "Courier New", monospace;
  font-size: 0.9375rem;
  color: var(--text);
  outline: none;
  margin-bottom: 12px;
}

.formula-modal-input:focus {
  border-color: var(--purple);
}

.formula-modal-preview {
  min-height: 48px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.formula-modal-preview .katex-error {
  color: var(--red);
  font-family: inherit;
  font-size: 0.8125rem;
}

.formula-modal-actions {
  display: flex;
  gap: 10px;
}

.formula-modal-cancel-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 11px;
  border-radius: 10px;
  cursor: pointer;
}

.formula-modal-cancel-btn:hover {
  background: var(--bg);
}

.formula-modal-insert-btn {
  flex: 1;
  border: none;
  background: var(--purple);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 11px;
  border-radius: 10px;
  cursor: pointer;
}

.formula-modal-insert-btn:hover {
  background: #5b4dc4;
}

.formula-modal-insert-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   Màn "Xem trước" (#preview-screen) — cùng kỹ thuật overlay trượt như
   #ai-chat-screen/#settings-screen. Đây là nơi 2 cài đặt "Hiển thị đáp án"
   và "Cho phép đáp án chưa đúng" thật sự có tác dụng (xem js/script.js).
   ============================================================================ */
.preview-screen[hidden] {
  display: none;
}

.preview-screen {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.preview-screen.is-open {
  transform: translateX(0);
}

.preview-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding: 0 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.preview-progress {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}

/* flex-wrap + gap (2026-09-23, thêm cho Nova) — .preview-body giờ có 2
   phần tử con LUÔN đồng thời tham gia layout: đúng 1 trong 4
   .preview-card (3 cái còn lại [hidden] nên display:none, không chiếm
   layout) + #host-nova/#play-nova (KHÔNG có [hidden], hiện xuyên suốt mọi
   trạng thái — xem host.html/play.html). justify-content:center vẫn giữ
   nguyên nên dù 1 hay 2 phần tử đều canh giữa; flex-wrap để tự xuống dòng
   khi không đủ chỗ ngang (màn hình hẹp, nhất là play.html trên điện
   thoại). */
.preview-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 40px 20px;
}

.preview-card {
  width: 100%;
  max-width: 560px;
  height: fit-content;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

/* Nova (2026-09-23, đổi sang WebP động — nhân vật nhảy múa thật, xem
   host.html/play.html) — max-width KHỚP đúng .preview-card (560px) để
   "to ngang với bộ câu hỏi" đúng nghĩa đen. Nền trong suốt thật có sẵn
   trong file WebP (alpha channel), không cần xử lý gì thêm ở CSS/JS
   nữa. File WebP tự chứa chuyển động (nhiều khung hình) nên KHÔNG gắn
   thêm animation CSS nữa (trước đây có hiệu ứng bồng bềnh giả cho ảnh
   tĩnh, giờ ảnh đã động thật nên bỏ để tránh chồng chuyển động). */
.nova-mascot {
  width: 100%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.preview-question {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 24px;
}

.preview-question img {
  display: block;
  max-width: 100%;
  max-height: 240px;
  border-radius: 8px;
  margin: 8px 0;
}

.preview-placeholder {
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
}

.preview-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preview-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.preview-option:hover:not(:disabled) {
  border-color: var(--purple);
}

.preview-option:disabled {
  cursor: default;
}

.preview-option.is-selected {
  border-color: var(--purple);
  background: var(--purple-light);
}

.preview-option.is-correct-answer {
  border-color: var(--green);
  background: #E9FAF0;
  color: #16803C;
  font-weight: 700;
}

.preview-option.is-wrong-answer {
  border-color: var(--red);
  background: var(--red-light);
  color: #B42318;
}

.preview-feedback {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
}

.preview-feedback[hidden] {
  display: none;
}

.preview-feedback.is-correct {
  background: #E9FAF0;
  color: #16803C;
}

.preview-feedback.is-wrong {
  background: var(--red-light);
  color: #B42318;
}

.preview-feedback.is-neutral {
  background: var(--bg);
  color: var(--text-muted);
}

.preview-feedback.is-summary {
  background: var(--purple-light);
  color: var(--purple);
  font-size: 1rem;
  text-align: center;
}

.preview-footer[hidden] {
  display: none;
}

.preview-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
}

.preview-prev-btn {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 10px;
  cursor: pointer;
}

.preview-prev-btn:hover:not(:disabled) {
  background: var(--bg);
}

.preview-prev-btn:disabled,
.preview-footer .btn-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   Màn "Đã lưu quiz" (#success-screen) — hiện sau khi lưu quiz thật thành
   công, xem js/script.js showSuccessScreen().
   ============================================================================ */
.success-screen[hidden] {
  display: none;
}

.success-screen {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 34, 51, 0.45);
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.success-screen.is-open {
  opacity: 1;
}

.success-card {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border-radius: 20px;
  padding: 36px 32px 32px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  transform: scale(0.95) translateY(8px);
  transition: transform 0.2s ease;
}

.success-screen.is-open .success-card {
  transform: scale(1) translateY(0);
}

.success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #E9FAF0;
  color: var(--green);
}

.success-icon .icon {
  width: 28px;
  height: 28px;
}

.success-title {
  margin: 0 0 6px;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--text);
}

.success-subtitle {
  margin: 0 0 22px;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.success-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.success-link-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: "Courier New", monospace;
  font-size: 0.8125rem;
  color: var(--text);
}

.success-copy-btn {
  flex-shrink: 0;
  border: none;
  background: var(--purple);
  color: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0 16px;
  border-radius: 10px;
  cursor: pointer;
}

.success-copy-btn:hover {
  background: #5b4dc4;
}

/* QR code join link (2026-09-23) — xem renderJoinQr() trong js/host.js.
   Khung trắng có viền/bo góc riêng (không phải chỉ mỗi SVG) vì nền trang
   có thể là ảnh Trung Thu sậm màu — cần khung trắng đủ lớn xung quanh mã
   để camera điện thoại dễ nhận diện (quiet zone), không chỉ dựa vào phần
   trắng thư viện tự vẽ bên trong SVG. */
.host-join-qr {
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

.host-join-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.success-actions {
  display: flex;
  gap: 10px;
}

.success-close-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 11px;
  border-radius: 10px;
  cursor: pointer;
}

.success-close-btn:hover {
  background: var(--bg);
}

.success-open-link-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--purple);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 11px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}

.success-open-link-btn:hover {
  background: #5b4dc4;
}

.success-open-link-btn .icon {
  width: 15px;
  height: 15px;
}

/* ============================================================================
   "Trình chiếu trực tiếp" (2026-09-17) — CSS dùng chung cho host.html
   (giáo viên điều khiển) và play.html (học sinh vào thi). Tái dùng nguyên
   .preview-screen/-header/-body/-card/-question/-options/-option/-feedback/
   -footer (đã có sẵn) cho phần khung + câu hỏi/đáp án; chỉ thêm mới những
   gì chưa có: đếm ngược, form đăng ký, phòng chờ, bảng xếp hạng.
   ============================================================================ */
.countdown-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--purple-light);
  color: var(--purple);
  font-size: 0.9375rem;
  font-weight: 800;
}

.countdown-badge[hidden] {
  display: none;
}

.host-section-title {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.host-players-title {
  margin-top: 24px;
}

/* ---------- Form đăng ký (học sinh) ---------- */
.join-form-title {
  margin: 0 0 20px;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}

.join-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.join-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.join-form-field span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.join-field-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.join-form-field input {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  outline: none;
}

.join-form-field input:focus {
  border-color: var(--purple);
}

.join-form-error {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--red);
}

.join-form-error[hidden] {
  display: none;
}

.join-submit-btn {
  justify-content: center;
  width: 100%;
}

/* ---------- Phòng chờ (giáo viên) ---------- */
.host-player-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.host-player-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
}

.host-player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-player-phone {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text-muted);
}

.host-empty-hint {
  padding: 8px 0 16px;
}

.host-empty-hint[hidden] {
  display: none;
}

.host-start-btn {
  width: 100%;
  justify-content: center;
  margin-top: 20px;
}

/* ---------- Câu hỏi đang mở (giáo viên) ---------- */
.host-answer-count {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--purple);
}

.host-audio-btn[hidden] {
  display: none;
}

.host-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--purple);
  background: var(--card-bg);
  color: var(--purple);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 14px;
  transition: background 0.15s, color 0.15s;
}

.host-audio-btn .icon {
  width: 16px;
  height: 16px;
}

.host-audio-btn:hover {
  background: var(--purple);
  color: #fff;
}

.host-audio-btn.is-playing {
  background: var(--purple);
  color: #fff;
}

/* Nút nhạc nền trong header — margin-left:auto tự đẩy sát phải header
   (.preview-header không có flex:1 sẵn ở phần tử nào để làm việc đó thay),
   margin-bottom:0 vì header thấp hơn hẳn preview-body (không cần khoảng
   cách dưới như .host-audio-btn gốc dùng trong card). */
.host-bgm-btn {
  margin-left: auto;
  margin-bottom: 0;
  flex-shrink: 0;
}

.host-bgm-btn.is-playing {
  background: var(--purple);
  color: #fff;
}

@media (max-width: 640px) {
  .host-bgm-btn span {
    display: none;
  }
}

/* Nút âm thanh ĐÁP ÁN — tông xanh lá để phân biệt trực quan với nút âm
   thanh câu hỏi (tông tím ở trên), cùng kích thước/bố cục. */
.host-answer-audio-btn {
  margin-left: 10px;
  border-color: #15803d;
  color: #15803d;
}

.host-answer-audio-btn:hover,
.host-answer-audio-btn.is-playing {
  background: #15803d;
  color: #fff;
}

/* ---------- Bảng "chúc mừng" sau khi công bố đáp án mỗi câu ---------- */
.host-celebrate[hidden] {
  display: none;
}

.host-celebrate {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

.celebrate-ribbon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.celebrate-ribbon {
  display: inline-block;
  background: linear-gradient(180deg, #c8402f, #a52a1f);
  color: #fdf3d8;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 6px 20px;
  border-radius: 999px;
  border: 1.5px solid #e8c877;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.celebrate-title {
  margin: 0 0 4px;
  font-size: 1.375rem;
  font-weight: 800;
  text-align: center;
  color: var(--text);
}

.celebrate-subtitle {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
}

.celebrate-quote {
  margin: 0 0 20px;
  font-size: 0.8125rem;
  font-style: italic;
  text-align: center;
  color: var(--text-muted);
}

.celebrate-quote[hidden] {
  display: none;
}

/* Podium — hiện tối đa 3 cột (Nhì/Nhất/Ba trái→phải), tự bỏ cột nào
   không có dữ liệu (vd chỉ 1-2 người trả lời đúng). */
.celebrate-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}

.podium-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 110px;
}

.podium-crown {
  height: 22px;
  font-size: 1.25rem;
  line-height: 1;
}

.podium-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 2px solid var(--border);
  color: var(--text-muted);
  margin-bottom: 6px;
}

.podium-avatar svg {
  width: 26px;
  height: 26px;
}

.podium-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
}

.podium-pillar {
  width: 100%;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}

.podium-rank-num {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
}

.podium-time {
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.podium-rank-1 .podium-pillar {
  height: 78px;
  background: linear-gradient(180deg, #f6d374, #d9a93f);
}

.podium-rank-2 .podium-pillar {
  height: 56px;
  background: linear-gradient(180deg, #d9dfe6, #aeb9c4);
}

.podium-rank-3 .podium-pillar {
  height: 42px;
  background: linear-gradient(180deg, #e9b98c, #c98452);
}

.podium-rank-1 .podium-avatar {
  border-color: #d9a93f;
}

.podium-rank-2 .podium-avatar {
  border-color: #aeb9c4;
}

.podium-rank-3 .podium-avatar {
  border-color: #c98452;
}

.celebrate-board-title {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}

.celebrate-table-wrap {
  overflow-x: auto;
}

.celebrate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.celebrate-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.celebrate-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.celebrate-rank-cell {
  font-weight: 800;
  width: 40px;
}

.celebrate-score-cell {
  font-weight: 800;
  color: var(--purple);
  text-align: right;
}

.celebrate-row-rank-1 { background: rgba(246, 211, 116, 0.18); }
.celebrate-row-rank-2 { background: rgba(174, 185, 196, 0.18); }
.celebrate-row-rank-3 { background: rgba(201, 132, 82, 0.18); }

/* Màn CÔNG BỐ chỉ hiện bảng công bố, KHÔNG hiện câu hỏi (2026-09-24) —
   #host-question-card (host) và #play-question-card (điện thoại) được JS gắn
   class .is-announcing khi status = question_revealed; gỡ khi sang câu mới nên
   câu hỏi tiếp theo hiện lại đầy đủ. Ẩn: nhãn "CÂU HỎI KIẾN THỨC", nội dung câu
   hỏi, các ô đáp án, số người đã trả lời, nút nghe câu hỏi. Giữ: phản hồi
   đúng/sai + hạng (điện thoại), bảng công bố, nút bấm điều khiển. !important vì
   theme Trung Thu đặt display cho các phần tử này ở độ ưu tiên cao hơn. */
.preview-card.is-announcing .tt-badge,
.preview-card.is-announcing .preview-question,
.preview-card.is-announcing .preview-options,
.preview-card.is-announcing .host-answer-count,
.preview-card.is-announcing #host-audio-btn,
.preview-card.is-announcing .play-audio-btn {
  display: none !important;
}

.preview-card.is-announcing .host-celebrate {
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
}

/* Dòng "Đáp án đúng: B. ..." ngay dưới tiêu đề bảng công bố. */
/* Màn giáo viên có chỗ rộng hơn điện thoại: cột bục rộng hơn và tên được xuống
   dòng thay vì bị cắt "Nguyễn Văn Đ…" (2026-09-24). */
#host-screen .podium-col {
  width: 150px;
}

#host-screen .podium-name {
  white-space: normal;
  line-height: 1.25;
  min-height: 2.5em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Tổng kết 10 giải (2026-09-24): hạng 4..10 dạng danh sách, và 10 dòng đầu của
   bảng xếp hạng cuối được tô nổi (celebrate-row-prize). */
.final-prize-board {
  margin: 4px 0 20px;
}

.final-prize-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.final-prize-row {
  display: grid;
  grid-template-columns: 74px 1fr auto 52px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #e7cf9c;
  background: rgba(246, 211, 116, 0.16);
  font-size: 0.8125rem;
}

.final-prize-label {
  font-weight: 800;
  color: #a5761f;
  white-space: nowrap;
}

.final-prize-name {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.final-prize-phone {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.final-prize-score {
  font-weight: 800;
  text-align: right;
  color: var(--purple);
}

.celebrate-row-prize {
  background: rgba(246, 211, 116, 0.12);
}

.celebrate-row-prize td {
  font-weight: 700;
}

/* SĐT trong màn công bố / tổng kết (2026-09-24). Host: cột SĐT + dòng dưới tên
   trên bục; điện thoại: SĐT đã che dưới tên (celebrate-phone-sub). */
.podium-phone {
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.celebrate-phone-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.celebrate-phone-sub {
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Chúc mừng người thắng chung cuộc trên điện thoại (2026-09-24). */
.play-final-congrats {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #d9a93f;
  background: linear-gradient(180deg, #fff3d6, #ffe7a8);
  color: #6b3612;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
}

.play-final-congrats[hidden] {
  display: none;
}

.celebrate-answer {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid #7fb768;
  background: #eef8ea;
  color: #2f5b1d;
  font-size: 0.9375rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
}

.celebrate-answer[hidden] {
  display: none;
}


/* Bảng "công bố" trên máy thí sinh (2026-09-24, play.html #play-celebrate) —
   dùng lại nguyên các class của màn giáo viên, chỉ thêm: dòng của CHÍNH
   thí sinh được tô nổi (viền trái + chữ đậm), podium thu nhỏ vừa màn điện
   thoại (3 cột 110px + khoảng cách = 358px, vượt chiều ngang khả dụng ~270px
   của .preview-card trên máy 375px), và khoảng cách cho bảng xếp hạng cuối. */
.celebrate-row-me td {
  font-weight: 800;
}

.celebrate-row-me td:first-child {
  box-shadow: inset 4px 0 0 var(--purple);
}

.celebrate-row-me {
  background: rgba(124, 92, 250, 0.14);
}

.play-final-board {
  margin-top: 20px;
}

@media (max-width: 480px) {
  .play-celebrate .celebrate-podium {
    gap: 8px;
  }

  .play-celebrate .podium-col {
    width: 84px;
  }
}

/* ---------- Bảng xếp hạng cuối (dùng chung .host-leaderboard-list) ---------- */
.host-leaderboard-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.host-leaderboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--card-bg);
}

.host-leaderboard-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.host-leaderboard-score {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--purple);
}

.host-final-title {
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 20px;
}

.host-leaderboard-final .host-leaderboard-item:first-child {
  border-color: var(--purple);
  background: var(--purple-light);
}

/* ---------- Kết quả cuối (học sinh) ---------- */
.play-final-score {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--purple);
  margin: 0 0 8px;
}

.play-final-rank {
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 640px) {
  .topbar {
    padding: 0 16px;
  }

  .topbar-right {
    gap: 12px;
  }

  .save-status-text {
    display: none;
  }

  .content {
    padding: 24px 12px 60px;
  }

  .ai-card {
    padding: 20px 16px 24px;
  }

  .mascot {
    display: none;
  }

  .ai-grid,
  .manual-grid {
    grid-template-columns: 1fr;
  }

  .question-nav {
    display: none;
  }

  .ai-chat-screen {
    flex-direction: column;
  }

  .ai-chat-left {
    display: none;
  }

  .ai-chat-right {
    width: 100%;
    height: 100%;
  }

  .question-card {
    padding: 20px 16px 16px;
  }

  .qc-header {
    gap: 8px;
  }

  .qc-shuffle-label {
    display: none;
  }

  .settings-topbar {
    grid-template-columns: auto 1fr auto;
    padding: 0 12px;
    gap: 8px;
  }

  .settings-tab-group .tab-btn span,
  .settings-tab-group .tab-btn {
    font-size: 0.8125rem;
  }

  .ai-chat-left-title,
  .badge-free {
    display: none;
  }

  .settings-card {
    padding: 20px 16px;
  }

  .map-thumb {
    width: 48px;
    height: 48px;
  }
}

/* ============================================================================
   Chủ đề "Trung Thu" cho màn hình host (host.html?session=...) — chỉ áp
   dụng khi quiz có mapTheme === "trung-thu" (js/host.js gắn class
   .theme-trung-thu lên #host-screen mỗi lần poll host-state). Toàn bộ
   trang trí (trăng/sao/lồng đèn/thỏ/mái chùa/chữ) nằm trong .tt-scene —
   vẽ thuần CSS/SVG, không dùng ảnh. Mọi rule đều tiền tố
   ".preview-screen.theme-trung-thu" để không ảnh hưởng các quiz dùng theme
   khác hoặc màn "Xem trước" trong index.html (dùng chung class
   .preview-card/.preview-option nhưng không có .theme-trung-thu).
   ============================================================================ */

.tt-badge,
.preview-screen:not(.theme-trung-thu) .tt-scene {
  display: none;
}

.preview-screen.theme-trung-thu {
  background: radial-gradient(ellipse 120% 70% at 82% 6%, #2c3577 0%, #1a2062 32%, #10133f 58%, #06071c 100%);
}

.preview-screen.theme-trung-thu .tt-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.preview-screen.theme-trung-thu .preview-header,
.preview-screen.theme-trung-thu .preview-body,
.preview-screen.theme-trung-thu .preview-footer {
  position: relative;
  z-index: 1;
}

/* Nền là ảnh thật (2026-09-18, thay cho trăng/sao/lồng đèn/thỏ vẽ bằng CSS
   trước đây — ảnh gốc đã có sẵn đầy đủ những chi tiết đó rồi nên vẽ thêm là
   dư/chồng lặp). Ảnh ngang cho desktop, đổi sang ảnh dọc ở breakpoint dùng
   chung với mọi chỗ ẩn-bớt-chữ-trang-trí khác trong file này (max-width:
   900px) để khớp đúng lúc màn hình đủ hẹp cần bố cục dọc. */
.preview-screen.theme-trung-thu .tt-scene {
  background-image: url("../images/trungthu-bg-desktop.png");
  background-size: cover;
  background-position: center;
}

@media (max-width: 900px) {
  .preview-screen.theme-trung-thu .tt-scene {
    background-image: url("../images/trungthu-bg-mobile.png");
  }
}

.tt-side-text {
  position: absolute;
  left: 4%;
  top: 30%;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 2.1rem;
  line-height: 1.25;
  color: #fdf3d8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.tt-seal {
  position: absolute;
  left: 4.6%;
  top: calc(30% + 108px);
  width: 52px;
  padding: 8px 4px;
  border-radius: 8px;
  background: #b5352a;
  border: 2px solid #e8c877;
  color: #f7dfa0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.tt-corner-text {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.35rem;
  color: #fdf3d8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
  line-height: 1.4;
}

.tt-corner-text span {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f0c26a;
  margin-top: 2px;
}

.tt-corner-text span::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f0c26a 40%, transparent);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .tt-side-text,
  .tt-seal,
  .tt-corner-text {
    display: none;
  }
}

/* Header/tiến độ */
.preview-screen.theme-trung-thu .preview-header {
  background: transparent;
  border-bottom: none;
}

.preview-screen.theme-trung-thu .preview-progress {
  color: #fdf3d8;
  font-family: "Playfair Display", serif;
  font-size: 1.05rem;
}

.preview-screen.theme-trung-thu #host-quiz-title {
  background: rgba(255, 255, 255, 0.12);
  color: #fdf3d8;
  border: 1px solid rgba(240, 194, 106, 0.5);
}

.preview-screen.theme-trung-thu .host-reset-btn {
  background: transparent;
  border-color: #dcb56a;
  color: #7a4a1d;
}

.preview-screen.theme-trung-thu .host-reset-btn:hover {
  background: rgba(220, 181, 106, 0.15);
  color: #5a3610;
}

/* Nút trong footer nằm trực tiếp trên ảnh nền (footer trong suốt), không
   phải trên thẻ kem như 2 chỗ còn lại — chữ nâu #7a4a1d ở trên sẽ gần như
   vô hình trên nền ảnh tối, nên cần màu riêng sáng hơn ở đây. */
.preview-screen.theme-trung-thu .preview-footer .host-reset-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(240, 194, 106, 0.5);
  color: #fdf3d8;
}

.preview-screen.theme-trung-thu .preview-footer .host-reset-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.host-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.host-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

/* Trong phòng chờ/màn kết thúc, nút xếp full-width bên dưới nội dung chính
   (dưới "Bắt đầu" / dưới bảng xếp hạng cuối) — trong footer (đang hỏi) thì
   để tự-rộng, nằm ngay cạnh nút hành động chính. */
.host-waiting-card .host-reset-btn,
.host-finished-card .host-reset-btn {
  width: 100%;
  margin-top: 12px;
}

.host-reset-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.host-reset-btn .icon {
  width: 15px;
  height: 15px;
}

.host-progress-track {
  display: none;
  width: 220px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.host-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0c26a, #fff3cf);
  transition: width 0.3s ease;
}

.preview-screen.theme-trung-thu .host-progress-track {
  display: block;
}

/* Thẻ câu hỏi / đáp án */
.preview-screen.theme-trung-thu .preview-card {
  background: linear-gradient(180deg, #fdf8ec, #f7ecd2);
  border: 2px solid #dcb56a;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  position: relative;
  margin-top: 26px;
}

.preview-screen.theme-trung-thu .tt-badge {
  display: inline-block;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #c8402f, #a52a1f);
  color: #fdf3d8;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1.5px solid #e8c877;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.preview-screen.theme-trung-thu .preview-question {
  color: #1c2340;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 22px;
}

.preview-screen.theme-trung-thu .preview-question::after {
  content: "";
  display: block;
  width: 140px;
  height: 2px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, #dcb56a, transparent);
}

.preview-screen.theme-trung-thu .host-section-title {
  color: #7a4a1d;
  font-family: "Playfair Display", serif;
}

.preview-screen.theme-trung-thu .host-celebrate {
  border-top-color: #dcb56a;
}

.preview-screen.theme-trung-thu .celebrate-title {
  color: #7a4a1d;
  font-family: "Playfair Display", serif;
}

.preview-screen.theme-trung-thu .celebrate-board-title {
  color: #7a4a1d;
  font-family: "Playfair Display", serif;
}

.preview-screen.theme-trung-thu .podium-avatar {
  background: #fffaf0;
}

.preview-screen.theme-trung-thu .celebrate-table th {
  border-bottom-color: #e7cf9c;
}

.preview-screen.theme-trung-thu .celebrate-table td {
  border-bottom-color: #f0e2c0;
}

.preview-screen.theme-trung-thu .preview-options {
  counter-reset: tt-opt;
  gap: 14px;
}

.preview-screen.theme-trung-thu .preview-option {
  counter-increment: tt-opt;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fffaf0;
  border: 1.5px solid #e7cf9c;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 600;
  color: #2a2440;
  box-shadow: 0 2px 6px rgba(90, 60, 20, 0.08);
}

.preview-screen.theme-trung-thu .preview-option::before {
  content: counter(tt-opt, upper-alpha);
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(150deg, #f8e2ab, #dcb056);
  color: #6b3612;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.preview-screen.theme-trung-thu .preview-option::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 30px;
  margin-left: auto;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'><ellipse cx='10' cy='15' rx='8' ry='10' fill='%23c8402f'/><rect x='7' y='3' width='6' height='2.5' rx='1' fill='%23a5793a'/><rect x='7' y='24' width='6' height='2.5' rx='1' fill='%23a5793a'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* is-selected riêng cho theme Trung Thu (2026-09-23) — .preview-option
   gốc (2236) tô border/background tím khi chọn, nhưng ở đây bị đè mất vì
   .theme-trung-thu .preview-option (3381, 3 lớp class) có độ ưu tiên CSS
   cao hơn .preview-option.is-selected (2236, chỉ 2 lớp) — nên học sinh
   bấm vào mà KHÔNG thấy ô mình chọn đổi màu/đậm lên gì cả. Thêm hẳn 1
   rule riêng cùng tông màu vàng/nâu của theme, ĐẶT TRƯỚC is-correct-answer/
   is-wrong-answer bên dưới (cùng độ ưu tiên 3 lớp) để giữ đúng thứ tự ưu
   tiên hệt bản gốc — sau khi công bố đáp án, is-correct-answer/
   is-wrong-answer vẫn phải thắng (ghi đè) is-selected vì class is-selected
   không bị gỡ khi công bố, xem renderQuestion() trong js/play.js. */
.preview-screen.theme-trung-thu .preview-option.is-selected {
  background: #fff3d6;
  border-color: #c8862f;
  color: #6b3612;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(200, 134, 47, 0.25);
}

.preview-screen.theme-trung-thu .preview-option.is-correct-answer {
  background: #eef8ea;
  border-color: #7fb768;
  color: #2f5b1d;
}

.preview-screen.theme-trung-thu .preview-option.is-correct-answer::before {
  background: linear-gradient(150deg, #b7e39a, #6fae4f);
  color: #234a12;
}

.preview-screen.theme-trung-thu .preview-option.is-wrong-answer {
  background: #fbeceb;
  border-color: #d98d85;
  color: #7a271f;
}

/* Chân trang / nút bấm — dùng chung .btn-next nên áp dụng cho cả
   host-action-btn/host-start-btn (host.html) lẫn join-submit-btn
   (play.html) mà không cần lặp lại theo id. */
.preview-screen.theme-trung-thu .preview-footer {
  background: transparent;
  border-top: none;
}

.preview-screen.theme-trung-thu .btn-next {
  background: linear-gradient(180deg, #f0c26a, #cf9a3f);
  color: #4a2c0a;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.preview-screen.theme-trung-thu .btn-next:hover:not(:disabled) {
  background: linear-gradient(180deg, #f6cd7e, #d9a94a);
}

/* Đếm ngược + form đăng ký (play.html) */
.preview-screen.theme-trung-thu .countdown-badge {
  background: linear-gradient(150deg, #f8e2ab, #dcb056);
  color: #6b3612;
  font-family: "Playfair Display", serif;
}

.preview-screen.theme-trung-thu .join-form-title {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: #7a4a1d;
  letter-spacing: 0.01em;
}

.preview-screen.theme-trung-thu .join-form-title::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, #dcb56a, transparent);
}

.preview-screen.theme-trung-thu .join-form-field {
  color: #7a4a1d;
}

.preview-screen.theme-trung-thu .join-field-icon {
  color: #b5872f;
}

.preview-screen.theme-trung-thu .join-form-field input {
  border-color: #e7cf9c;
  background: #fffaf0;
  color: #2a2440;
  border-radius: 999px;
  padding: 13px 20px;
}

.preview-screen.theme-trung-thu .join-form-field input:focus {
  border-color: #cf9a3f;
}

.preview-screen.theme-trung-thu .join-submit-btn {
  background: linear-gradient(180deg, #7a6ce0, #5a4bc4);
  color: #fff;
  border-radius: 999px;
  padding: 13px 20px;
  box-shadow: 0 8px 18px rgba(90, 75, 196, 0.4);
}

.preview-screen.theme-trung-thu .join-submit-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #8a7dee, #6a5bd4);
}

.preview-screen.theme-trung-thu .play-final-score {
  color: #a5761f;
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
}

.preview-screen.theme-trung-thu .play-final-rank {
  color: #7a4a1d;
}

/* ---------- Cảnh báo sắp hết giờ (2026-09-23) ---------- */
/* is-urgent gắn/gỡ bằng JS khi còn ≤5 giây, xem tick() trong js/play.js —
   đổi hẳn sang tông đỏ + nhấp nháy phóng to nhỏ để tạo cảm giác gấp gáp. */
.countdown-badge.is-urgent {
  background: var(--red-light);
  color: var(--red);
  animation: countdown-urgent-pulse 0.6s ease-in-out infinite;
}

@keyframes countdown-urgent-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.preview-screen.theme-trung-thu .countdown-badge.is-urgent {
  background: var(--red-light);
  color: var(--red);
}

/* ---------- Đồng hồ đếm ngược SỐ TO giữa phía trên (2026-09-24) ----------
   Dùng ở CẢ host.html (#host-countdown) và play.html (#play-countdown), thay
   badge nhỏ ở góc header cũ (.countdown-badge, không còn dùng). Nằm đầu
   .preview-body (flex-wrap) với flex-basis 100% nên luôn chiếm 1 hàng riêng
   phía trên các thẻ, căn giữa; position: sticky để cuộn câu hỏi dài vẫn thấy
   giờ. Toàn bộ phần tử bao có pointer-events: none — chỉ hiển thị, không
   chặn bấm vào đáp án nằm dưới lúc đang dính. Logic bật class is-warning
   (≤10s) / is-critical (≤5s) ở js/countdown-fx.js. */
.big-countdown {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  position: sticky;
  top: 8px;
  z-index: 30;
  pointer-events: none;
}

.big-countdown[hidden] {
  display: none;
}

.big-countdown-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 104px;
  padding: 0 24px;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.75);
  background: var(--purple-light);
  color: var(--purple);
  font-size: 3.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition: background 0.25s, color 0.25s;
}

.preview-screen.theme-trung-thu .big-countdown-num {
  background: linear-gradient(150deg, #f8e2ab, #dcb056);
  color: #6b3612;
  font-family: "Playfair Display", serif;
}

/* ≤10 giây: cam, mỗi giây "nảy" nhẹ 1 nhịp. */
.big-countdown.is-warning .big-countdown-num,
.preview-screen.theme-trung-thu .big-countdown.is-warning .big-countdown-num {
  background: linear-gradient(150deg, #ffb347, #f47b20);
  color: #fff;
  animation: big-countdown-bounce 1s ease-in-out infinite;
}

/* ≤5 giây: đỏ, đập nhanh và mạnh hơn, quầng sáng đỏ. */
.big-countdown.is-critical .big-countdown-num,
.preview-screen.theme-trung-thu .big-countdown.is-critical .big-countdown-num {
  background: linear-gradient(150deg, #ff5a5f, #d90429);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(217, 4, 41, 0.28), 0 10px 30px rgba(217, 4, 41, 0.55);
  animation: big-countdown-beat 0.5s ease-in-out infinite;
}

@keyframes big-countdown-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes big-countdown-beat {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.2) rotate(-3deg); }
  75% { transform: scale(1.2) rotate(3deg); }
}

/* Máy chiếu / màn hình lớn: số to hơn nữa. */
@media (min-width: 900px) {
  .big-countdown-num {
    min-width: 140px;
    height: 140px;
    font-size: 5.25rem;
  }
}

/* Viền đỏ nhấp nháy quanh mép màn hình khi sắp hết giờ (#time-vignette). */
.time-vignette {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 120px 24px rgba(217, 4, 41, 0.6);
  transition: opacity 0.3s;
}

.time-vignette.is-warning {
  opacity: 0.35;
}

.time-vignette.is-critical {
  animation: time-vignette-pulse 0.8s ease-in-out infinite;
}

@keyframes time-vignette-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .big-countdown.is-warning .big-countdown-num,
  .big-countdown.is-critical .big-countdown-num,
  .time-vignette.is-critical {
    animation: none;
  }

  .time-vignette.is-critical {
    opacity: 0.7;
  }
}

/* ---------- Hạng tạm thời sau mỗi câu (2026-09-23) ---------- */
.play-current-rank {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--purple);
}

.play-current-rank[hidden] {
  display: none;
}

.preview-screen.theme-trung-thu .play-current-rank {
  color: #a5761f;
  font-family: "Playfair Display", serif;
}

/* ---------- Pháo giấy/lồng đèn khi trả lời ĐÚNG (2026-09-23) ---------- */
/* Phủ toàn màn hình, pointer-events:none để không chặn thao tác bấm phía
   dưới. Mỗi mảnh (.confetti-piece) là 1 <span> emoji được JS sinh ra ở vị
   trí ngang ngẫu nhiên trên đỉnh màn hình, rơi xuống + xoay bằng CSS
   animation rồi tự bị JS xoá khỏi DOM sau khi animation kết thúc (xem
   spawnConfetti() trong js/play.js) — không tích luỹ phần tử DOM về lâu
   dài dù chơi nhiều câu liên tiếp. */
.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}

/* Pháo giấy BẮN từ 2 góc dưới (2026-09-24) — quỹ đạo do JS tính và chạy bằng
   element.animate() (xem shootConfettiFrom() trong js/play.js), nên ở đây chỉ
   cần định vị gốc (0,0) của lớp phủ + hình dạng mảnh giấy. */
.confetti-shot {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  will-change: transform, opacity;
}

.confetti-shot.is-paper {
  width: 10px;
  height: 16px;
  border-radius: 2px;
}

.confetti-piece {
  position: absolute;
  top: -40px;
  font-size: 1.5rem;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) rotate(360deg);
    opacity: 0.9;
  }
}

.preview-screen.theme-trung-thu .preview-feedback.is-neutral {
  background: #fdf3d8;
  color: #7a4a1d;
}