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

/* ===== Lý thuyết tổng hợp (4 tab Bài 1-3, tái dùng nguyên style .theory-*
   từ các file chuyên đề gốc) ===== */
.theory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 8px;
}
.theory-card {
    background: #f8fcff;
    border-radius: 20px;
    padding: 20px 24px;
    border-left: 6px solid #2a7de1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.theory-card.error-card { border-left-color: #d99a20; background: #fffbf0; }
.theory-card h3 { font-size: 19px; color: #0b2b4a; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.theory-card p { line-height: 1.7; color: #1e3a5f; }
.theory-card ul { padding-left: 20px; line-height: 1.7; color: #1e3a5f; }
.theory-card .highlight { background: #e3edf9; padding: 2px 10px; border-radius: 6px; font-weight: 600; color: #004080; }
.note { background: #fff8e8; border-left: 5px solid #d99a20; border-radius: 12px; padding: 12px 15px; margin-top: 12px; line-height: 1.6; }
.symbol-box { background: #eaf3fc; border-radius: 12px; padding: 12px 16px; margin-top: 10px; font-size: 17px; text-align: center; font-weight: 600; color: #0b2b4a; letter-spacing: 1px; }
.symbol-box span { display: inline-block; margin: 0 8px; background: white; padding: 2px 12px; border-radius: 30px; }
.logic-table, .set-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.logic-table th, .set-table th { background: #e3edf9; color: #0b2b4a; padding: 8px 10px; text-align: left; border: 1px solid #d0dcec; }
.logic-table td, .set-table td { padding: 8px 10px; border: 1px solid #d0dcec; vertical-align: top; }
.logic-table tr:hover, .set-table tr:hover { background: #f5f9fd; }
.svg-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 10px 0; background: #f0f7fc; border-radius: 16px; padding: 15px; }
.theory-source-tag { display: inline-block; font-size: 12px; font-weight: 600; color: #2a7de1; background: #eaf3fc; border-radius: 20px; padding: 3px 12px; margin-bottom: 14px; }

/* ============================================================
   TAB "TRẮC NGHIỆM" gộp 100 câu (client-side, không qua DB).
   Sao chép Y HỆT khối .quiz-*/.chip/.lab-cta-btn/.score-ring từ
   các chương Hóa (vd hoa-10-chuong-1.css) để đồng bộ giao diện
   toàn site — không dùng .quiz-* sẵn có trong tool-common.css (đó
   là cho hệ "Bộ đề" cũ qua DB). Nút bấm đã được reset
   appearance/width ở tool-common.css nên không cần lặp lại ở đâ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-item.review-ok { border-left-color: #2f9e6f; background: #e9f8f1; }
.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; }

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

/* --- Khối khoá VIP (20 câu đầu miễn phí, còn lại yêu cầu VIP) ---
   Copy nguyên từ bond-lab.css để đồng bộ với các chương Hóa. */
.quiz-locked {
  border: 1.5px dashed var(--line, #d8dbe8); border-radius: var(--radius, 12px);
  padding: 14px 18px; background: #f7f8fc; color: var(--ink, #1a1a2e); font-size: 13.5px; line-height: 1.6;
}
.quiz-locked a { color: var(--blue, #3454d1); font-weight: 700; text-decoration: none; }
.quiz-locked a:hover { text-decoration: underline; }

/* --- Ảnh tổng quan chương (infographic) ---
   Bấm ảnh mở file gốc ở tab mới (thẻ <a target="_blank">, không dùng
   modal/lightbox JS) - đúng convention .poster-* đang dùng ở Hóa 12,
   tránh việc lightbox che/vướng màn hình trên mobile.
   Khác với gallery 2 ảnh bên Hóa 12 (để full-bleed theo cột grid), ở
   đây chỉ có 1 ảnh DỌC (1024x1536) nên bó lại bằng max-width, không
   thả full ngang - tránh ảnh quá to/tràn trên cả desktop lẫn mobile. */
.infographic-card { text-align: center; }
.infographic-card .poster-link {
  display: block; max-width: 320px; margin: 0 auto;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08); position: relative;
}
.poster-link img { display: block; width: 100%; height: auto; }
.poster-link .poster-zoom-hint {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(20,20,30,0.65); color: #fff;
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
}
@media (max-width: 480px) {
  .infographic-card .poster-link { max-width: 220px; }
  .infographic-card .poster-zoom-hint { font-size: 11px; padding: 3px 8px; right: 8px; bottom: 8px; }
}