/* ============================================================
   TRI THỨC NỀN — Quiz / Luyện đề
   Kế thừa design system từ style.css
   ============================================================ */

@keyframes fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Quiz layout ─────────────────────────────────────────── */
.quiz-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* ─── Quiz header ────────────────────────────────────────── */
.quiz-header {
  margin-bottom: 32px;
}
.quiz-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.quiz-breadcrumb a { color: var(--brand); }
.quiz-breadcrumb .sep { opacity: .4; }
.quiz-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.quiz-title {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.quiz-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--brand-50);
  color: var(--brand-700);
}
.quiz-tag.tag-essay {
  background: #fff4e0;
  color: #b4690e;
}

/* ─── Progress bar ────────────────────────────────────────── */
.quiz-progress-bar-wrap {
  height: 5px;
  background: var(--line);
  border-radius: var(--r-pill);
  margin: 18px 0 24px;
  overflow: hidden;
}
.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), #2d7ff0);
  border-radius: var(--r-pill);
  transition: width .4s var(--ease);
}

.quiz-stats {
  display: flex;
  gap: 20px;
  font-size: .82rem;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 6px;
}
.quiz-stats strong { color: var(--ink); font-weight: 700; }

/* ─── Question card ───────────────────────────────────────── */
.q-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 28px 32px;
  margin-bottom: 20px;
  animation: fade .3s var(--ease) both;
}

.q-num {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-mute);
  margin-bottom: 12px;
}

.q-text {
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* SVG container */
.q-svg-wrap {
  margin: 16px 0 22px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  border-radius: var(--r-md);
  padding: 8px 0;
}
.q-svg-wrap svg {
  max-width: 100%;
  height: auto;
}
.q-svg-placeholder {
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
  color: var(--ink-mute);
  font-size: .85rem;
}

/* ─── Options (trắc nghiệm) ───────────────────────────────── */
.q-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.q-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  transition: all .16s var(--ease);
  font-size: .97rem;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  width: 100%;
  font-family: inherit;
  line-height: 1.5;
}
.q-option:hover:not(:disabled) {
  border-color: var(--brand);
  background: var(--brand-50);
}

.q-option-letter {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .82rem;
  color: var(--ink-soft);
  transition: all .16s var(--ease);
}

/* Selected */
.q-option.selected {
  border-color: var(--brand);
  background: var(--brand-50);
}
.q-option.selected .q-option-letter {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Correct */
.q-option.correct {
  border-color: #1fae6a;
  background: #edfbf4;
}
.q-option.correct .q-option-letter {
  background: #1fae6a;
  border-color: #1fae6a;
  color: #fff;
}

/* Wrong */
.q-option.wrong {
  border-color: #e0556e;
  background: #fef0f3;
}
.q-option.wrong .q-option-letter {
  background: #e0556e;
  border-color: #e0556e;
  color: #fff;
}

/* Reveal (show correct after wrong) */
.q-option.reveal {
  border-color: #1fae6a;
  background: #edfbf4;
  opacity: 0.7;
}

/* ─── Explanation ─────────────────────────────────────────── */
.q-explanation {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--brand-50);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.6;
  display: none;
}
.q-explanation.show { display: block; animation: fade .25s var(--ease) both; }
.q-explanation strong { color: var(--brand-700); }

/* ─── Essay textarea ──────────────────────────────────────── */
.q-essay-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.q-essay-textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font-family: inherit;
  font-size: .96rem;
  color: var(--ink);
  resize: vertical;
  transition: border-color .2s, box-shadow .2s;
  line-height: 1.6;
}
.q-essay-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-50);
}
.q-essay-textarea::placeholder { color: var(--ink-mute); }

.q-essay-hint {
  padding: 14px 18px;
  background: #fff4e0;
  border-left: 3px solid #f5872e;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.6;
  display: none;
}
.q-essay-hint.show { display: block; animation: fade .25s var(--ease) both; }

/* ─── Essay AI grading ────────────────────────────────────── */
.q-essay-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.q-essay-grade {
  display: none;
  padding: 16px 18px;
  background: var(--brand-50, #eef4ff);
  border: 1.5px solid var(--brand, #2f6df5);
  border-radius: var(--r-md);
  font-size: .94rem;
  color: var(--ink);
  line-height: 1.7;
}
.q-essay-grade.show { display: block; animation: fade .25s var(--ease) both; }
.q-essay-grade.loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  background: var(--surface-2, #f7f8fb);
  border-color: var(--line-strong);
}
.q-essay-grade.error {
  background: #fdecec;
  border-color: #e5484d;
  color: #b42318;
}

mjx-container { outline: none; }
mjx-container[display="true"] { margin: 12px 0 !important; }

.q-essay-grade .grade-title {
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--brand, #2f6df5);
}
.q-essay-grade strong { color: var(--ink); }
.grade-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--line-strong);
  border-top-color: var(--brand, #2f6df5);
  border-radius: 50%;
  flex: 0 0 auto;
  animation: grade-spin .7s linear infinite;
}
@keyframes grade-spin { to { transform: rotate(360deg); } }

/* ─── Action buttons ──────────────────────────────────────── */
.q-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all .16s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--brand-600); transform: translateY(-1px); }
.btn-secondary {
  background: var(--surface-2);
  color: var(--ink-soft);
  border: 1.5px solid var(--line-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--line); color: var(--ink); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ─── Navigator (prev/next) ───────────────────────────────── */
.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.quiz-nav-center {
  font-size: .85rem;
  color: var(--ink-mute);
  font-weight: 600;
}

/* ─── Question map ────────────────────────────────────────── */
.q-map {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 28px;
}
.q-map-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-mute);
  cursor: pointer;
  transition: all .14s var(--ease);
  font-family: inherit;
}
.q-map-btn:hover { border-color: var(--brand); color: var(--brand); }
.q-map-btn.done  { background: var(--brand); border-color: var(--brand); color: #fff; }
.q-map-btn.wrong { background: #e0556e; border-color: #e0556e; color: #fff; }
.q-map-btn.active{ border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }

/* ─── Result screen ───────────────────────────────────────── */
.result-screen {
  text-align: center;
  padding: 48px 24px;
  animation: fade .4s var(--ease) both;
}
.result-emoji { font-size: 3.5rem; margin-bottom: 16px; }
.result-score {
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--brand);
  margin-bottom: 6px;
}
.result-label {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.result-breakdown {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-width: 100px;
}
.result-stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.result-stat-lbl { font-size: .78rem; color: var(--ink-mute); font-weight: 600; }
.stat-correct .result-stat-num { color: #1fae6a; }
.stat-wrong .result-stat-num { color: #e0556e; }
.stat-skip .result-stat-num { color: var(--ink-mute); }

/* ─── Loading / error state ───────────────────────────────── */
.quiz-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-mute);
}
.quiz-state .big {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

/* ─── Chip filter buttons ────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ─── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .quiz-wrap { padding: 20px 16px 60px; }
  .q-card { padding: 20px 18px; }
  .quiz-nav { flex-direction: column; }
  .result-breakdown { gap: 12px; }
  .q-map-btn { width: 32px; height: 32px; font-size: .75rem; }
}

/* Timer */
.quiz-timer { font-weight:700; font-size:.85rem; color:var(--brand); background:var(--brand-50); padding:3px 10px; border-radius:var(--r-pill); margin-left:auto; }
.quiz-timer.timer-warning { color:#b4690e; background:#fff4e0; }
.quiz-timer.timer-danger { color:#dc2626; background:#fef2f2; animation:pulse .8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* AI Helper */
.ai-helper-wrap { margin-top:12px; }
.ai-helper-btn {
  padding:8px 16px; border-radius:var(--r-pill); border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink-soft); font-size:.8rem; font-weight:700;
  cursor:pointer; transition:all .15s;
}
.ai-helper-btn:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-50); }
.ai-panel {
  margin-top:12px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--surface); overflow:hidden;
}
.ai-panel-header {
  padding:10px 14px; background:var(--brand); color:#fff;
  font-size:.78rem; font-weight:700;
}
.ai-panel-msgs {
  padding:12px 14px; max-height:200px; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
}
.ai-msg { padding:8px 12px; border-radius:10px; font-size:.82rem; line-height:1.5; max-width:90%; }
.ai-msg.bot { background:#f0f4f0; align-self:flex-start; color:var(--ink); }
.ai-msg.user { background:var(--brand); color:#fff; align-self:flex-end; }
.ai-msg.typing { font-style:italic; color:var(--ink-mute); }
.ai-panel-input { display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--line); }
.ai-input {
  flex:1; padding:8px 12px; border:1.5px solid var(--line); border-radius:20px;
  font-size:.82rem; outline:none;
}
.ai-input:focus { border-color:var(--brand); }
.ai-send {
  width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff;
  border:none; cursor:pointer; font-size:.9rem;
}
.ai-panel-note { padding:6px 14px 10px; font-size:.68rem; color:var(--ink-mute); text-align:center; }

/* Next button after wrong answer */
.ai-next-btn { display:block; margin-top:14px; padding:12px 24px; border-radius:var(--r-pill); background:var(--brand); color:#fff; font-size:.85rem; font-weight:700; border:none; cursor:pointer; transition:all .15s; }
.ai-next-btn:hover { transform:scale(1.03); opacity:.9; }

/* Reading Passage */
.q-passage { margin-bottom:16px; padding:16px 18px; background:#fefce8; border:1.5px solid #fde047; border-radius:12px; }
.q-passage-label { font-size:.75rem; font-weight:700; color:#a16207; margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em; }
.q-passage-text { font-size:.9rem; line-height:1.8; color:#1c1917; font-style:italic; white-space:pre-line; }


/* ─── Đúng/Sai (Phần II) ─────────────────────────────────────────── */
.q-tf-wrap { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.q-tf-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: #fafbfa; flex-wrap: wrap;
}
.q-tf-statement { flex: 1; min-width: 200px; font-size: .95rem; line-height: 1.5; }
.q-tf-btns { display: flex; gap: 8px; }
.q-tf-btn {
  min-width: 64px; padding: 8px 16px; border: 1.5px solid var(--line);
  border-radius: 10px; background: #fff; cursor: pointer; font-weight: 600;
  font-size: .9rem; transition: all .15s;
}
.q-tf-btn:hover:not(:disabled) { border-color: var(--brand); }
.q-tf-btn.selected { background: var(--brand); color: #fff; border-color: var(--brand); }
.q-tf-btn.tf-correct { background: #d8f3e3; border-color: #15a35a; color: #0d7a40; }
.q-tf-btn.tf-wrong { background: #fde2e2; border-color: #e53e3e; color: #c53030; }
.q-tf-btn:disabled { cursor: default; }
.q-tf-result { margin-top: 8px; font-size: .92rem; color: var(--ink-mute); }

/* ─── Trả lời ngắn (Phần III) ────────────────────────────────────── */
.q-short-wrap { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.q-short-input {
  padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 1rem; min-width: 200px; font-family: inherit;
}
.q-short-input:focus { outline: none; border-color: var(--brand); }
.q-short-result { width: 100%; margin-top: 6px; font-size: .92rem; padding: 8px 12px; border-radius: 8px; }
.q-short-result.ok { background: #d8f3e3; color: #0d7a40; }
.q-short-result.no { background: #fde2e2; color: #c53030; }