/* =================================================================== */
/* CẤU TRÚC & LAYOUT CƠ BẢN (Responsive) */
/* =================================================================== */
.quiz-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background-color: #fff;
    padding: 2.5%;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    max-width: 1000px;
    margin: 20px auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);

    /* === BẮT ĐẦU THÊM MỚI ĐỂ SỬA LỖI TRÀN LỀ === */
    width: 100%; /* Đảm bảo nó chiếm toàn bộ chiều rộng của vùng chứa nó */
    box-sizing: border-box; /* Rất quan trọng: Bắt padding và border phải nằm bên trong width, không làm tăng kích thước */
    /* === KẾT THÚC THÊM MỚI === */
}

.quiz-main-layout {
    display: flex;
    flex-wrap: wrap; 
    gap: 25px;
}

.quiz-content {
    flex: 1;
    /* min-width: 300px; XÓA DÒNG NÀY ĐỂ CHO PHÉP CO LẠI TRÊN MOBILE */
    min-width: 0; /* Thêm dòng này để đảm bảo flexbox hoạt động đúng */
}

.quiz-sidebar {
    width: 100%;
    /* max-width: 300px; XÓA DÒNG NÀY */
    flex-shrink: 0;
    background-color: #f9fafb;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 30px; /* Thêm khoảng cách với phần câu hỏi ở trên */
    /* order: 1; XÓA DÒNG NÀY */
}

@media (min-width: 768px) {
    .quiz-content { 
        order: 1; 
        width: calc(100% - 305px); 
        min-width: 300px; /* <<< THÊM LẠI min-width CHO DESKTOP TẠI ĐÂY */
    }
    .quiz-sidebar { 
        order: 2; 
        width: 280px;
        max-width: 300px; /* Đặt lại max-width cho desktop */
        margin-top: 0; /* Bỏ margin-top trên desktop */
    }
}

/* =================================================================== */
/* CÁC THÀNH PHẦN GIAO DIỆN */
/* =================================================================== */
.quiz-header { border-bottom: 1px solid #e5e7eb; padding-bottom: 15px; margin-bottom: 25px; }
.quiz-header h2 { margin: 0; font-size: 24px; font-weight: 700; color: var(--primary-color, #f97316); }
.question-view h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.question-view .question-content { margin-bottom: 25px; font-size: 18px; line-height: 1.7; color: #374151; text-align: justify; }
.question-view .question-content img { max-width: 100%; max-height: 400px; object-fit: contain; height: auto; display: block; margin: 15px auto; border-radius: 8px; }
.answers-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.answers-list label { display: flex; align-items: center; padding: 15px; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; }
.answers-list label:hover { border-color: var(--primary-color, #f97316); background-color: var(--light-bg, #fffbeb); }
.answers-list input[type="radio"],
.answers-list input[type="checkbox"] { display: none; }

/* Thêm biểu tượng checkbox tùy chỉnh */
.answers-list input[type="checkbox"] + span::before {
    content: '☐';
    font-size: 22px;
    margin-right: 10px;
    color: #9ca3af;
    font-family: monospace;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.answers-list input[type="checkbox"]:checked + span::before {
    content: '☑';
    color: var(--primary-color, #f97316);
}

.answers-list label.selected { border-color: var(--primary-color, #f97316); background-color: var(--light-bg, #fffbeb); box-shadow: 0 0 0 2px var(--primary-color-light, rgba(245, 158, 11, 0.3)); }
.answers-list label.selected span { color: var(--primary-color, #f97316); font-weight: 600; }
.answers-list img { max-width: 150px; height: auto; vertical-align: middle; margin-left: 10px; }
.question-controls { margin-top: 30px; border-top: 1px solid #e5e7eb; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.question-controls .nav-buttons { display: flex; gap: 10px; }
.question-controls button { padding: 10px 20px; border: 1px solid #d1d5db; background-color: #fff; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 14px; transition: all 0.2s; color: #374151; }
.question-controls button:hover:not(:disabled) { background-color: #f3f4f6; border-color: #9ca3af; }
.question-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
.review-btn.marked { background-color: var(--review-color, #8b5cf6); color: white; border-color: var(--review-color, #8b5cf6); }
.review-btn.marked:hover { background-color: var(--review-color, #8b5cf6); opacity: 0.9; }
@media (max-width: 480px) { 
    .question-controls { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 10px; /* Thêm khoảng cách giữa các nút */
    } 
    .question-controls .nav-buttons { 
        order: 1; /* Nút Câu trước/tiếp lên trên */
        width: 100%; 
        display: grid; /* Dùng grid để chia 2 cột đều nhau */
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .question-controls .review-btn { 
        order: 2; /* Nút Kiểm tra lại xuống dưới */
        width: 100%; /* Chiếm toàn bộ chiều rộng */
    } 
}
.quiz-sidebar h4 { margin-top: 0; margin-bottom: 15px; font-size: 16px; font-weight: 600; color: #111827; }
.quiz-navigation { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 8px; max-height: 180px; overflow-y: auto; padding-right: 5px; }
.nav-item { display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; border: 1px solid #d1d5db; border-radius: 50%; cursor: pointer; background-color: #fff; font-weight: 500; transition: all 0.2s ease-in-out; }
.nav-item.current { border-color: var(--primary-color, #f97316); color: var(--primary-color, #f97316); box-shadow: 0 0 0 2px var(--primary-color-light, rgba(245, 158, 11, 0.3)); }
.nav-item.answered { background-color: var(--answered-color, #10b981); color: #fff; border-color: var(--answered-color, #10b981); }
.nav-item.review { background-color: var(--review-color, #8b5cf6); color: #fff; border-color: var(--review-color, #8b5cf6); }
.submit-btn { width: 100%; padding: 12px; margin-top: 20px; background-color: var(--primary-color, #f97316); color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }
.submit-btn:hover { opacity: 0.9; }
.quiz-legend { margin-top: 20px; border-top: 1px solid #e5e7eb; padding-top: 15px; }
.quiz-legend .legend-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; color: #4b5563; }
.legend-item .color-box { width: 15px; height: 15px; border-radius: 50%; margin-right: 8px; border: 1px solid #d1d5db; }

/* =================================================================== */
/* KẾT QUẢ PHÂN TÍCH CHI TIẾT */
/* =================================================================== */
.quiz-result { text-align: left; padding: 10px; }
.quiz-result .result-title { font-size: 28px; font-weight: 700; color: var(--primary-color, #f97316); margin-bottom: 20px; text-align: center; }
.quiz-result .result-description p { font-size: 16px; line-height: 1.8; color: #374151; margin-bottom: 25px; }
.quiz-result .result-description p strong { color: #111827; }
.quiz-result .result-description h4 { font-size: 20px; font-weight: 600; color: #111827; margin-top: 30px; margin-bottom: 15px; border-bottom: 2px solid var(--primary-color-light, #fde68a); padding-bottom: 5px; }
.quiz-result .result-description ul { list-style-type: none; padding-left: 0; }
.quiz-result .result-description ul li { position: relative; padding-left: 25px; margin-bottom: 12px; font-size: 16px; line-height: 1.7; color: #4b5563; }
.quiz-result .result-description ul li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--answered-color, #10b981); font-weight: bold; font-size: 18px; }
@media (max-width: 768px) { .quiz-result .result-title { font-size: 24px; } .quiz-result .result-description h4 { font-size: 18px; } }

/* =================================================================== */
/* LAYOUT LƯỚI CHO CÂU HỎI CÓ ẢNH (ĐÃ TỐI ƯU) */
/* =================================================================== */
.answers-grid {
    display: grid;
    /* Mặc định cho mobile, 2 cột */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* Giảm gap trên mobile */
}
/* Trên màn hình lớn hơn, chuyển thành 3 cột */
@media (min-width: 500px) {
    .answers-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}
.answer-item-grid {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}
.answer-item-grid.selected {
    border-color: var(--primary-color, #f97316);
    background-color: var(--light-bg, #fffbeb);
    box-shadow: 0 0 0 2px var(--primary-color-light, rgba(245, 158, 11, 0.3));
}
.answer-item-grid input[type="radio"] {
    opacity: 0; position: fixed; width: 0;
}
.answer-item-grid label {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px; /* Giảm padding */
    text-align: center; cursor: pointer; height: 100%;
}
.answer-item-grid label strong {
    margin-bottom: 8px;
    font-size: 14px;
}
.answer-item-grid label img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =================================================================== */
/* 10 THEME MÀU SẮC */
/* =================================================================== */
.theme-default {--primary-color: #f97316;--primary-color-light: rgba(249, 115, 22, 0.3);--light-bg: #fff7ed;--answered-color: #10b981;--review-color: #8b5cf6;}
.theme-ocean {--primary-color: #0ea5e9;--primary-color-light: rgba(14, 165, 233, 0.3);--light-bg: #f0f9ff;--answered-color: #22c55e;--review-color: #a855f7;}
.theme-forest {--primary-color: #16a34a;--primary-color-light: rgba(22, 163, 74, 0.3);--light-bg: #f0fdf4;--answered-color: #16a34a;--review-color: #d946ef;}
.theme-royal {--primary-color: #7c3aed;--primary-color-light: rgba(124, 58, 237, 0.3);--light-bg: #f5f3ff;--answered-color: #10b981;--review-color: #ec4899;}
.theme-ruby {--primary-color: #e11d48;--primary-color-light: rgba(225, 29, 72, 0.3);--light-bg: #fff1f2;--answered-color: #14b8a6;--review-color: #6366f1;}
.theme-slate {--primary-color: #475569;--primary-color-light: rgba(71, 85, 105, 0.3);--light-bg: #f8fafc;--answered-color: #059669;--review-color: #d946ef;}
.theme-amber {--primary-color: #d97706;--primary-color-light: rgba(217, 119, 6, 0.3);--light-bg: #fffbeb;--answered-color: #0d9488;--review-color: #7c3aed;}
.theme-fuchsia {--primary-color: #c026d3;--primary-color-light: rgba(192, 38, 211, 0.3);--light-bg: #fdf4ff;--answered-color: #22c55e;--review-color: #3b82f6;}
.theme-teal {--primary-color: #0d9488;--primary-color-light: rgba(13, 148, 136, 0.3);--light-bg: #f0fdfa;--answered-color: #16a34a;--review-color: #ef4444;}
.theme-indigo {--primary-color: #4338ca;--primary-color-light: rgba(67, 56, 202, 0.3);--light-bg: #eef2ff;--answered-color: #10b981;--review-color: #f59e0b;}

.quiz-legend .answered .color-box { background-color: var(--answered-color); }
.quiz-legend .review .color-box { background-color: var(--review-color); }

/* =================================================================== */
/* MÀN HÌNH BẮT ĐẦU (MỚI) */
/* =================================================================== */
.quiz-start-screen {
    text-align: center;
    padding: 10px 5px;
}
.quiz-start-screen h2 {
    font-size: 22px;
    color: var(--primary-color, #f97316);
    margin-bottom: 15px;
    font-weight: bold;
}
.quiz-start-screen p {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.7;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.age-input-container {
    margin: 30px 0;
}
.age-input-container label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}
.age-input-container input {
    padding: 10px;
    width: 120px;
    text-align: center;
    font-size: 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}
.start-quiz-btn {
    padding: 10px 20px;
    background-color: var(--primary-color, #f97316);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}
.start-quiz-btn:hover {
    opacity: 0.9;
}

/* =================================================================== */
/* LAYOUT THANG ĐIỂM EQ (LIKERT SCALE) */
/* =================================================================== */

/* Áp dụng các style đặc biệt khi container có thuộc tính data-quiz-layout="likert" */
.quiz-container[data-quiz-layout="likert"] .question-view {
    background-color: #fdfcfb;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #f3f0ec;
}

/* Wrapper chính cho thang điểm */
.answers-likert-scale {
    max-width: 560px;
    margin: 30px auto;
}

/* Container chứa các ô số */
.likert-options {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

/* Style cho từng ô số riêng lẻ */
.likert-option-item {
    flex: 1;
    text-align: center;
    border-left: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.likert-option-item:first-child {
    border-left: none;
}
.likert-option-item input[type="radio"] {
    display: none; /* Ẩn nút radio gốc */
}
.likert-option-item .likert-number {
    display: block;
    padding: 12px 18px;
    font-weight: 500;
    font-size: 16px;
}

/* Hiệu ứng khi di chuột vào */
.likert-option-item:hover {
    background-color: var(--light-bg, #fffbeb);
}

/* Style cho ô được chọn */
.likert-option-item.selected {
    background-color: var(--primary-color, #f97316);
}
.likert-option-item.selected .likert-number {
    color: #fff;
}

/* Container cho 2 nhãn mô tả ở dưới (ĐÃ CẬP NHẬT) */
.likert-labels {
    display: grid; /* Chuyển sang dùng Grid */
    grid-template-columns: repeat(7, 1fr); /* Tạo ra 7 cột bằng nhau */
    padding: 10px 0 0 0;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* Căn chỉnh cho nhãn bên trái (Hoàn toàn không đồng ý) */
.likert-labels .likert-label-left {
    grid-column: 1 / 2; /* Đặt vào cột đầu tiên */
    text-align: center; /* Căn giữa trong cột của nó */
}

/* Căn chỉnh cho nhãn bên phải (Hoàn toàn đồng ý) */
.likert-labels .likert-label-right {
    grid-column: 7 / 8; /* Đặt vào cột thứ bảy */
    text-align: center; /* Căn giữa trong cột của nó */
}

/* Điều chỉnh cho màn hình nhỏ (mobile) */
@media (max-width: 480px) {
    .answers-likert-scale {
        max-width: 100%;
    }
    .likert-option-item .likert-number {
        padding: 10px 8px;
        font-size: 14px;
    }
    .likert-labels {
        font-size: 11px;
    }
}

/* Điều chỉnh vị trí các nút điều khiển cho layout này */
.quiz-container[data-quiz-layout="likert"] .question-controls {
    justify-content: flex-end;
}

/* =================================================================== */
/* GIỚI THIỆU BÀI QUIZ (MỚI) */
/* =================================================================== */
.quiz-intro-text {
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    text-align: justify;
    color: #374151;
    font-size: 15px;
    line-height: 1.7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.quiz-intro-text p {
    margin-top: 0;
    margin-bottom: 1em;
}
.quiz-intro-text p:last-child {
    margin-bottom: 0;
}
.quiz-intro-text ul, .quiz-intro-text ol {
    padding-left: 20px;
    margin-bottom: 1em;
}
.quiz-intro-text strong {
    color: #111827;
}

/* =================================================================== */
/* Wrapper cho toàn bộ Quiz (MỚI) */
/* =================================================================== */
.my-quiz-wrapper {
    position: relative; /* Cần thiết cho việc định vị */
}

/* =================================================================== */
/* Style cho Header Ghim (MỚI) */
/* =================================================================== */
.quiz-start-header {
    text-align: center;
    padding-top: 10px; /* Thêm padding để không quá sát */
    background: #fff; /* Nền trắng để che nội dung bên dưới */
    transition: box-shadow 0.2s ease-in-out;
}

.quiz-start-header h2 {
    margin-bottom: 15px;
}

.quiz-start-header.quiz-header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 15px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.quiz-header-placeholder {
    display: none; /* Ban đầu ẩn đi */
}


/* =================================================================== */
/* Tinh chỉnh lại màn hình bắt đầu */
/* =================================================================== */
.quiz-start-screen {
    text-align: center;
}
.quiz-start-screen .start-quiz-btn {
    margin: 0;
}
.quiz-intro-text {
    margin-top: 25px; /* Tăng khoảng cách với header */
}
/* =================================================================== */
/* Tinh chỉnh mobile*/
/* =================================================================== */
@media (max-width: 780px) {
    .quiz-start-header h2 {
        font-size: 18px;
    }

    
    .start-quiz-btn {
        font-size: 14px;
}
}

/* =================================================================== */
/* NÂNG CẤP GIAO DIỆN MÀN HÌNH BẮT ĐẦU V3 (Sửa lỗi & Thêm Border) */
/* =================================================================== */

/* 1. Style lại toàn bộ container để có nhiều không gian hơn */
.quiz-container {
    padding: 15px; /* Giảm padding trên mobile */
    box-shadow: 0 10px 25px rgba(0,0,0,0.07);
}
@media (min-width: 768px) {
    .quiz-container {
        padding: 40px 50px;
    }
}

/* 2. Style lại Tiêu đề chính */
.quiz-start-screen h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1a2a4d; 
    margin-bottom: 8px;
    line-height: 1.3;
}
@media (min-width: 768px) {
    .quiz-start-screen h2 {
        font-size: 36px;
    }
}

/* 3. Style lại Nút "Bắt đầu" */
.quiz-start-screen .start-quiz-btn {
    font-size: 16px;
    font-weight: bold;
    padding: 14px 35px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    margin-top: 5px;
    box-shadow: 0 4px 15px var(--primary-color-light);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.quiz-start-screen .start-quiz-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px var(--primary-color-light);
}

/* 4. Style lại khung nội dung giới thiệu (THAY ĐỔI LỚN) */
.quiz-intro-text {
    background-color: #fff; /* Nền trắng để nổi bật */
    border: 1px solid #eaf0f6; /* Viền mỏng, sáng màu */
    border-top: 4px solid var(--primary-color, #f97316); /* Viền trên làm điểm nhấn màu sắc */
    border-radius: 12px; /* Bo góc mềm mại */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); /* Bóng đổ tinh tế */
    padding: 25px 30px; /* Thêm khoảng trống bên trong */
    max-width: 720px; /* Giới hạn chiều rộng */
    margin: 30px auto 40px auto; /* Canh giữa và tạo khoảng cách */
    text-align: justify; /* Canh lề trái nội dung bên trong cho dễ đọc */
}

/* 5. Style lại "phụ đề" */
.quiz-intro-text p:first-of-type {
    font-size: 18px;
    font-weight: 500;
    color: var(--primary-color, #f97316); 
    margin-bottom: 20px;
}

/* 6. Sửa lỗi hiển thị chữ (THAY ĐỔI QUAN TRỌNG) */
.quiz-intro-text ul {
    /* Bỏ display: inline-block để ul trở về dạng block, tự động xuống hàng */
    padding-left: 20px;
    margin-bottom: 1em;
}

.question-view {
    background-color: #fff; /* Thêm nền trắng */
    border: 1px solid #f0eadd; /* Viền màu nhạt hơn */
    padding: 25px 20px; /* Tăng padding */
    border-radius: 12px; /* Bo góc mềm mại hơn */
    box-shadow: 0 5px 20px rgba(0,0,0,0.07); /* Đổ bóng tinh tế */
}

/* =================================================================== */
/* BOX MIỄN TRỪ TRÁCH NHIỆM (TỰ ĐỘNG THEO THEME) */
/* =================================================================== */
.quiz-disclaimer-box {
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563; /* Giữ màu chữ trung tính để dễ đọc */
    background-color: var(--light-bg, #f8f9fa); /* Dùng màu nền sáng của theme */
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--primary-color, #f97316); /* Dùng màu chính của theme */
    padding: 15px 20px;
    border-radius: 8px;
    margin: 30px auto 0 auto;
    max-width: 700px;
    text-align: left;
    text-align: justify;
}

.quiz-result + .quiz-disclaimer-box {
    margin-top: 40px; /* Thêm khoảng cách với phần kết quả */
    max-width: 100%;
}

.quiz-disclaimer-box p:last-child {
    margin-bottom: 0;
}

/* =================================================================== */
/* NÂNG CẤP GIAO DIỆN KẾT QUẢ MI (CHUYÊN NGHIỆP) */
/* =================================================================== */

/* 1. Biến thẻ div chứa kết quả thành một "card" có chiều sâu */
.quiz-result {
    background-color: #ffffff;
    border: 1px solid #eaf0f6;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 30px 40px;
    text-align: left; /* Đảm bảo nội dung căn trái */
}

/* 2. Tinh chỉnh lại khu vực biểu đồ */
.mi-result-chart {
    border: none;
    background-color: transparent;
    padding: 0;
    margin-bottom: 40px;
}

/* Tiêu đề của biểu đồ */
.mi-result-chart h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: 700;
    color: #1a2a4d; /* Màu xanh đen chuyên nghiệp */
}

.mi-chart-item {
    display: grid; /* Dùng Grid để căn chỉnh linh hoạt */
    grid-template-columns: 130px 1fr 30px; /* Label | Bar | Score */
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

/* Nhãn (Logic-Toán học, Vận động,...) */
.mi-chart-label {
    width: auto; /* Bỏ width cố định */
    font-weight: 500;
    font-size: 15px;
    text-align: left;
    color: #334155; /* Xám đậm */
}

/* Thanh nền màu xám nhạt (quan trọng) */
.mi-chart-bar-container {
    background-color: #f1f5f9; /* Màu nền xám nhạt */
    border-radius: 6px;
    height: 12px;
}

/* Thanh màu cam thể hiện điểm số */
.mi-chart-bar {
    height: 100%;
    border-radius: 6px;
    background-color: var(--primary-color, #f97316); /* Vẫn dùng màu theme */
}

/* Điểm số ở cuối */
.mi-chart-score {
    font-weight: 600;
    font-size: 15px;
    color: #334155;
    text-align: right;
}

/* 3. Tinh chỉnh lại khu vực diễn giải kết quả */

/* Tiêu đề chung "Các loại hình..." */
.quiz-result > h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1a2a4d;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaf0f6;
}

.mi-explanation-item {
    padding: 20px 0;
    border-bottom: 1px solid #eaf0f6;
}
.mi-explanation-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Tiêu đề của mỗi loại trí thông minh */
.mi-explanation-item h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color, #f97316); /* Dùng màu theme */
    margin-top: 0;
    margin-bottom: 8px;
}

/* Phần diễn giải chi tiết */
.mi-explanation-item p {
    font-size: 16px;
    line-height: 1.7;
    color: #475569; /* Xám vừa, dễ đọc */
    margin-bottom: 0;
}

/* 4. Tinh chỉnh cho màn hình điện thoại */
@media (max-width: 600px) {
    .quiz-result {
        padding: 20px;
    }
    .mi-chart-item {
        grid-template-columns: 90px 1fr 25px; /* Thu nhỏ cột label */
        gap: 10px;
    }
    .mi-chart-label, .mi-chart-score {
        font-size: 13px;
    }
}

/* Tùy chỉnh giao diện cho Trắc nghiệm Tình yêu */
.quiz-container[data-quiz-type="love"] .answers-list label {
    border-radius: 8px;
    border-color: #fce7f3; /* Viền hồng nhạt */
    background-color: #fdf2f8; /* Nền hồng rất nhạt */
}

.quiz-container[data-quiz-type="love"] .answers-list label:hover {
    border-color: #f9a8d4;
    background-color: #fce7f3;
}

.quiz-container[data-quiz-type="love"] .answers-list li.selected label {
    border-color: #ec4899; /* Viền hồng đậm */
    background-color: #fce7f3;
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3);
}

.quiz-container[data-quiz-type="love"] .answers-list li.selected label span {
    color: #be185d; /* Chữ hồng đậm khi được chọn */
    font-weight: 600;
}

/* =================================================================== */
/* STYLE CHO PHẦN KẾT LUẬN BIG FIVE (MỚI) */
/* =================================================================== */
.big-five-summary {
    background-color: var(--light-bg, #f8f9fa);
    border-left: 5px solid var(--primary-color, #f97316);
    border-radius: 8px;
    padding: 20px 25px;
    margin: 40px 0; /* Tạo khoảng cách với biểu đồ và diễn giải */
}

.big-five-summary h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color, #f97316);
}

.big-five-summary p {
    font-size: 16px;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 0;
}

/* Đổi tên tiêu đề của phần diễn giải chi tiết */
.explanation-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a2a4d;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaf0f6;
}

/* =================================================================== */
/* BLOCK THỐNG KÊ & CTA (MỚI) */
/* =================================================================== */
.quiz-stats-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 15px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.stats-views, .stats-rating {
    font-size: 14px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
    background-color: #f3f4f6;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stats-rating .stars-outer {
    position: relative;
    display: inline-block;
}

.stats-rating .stars-outer::before {
    content: '★★★★★';
    color: #e5e7eb; /* Màu sao rỗng */
}

.stats-rating .stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
}

.stats-rating .stars-inner::before {
    content: '★★★★★';
    color: #f59e0b; /* Màu vàng của sao */
}

.stats-rating strong {
    color: #111827;
    margin-left: 2px;
}

.stats-rating .votes {
    font-size: 13px;
    color: #6b7280;
    margin-left: 4px;
}

@media (max-width: 480px) {
    .quiz-stats-block {
        gap: 8px;
    }
    .stats-views, .stats-rating {
        font-size: 13px;
        padding: 5px 10px;
    }
}

/* =================================================================== */
/* KHỐI CÁC QUIZ LIÊN QUAN (MỚI) */
/* =================================================================== */
.related-quizzes {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #eaf0f6;
}

.related-quizzes-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #1a2a4d;
    margin-top: 0;
    margin-bottom: 30px;
}

.related-quizzes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.related-quiz-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 30px 20px;
    min-height: 120px;
    transition: all 0.2s ease-in-out;
}

.related-quiz-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: var(--primary-color, #f97316);
}

.related-quiz-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #334155;
}

.related-quiz-item:hover .related-quiz-title {
    color: var(--primary-color, #f97316);
}

@media (min-width: 768px) {
    .related-quizzes-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .related-quiz-title {
        font-size: 17px;
    }
}

/* =================================================================== */
/* NÚT BẤM CÓ SPINNER (MỚI) */
/* =================================================================== */

/* Style cho nút bấm khi đang tải */
.submit-btn.is-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Khoảng cách giữa spinner và chữ */
    cursor: wait;
    opacity: 0.9;
}

/* Định nghĩa spinner */
.mq-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3); /* Vòng tròn mờ */
    border-top-color: #fff; /* Phần quay có màu trắng */
    border-radius: 50%;
    animation: mq-rotate 0.8s linear infinite;
}

/* Hiệu ứng quay */
@keyframes mq-rotate {
    to {
        transform: rotate(360deg);
    }
}