/* Timestamp: 2025-05-26 19:01:37 */
/*
related files:
- wp-content/plugins/fong_de_lms/public/css/fong-bai-tap-frontend.css
- wp-content/plugins/fong_de_lms/public/css/style-bai-tap-css/fong-bai-tap-dquiz1.css
- wp-content/plugins/fong_de_lms/public/js/fong-bai-tap-dquiz3.js
- wp-content/plugins/fong_de_lms/public/js/modules/dquiz3-handler.js
*/

@import url(./quyen-bai-tap-dquiz3-base.css);
/* @import url(./quyen-bai-tap-dquiz3-responsive.css); */

/* Container style */
.fong-dans3-options {
    width: 100%;
    margin: 0;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Item style */
.fong-dans3-item {
    
    position: relative;
    border: 2px solid #eee;
    border-radius: 16px;
    padding: 5px 15px;
    cursor: pointer;
    font-family: montserrat-bold;
    font-size: 16px;
    line-height: 24px;
    color: rgb(74, 74, 74);
    text-align: left;
    width: calc(50% - 7.5px);
    margin: 0;
    box-sizing: border-box;
    transition: all 0.3s ease;
    display: block;
    pointer-events: auto;
}

.fong-dans3-item:hover {
    border-color: #ccc;
    background: rgba(0, 0, 0, 0.02);
}

.fong-dans3-item .list-item__center {
    background: transparent;
    padding: 0;
    margin-left: 30px;
    /* Space for radio button */
}

.fong-dans3-item .list-item__left {
    background: transparent;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.fong-dans3-item .radio-button--material {
    margin-right: 10px;
}

.fong-dans3-item.checked {
    border-color: #00c8ca;
    background: #ddffff;
}

/* Responsive */
@media (max-width: 768px) {
    .fong-dans3-options {
        padding: 10px;
        gap: 10px;
    }

    .fong-dans3-item {
        width: 100%;
        margin: 0;
        padding: 10px 15px;
        font-size: 15px;
        line-height: 22px;
    }
}

/* Styles cho dquiz3 */
/* .fong-dquiz3-container {
    background: #ffff001a;
    padding: 1em;
    border: 1px solid yellow;
    border-radius: 10px;
    margin-bottom: 20px;
} */

.fong-dquiz3-container .fong-quiz-title {
    margin-bottom: 1em;
}

.fong-dquiz3-container .fong-quiz-title h4 {
    font-size: 1.1em;
    color: #333;
    margin: 0;
    padding: 0;
}

.fong-dquiz3-container .fong-quiz-content {
    margin-bottom: 1em;
}

/* Danh sách áp án */
.fong-dans3-container {
    background: transparent !important;
    margin: 1em 0;
}

.fong-dans3-container ons-list-item {
    position: relative;
    transition: background-color 0.3s ease;
    /* border-radius: 5px; */
    margin-bottom: 20px;
    cursor: pointer;
    border-radius: 15px;
    width: auto;
}

/* Radio button styles */
.fong-dans3-container .radio-button__checkmark {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: #e6e6e6;
    position: relative;
}

.fong-dans3-container .radio-button__input:checked + .radio-button__checkmark {
    background: #0067ff;
}

.fong-dans3-container .radio-button__input:checked + .radio-button__checkmark:after {
    border-color: #fff;
}

/* Đáp án đúng/sai */
.fong-dans3-container ons-list-item.fong-correct {
    background-color: #dff0d8;
}

.fong-dans3-container ons-list-item.fong-incorrect {
    background-color: #f2dede;
}

/* Kết quả (dấu ✓/✗) */
.fong-dans3-container .fong-result-space {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
}

.fong-dans3-container ons-list-item.fong-correct .fong-result-space {
    color: #3c763d;
}

.fong-dans3-container ons-list-item.fong-incorrect .fong-result-space {
    color: #a94442;
}

/* Nút kiểm tra */
.fong-dquiz3-container .fong-quiz-submit-container {
    text-align: center;
    margin-top: 1.5em;
}

.fong-dquiz3-container .fong-dquiz3-submit {
    background-color: #0067ff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.fong-dquiz3-container .fong-dquiz3-submit:hover {
    background-color: #0056b3;
}

.fong-dquiz3-container .fong-dquiz3-submit i {
    margin-right: 5px;
}

/* Container kết quả */
.fong-dquiz3-container .fong-quiz-submit-result {
    margin-top: 1em;
    padding: 10px;
    border-radius: 5px;
    display: none;
}

/* Responsive styles */
@media (max-width: 768px) {
    .fong-dquiz3-container {
        padding: 0.8em;
        border-radius: 12px;
    }

    .fong-dans3-container ons-list-item {
        padding: 8px;
        margin-bottom: 12px;
    }

    .fong-dquiz3-container .fong-dquiz3-submit {
        width: 100%;
        padding: 12px;
        font-size: 15px;
    }

    .fong-dquiz3-container .fong-quiz-title h4 {
        font-size: 1em;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .fong-dquiz3-container {
        padding: 0.6em;
        margin-bottom: 15px;
    }

    .fong-dans3-container ons-list-item {
        margin-bottom: 8px;
    }

    .fong-dans3-item {
        padding: 8px 12px;
        font-size: 14px;
        line-height: 20px;
    }

    .fong-dans3-item .list-item__center {
        margin-left: 25px;
    }

    .fong-dquiz3-container .fong-dquiz3-submit {
        padding: 10px;
        font-size: 14px;
    }
}

/**
 * <DO NOT DELETE - FOR UPDATE ONLY>
 * Chi tiết về logic xử lý của file
 *
 * 1. Cấu trúc và Tổ chức
 * - File định nghĩa styles cho dạng bài tập trắc nghiệm một lựa chọn (dquiz3)
 * - Sử dụng BEM naming convention cho class names
 * - Chia thành các section rõ ràng: container, items, responsive
 *
 * 2. Components Chính
 * - .fong-dans3-options: Container chứa danh sách lựa chọn
 * - .fong-dans3-item: Style cho từng lựa chọn
 * - .fong-dans3-container: Container cho phần danh sách đáp án
 *
 * 3. Tính năng UI/UX
 * - Hover effects trên các lựa chọn
 * - Visual feedback cho đáp án đúng/sai
 * - Radio button styling tùy chỉnh
 * - Responsive design cho mobile
 *
 * 4. States và Modifiers
 * - .checked: Trạng thái khi lựa chọn được chọn
 * - .fong-correct: Style cho đáp án đúng
 * - .fong-incorrect: Style cho đáp án sai
 *
 * 5. Responsive Breakpoints
 * - Small Mobile: <= 480px
 * - Mobile: <= 768px
 * - Desktop: > 768px
 *
 * @technical_terms
 * - Radio Button Styling
 * - Flexbox Layout
 * - BEM Methodology
 * - Responsive Design
 * - Visual Feedback
 * - State Management
 * - Mobile-first Approach
 * - CSS Transitions
 * - Box Model
 * - CSS Selectors
 * </DO NOT DELETE - FOR UPDATE ONLY>

 /* chỉ làm việc với dom có class *sfwd-topic
ví dụ: `<div class="fong-dquiz3-container fong-dquiz-container fong-dquiz-container--sfwd-topic" data-quiz-id="BT1.1.4.1" data-question-id="BT1.1.4.1" data-point="0" data-title="Phát âm tiếng Đức có mấy đặc điểm cần lưu ý?" data-...` và dom con bên trong

 */

/* Styles cho sfwd-topic - Simplified version */
/* Label styles cho sfwd-topic */
body.single-sfwd-topic .fong-dquiz3-container .center--sfwd-topic,
body.single-sfwd-topic .fong-dquiz3-container .center-label--sfwd-topic,
body.single-sfwd-topic .fong-dquiz3-container .left--sfwd-topic,
.learndash-wrapper .fong-dquiz3-container .center--sfwd-topic,
.learndash-wrapper .fong-dquiz3-container .center-label--sfwd-topic,
.learndash-wrapper .fong-dquiz3-container .left--sfwd-topic {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    width: auto !important;
    font-weight: normal !important;
}