/* ===== CSS GỐC TỪ TEMPLATE - GIỮ NGUYÊN 100% ===== */
:root {
    --bg: transparent;
    --card: #fff;
    --text: #222;
    --brand: #00c4b4;
    --ok: #16a34a;
    --bad: #dc2626;
    --light-gray: #e5e7eb;
    --dark-gray: #6b7280;
}
html, body {
    background: var(--bg);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    line-height: 1.6;
    color: var(--text);
    margin: 0; padding: 0;
    scroll-behavior: smooth;
}
.quiz-container {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 5px;
    box-sizing: border-box;
    position: relative;
}
.quiz-main-container {
    position: relative;
    min-height: 400px;
    height: auto;
    background-color: transparent;
    padding: 15px 0;
}
.quiz-page { display: none; animation: fadeIn 0.4s ease; }

/* Logic điều hướng - 8 trang câu hỏi */
#page-q1:checked ~ .quiz-main-container #content-q1,
#page-q2:checked ~ .quiz-main-container #content-q2,
#page-q3:checked ~ .quiz-main-container #content-q3,
#page-q4:checked ~ .quiz-main-container #content-q4,
#page-q5:checked ~ .quiz-main-container #content-q5,
#page-q6:checked ~ .quiz-main-container #content-q6,
#page-q7:checked ~ .quiz-main-container #content-q7,
#page-q8:checked ~ .quiz-main-container #content-q8 {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.quiz-page-counter   { font-size: 13px; color: #888; margin: 0 0 10px; font-weight: 700; text-transform: uppercase; }
.quiz-question-title { font-size: 20px; font-weight: 800; color: #333; margin: 0 0 15px 0; line-height: 1.4; }
.quiz-question-desc  { color: #444; margin: 0 0 20px; font-size: 15px; }

.quiz-answer-text      { color: #333; margin: 0px; font-size: 16px; }
.quiz-answer-highlight { color: #333; font-weight: 800; }
.quiz-answer-explain   { color: #444; margin-top: 20px; margin-bottom: 20px; font-size: 15px; line-height: 1.8; }

.explain-box {
    background: transparent;
    border-left: 4px solid var(--ok);
    padding: 15px; padding-right: 0;
    margin-bottom: 20px;
}

figure.quiz-figure { margin: 20px 0; width: 100%; }
figure.quiz-figure img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 4px; }
figure.quiz-figure iframe { width: 100%; aspect-ratio: 16/9; border-radius: 4px; display: block; }
figure.quiz-figure figcaption { font-style: italic; text-align: center; font-size: 15px; color: #555; margin-top: 10px; line-height: 1.4; }

.choices      { display: flex; flex-direction: column; gap: 12px; }
.choice-item  { position: relative; }
.choice-radio { display: none; }

.choice-label {
    display: flex; align-items: center; width: 100%; padding: 12px 15px;
    background: var(--card); border: 1px solid #ddd; cursor: pointer;
    font-size: 15px; transition: all 0.2s ease; position: relative;
    user-select: none; box-sizing: border-box; padding-right: 60px;
    color: #333;
}
.choice-prefix {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 28px; height: 28px; margin-right: 12px; border-radius: 50%;
    background-color: var(--light-gray); font-weight: 700; color: var(--dark-gray);
    transition: all 0.2s ease;
}
.choice-text { flex-grow: 1; }
.percentage  {
    display: none; position: absolute; right: 15px; top: 50%;
    transform: translateY(-50%); font-size: 14px; font-weight: 800; color: var(--dark-gray);
}

.quiz-page:not(.answered) .choice-label:hover                    { background: #e6f3f2; border-color: var(--brand); }
.quiz-page:not(.answered) .choice-label:hover .choice-prefix     { background-color: var(--brand); color: white; }

.quiz-page.answered .choice-label                                 { cursor: default; opacity: 1 !important; color: #333; }
.quiz-page.answered .choice-radio:not(:checked) + .choice-label  { opacity: 1 !important; }
.quiz-page.answered .choice-label .percentage                     { display: inline-block; }

.quiz-page.answered .choice-radio[value="correct"]:checked  + .choice-label { background: var(--ok);  color: #fff; border-color: var(--ok);  }
.quiz-page.answered .choice-radio[value="correct"]:checked  + .choice-label .choice-prefix { background: #fff; color: var(--ok);  }
.quiz-page.answered .choice-radio[value="correct"]:checked  + .choice-label .percentage    { color: #fff; }

.quiz-page.answered .choice-radio[value="incorrect"]:checked + .choice-label { background: var(--bad); color: #fff; border-color: var(--bad); }
.quiz-page.answered .choice-radio[value="incorrect"]:checked + .choice-label .choice-prefix { background: #fff; color: var(--bad); }
.quiz-page.answered .choice-radio[value="incorrect"]:checked + .choice-label .percentage     { color: #fff; }

.stat-line { display: none; font-size: 13px; font-style: italic; color: #888; margin-top: 10px; margin-bottom: 5px; }
.quiz-page.answered .stat-line { display: block; }

.box-controls { margin-top: 25px; padding-top: 15px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.box-controls a { text-decoration: none; }

.btn-control     { padding: 10px 24px; border-radius: 0; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-block; transition: all 0.2s ease; text-align: center; border: 1px solid transparent; user-select: none; }
.btn-show-answer { background-color: var(--ok); color: #fff; display: none; }
.quiz-page.answered .btn-show-answer { display: inline-block; }
.btn-show-answer:hover { background-color: #15803d; }
.btn-back  { background-color: var(--bad); color: #fff; }
.btn-back:hover  { background-color: #b91c1c; }
.btn-next  { background-color: var(--ok); color: #fff; }
.btn-next:hover  { background-color: #15803d; }

.quiz-footer { display: flex; gap: 10px; margin: 20px auto 40px auto; max-width: 680px; padding: 0 5px; }
.footer-box  { flex: 1; background: var(--card); border: 1px solid #ddd; padding: 12px 15px; text-align: center; font-size: 14px; display: flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box; }
.score-box   { color: #333; font-weight: 700; text-transform: uppercase; }
#user-score  { color: var(--brand); font-weight: 800; margin-left: 5px; }
.cta-box     { background-color: #fff; color: #222; font-weight: 700; text-decoration: none; transition: all 0.2s ease; cursor: pointer; user-select: none; }
.cta-box:hover { background-color: var(--ok); color: #fff; border-color: var(--ok); }

/* ===== CSS BỔ SUNG CHO SURVEY (TỐI THIỂU) ===== */

/* Câu 7 — multi-select checkboxes */
.choice-checkbox { display: none; }

/* Visual feedback KHI ĐANG CHỌN — chưa đủ 2, chưa có .answered */
#content-q7:not(.answered) .choice-checkbox:checked + .choice-label {
    background: #e6f3f2; border-color: var(--brand);
}
#content-q7:not(.answered) .choice-checkbox:checked + .choice-label .choice-prefix {
    background-color: var(--brand); color: white;
}

/* Visual feedback SAU KHI ĐỦ 2 — có .answered */
.quiz-page.answered .choice-checkbox:checked + .choice-label {
    background: var(--brand); color: #fff; border-color: var(--brand);
}
.quiz-page.answered .choice-checkbox:checked + .choice-label .choice-prefix {
    background: #fff; color: var(--brand);
}
.quiz-page.answered .choice-checkbox:checked + .choice-label .percentage { color: #fff; }

/* Hint "đã chọn X/2" */
.multi-select-hint {
    font-size: 13px; color: var(--brand); font-weight: 700;
    margin-bottom: 12px; font-style: italic;
}

/* Ẩn stat-line cho Q7 (multi-select không có nghĩa "X% người trả lời như bạn") */
#content-q7 .stat-line { display: none !important; }

/* Q7: nút "Câu tiếp theo" chỉ hiện khi đã chọn đủ 2 (class q7-ready),
   không cần .answered — ghi Firebase xảy ra KHI BẤM NÚT, không phải khi chọn */
#content-q7.q7-ready .btn-show-answer { display: inline-block; }

/* Câu 8 — hoàn thành survey */
.survey-complete-msg {
    display: none;
    background: #f0fdf4; border: 1px solid var(--ok);
    padding: 14px 16px; margin-top: 20px;
    font-size: 15px; color: #166534; font-weight: 700; text-align: center;
}
#content-q8.answered .survey-complete-msg { display: block; }
/* Q8 là câu cuối — ẩn nút "Câu tiếp theo" sau khi trả lời */
#content-q8.answered .btn-show-answer    { display: none !important; }