/* ============ IQ Test Plugin - CSS dựa trên bản gốc Joomla ============ */
.iq-test-container {
    max-width: 700px;
    margin: 0 auto;
    line-height: 1;
    color: #616161;
}
.iq-clear { margin: 0; padding: 0; clear: both; }

/* --- Màn hình bắt đầu (chỉ 1 nút) --- */
.iq-start-screen {
    text-align: center;
    padding: 15px 0;
}

/* --- Nút --- */
.iq-btn {
    display: inline-block;
    padding: 13px 30px;
    font-size: 16px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
    line-height: 1;
}
.iq-btn-start {
    background: #cc1717;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 40px;
    font-size: 18px;
}
.iq-btn-start:hover { background: #b31313; }

/* --- Khung bài test --- */
.iq-test-wrap {
    background-color: #f9f9f9;
    border: #bebebe 1px solid;
    border-radius: 0;
    margin: 0 auto;
    max-width: 700px;
    color: #616161;
}
.iq-test-pad { padding: 30px 15px 15px 15px; }

/* --- Header --- */
.iq-test-header { font-size: 20px; font-weight: bold; color: #7b7b7b; }
.iq-test-name {
    font-size: 20px; font-weight: bold; color: #7b7b7b;
    float: left; line-height: 24px;
}
#iq-countdown {
    font-size: 16px; font-weight: bold; color: #FF9900;
    float: right; line-height: 24px;
}

/* --- Thanh tiến trình --- */
#iq-progressbar {
    width: 99%;
    background-color: #f1f1f1;
    padding: 2px;
    margin: 25px 0;
    border: 1px #c2c2c2 double;
    clear: both;
    box-sizing: border-box;
}
#iq-progress {
    background: #ff9000;
    height: 15px;
    width: 0%;
    max-width: 100%;
    transition: width 0.4s ease;
}

/* --- Câu hỏi + Đáp án (float như bản gốc) --- */
.iq-question-wrap { width: 100%; }
.iq-questions {
    width: calc(56% - 40px);
    margin: 20px 20px 20px 0;
    background: #FFFFFF;
    border: #c0c0c0 1px solid;
    float: left;
    box-sizing: border-box;
    border-radius: 0;
}
.iq-questions img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; }

.iq-answers {
    width: 44%;
    margin: auto;
    background: #ececec;
    border-radius: 0;
    float: right;
    box-sizing: border-box;
}
.iq-answers-pad { padding: 7% 7% 4% 7%; }

/* Mỗi đáp án: 2 ảnh/hàng, viền bằng box-shadow (không đội chỗ) */
.iq-answer-link {
    display: block;
    width: 100%;
    cursor: pointer;
    background: none;
    box-sizing: border-box;
}
.iq-answer-link img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-shadow: 0px 0px 0px 1px #c2c2c2;
    box-sizing: border-box;
    transition: box-shadow 0.2s;
    margin: 0 !important;
    padding: 0 !important;
}
.iq-answer-link:hover img,
.iq-answer-link.selected img {
    box-shadow: 0px 0px 0px 3px #FF9900;
}

/* Bố cục 2 cột cho các đáp án */
.iq-answers-pad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* --- Nút bỏ qua --- */
.iq-leave-question-div { margin: auto; text-align: center; clear: both; padding-top: 10px; }
.iq-leave-question {
    text-align: center;
    background-color: #FF9900;
    color: #fff;
    border: none;
    padding: 13px 20px;
    cursor: pointer;
    margin: 15px 0 15px 0;
    display: inline-block;
}
.iq-leave-question:hover { background: #e68a00; }

/* --- Chọn tuổi --- */
.iq-select { text-align: center; margin: 20px 0; clear: both; }
.iq-select-text { font-size: 20px; color: #7b7b7b; margin-bottom: 15px; }
.iq-select-text small { color: #999; font-size: 14px; }
.iq-age-button {
    display: block; max-width: 300px; margin: 10px auto;
    text-align: center; cursor: pointer; transition: transform 0.15s;
}
.iq-age-button span {
    display: block; background: #FF9900; color: #fff;
    padding: 14px; font-size: 16px;
}
.iq-age-button:hover { transform: scale(1.02); }
.iq-age-button:hover span { background: #e68a00; }

/* --- Kết quả --- */
.iq-test-result {
    background: #f9f9f9;
    border: 1px solid #bebebe;
    padding: 25px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
.iq-congratulation { font-size: 22px; color: #7b7b7b; margin-bottom: 10px; }
.iq-congratulation.qresult { font-size: 40px; font-weight: bold; color: #FF9900; margin: 15px 0; }
.iq-ev { font-size: 20px; color: #339900; font-weight: bold; margin-bottom: 10px; }
.iq-testid { font-size: 13px; color: #999; margin-bottom: 25px; }

/* --- Xem lại đáp án --- */
.iq-correctanswers { text-align: left; margin-top: 20px; border-top: 1px solid #ddd; padding-top: 20px; }
.iq-hereare { font-size: 16px; font-weight: bold; color: #7b7b7b; margin-bottom: 20px; text-align: center; }
.iq-question_number { font-weight: bold; color: #555; margin-bottom: 10px; clear: both; padding-top: 15px; }

/* Trong phần kết quả: câu hỏi và đáp án rộng đều nhau */
.iq-test-result .iq-questions {
    width: 48% !important;
    margin: 0 2% 20px 0 !important;
}
.iq-test-result .iq-answers {
    width: 50% !important;
    background: #ececec;
    padding: 10px;
}
.iq-test-result .iq-answers-pad { padding: 0 !important; display: block !important; }

.iq-ans-img {
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    height: auto !important;
    display: inline-block !important;
    box-shadow: 0px 0px 0px 1px #c2c2c2;
    margin: 0 4px 6px 0 !important;
    box-sizing: border-box;
    vertical-align: top;
}
.iq-ans-img.iq-correct { box-shadow: 0px 0px 0px 3px #339900; }
.iq-ans-img.iq-incorrect { box-shadow: 0px 0px 0px 3px #b80000; }

/* --- Responsive --- */
@media (max-width: 811px) {
    .iq-test-pad { padding: 15px 5px 5px 5px; }

    /* Câu hỏi và đáp án xếp dọc, căn giữa, giống bản gốc */
    .iq-questions {
        display: block !important;
        float: none !important;
        box-sizing: border-box;
        text-align: center;
        max-width: 323px;
        width: auto !important;
        margin: 0 auto 20px !important;
    }
    .iq-answers {
        display: block !important;
        float: none !important;
        box-sizing: border-box;
        text-align: center;
        max-width: 323px;
        width: 100% !important;
        margin: auto !important;
        background: none !important;
    }
    /* Đáp án: 3 cột, ảnh to đầy như demo */
    .iq-answers-pad {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
        background: none !important;
    }
    /* Xem lại kết quả: đáp án 3 cột */
    /* Xem lại kết quả: câu hỏi trên, đáp án dưới 3 cột */
    .iq-test-result .iq-questions,
    .iq-test-result .iq-answers {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 auto 15px !important;
        display: block !important;
    }
    .iq-ans-img {
        width: calc(33.333% - 8px) !important;
        max-width: calc(33.333% - 8px) !important;
    }
    /* Header căn giữa */
    .iq-test-header { text-align: center; }
    .iq-test-name, #iq-countdown { float: none; font-size: 16px; }
}