/* Bổ sung riêng cho Hóa 10 - Chương 1 (không sửa tool-common.css dùng chung) */

/* Sub-tab chọn đồ thị N-Z / A-Z / 2Z-N, tái dùng style .quiz-subtab-btn có sẵn.
   QUAN TRỌNG: style.css (dùng chung toàn site) có rule "button { background:
   #2563eb; color:#fff; width:100% }" áp cho MỌI thẻ <button>. Trên một số
   trình duyệt mobile, nút chưa tắt "appearance" mặc định vẫn giữ nền hệ
   thống đè lên CSS tuỳ biến, khiến nút sub-tab lúc active bị nền xanh + chữ
   cũng xanh (var(--blue)) => chữ biến mất, nút to hết chiều ngang. Reset rõ
   ràng lại toàn bộ ở đây để không phụ thuộc animation/appearance mặc định. */
.nz-subtab-btn {
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  background: transparent !important;
}
.nz-subtab-btn.active {
  background: transparent !important;
  color: var(--blue);
}

.nz-chart-tabs { flex-wrap: wrap; row-gap: 6px; }

.nz-chart-subpanel.hidden { display: none; }

/* Các svg đồ thị (N-Z, A-Z, 2Z-N) đều co giãn theo chiều rộng khung chứa */
.chart-svg { width: 100%; height: auto; }

/* ============================================================
   TAB "TRẮC NGHIỆM" (client-side, không qua DB) — 125 câu đã rà
   soát, 20 câu đầu (Đề 1) MIỄN PHÍ cho tất cả, 105 câu còn lại
   (Đề 2-5) dành cho VIP. Style lặp lại từ bond-lab.css/rate-lab.css
   (theo đúng quy ước mỗi chương tự chứa CSS luyện tập riêng, xem
   comment tương tự trong các file đó) — KHÔNG dùng chung .quiz-*
   sẵn có trong tool-common.css (đó là cho hệ "Bộ đề" cũ qua DB).
   Nút bấm (.quiz-option, .chip, .lab-cta-btn...) đã tự động được
   reset appearance/width ở tool-common.css (áp dụng toàn site) nên
   không cần lặp lại appearance:none ở đây. */
.pt-filters { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-bottom: 14px; }
.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; color: var(--ink-soft);
  min-height: 38px; transition: all 0.12s;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.active { background: var(--blue); border-color: var(--blue); color: white; }

.lab-cta-btn {
  display: block; width: 100%; padding: 15px; font-size: 16px; font-weight: 700; color: white;
  background: var(--blue); border: none; border-radius: 12px; cursor: pointer; margin-top: 8px;
  min-height: 50px;
}
.lab-cta-btn:disabled { background: #b8bfe0; cursor: not-allowed; }
.lab-cta-btn:hover:not(:disabled) { background: var(--blue-dark); }

.practice-count { font-size: 13.5px; color: var(--ink-soft); margin: 4px 0 16px; font-weight: 600; }
.practice-progress-track { height: 8px; background: #eef0fa; border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.practice-progress-fill { height: 100%; background: var(--blue); border-radius: 999px; transition: width 0.2s; }
.practice-progress-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; margin-bottom: 18px; }

.quiz-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; }
.quiz-topic { font-size: 12px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.quiz-question { font-size: 16.5px; font-weight: 600; line-height: 1.5; margin-bottom: 18px; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  text-align: left; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px;
  background: white; color: var(--ink); font-size: 14.5px; line-height: 1.45; cursor: pointer; min-height: 48px;
  transition: border-color 0.12s, background 0.12s; font-weight: 400;
}
.quiz-option:hover:not(.disabled) { border-color: var(--blue); background: #f5f7ff; }
.quiz-option.disabled { cursor: default; }
.quiz-option.correct { border-color: #2f9e6f; background: #e9f8f1; color: #14532d; font-weight: 700; }
.quiz-option.wrong { border-color: #e05263; background: #fdedef; color: #7f1d2b; }
.quiz-explain { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #f5f6fb; }
.quiz-explain.hidden { display: none; }
.explain-verdict { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.explain-text { font-size: 14px; line-height: 1.6; color: var(--ink); }

.score-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 12px 0 24px; }
.score-ring {
  --pct: 0;
  position: relative;
  width: 130px; height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--blue) calc(var(--pct) * 1%), #eef0fa 0);
  font-size: 22px; font-weight: 700; font-family: "IBM Plex Mono", monospace;
}
.score-ring::before {
  content: ""; position: absolute; width: 104px; height: 104px; border-radius: 50%; background: white;
}
.score-ring span { position: relative; z-index: 1; }
.score-text { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.review-title { font-weight: 700; margin-bottom: 12px; }
.review-item { border-left: 3px solid #e05263; background: #fdedef; border-radius: 0 10px 10px 0; padding: 12px 14px; margin-bottom: 10px; }
.review-q { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.review-a { font-size: 13.5px; margin-bottom: 3px; }
.review-a.wrong-a { color: #e05263; }
.review-a.correct-a { color: #2f9e6f; font-weight: 600; }
.review-explain { font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }

/* Thẻ khoá VIP cho 105 câu còn lại — tái dùng .vip-lock-card đã có sẵn
   trong tool-common.css (trước đây dùng cho tab Tự luận, nay tab đó đã
   mở miễn phí nên class này rảnh ra, dùng lại đúng mục đích cho trắc nghiệm). */
.quiz-vip-teaser { margin-top: 22px; }
.hidden { display: none; }

@media (max-width: 480px) {
  .quiz-question { font-size: 15.5px; }
  .score-ring { width: 110px; height: 110px; font-size: 19px; }
  .score-ring::before { width: 86px; height: 86px; }
}