/**
 * EQP Frontend Styles
 * * SỬA LỖI (11/11/2025): Tăng min-height cho module Interactive Matching
 * để 2 cột cân đối hơn.
 */

/* --- Container Quiz Set chung --- */
.eqp-quiz-set {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
}

/* --- Countdown Timer --- */
.eqp-countdown-timer {
    background-color: #ffe0b2;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    color: #e65100;
}

.eqp-countdown-timer.is-low-time {
    background-color: #ffcdd2;
    color: #b71c1c;
    animation: eqp-pulse 1s infinite alternate;
}

@keyframes eqp-pulse {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.8;
    }
}

/* --- Trang Bắt đầu (Start Screen) --- */
[id^="eqp-start-screen-"] { 
    text-align: center;
    padding: 30px;
}

[id^="eqp-start-screen-"] h2 {
    color: #333;
    margin-bottom: 15px;
}

[id^="eqp-start-screen-"] .eqp-intro-text {
    background-color: #fff;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 25px;
    text-align: left;
    white-space: pre-wrap; 
}

/* --- NÚT BẮT ĐẦU QUIZ --- */
.eqp-start-button {
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.eqp-start-button:hover {
    background-color: #0056b3;
}


/* --- Khu vực Câu hỏi --- */
.eqp-question {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.eqp-question-title {
    margin-top: 0;
    color: #444;
    font-size: 1.15em;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px dotted #eee;
}

.eqp-hint {
    display: block;
    font-style: italic;
    color: #777;
    margin-bottom: 10px;
    font-size: 0.9em;
}

/* --- Danh sách Lựa chọn (SC/MC) --- */
.eqp-options-list {
    margin-top: 15px;
}

.eqp-option-item {
    display: block;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
}

.eqp-option-label {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.15s, border-color 0.15s;
    user-select: none;
    line-height: 1.4;
}

.eqp-option-label:hover {
    background-color: #f0f8ff;
    border-color: #9bd7ff;
}

.eqp-radio-input,
.eqp-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.eqp-option-marker {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #aaa;
    margin-right: 10px;
    flex-shrink: 0;
    position: relative;
}

.eqp-module-single-choice .eqp-option-marker {
    border-radius: 50%;
}
.eqp-module-multiple-choice .eqp-option-marker {
    border-radius: 4px;
}

.eqp-radio-input:checked + .eqp-option-label,
.eqp-checkbox-input:checked + .eqp-option-label {
    background-color: #e6f7ff;
    border-color: #1890ff;
}

.eqp-radio-input:checked + .eqp-option-label .eqp-option-marker,
.eqp-checkbox-input:checked + .eqp-option-label .eqp-option-marker {
    border-color: #1890ff;
    background-color: #1890ff;
}

.eqp-radio-input:checked + .eqp-option-label .eqp-option-marker:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.eqp-checkbox-input:checked + .eqp-option-label .eqp-option-marker:after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 10px;
    transform: translate(-50%, -50%);
    line-height: 1;
}

/* --- Style cho Module Fill in the Blanks --- */
.eqp-question-title-fill {
    display: flex;
    align-items: center; 
    flex-wrap: wrap; 
    font-size: 1.15em; 
    font-weight: 600;
    color: #444;
    line-height: 1.6;
}
.eqp-question-title-fill .eqp-question-number {
    margin-right: 8px; 
}
.eqp-question-title-fill .eqp-question-text {
    flex: 1;
}
.eqp-fill-in-the-blanks-input {
    font-size: 1em; 
    font-weight: normal; 
    color: #333;
    border: none;
    border-bottom: 2px solid #007bff; 
    background-color: transparent; 
    padding: 4px 8px;
    margin: 0 5px; 
    transition: border-color 0.2s, box-shadow 0.2s, width 0.1s ease-out;
    min-width: 50px;
    width: 50px; /* JS sẽ tự động cập nhật độ rộng này */
}
.eqp-fill-in-the-blanks-input:focus {
    outline: none; 
    border-bottom-color: #0056b3; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.eqp-correct-answer-display {
    font-weight: bold;
    color: #28a745;
    margin-top: 10px;
}


/* --- Style cho Module Select Matching (Dropdown) --- */
.eqp-select-matching-row {
    display: flex; /* Hiển thị 2 cột ngang hàng */
    align-items: center;
    gap: 15px; 
    margin-bottom: 10px;
}
.eqp-select-matching-row .eqp-matching-item-fixed {
    flex: 1; 
    margin-bottom: 0; 
    background-color: #f0f0f0; 
    border-style: dashed;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px;
    line-height: 1.4;
    min-height: 40px; 
    display: flex;
    align-items: center;
}
.eqp-select-matching-row .eqp-matching-column-b {
    flex: 1; 
    min-height: auto; 
}
.eqp-select-matching-input {
    width: 100%;
    padding: 8px;
    font-size: 1em;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
}


/* --- Style cho Module Select the Words --- */
.eqp-module-select-the-words .eqp-question-title-fill {
    /* Tái sử dụng style của Fill in the Blanks */
}
.eqp-select-the-words-input {
    padding: 4px 6px;
    font-size: 0.95em; /* Nhỏ hơn một chút so với text */
    margin: 0 4px;
    border-radius: 4px;
    border: 1px solid #007bff;
    background-color: #f0f8ff;
    font-weight: bold;
    color: #0056b3;
}


/* --- Nút Submit & Restart (Dùng Class CSS chung) --- */
.eqp-submit-area {
    text-align: center;
    margin-top: 30px;
}
.eqp-submit-quiz-button {
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.eqp-submit-quiz-button:hover:not(:disabled) {
    background-color: #1e7e34;
}
.eqp-submit-quiz-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Khu vực Kết quả & Phản hồi (Feedback Area) --- */
.eqp-results-display {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    border: 2px solid #007bff;
    border-radius: 8px;
    background-color: #e9f5ff;
}
.eqp-results-display h3 {
    color: #0056b3;
    font-size: 1.5em;
    margin-top: 0;
}
.eqp-restart-quiz-button {
    display: inline-block;
    padding: 10px 25px;
    font-size: 1.1em;
    font-weight: 700;
    margin-top: 15px;
    cursor: pointer;
    background-color: #008CBA; 
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, transform 0.1s;
}
.eqp-restart-quiz-button:hover {
    background-color: #007bb0;
    transform: translateY(-1px); 
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.eqp-restart-quiz-button:active {
    background-color: #005a8a;
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- Phản hồi chi tiết (Per-Question Feedback) --- */
.eqp-feedback-area {
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px dotted #ccc;
}
.eqp-result-message {
    font-weight: bold;
    margin: 5px 0;
}
.eqp-explanation-content {
    background-color: #fff3cd; 
    border-left: 5px solid #ffc107; 
    padding: 10px;
    margin-top: 10px;
    border-radius: 3px;
}
.eqp-question.is-correct {
    border-left: 5px solid #28a745;
}
.eqp-question.is-incorrect {
    border-left: 5px solid #dc3545;
}

/* Đánh dấu các lựa chọn (SC/MC/Matching) */
.eqp-option-label.is-correct-answer { 
    background-color: #c3e6cb !important;
    border-color: #28a745 !important;
    font-weight: bold;
}
.eqp-option-label.is-user-correct {
    background-color: #c3e6cb !important;
    border-color: #28a745 !important;
}
.eqp-option-label.is-user-incorrect{ 
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
}
.eqp-module-multiple-choice .eqp-option-item .eqp-option-label.is-correct-answer.is-user-correct{
    background-color: #c3e6cb !important;
    border-color: #28a745 !important;
}

.eqp-module-multiple-choice .eqp-option-item .eqp-option-label.is-user-incorrect{
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
}

/* Phản hồi cho Select Matching */
.eqp-select-matching-input.is-correct-answer {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
}
.eqp-select-matching-input.is-user-incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
}

/* Phản hồi cho Select the Words */
.eqp-select-the-words-input.is-correct-answer {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724;
}
.eqp-select-the-words-input.is-user-incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24;
}


/* --- CSS cho Module True/False Set (Frontend) --- */
.eqp-true-false-set-table {
    display: grid; 
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden; 
}
.eqp-tf-table-header {
    display: grid;
    grid-template-columns: 1fr 80px 80px; 
    background-color: #f7f7f7;
    font-weight: bold;
}
.eqp-tf-table-header .eqp-tf-cell-option {
    text-align: center;
    padding: 10px;
    border-left: 1px solid #ccc;
}
.eqp-tf-table-header .eqp-tf-cell-statement {
    padding: 10px 15px;
}
.eqp-tf-table-body {
    display: contents;
}
.eqp-tf-table-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    border-top: 1px solid #eee;
}
.eqp-tf-table-row:nth-child(even) {
    background-color: #fdfdfd;
}
.eqp-tf-cell-statement {
    padding: 15px;
    display: flex;
    align-items: center;
}
.eqp-tf-cell-option {
    padding: 15px;
    display: flex;
    justify-content: center; 
    align-items: center;
    border-left: 1px solid #eee;
}
.eqp-tf-label {
    padding: 0; 
    border: none; 
    background: none; 
    width: 18px; 
    height: 18px;
}
.eqp-tf-label .eqp-option-marker {
    margin-right: 0; 
}
.eqp-tf-input:checked + .eqp-tf-label {
    background: none;
    border: none;
}
.eqp-tf-table-row.is-incorrect-row {
    background-color: #f8d7da; 
}
.eqp-tf-input.is-correct-answer + .eqp-tf-label .eqp-option-marker {
    background-color: #28a745 !important; 
    border-color: #28a745 !important;
}
.eqp-tf-input.is-user-incorrect + .eqp-tf-label .eqp-option-marker {
    background-color: #dc3545 !important; 
    border-color: #dc3545 !important;
}

/* --- CSS cho Module Sentence Ordering (Frontend) --- */
.eqp-ordering-container {
    border: 1px dashed #ccc;
    background-color: #fafafa;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
}
.eqp-ordering-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.eqp-ordering-item:last-child {
    margin-bottom: 0;
}
.eqp-drag-handle-ordering {
    color: #888;
    margin-right: 10px;
}
.eqp-ordering-item-content {
    line-height: 1.4;
}
.eqp-ordering-placeholder {
    border: 2px dashed #007cba;
    background-color: #f0f8ff;
    height: 40px;
    margin-bottom: 8px;
    border-radius: 4px;
}
.eqp-correct-answer-display .eqp-ordering-item {
    cursor: default;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.eqp-correct-answer-display .eqp-drag-handle-ordering {
    display: none;
}

/* --- CSS cho Module Drag the Words (Frontend) --- */
.eqp-dtw-answer-zone {
    border: 2px dashed #007cba;
    background-color: #f0f8ff;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    min-height: 50px; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
}
.eqp-dtw-word-bank {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.eqp-dtw-item {
    background-color: #b0d9f0; 
    border: 1px solid #99c2db;
    color: #1f3c50;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: grab;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    user-select: none; 
}
.eqp-dtw-placeholder {
    background-color: #fff;
    border: 2px dashed #ccc;
    border-radius: 4px;
    margin: 8px 0; 
    box-sizing: border-box; 
    visibility: visible !important;
}
.eqp-correct-answer-display .eqp-dtw-answer-zone {
    border-color: #28a745;
    background-color: #d4edda;
}
.eqp-correct-answer-display .eqp-dtw-item {
    cursor: default;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
}

/* --- CSS cho Module Drag to Blanks (Frontend) --- */
.eqp-dtb-word-bank {
    border: 2px solid #007cba;
    background-color: #f0f8ff;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
    min-height: 40px; 
}
.eqp-dtb-question-content {
    font-size: 1.1em;
    line-height: 2.8; 
}
.eqp-dtb-blank-zone {
    display: inline-block; 
    vertical-align: middle; 
    min-width: 60px;
    width: auto; 
    min-height: 38px; 
    border: 1px solid #ccc;
    border-bottom: 2px solid #888;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin: 0 4px;
    padding: 4px; 
    box-sizing: border-box;
}
.eqp-dtb-item {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: grab;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    user-select: none;
    font-size: 0.9em; 
    line-height: 1.5; 
    display: inline-block; 
    margin: 0;
}
.eqp-dtb-placeholder {
    background-color: #fff;
    border: 2px dashed #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    visibility: visible !important;
    margin: 0; 
    padding: 0;
}
.eqp-dtb-blank-zone .eqp-dtb-item {
    background-color: #b0d9f0; 
    border-color: #99c2db;
}
.eqp-dtb-correct-answer-text {
    font-size: 0.85em;
    color: #28a745;
    font-weight: bold;
    margin-left: 5px;
}
.eqp-dtb-blank-zone.is-incorrect-row {
    background-color: #f8d7da; 
    border-color: #dc3545;
}
.eqp-dtb-blank-zone.is-incorrect-row .eqp-dtb-item {
    background-color: #f5c6cb; 
    border-color: #dc3545;
}

/* --- SỬA LỖI (11/11/2025): CSS cho Module Interactive Matching (Frontend) --- */

.eqp-im-container {
    display: flex;
    justify-content: space-between;
    /* SỬA LỖI: Dùng 'stretch' để 2 cột cao bằng nhau */
    align-items: stretch; 
    margin-top: 20px;
    position: relative; /* Cho phép các đường line định vị */
}

.eqp-im-column {
    width: 45%; /* Mỗi cột chiếm 45% */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các item */
}

.eqp-im-item {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    min-height: 50px; 
    justify-content: center; /* Căn giữa nội dung bên trong item */
}

.eqp-im-content {
    padding: 10px;
    flex-grow: 1; /* Cho nội dung co giãn */
    overflow: hidden; 
    /* SỬA LỖI: Căn giữa nội dung text */
    display: flex;
    align-items: center;
    z-index: 2; /* Text nổi lên trên dây */
    position: relative;
}
.eqp-im-content img,
.eqp-im-content video,
.eqp-im-content audio {
    max-width: 100%;
    min-height: 50px;
    display: block;
    margin: 0 auto; /* Căn giữa media nếu cột A căn phải */
}
/* Đảm bảo audio/video hiển thị tốt */
.eqp-im-content audio {
    width: 100%;
}

/* "Điểm Neo" (Node) để click */
.eqp-im-node {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid #007cba;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0; /* Không bị co lại */
}

.eqp-im-column-a .eqp-im-node {
    margin-right: 10px;
    order: 2; /* Đẩy node sang bên phải nội dung */
}
.eqp-im-column-a .eqp-im-content {
    order: 1;
    text-align: right; /* Căn phải cho Cột A */
    /* SỬA LỖI: Căn giữa nội dung Cột A */
    justify-content: flex-end; 
}

.eqp-im-column-b .eqp-im-node {
    margin-left: 10px;
    order: 1;
}
.eqp-im-column-b .eqp-im-content {
    order: 2;
     /* SỬA LỖI: Căn giữa nội dung Cột B */
    justify-content: flex-start;
}

/* Trạng thái khi click */
.eqp-im-node.is-selected {
    background-color: #007cba;
    border-color: #005a8a;
}
/* Trạng thái khi chấm điểm xong */
.eqp-im-node.is-disabled {
    cursor: default;
    opacity: 0.6;
    pointer-events: none; /* Chặn click tuyệt đối */
}

/* Vùng chứa các đường line (SVG) */
.eqp-im-line-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ẩn các đường line thừa */
    pointer-events: none; /* Cho phép click xuyên qua */
    z-index: 1; /* Nằm dưới text nhưng trên nền */
}

/* Style cho các đường line (từ thư viện LeaderLine) */
.leader-line {
    transition: all 0.2s;
}

/* --- BỔ SUNG MỚI: CSS cho Module Mark the Words (Frontend) --- */

.eqp-mtw-passage-container {
    font-size: 1.1em;
    line-height: 2.2; /* Tăng khoảng cách dòng */
    padding: 15px;
    background-color: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-top: 15px;
}

.eqp-mtw-word {
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    border: 1px solid transparent;
    margin: 0 1px; /* Khoảng cách nhỏ giữa các từ */
    white-space: pre-wrap; /* Giữ nguyên khoảng trắng nếu có trong cụm từ */
}

.eqp-mtw-word:hover {
    background-color: #f0f8ff;
    border-color: #b0d9f0;
}

/* Trạng thái khi người dùng CHỌN */
.eqp-mtw-word.is-selected {
    background-color: #b0d9f0;
    border-color: #007cba;
    color: #005a8a;
    font-weight: bold;
}

/* === Phản hồi khi chấm điểm === */

/* Từ ĐÚNG mà người dùng CHỌN ĐÚNG */
.eqp-mtw-word.is-user-correct {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724 !important;
    font-weight: bold;
}

/* Từ SAI mà người dùng CHỌN SAI */
.eqp-mtw-word.is-user-incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24 !important;
    font-weight: bold;
}

/* Từ ĐÚNG mà người dùng BỎ SÓT */
.eqp-mtw-word.is-missed-correct {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
    opacity: 0.8;
}

/* --- BỔ SUNG MỚI: CSS cho Module Dropdown Select (Frontend) --- */

.eqp-dds-passage-container {
    font-size: 1.1em;
    line-height: 2.5; /* Tăng chiều cao dòng để dropdown không bị đè */
    padding: 10px;
    background-color: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-top: 15px;
}

.eqp-dropdown-select-input {
    padding: 4px 6px;
    font-size: 0.95em;
    margin: 0 4px;
    border-radius: 4px;
    border: 1px solid #007bff;
    background-color: #f0f8ff;
    font-weight: bold;
    color: #0056b3;
    vertical-align: middle; /* Căn giữa với text */
}

/* === Phản hồi khi chấm điểm === */

.eqp-dropdown-select-input.is-correct-answer {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724;
}

.eqp-dropdown-select-input.is-user-incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24;
}

/* --- BỔ SUNG MỚI: CSS cho Module Dropdown Select (Frontend) --- */

.eqp-dds-passage-container {
    font-size: 1.1em;
    line-height: 2.5; /* Tăng chiều cao dòng để dropdown không bị đè */
    padding: 10px;
    background-color: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-top: 15px;
}

.eqp-dropdown-select-input {
    padding: 4px 6px;
    font-size: 0.95em;
    margin: 0 4px;
    border-radius: 4px;
    border: 1px solid #007bff;
    background-color: #f0f8ff;
    font-weight: bold;
    color: #0056b3;
    vertical-align: middle; /* Căn giữa với text */
}

/* === Phản hồi khi chấm điểm === */

.eqp-dropdown-select-input.is-correct-answer {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724;
}

.eqp-dropdown-select-input.is-user-incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24;
}

/* Style cho text đáp án đúng (hiện khi làm sai) */
.eqp-dds-correct-answer-text {
    font-size: 0.9em;
    font-weight: bold;
    color: #28a745;
    margin-left: 4px;
}

/* --- BỔ SUNG MỚI: CSS cho Module Dictation (Frontend) --- */

.eqp-dictation-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các hàng */
    margin-top: 20px;
}

.eqp-dictation-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eqp-dictation-audio-player {
    flex-shrink: 0; /* Không co lại */
}
/* Style cho thẻ audio */
.eqp-dictation-audio-player audio {
    height: 40px; /* Làm cho thanh audio nhỏ gọn */
    max-width: 250px;
}
.eqp-dictation-no-audio {
    font-style: italic;
    color: #999;
}

.eqp-dictation-input-wrap {
    flex-grow: 1; /* Cho ô input chiếm hết phần còn lại */
}

.eqp-dictation-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.eqp-dictation-input:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
    outline: none;
}

/* === Phản hồi khi chấm điểm === */

/* Style cho input ĐÚNG */
.eqp-dictation-input.is-correct-answer {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
}

/* Style cho input SAI */
.eqp-dictation-input.is-user-incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
}

/* Style cho text đáp án đúng (hiện bên dưới khi sai) */
.eqp-dictation-correct-answer {
    font-size: 0.9em;
    font-weight: bold;
    color: #28a745;
    margin-top: 5px;
}

/*
 * BỔ SUNG MỚI (14/11/2025):
 * Styles cho module Drag to Blanks (Đã tái cấu trúc)
 */

/* Ngân hàng Từ (nơi chứa từ) */
.eqp-dtb-word-bank {
    border: 2px solid #007cba;
    background-color: #f0f8ff;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: flex; /* Hiển thị các từ theo hàng ngang */
    flex-wrap: wrap; /* Cho phép xuống dòng */
    gap: 8px; /* Khoảng cách giữa các từ */
}

/* (MỚI) Container cho các hàng item */
.eqp-dtb-items-list-container {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

/* (MỚI) Từng hàng item */
.eqp-dtb-item-row {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    font-size: 1.1em;
    line-height: 2.5; /* Tăng chiều cao dòng để ô trống không bị đè */
}
.eqp-dtb-item-row:last-child {
    border-bottom: none;
}

/* Ô trống (nơi kéo vào) */
.eqp-dtb-blank-zone {
    display: inline-block; /* Hiển thị trên cùng 1 dòng */
    vertical-align: middle; /* Căn giữa với text */
    min-width: 60px;
    width: auto; 
    min-height: 38px; /* Chiều cao tối thiểu */
    border: 1px solid #ccc;
    border-bottom: 2px solid #888;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin: 0 4px;
    padding: 4px; /* Padding để chứa item */
    box-sizing: border-box;
}

/* Khối từ (có thể kéo) */
.eqp-dtb-item {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: grab;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    user-select: none;
    font-size: 0.9em; /* Làm chữ nhỏ hơn 1 chút */
    line-height: 1.5; /* Reset line-height */
    display: inline-block; /* Cho phép nó nằm trong ô trống */
}

/* Khi kéo, giữ chỗ (placeholder) */
.eqp-dtb-placeholder {
    background-color: #fff;
    border: 2px dashed #ccc;
    border-radius: 4px;
    margin: 0;
    box-sizing: border-box; 
    visibility: visible !important;
}

/* Khi ô trống đã có từ */
.eqp-dtb-blank-zone .eqp-dtb-item {
    background-color: #b0d9f0; /* Đổi màu khi đã nằm trong ô trống */
    border-color: #99c2db;
}

/* --- (MỚI) Style chấm điểm --- */

/* Hàng item SAI */
.eqp-dtb-item-row.is-incorrect-row {
    background-color: #fff8f8;
}

/* Ô trống SAI */
.eqp-dtb-blank-zone.is-incorrect-blank {
    background-color: #f8d7da; /* Nền đỏ cho ô trống bị sai */
    border-color: #dc3545;
}
/* Từ bị SAI */
.eqp-dtb-blank-zone.is-incorrect-blank .eqp-dtb-item {
    background-color: #f5c6cb; /* Nền đỏ nhạt cho từ bị sai */
    border-color: #dc3545;
}
/* Text đáp án đúng (JS chèn vào) */
.eqp-dtb-correct-answer-text {
    color: #28a745;
    font-weight: bold;
    font-style: italic;
    font-size: 0.9em;
    margin-left: 4px;
    line-height: 1.5;
    vertical-align: middle;
}

/*
 * BỔ SUNG MỚI (14/11/2025 - Gói 2):
 * Styles cho module Drag the Words (Đã tái cấu trúc)
 */

/* (MỚI) Container cho các hàng item (không cần viền, vì mỗi hàng tự có) */
.eqp-dtw-items-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các câu */
}

/* (MỚI) Từng hàng item (mỗi câu) */
.eqp-dtw-item-row {
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

/* Ngân hàng Từ (Word Bank) của MỖI item */
.eqp-dtw-word-bank {
    border: 2px dashed #007cba;
    background-color: #f0f8ff;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    display: flex; /* Hiển thị các từ theo hàng ngang */
    flex-wrap: wrap; /* Cho phép xuống dòng */
    gap: 8px; /* Khoảng cách giữa các từ */
    min-height: 40px; /* Chiều cao tối thiểu */
}

/* Vùng Trả lời (Answer Zone) của MỖI item */
.eqp-dtw-answer-zone {
    border: 2px solid #767676;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
}

/* Khối từ (có thể kéo) */
.eqp-dtw-item {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: grab;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    user-select: none;
    font-size: 0.9em;
    line-height: 1.5;
    display: inline-block;
}

/* Khi kéo, giữ chỗ (placeholder) */
.eqp-dtw-placeholder {
    background-color: #fff;
    border: 2px dashed #ccc;
    border-radius: 4px;
    margin: 0;
    box-sizing: border-box; 
    visibility: visible !important;
    height: 30px !important; /* Đảm bảo placeholder có chiều cao */
    width: 50px !important;  /* Đảm bảo placeholder có chiều rộng */
}

/* --- (MỚI) Style chấm điểm --- */

/* Hàng item ĐÚNG */
.eqp-dtw-item-row.is-correct-row {
    background-color: #f6fff8;
    border-color: #c3e6cb;
}
/* Vùng trả lời của hàng ĐÚNG (đổi màu border) */
.eqp-dtw-item-row.is-correct-row .eqp-dtw-answer-zone {
    border-color: #28a745;
}

/* Hàng item SAI */
.eqp-dtw-item-row.is-incorrect-row {
    background-color: #fff8f8;
    border-color: #f5c6cb;
}
/* Vùng trả lời của hàng SAI (đổi màu border) */
.eqp-dtw-item-row.is-incorrect-row .eqp-dtw-answer-zone {
    border-color: #dc3545;
}

/* (MỚI) Khu vực hiển thị đáp án đúng (JS chèn vào) */
.eqp-dtw-item-correct-answer {
    margin-top: 10px;
}
/* Style cho "Đáp án đúng:" (JS chèn vào) */
.eqp-dtw-item-correct-answer strong {
    font-size: 0.9em;
    color: #155724;
}
/* Style cho vùng đáp án đúng (JS chèn vào) */
.eqp-dtw-answer-zone.is-correct-answer {
    background-color: #d4edda;
    border-color: #c3e6cb;
}
/* Style cho các từ đáp án đúng (JS chèn vào) */
.eqp-dtw-answer-zone.is-correct-answer .eqp-dtw-item {
    color: #155724;
    border-color: #b1dfbb;
    cursor: default;
}

/*
 * BỔ SUNG MỚI (14/11/2025 - Gói 3):
 * Styles cho module Dropdown Select (Đã tái cấu trúc)
 */

/* (MỚI) Container cho các hàng item (không cần viền, vì mỗi hàng tự có) */
.eqp-dds-items-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Khoảng cách giữa các câu */
}

/* (MỚI) Từng hàng item (mỗi câu) */
.eqp-dds-item-row {
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    font-size: 1.1em;
    line-height: 2.2; /* Tăng chiều cao dòng để dropdown không bị đè */
}

/* (MỚI) Định dạng cho <select> */
.eqp-dropdown-select-input {
    font-size: 0.9em;
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid #aaa;
    margin: 0 3px;
    vertical-align: baseline; /* Căn chỉnh với dòng text */
}

/* --- (MỚI) Style chấm điểm --- */

/* Hàng item SAI */
.eqp-dds-item-row.is-incorrect-row {
    background-color: #fff8f8;
    border-color: #f5c6cb;
}

/* Dropdown ĐÚNG */
.eqp-dropdown-select-input.is-correct-answer {
    background-color: #d4edda;
    border-color: #28a745;
}

/* Dropdown SAI */
.eqp-dropdown-select-input.is-user-incorrect {
    background-color: #f8d7da;
    border-color: #dc3545;
}

/* (MỚI) Text đáp án đúng (JS chèn vào) */
.eqp-dds-correct-answer-text {
    color: #28a745;
    font-weight: bold;
    font-style: italic;
    font-size: 0.9em;
    margin-left: 4px;
    line-height: 1.5;
}

/* * *** TÁI CẤU TRÚC (14/11/2025 - Gói 4) ***
 * Style MỚI cho Module Fill in the Blanks (Item-based)
 */

/* (MỚI) Container cho các hàng item (câu) */
.eqp-fitb-items-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Khoảng cách giữa các câu */
}

/* (MỚI) Từng hàng item (mỗi câu) */
.eqp-fitb-item-row {
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    font-size: 1.1em;
    line-height: 2.2; /* Tăng chiều cao dòng để input không bị đè */
}

/* (TÁI SỬ DỤNG) Style cho ô input (vẫn như cũ) */
.eqp-fill-in-the-blanks-input {
    font-size: 1em; 
    font-weight: normal; 
    color: #333;
    border: none;
    border-bottom: 2px solid #007bff; 
    background-color: transparent; 
    padding: 4px 8px;
    margin: 0 5px; 
    transition: border-color 0.2s, box-shadow 0.2s, width 0.1s ease-out;
    min-width: 50px;
    width: 50px; /* JS sẽ tự động cập nhật độ rộng này */
    vertical-align: baseline; /* Căn chỉnh với dòng text */
}

.eqp-fill-in-the-blanks-input:focus {
    outline: none; 
    border-bottom-color: #0056b3; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* (BỎ) .eqp-question-title-fill không còn dùng nữa */
/* (BỎ) .eqp-correct-answer-display không còn dùng nữa */

/* --- (MỚI) Style chấm điểm cho Fill in the Blanks --- */

/* Hàng item SAI */
.eqp-fitb-item-row.is-incorrect-row {
    background-color: #fff8f8;
    border-color: #f5c6cb;
}

/* Input ĐÚNG */
.eqp-fill-in-the-blanks-input.is-correct-answer {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
}

/* Input SAI */
.eqp-fill-in-the-blanks-input.is-user-incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
}

/* (MỚI) Text đáp án đúng (JS chèn vào) */
.eqp-fitb-correct-answer-text {
    color: #28a745;
    font-weight: bold;
    font-style: italic;
    font-size: 0.9em;
    margin-left: 4px;
    line-height: 1.5;
}

/* --- TÁI CẤU TRÚC (15/11/2025): CSS cho Module Mark the Words (Frontend - Bộ lặp) --- */

/* (MỚI) Container cho các mục (hàng) */
.eqp-mtw-items-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các hàng */
    margin-top: 15px;
}

/* (MỚI) CSS cho mỗi hàng (item) */
.eqp-mtw-item-row {
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

/* (CẬP NHẬT) Xóa border/margin của container cũ */
.eqp-mtw-passage-container {
    font-size: 1.1em;
    line-height: 2.2; 
    padding: 15px;
    background-color: #fcfcfc;
    border: none; /* Bỏ border cũ vì đã có border ở row */
    border-radius: 4px;
    margin-top: 0; /* Reset margin */
}

/* (Giữ nguyên) Style cho .eqp-mtw-word, :hover, .is-selected */
.eqp-mtw-word {
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    border: 1px solid transparent;
    margin: 0 1px; 
    white-space: pre-wrap; 
}
.eqp-mtw-word:hover {
    background-color: #f0f8ff;
    border-color: #b0d9f0;
}
.eqp-mtw-word.is-selected {
    background-color: #b0d9f0;
    border-color: #007cba;
    color: #005a8a;
    font-weight: bold;
}

/* === Phản hồi khi chấm điểm === */

/* (MỚI) Tô màu cho HÀNG bị sai */
.eqp-mtw-item-row.is-incorrect-row {
     background-color: #fff8f8;
     border-color: #f5c6cb;
}

/* (Giữ nguyên) .is-user-correct, .is-user-incorrect, .is-missed-correct */
.eqp-mtw-word.is-user-correct {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724 !important;
    font-weight: bold;
}
.eqp-mtw-word.is-user-incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24 !important;
    font-weight: bold;
}
.eqp-mtw-word.is-missed-correct {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
    opacity: 0.8;
}
/* --- BỔ SUNG MỚI (15/11/2025): CSS cho Module Section Header (Frontend) --- */

.eqp-section-header {
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: #f0f4f8; /* Màu nền khác biệt */
    border-left: 5px solid #007cba;
    border-radius: 4px;
}

.eqp-section-header-title {
    margin-top: 0;
    margin-bottom: 5px;
    color: #005a8a;
    font-size: 1.5em; /* Lớn hơn .eqp-question-title */
}

.eqp-section-header-hint {
    font-size: 1.1em;
    color: #333;
    margin: 5px 0 0 0;
    line-height: 1.6;
    font-style: italic;
}

/* Style cho explanation (nếu có) bên trong header */
.eqp-section-header .eqp-feedback-area {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #c0d4e4;
}

.eqp-hint img, .eqp-hint audio, .eqp-hint video, .eqp-question-title img, .eqp-question-title audio, .eqp-question-title video, .eqp-section-header-hint img, .eqp-section-header-hint audio, .eqp-section-header-hint video {    
    display: block;
}

/* --- BỔ SUNG MỚI (16/11/2025): CSS cho Module Sort the Items (Frontend) --- */

/* 1. Khu vực các Nhóm (Hộp rỗng) */
.eqp-sti-categories-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Tự động chia cột */
    gap: 15px;
    margin-top: 20px;
}

.eqp-sti-category-wrapper {
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

.eqp-sti-category-title {
    margin: 0;
    padding: 10px 15px;
    font-size: 1.1em;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ddd;
}

.eqp-sti-category-box {
    padding: 10px;
    min-height: 100px; /* Chiều cao tối thiểu cho hộp rỗng */
    display: flex;
    flex-direction: column; /* Xếp các item thả vào theo chiều dọc */
    gap: 10px;
}

/* 2. Ngân hàng Vật phẩm (Item Bank) */
.eqp-sti-bank-container {
    margin-top: 25px;
    border: 2px dashed #007cba;
    border-radius: 5px;
    background-color: #f0f8ff;
}

.eqp-sti-bank-title {
    margin: 0;
    padding: 10px 15px;
    font-size: 1.1em;
    background-color: #e0f0ff;
    border-bottom: 2px dashed #007cba;
}

.eqp-sti-item-bank {
    padding: 10px;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap; /* Các item xếp ngang */
    justify-content: center; /* Căn giữa các item */
    align-items: center;
    gap: 10px;
}

/* 3. Vật phẩm (Draggable Item) */
.eqp-sti-item {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: grab;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    /* Style cho media bên trong item */
    max-width: 150px; 
}
.eqp-sti-item img,
.eqp-sti-item video {
    max-width: 100%;
    height: auto;
    display: block;
}
.eqp-sti-item audio {
    max-width: 100%;
}

/* 4. Placeholder (khi kéo) */
.eqp-sti-placeholder {
    height: 60px;
    width: 100px;
    background-color: #fff;
    border: 2px dashed #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    visibility: visible !important;
}

/* 5. Style chấm điểm */
.eqp-sti-category-box.is-incorrect-box {
    background-color: #fff8f8; /* Hộp chứa item sai */
}
.eqp-sti-item.is-correct-item {
    background-color: #d4edda; /* Item đúng */
    border-color: #28a745;
}
.eqp-sti-item.is-incorrect-item {
    background-color: #f8d7da; /* Item sai */
    border-color: #dc3545;
}

/*
 * BỔ SUNG MỚI (MODULE 16: DRAG ON IMAGE)
 * Styles cho giao diện Frontend của module "Drag on Image"
 */

/* 1. Ngân hàng Từ (Word Bank) */
.eqp-doi-word-bank {
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px;
    padding: 10px; 
    background: #f0f8ff; 
    border: 2px dashed #007cba;
    border-radius: 5px; 
    margin-bottom: 15px; 
    justify-content: center;
    min-height: 50px; /* Đảm bảo có chiều cao ngay cả khi rỗng */
}

/* 2. Từ (Draggable Word) */
.eqp-doi-draggable-word {
    padding: 8px 15px; 
    background: #fff; 
    border: 1px solid #ccc;
    border-radius: 4px; 
    cursor: grab; 
    user-select: none;
    box-shadow: 0 2px 3px rgba(0,0,0,0.05);
}
.eqp-doi-draggable-word:active {
    cursor: grabbing;
}

/* Trạng thái khi từ đang được kéo (thêm bởi JQuery UI) */
.eqp-doi-draggable-word.ui-draggable-dragging {
    opacity: 0.8; 
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Trạng thái khi từ đã được sử dụng (thả vào 1 ô) */
.eqp-doi-draggable-word.is-used {
    opacity: 0.3; 
    cursor: default;
    background: #eee;
}

/* 3. Vùng chứa Ảnh (Wrapper) */
.eqp-doi-image-wrapper {
    position: relative; /* Rất quan trọng để định vị ô trống */
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    line-height: 0; /* Xóa khoảng trống thừa bên dưới ảnh */
}

/* 4. Ảnh nền (Background Image) */
.eqp-doi-background-image {
    width: 100%; 
    height: auto; 
    display: block;
}

/* 5. Ô trống (Droppable Blank) */
.eqp-doi-droppable-blank {
    position: absolute; /* Rất quan trọng, định vị bằng % */
    transform: translate(-50%, -50%); /* Căn giữa ô trống dựa trên điểm % */
    min-width: 80px;
    height: 60px;
    background: rgba(255, 255, 255, 0.85);
    border: 2px dashed #555;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
    font-size: 0.9em;
}

/* Trạng thái khi kéo 1 từ LÊN TRÊN ô trống */
.eqp-doi-droppable-blank.is-hovered {
    background: rgba(200, 255, 200, 0.9);
    border-color: #28a745;
}

/* Trạng thái khi ô trống ĐÃ CÓ TỪ */
.eqp-doi-droppable-blank.is-filled .eqp-doi-blank-placeholder {
    display: none; /* Ẩn dấu '?' */
}
.eqp-doi-droppable-blank.is-filled .eqp-doi-blank-value {
    display: block;
    font-weight: bold;
    color: #005a8a;
}
.eqp-doi-blank-value { 
    display: none; /* Ẩn ban đầu */
    padding: 0 5px;
}

/* === 6. Style Chấm điểm === */

/* Ô trống ĐÚNG */
.eqp-doi-droppable-blank.is-correct {
    background: rgba(212, 237, 218, 0.95);
    border: 2px solid #28a745;
}
.eqp-doi-droppable-blank.is-correct .eqp-doi-blank-value {
    color: #155724;
}

/* Ô trống SAI */
.eqp-doi-droppable-blank.is-incorrect {
    background: rgba(248, 215, 218, 0.95);
    border: 2px solid #dc3545;
}
/* Từ sai (người dùng chọn) */
.eqp-doi-droppable-blank.is-incorrect .eqp-doi-blank-value {
    color: #721c24;
    text-decoration: line-through;
}

/* Tìm khối này (khối chúng ta vừa sửa lần trước) */
.eqp-doi-droppable-blank.is-incorrect .eqp-doi-correct-answer {
    display: block;
    position: absolute;
    bottom: -22px; /* Hiện ngay bên dưới ô */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9em;
    color: #ffffff;           /* Chữ màu trắng */
    background: #28a745;       /* Nền màu xanh lá đậm */
    border: 1px solid #1e7e34; /* Viền xanh lá đậm hơn */
    font-weight: bold;
    padding: 2px 6px; /* Tăng padding một chút */
    border-radius: 3px;
    white-space: nowrap;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Tăng shadow cho nổi bật */
    text-shadow: 2px 2px 0 #000;
    -webkit-text-stroke: 1px black;
}

/*
 * BỔ SUNG MỚI (MODULE 17: ANNOTATE IMAGE)
 * Styles cho giao diện Frontend của module "Annotate Image"
 */

/* 1. Vùng chứa Ảnh (Wrapper) */
.eqp-ani-image-wrapper {
    position: relative; /* Rất quan trọng để định vị ô input */
    width: 100%;
    margin: 15px auto 0 auto;
    overflow: hidden;
    line-height: 0; /* Xóa khoảng trống thừa bên dưới ảnh */
}

/* 2. Ảnh nền (Background Image) */
.eqp-ani-background-image {
    width: 100%; 
    height: auto; 
    display: block;
}

/* 3. Ô Input (Blank Input) */
.eqp-ani-blank-input {
    position: absolute; /* Rất quan trọng, định vị bằng % */
    transform: translate(-50%, -50%); /* Căn giữa ô input */
    
    /* Đặt transform-origin để co dãn (scale) từ tâm */
    transform-origin: center center; 

    /* Kích thước gốc (sẽ được JS scale lại) */
    width: 120px;
    height: 40px;
    
    padding: 5px 8px;
    border: 2px dashed #555;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 16px; /* Kích thước chữ gốc */
    text-align: center;
    box-sizing: border-box;
    transition: background-color 0.2s, border-color 0.2s;
}
.eqp-ani-blank-input:focus {
    background: #fff;
    border-color: #007cba;
    outline: none;
}

/* 4. Span Đáp án đúng (ẩn) */
.eqp-ani-correct-answer {
    position: absolute; /* Rất quan trọng */
    transform: translate(-50%, -50%); /* Căn giữa */
    
    /* Kích thước gốc (sẽ được JS scale-ngược lại) */
    display: none;
    font-size: 14px; /* Kích thước chữ gốc (hơi nhỏ hơn input) */
    font-weight: bold;
    white-space: nowrap;
    z-index: 5;
    
    /* Style viền chữ (giống module 16) */
    color: #28a745; /* Màu chữ xanh lá */
    background: none;
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         0 0 5px #fff;
}

/* === 5. Style Chấm điểm === */

/* Input ĐÚNG */
.eqp-ani-blank-input.is-correct-answer {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
}

/* Input SAI */
.eqp-ani-blank-input.is-user-incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24;
}

/*
 * BỔ SUNG MỚI (TÍNH NĂNG: STICKY TIMER)
 * Styles cho đồng hồ "dính" (sticky) khi cuộn
 */

/* 1. Class được JS thêm vào đồng hồ khi cuộn */
.eqp-timer-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    
    /* Style để làm nó nổi bật */
    width: 100%;
    max-width: 100%; /* Ghi đè max-width: 800px của .eqp-quiz-set */
    margin: 0;
    z-index: 1000;
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* Căn giữa nội dung bên trong */
    display: flex;
    justify-content: center;
}
/* Nội dung (text) bên trong */
.eqp-timer-sticky span {
    max-width: 800px; /* Giữ cho nội dung text thẳng hàng với quiz */
    width: 100%;
    padding: 0 20px; /* Thêm padding ngang */
    box-sizing: border-box;
}


/* 2. Class cho "Chỗ giữ" (Placeholder) */
.eqp-timer-placeholder {
    display: none; /* Ẩn ban đầu */
    height: 0;
    margin-bottom: 20px; /* Giữ nguyên khoảng cách của đồng hồ gốc */
}

/*
 * BỔ SUNG MỚI (MODULE 18: FIND HOTSPOTS)
 * Styles cho giao diện Frontend của module "Find Hotspots"
 */

/* 1. Vùng chứa Ảnh và Layer Marker */
.eqp-fhs-image-wrapper {
    position: relative; 
    width: 100%;
    max-width: 800px; /* Giới hạn max width cho dễ nhìn */
    overflow: hidden;
    line-height: 0; 
    border: 1px solid #ccc; /* Thêm viền cho khung quiz */
}

/* 2. Ảnh nền */
.eqp-fhs-background-image {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair; /* Con trỏ hình chữ thập khi user có thể click */
}

/* 3. Layer chứa các điểm đánh dấu (marker) */
.eqp-fhs-markers-layer,
.eqp-fhs-feedback-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Cho phép click xuyên qua để đến ảnh */
    z-index: 10;
}

/* 4. Marker (Điểm mà user click) */
.eqp-fhs-user-marker {
    position: absolute;
    top: 50%; /* Dùng top/left 50% để căn giữa */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(255, 69, 0, 0.8); /* Màu cam */
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
    cursor: pointer; /* Cho phép click để xóa */
    pointer-events: auto; /* Bắt sự kiện click để xóa */
    z-index: 20;
}
.eqp-fhs-user-marker:hover {
    background-color: rgba(255, 0, 0, 0.9);
}

/* 5. Vùng Feedback (Sau khi chấm điểm) */
.eqp-fhs-feedback-polygon {
    fill: none; /* Ban đầu không tô màu */
    stroke-width: 3;
    stroke-opacity: 0.8;
    vector-effect: non-scaling-stroke; /* Giữ độ dày viền khi scale */
    pointer-events: none;
}
.eqp-fhs-feedback-polygon.is-correct-polygon {
    stroke: #4caf50; /* Xanh lá */
    stroke-dasharray: 5, 2;
    fill: rgba(76, 175, 80, 0.2);
}

/* Marker ĐÚNG (Nằm trong vùng) */
.eqp-fhs-user-marker.is-correct-marker {
    background-color: #28a745 !important; /* Xanh lá */
    border-color: #fff;
    z-index: 30; /* Nổi lên trên polygon */
}

/* Marker SAI (Nằm ngoài vùng) */
.eqp-fhs-user-marker.is-incorrect-marker {
    background-color: #dc3545 !important; /* Đỏ */
    border-color: #fff;
    z-index: 30;
}

/* Đảm bảo SVG đè lên ảnh nhưng nằm dưới marker */
.eqp-fhs-feedback-layer {
    z-index: 15; 
}

/* * --- BỔ SUNG MỚI (MODULE 19: SLIDER) --- 
 * Styles cho giao diện kéo thanh trượt
 */

.eqp-slider-container {
    padding: 20px 10px;
    text-align: center;
    max-width: 100%;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* Số hiển thị giá trị (To và đậm) */
.eqp-slider-value-display {
    font-size: 2.5em;
    font-weight: bold;
    color: #007cba;
    margin-bottom: 20px;
    font-family: monospace, sans-serif; /* Monospace để số không bị nhảy độ rộng */
    line-height: 1;
}
.eqp-slider-unit {
    font-size: 0.5em;
    color: #666;
    vertical-align: super;
    margin-left: 5px;
}

.eqp-slider-input-wrapper {
    position: relative;
    padding: 10px 0;
}

/* === Custom Style cho Range Input (Cross-browser) === */

.eqp-slider-input {
    width: 100%;
    margin: 10px 0;
    -webkit-appearance: none; /* Tắt style mặc định của trình duyệt */
    background: transparent; 
}

.eqp-slider-input:focus {
    outline: none;
}

/* 1. Thanh trượt (Track) - Chrome/Safari/Edge */
.eqp-slider-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: #e9ecef;
    border-radius: 5px;
    border: 1px solid #ced4da;
    transition: background-color 0.2s;
}

/* 2. Nút kéo (Thumb) - Chrome/Safari/Edge */
.eqp-slider-input::-webkit-slider-thumb {
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: #007cba;
    cursor: pointer;
    -webkit-appearance: none;
    /* Căn giữa Thumb so với Track: (HeightTrack - HeightThumb) / 2 */
    margin-top: -10px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 2px solid #fff;
    transition: background 0.2s, transform 0.2s;
}

/* Style cho Firefox (Track) */
.eqp-slider-input::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: #e9ecef;
    border-radius: 5px;
    border: 1px solid #ced4da;
    transition: background-color 0.2s;
}

/* Style cho Firefox (Thumb) */
.eqp-slider-input::-moz-range-thumb {
    height: 28px;
    width: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #007cba;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background 0.2s, transform 0.2s;
}

/* Hiệu ứng khi nhấn giữ nút kéo */
.eqp-slider-input:active::-webkit-slider-thumb {
    transform: scale(1.1);
    background: #005a8a;
}
.eqp-slider-input:active::-moz-range-thumb {
    transform: scale(1.1);
    background: #005a8a;
}

/* Labels Min/Max ở 2 đầu */
.eqp-slider-labels {
    display: flex;
    justify-content: space-between;
    color: #888;
    font-size: 0.9em;
    margin-top: -5px;
    font-weight: 500;
}

/* === FEEDBACK STATES (Chấm điểm) === */

/* Trạng thái ĐÚNG (Xanh lá) */
.eqp-slider-input-wrapper.is-correct-slider .eqp-slider-input::-webkit-slider-runnable-track {
    background: #d4edda;
    border-color: #28a745;
}
.eqp-slider-input-wrapper.is-correct-slider .eqp-slider-input::-moz-range-track {
    background: #d4edda;
    border-color: #28a745;
}
.eqp-slider-input-wrapper.is-correct-slider .eqp-slider-input::-webkit-slider-thumb {
    background: #28a745;
}
.eqp-slider-input-wrapper.is-correct-slider .eqp-slider-input::-moz-range-thumb {
    background: #28a745;
}

/* Trạng thái SAI (Đỏ) */
.eqp-slider-input-wrapper.is-incorrect-slider .eqp-slider-input::-webkit-slider-runnable-track {
    background: #f8d7da;
    border-color: #dc3545;
}
.eqp-slider-input-wrapper.is-incorrect-slider .eqp-slider-input::-moz-range-track {
    background: #f8d7da;
    border-color: #dc3545;
}
.eqp-slider-input-wrapper.is-incorrect-slider .eqp-slider-input::-webkit-slider-thumb {
    background: #dc3545;
}
.eqp-slider-input-wrapper.is-incorrect-slider .eqp-slider-input::-moz-range-thumb {
    background: #dc3545;
}

/* --- BỔ SUNG MỚI (MODULE 20: CLOCK - CLEAN VERSION) --- */

/* 1. Header: Tiêu đề & Nút chuyển US/UK */
.eqp-clock-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

/* Switch US/UK */
.eqp-clock-region-switch {
    display: flex;
    background: #f0f0f0;
    border-radius: 20px;
    padding: 2px;
    border: 1px solid #ccc;
}
.eqp-region-option {
    cursor: pointer;
    margin-bottom: 0; /* Fix style theme mặc định */
}
.eqp-region-input {
    display: none;
}
.eqp-region-label {
    display: block;
    padding: 5px 15px;
    border-radius: 18px;
    font-size: 0.85em;
    font-weight: bold;
    color: #666;
    transition: all 0.2s;
}
.eqp-region-input:checked + .eqp-region-label {
    background: #007cba;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 2. Khu vực hiển thị Text đề bài (Mode A) */
.eqp-clock-target-text-display {
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 20px;
    color: #005a8a;
    background: #e6f7ff;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #bae7ff;
}

/* 3. Container Đồng hồ */
.eqp-clock-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* SVG Wrapper */
.eqp-clock-svg-wrapper {
    width: 250px;
    height: 250px;
    user-select: none;
    -webkit-user-select: none;
    margin-bottom: 10px;
}
.eqp-clock-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.1));
    overflow: visible; /* Để bóng đổ không bị cắt */
}

/* Kim đồng hồ (Quan trọng: Tâm xoay) */
.eqp-clock-hand {
    transition: transform 0.1s linear; /* Hiệu ứng quay mượt khi kéo slider */
    transform-origin: 100px 100px !important; /* Cố định tâm xoay vào giữa */
    transform-box: view-box;
}
/* (Đã bỏ các class .is-draggable thừa) */

/* 4. Sliders Control (Thanh điều khiển) */
.eqp-clock-controls {
    width: 100%;
    max-width: 350px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}
.eqp-clock-slider-row {
    margin-bottom: 20px;
}
.eqp-clock-slider-row:last-child {
    margin-bottom: 0;
}
.eqp-clock-slider-row label {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 8px;
    color: #444;
    font-size: 0.95em;
}
.eqp-clock-val-display {
    color: #007cba;
    font-family: monospace, sans-serif;
    font-size: 1.2em;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* Input Range Style */
.eqp-clock-slider {
    width: 100%;
    cursor: pointer;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    -webkit-appearance: none;
}
.eqp-clock-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #007cba;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 5. Input Area (Mode B) */
.eqp-clock-input-area {
    width: 100%;
    max-width: 400px;
}
.eqp-clock-input-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.eqp-clock-input-group label {
    width: 90px;
    font-weight: bold;
    color: #555;
    text-align: right;
}
.eqp-clock-input-group input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}
.eqp-clock-input-group input:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
    outline: none;
}

/* --- BỔ SUNG MỚI (MODULE 21: INTERACTIVE CALENDAR) --- */

/* 1. Header: Tiêu đề & Toggle */
.eqp-cal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dotted #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

/* 2. Container chính */
.eqp-calendar-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center; /* Căn giữa trên mobile */
    align-items: flex-start;
}

/* 3. Tờ Lịch (Visual) */
.eqp-calendar-visual {
    width: 300px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    flex-shrink: 0; /* Không bị co lại */
}

/* Phần đầu lịch (Tháng - Năm) */
.eqp-cal-top {
    background: #007cba;
    color: #fff;
    padding: 15px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
}

/* Lưới Lịch (7 cột) */
.eqp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 10px;
    gap: 2px;
}

/* Tên Thứ (Mon, Tue...) */
.eqp-cal-day-name {
    font-weight: bold;
    color: #888;
    font-size: 0.85em;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
}
.eqp-cal-day-name:nth-child(7), /* Sat */
.eqp-cal-day-name:nth-child(1) { /* Sun */
    color: #e65100; /* Cuối tuần màu cam */
}

/* Ô Ngày */
.eqp-cal-day {
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    font-weight: 500;
    color: #333;
    cursor: default;
}
.eqp-cal-day-empty {
    height: 36px;
}

/* Ngày Mục Tiêu (Target Highlight) */
.eqp-cal-day.is-target {
    background-color: #d63638; /* Màu đỏ nổi bật */
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(214, 54, 56, 0.4);
    transform: scale(1.1); /* Phóng to nhẹ */
    position: relative;
}
/* Vòng tròn khoanh đỏ giả lập bút viết (Optional) */
.eqp-cal-day.is-target::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border: 2px solid #d63638;
    border-radius: 50%;
    animation: eqp-pulse-border 1.5s infinite;
}

@keyframes eqp-pulse-border {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* 4. Khu vực Nhập liệu (Inputs) */
.eqp-calendar-inputs {
    flex: 1;
    min-width: 280px; /* Đảm bảo không quá nhỏ */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.eqp-cal-input-group {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #eee;
}
.eqp-cal-input-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #005a8a;
}
.eqp-cal-format-hint {
    display: block;
    font-weight: normal;
    font-size: 0.85em;
    color: #666;
    font-style: italic;
    margin-top: 2px;
}

.eqp-cal-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
    font-family: inherit;
}
.eqp-cal-input:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
    outline: none;
}

/* Style khi chấm điểm (Tắt input) */
.eqp-cal-input:disabled {
    background-color: #fff;
    color: #333;
    border-color: #ddd;
}

/* --- BỔ SUNG MỚI (MODULE 22: READ NUMBERS) --- */

/* 1. Container chính */
.eqp-rn-container {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
    text-align: center;
}

/* 2. Visual Display (Khu vực hiển thị số) */
.eqp-rn-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    background: #fff;
    border: 1px dashed #ccc;
    border-radius: 6px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    
    /* Font chữ Toán học */
    font-family: 'Times New Roman', serif;
    font-size: 3em;
    font-weight: bold;
    color: #007cba;
    line-height: 1;
}

/* Style đặc biệt cho Phân số (Fraction) */
.eqp-rn-fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 5px;
}
.eqp-rn-fraction span:first-child {
    border-bottom: 3px solid #007cba; /* Gạch ngang phân số */
    padding: 0 5px;
    margin-bottom: 2px;
    display: block;
    width: 100%; /* Đảm bảo gạch ngang hết chiều rộng */
}

/* Style cho Số mũ (Exponent) */
.eqp-rn-visual sup {
    font-size: 0.6em;
    vertical-align: super;
    color: #e65100; /* Màu cam cho số mũ để nổi bật */
    margin-left: 2px;
}

/* 3. Input Field */
.eqp-rn-input-wrapper {
    width: 100%;
    max-width: 500px;
}
.eqp-rn-input {
    width: 100%;
    padding: 12px 15px;
    font-size: 1.2em;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: sans-serif; /* Quay lại font thường để nhập liệu */
}
.eqp-rn-input:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
    outline: none;
}

/* Trạng thái khi chấm điểm */
.eqp-rn-input:disabled {
    background-color: #fff;
    color: #333;
    border-color: #ddd;
}

/* Feedback đúng sai */
.eqp-rn-correct-feedback {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    margin-top: 15px;
}
.eqp-rn-correct-feedback b {
    font-weight: 800;
    text-decoration: underline;
}

/* --- BỔ SUNG MỚI (MODULE 23: ERROR CORRECTION) --- */

/* Container hiển thị câu văn */
.eqp-ec-sentence-container {
    font-size: 1.2em;
    line-height: 2.8; /* Khoảng cách dòng lớn để chứa nhãn (A), (B) */
    color: #333;
    font-family: 'Times New Roman', serif; /* Font giống đề thi */
}

/* Các đoạn text thường */
.eqp-ec-text {
    white-space: pre-wrap;
}

/* Wrapper cho mỗi lựa chọn (Label bao quanh Radio) */
.eqp-ec-option-wrapper {
    cursor: pointer;
    margin: 0 4px;
    display: inline-block;
    position: relative;
}

/* Ẩn nút Radio mặc định */
.eqp-ec-radio {
    display: none;
}

/* Từ được chọn (Hiển thị gạch chân) */
.eqp-ec-word {
    border-bottom: 2px solid #555;
    padding-bottom: 2px;
    font-weight: bold;
    transition: color 0.2s, border-color 0.2s;
}

/* Nhãn (A), (B), (C) nhỏ bên dưới */
.eqp-ec-label {
    position: absolute;
    top: 60%; /* Nằm ngay dưới từ */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65em;
    color: #666;
    font-family: sans-serif;
    font-weight: normal;
    margin-top: 2px;
    white-space: nowrap;
}

/* Hiệu ứng Hover */
.eqp-ec-option-wrapper:hover .eqp-ec-word {
    color: rgb(40, 167, 69);
    border-bottom-color: rgb(40, 167, 69);
}

/* Trạng thái Đang chọn (Checked) */
.eqp-ec-radio:checked + .eqp-ec-word {
    color: rgb(220, 53, 69);
    border-bottom: 3px solid rgb(40, 167, 69);
    background-color: #f0f8ff; /* Highlight nhẹ nền */
}
.eqp-ec-radio:checked + .eqp-ec-word .eqp-ec-label {
    color: rgb(220, 53, 69);
    font-weight: bold;
}

/* === FEEDBACK STATES (Chấm điểm) === */

/* 1. Đáp án ĐÚNG (Màu Xanh) */
.eqp-ec-option-wrapper.is-correct-answer .eqp-ec-word {
    color: #28a745 !important;
    border-bottom-color: #28a745 !important;
    border-bottom-width: 3px;
}

/* 2. Người dùng chọn ĐÚNG (Tô nền xanh) */
.eqp-ec-option-wrapper.is-user-correct .eqp-ec-word {
    background-color: #d4edda;
}

/* 3. Người dùng chọn SAI (Màu Đỏ) */
.eqp-ec-option-wrapper.is-user-incorrect .eqp-ec-word {
    color: #dc3545 !important;
    border-bottom-color: #dc3545 !important;
    background-color: #f8d7da;
    text-decoration: line-through; /* Gạch bỏ để thể hiện sai */
}

/* Feedback Box */
.eqp-ec-correct-feedback {
    padding: 10px;
    background-color: #fff5f5;
    border-left: 4px solid #dc3545;
    border-radius: 4px;
}

/* --- BỔ SUNG MỚI (MODULE 24: CROSSWORD PUZZLE) --- */

/* 1. Layout Container */
.eqp-cw-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

/* 2. Grid Wrapper (Scroll nếu quá lớn trên mobile) */
.eqp-cw-grid-wrapper {
    flex: 0 0 auto;
    max-width: 100%;
    overflow: auto;
    padding: 2px; /* Tránh cắt bóng */
}

/* Lưới Ô chữ */
.eqp-cw-grid {
    user-select: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* Ô Chung */
.eqp-cw-cell {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ô Đen (Block) */
.eqp-cw-cell.block {
    background-color: #222;
}

/* Ô Trắng (Active - Nhập liệu) */
.eqp-cw-cell.active {
    background-color: #fff;
    border: 1px solid #333; /* Viền ô */
}

/* Input bên trong ô */
.eqp-cw-input {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    color: #000;
    padding: 0 !important;
    margin: 0 !important;
    font-family: monospace, sans-serif;
    caret-color: transparent; /* Ẩn con trỏ nháy để đẹp hơn */
    cursor: pointer;
}
.eqp-cw-input:focus {
    outline: none;
    background-color: #e6f7ff !important; /* Highlight ô đang nhập */
}

/* Số thứ tự nhỏ (1, 2, 3...) */
.eqp-cw-num {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 9px;
    line-height: 1;
    color: #666;
    pointer-events: none;
    font-family: sans-serif;
}

/* 3. Clues Area (Danh sách gợi ý) */
.eqp-cw-clues-wrapper {
    flex: 1;
    min-width: 250px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.eqp-cw-clues-col h5 {
    color: #005a8a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;
}

.eqp-cw-clues-col ul li {
    padding: 4px 0;
    border-bottom: 1px dashed #eee;
    line-height: 1.4;
}
.eqp-cw-clues-col ul li strong {
    color: #333;
    margin-right: 5px;
}

/* Feedback Box */
.eqp-cw-correct-feedback {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
}

/* --- CROSSWORD CONTROLS --- */
.eqp-cw-controls {
    width: 100%;
    margin-bottom: 15px;
    background: #e3f2fd;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid #bbdefb;
    display: flex;
    align-items: center;
}
.eqp-cw-dir-label {
    margin-right: 20px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}
.eqp-cw-dir-radio {
    accent-color: #007cba;
    transform: scale(1.2);
}

/* Highlight ô đang nhập */
.eqp-cw-cell.is-highlighted {
    border: 2px solid #007cba !important;
    z-index: 10;
}

/* --- CROSSWORD FEEDBACK LIST --- */
.eqp-cw-feedback-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    border-top: 1px solid #ddd;
}
.eqp-cw-feedback-list li {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: flex-start;
}
.eqp-cw-icon {
    font-size: 1.2em;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}
.eqp-cw-clue {
    color: #666;
    margin-left: 5px;
    font-style: italic;
    font-size: 0.9em;
}
.eqp-cw-feedback-list li.is-correct {
    background-color: #f0fff4;
    color: #155724;
}
.eqp-cw-feedback-list li.is-correct .eqp-cw-icon { color: #28a745; }

.eqp-cw-feedback-list li.is-incorrect {
    background-color: #fff5f5;
    color: #721c24;
}
.eqp-cw-feedback-list li.is-incorrect .eqp-cw-icon { color: #dc3545; }

/* --- Crossword Clues Media Fix --- */
.eqp-cw-clues-col img,
.eqp-cw-clues-col video {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.eqp-cw-clues-col audio {
    max-width: 100%;
    margin-top: 5px;
}

/* --- CROSSWORD VISUAL FEEDBACK --- */

/* Style cho số thứ tự trong list feedback */
.eqp-cw-num-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #eee;
    color: #555;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.85em;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Feedback List Item Colors */
.eqp-cw-feedback-list li.is-correct .eqp-cw-num-badge {
    background: #28a745;
    color: #fff;
}
.eqp-cw-feedback-list li.is-incorrect .eqp-cw-num-badge {
    background: #dc3545;
    color: #fff;
}

/* Grid Cells Coloring (Quan trọng) */
.eqp-cw-input.is-correct-cell {
    color: #155724 !important;
    background-color: #d4edda !important;
    font-weight: 900;
}

.eqp-cw-input.is-incorrect-cell {
    color: #721c24 !important;
    background-color: #f8d7da !important; /* Nền đỏ nhạt */
    text-decoration: line-through;
}

/* --- BỔ SUNG MỚI (MODULE 25: WORD SEARCH) --- */

/* 1. Container chính */
.eqp-ws-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
    user-select: none; /* Ngăn bôi đen văn bản khi kéo chuột */
    -webkit-user-select: none;
}

/* 2. Khu vực Lưới (Grid Wrapper) */
.eqp-ws-grid-wrapper {
    position: relative;
    padding: 10px;
    background: #333; /* Viền ngoài đậm */
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.eqp-ws-grid {
    display: grid;
    /* Grid columns/rows sẽ được set inline trong HTML */
    gap: 1px; /* Khoảng cách giữa các ô */
    background-color: #333; /* Màu đường kẻ */
    position: relative; /* Để chứa SVG layer */
    cursor: default;
}

/* Từng ô chữ cái */
.eqp-ws-cell {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: monospace, sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    color: #333;
    cursor: pointer;
    transition: background-color 0.1s;
}

/* Hiệu ứng khi hover (tùy chọn) */
.eqp-ws-cell:hover {
    background-color: #f0f8ff;
}

/* 3. Lớp SVG vẽ đường (Line Layer) */
.eqp-ws-line-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Cho phép click xuyên qua xuống ô bên dưới */
    z-index: 10;
}

/* 4. Danh sách từ cần tìm (Word List) */
.eqp-ws-word-list-wrapper {
    flex: 1;
    min-width: 200px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.eqp-ws-word-list-wrapper h5 {
    margin-top: 0;
    color: #005a8a;
    border-bottom: 2px solid #007cba;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.eqp-ws-word-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.eqp-ws-word-list li {
    background: #fff;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s;
}

/* Trạng thái khi từ đã được tìm thấy */
.eqp-ws-word-list li.found {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
    text-decoration: line-through;
    opacity: 0.7;
}

/* 5. Feedback Area */
.eqp-ws-correct-feedback {
    background-color: #e2e3e5;
    color: #383d41;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #d6d8db;
    text-align: center;
    font-weight: bold;
}

/* --- MODULE 26: SPEAK THE WORDS --- */

.eqp-stw-item {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
}

.eqp-stw-content {
    margin-bottom: 15px;
    font-size: 1.1em;
}
.eqp-stw-content img, .eqp-stw-content audio, .eqp-stw-content video {
    max-width: 100%;
    display: block;
    margin: 10px 0;
}

.eqp-stw-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Nút Mic */
.eqp-stw-mic-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.eqp-stw-mic-btn:hover {
    background: #e0e0e0;
}

/* Trạng thái đang ghi âm (Recording) */
.eqp-stw-mic-btn.is-recording {
    background: #ffebee;
    border-color: #ef5350;
    color: #c62828;
    animation: eqp-mic-pulse 1.5s infinite;
}
@keyframes eqp-mic-pulse {
    0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(244, 67, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
}

/* Nút Send */
.eqp-stw-send-btn {
    background: #007cba;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}

/* Feedback List */
.eqp-stw-feedback-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}
.eqp-stw-feedback-list li {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.eqp-stw-feedback-list li.is-correct { background: #f0fff4; }
.eqp-stw-feedback-list li.is-incorrect { background: #fff5f5; }

.eqp-stw-icon { font-size: 1.5em; }
.eqp-stw-score { margin-top: 5px; font-size: 0.9em; color: #555; }

/* --- MODULE 26: INTERACTIVE VIDEO --- */
.eqp-iv-container {
    max-width: 100%;
    margin: 0 auto;
}
.eqp-iv-player-wrapper {
    position: relative;
    width: 100%;
    background: #000;
    line-height: 0;
}
.eqp-iv-video {
    width: 100%;
    height: auto;
    display: block;
}

/* --- MODULE 26: INTERACTIVE VIDEO (Giai đoạn 3) --- */

.eqp-iv-player-wrapper {
    position: relative;
    overflow: hidden; /* Để popup không tràn ra ngoài */
}

/* Lớp phủ Overlay (SỬA ĐỂ KHÔNG CHE NÚT PLAY) */
.eqp-iv-overlay-layer {
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    pointer-events: none; 
    z-index: 20;
    /* Đảm bảo flex để căn giữa popup nếu cần */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Khi Popup hiện lên, ta cho nó pointer-events: auto */
.eqp-iv-interaction-item {
    /* Giữ nguyên */
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); 
    pointer-events: auto; /* Quan trọng: Bật lại click */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}

/* Popup Câu hỏi (Interaction Item) */
.eqp-iv-interaction-item {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Nền tối mờ */
    pointer-events: auto; /* Bắt lại sự kiện chuột */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}

.eqp-iv-popup-content {
    background: #fff;
    width: 90%;
    max-width: 600px;
    max-height: 90%;
    overflow-y: auto;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position: relative;
}

/* CSS Reset cho các module con bên trong Popup */
.eqp-iv-popup-content .eqp-question {
    border: none;
    box-shadow: none;
    padding: 15px;
    margin: 0;
}
.eqp-iv-popup-content .eqp-question-title {
    display: none; /* Ẩn tiêu đề câu hỏi con vì đã có header popup */
}

.eqp-iv-popup-footer {
    padding: 10px 15px;
    background: #f7f7f7;
    border-top: 1px solid #eee;
    text-align: right;
}

/* Feedback List */
.eqp-iv-feedback-list {
    list-style: none;
    padding: 0;
}
.eqp-iv-feedback-list li {
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
}
.eqp-iv-feedback-list li.correct { color: #28a745; }
.eqp-iv-feedback-list li.incorrect { color: #dc3545; }

/* --- Custom Video Controls --- */
.eqp-iv-container {
    background: #000;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.eqp-iv-video {
    display: block;
    width: 100%;
    background: #000;
}
/* Ẩn controls mặc định trên một số trình duyệt */
.eqp-iv-video::-webkit-media-controls { display:none !important; }

/* Interactive Video Controls */
.eqp-iv-controls {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.9); /* Nền đen đậm hơn */
    padding: 10px;
    gap: 10px;
    color: #fff;
}
/* Các nút bấm */
.eqp-iv-controls button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    min-width: 30px;
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.eqp-iv-controls button:hover {
    color: #00a0d2;
}
.eqp-iv-controls .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.eqp-iv-time-display {
    color: #fff;
    font-family: monospace;
    font-size: 12px;
    min-width: 80px;
    text-align: center;
}

.eqp-iv-progress-bar {
    flex-grow: 1;
    height: 6px;
    background: #555;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}
.eqp-iv-progress-fill {
    height: 100%;
    background: #007cba;
    width: 0%;
    border-radius: 3px;
    transition: width 0.1s linear;
}

/* Sửa lại overlay để không che controls */
.eqp-iv-overlay-layer {
    bottom: 0; /* Giờ controls nằm ngoài video container (dưới) hoặc đè lên */
    /* Ở đây controls nằm trong container, dưới video. Overlay đè lên video */
    height: calc(100% - 50px); /* Trừ chiều cao controls */
}

/* Marker trên thanh Video */
.eqp-iv-marker {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #fff; /* Màu trắng */
    border: 2px solid #007cba; /* Viền xanh */
    border-radius: 50%;
    z-index: 5; /* Nằm trên thanh background nhưng dưới thanh fill nếu cần */
    pointer-events: none; /* Không chặn click vào thanh bar */
}
.eqp-iv-progress-fill {
    z-index: 2; /* Thanh chạy nằm dưới marker một chút hoặc ngang hàng */
}

/* Style cho danh sách kết quả Interactive Video */
.eqp-iv-correct-feedback {
    margin-top: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
}
.eqp-iv-feedback-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.eqp-iv-feedback-list li {
    padding: 5px 0;
    border-bottom: 1px dashed #e0e0e0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.eqp-iv-feedback-list li:last-child {
    border-bottom: none;
}
/* Màu sắc icon */
.eqp-iv-feedback-list li.correct .icon { color: #28a745; font-weight: bold; }
.eqp-iv-feedback-list li.incorrect .icon { color: #dc3545; font-weight: bold; }

/* Danh sách kết quả trong Interactive Video */
.eqp-iv-correct-feedback {
    margin-top: 20px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.eqp-iv-feedback-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eqp-iv-fb-item {
    display: flex;
    align-items: flex-start; /* Căn trên */
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}
.eqp-iv-fb-item:last-child {
    border-bottom: none;
}

.eqp-iv-fb-time {
    font-family: monospace;
    background: #eee;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 0.9em;
    color: #555;
    flex-shrink: 0;
}

.eqp-iv-fb-icon {
    margin-right: 10px;
    font-size: 1.2em;
    line-height: 1;
    flex-shrink: 0;
}

.eqp-iv-fb-content {
    flex-grow: 1;
    font-size: 0.95em;
    line-height: 1.4;
}

.eqp-iv-sub-expl {
    margin-top: 4px;
    color: #666;
    background: #fff3cd;
    padding: 5px 10px;
    border-radius: 4px;
    border-left: 3px solid #ffc107;
    font-size: 0.9em;
}

/* Style chi tiết User Answer vs Correct Answer */
.eqp-ans-user.is-valid {
    color: #155724;
    font-weight: bold;
    background-color: #d4edda;
    padding: 2px 6px;
    border-radius: 3px;
}

.eqp-ans-user.is-invalid {
    color: #721c24;
    text-decoration: line-through; /* Gạch ngang đáp án sai */
    background-color: #f8d7da;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    opacity: 0.8;
}

.eqp-ans-correct {
    color: #155724;
    font-weight: bold;
    font-style: italic;
}

/* Căn chỉnh lại layout list một chút */
.eqp-iv-fb-time {
    min-width: 50px; /* Cố định chiều rộng giờ để thẳng hàng */
    text-align: center;
}

/* Style cho vùng Feedback của Interactive Video */
.eqp-iv-correct-feedback {
    margin-top: 20px;
    border-top: 2px solid #eee;
    padding-top: 10px;
}

/* Style cho từng khối câu hỏi được Clone ra */
.eqp-iv-correct-feedback .eqp-iv-popup-content {
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: none; /* Bỏ shadow của popup */
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 5px;
    max-width: 100%;
}

/* Nhãn thời gian */
.eqp-iv-timestamp-label {
    display: inline-block;
    background: #007cba;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Fix style cho câu hỏi con khi nằm trong feedback */
.eqp-iv-correct-feedback .eqp-question {
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

/* --- ĐỒNG BỘ MÀU XANH LÁ (Thay cho xanh dương mặc định) --- */

/* Error Correction: Khi đang chọn (Chưa nộp bài) */
.eqp-ec-radio:checked + .eqp-ec-word {
    color: rgb(40, 167, 69);
    border-bottom: 3px solid rgb(40, 167, 69);
    /*background-color: rgba(40, 167, 69, 0.1);*/
}

/* Radio/Checkbox chung của plugin */
.eqp-radio-input:checked + .eqp-option-label,
.eqp-checkbox-input:checked + .eqp-option-label {
    border-color: rgb(40, 167, 69) ;
    background-color: #f6ffed ;
}

.eqp-radio-input:checked + .eqp-option-label .eqp-option-marker,
.eqp-checkbox-input:checked + .eqp-option-label .eqp-option-marker {
    border-color: rgb(40, 167, 69);
    background-color: rgb(40, 167, 69);
}

/* Slider: Marker đáp án đúng */
.eqp-slider-input-wrapper {
    position: relative; /* Để định vị marker con */
}

.eqp-slider-correct-marker {
    position: absolute;
    top: 35%; /* Căn giữa theo chiều dọc của thanh trượt */
    width: 16px;
    height: 16px;
    background-color: rgb(40, 167, 69); /* Màu xanh lá chuẩn */
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%); /* Căn tâm chính xác */
    z-index: 5; /* Nằm đè lên thanh trượt */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    pointer-events: none; /* Không cho user kéo cái này */
}

/* Hiển thị tooltip giá trị khi hover vào nút xanh (Optional) */
.eqp-slider-correct-marker:hover::after {
    content: attr(data-value);
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 2px 5px;
    font-size: 10px;
    border-radius: 3px;
    white-space: nowrap;
}

/* Slider Marker Label (Số hiển thị bên dưới chấm xanh) */
.eqp-slider-marker-label {
    position: absolute;
    top: -30px; /* Nằm dưới chấm tròn khoảng 18px */
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: bold;
    color: rgb(40, 167, 69);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    white-space: nowrap;
    pointer-events: none;
}

/* Đảm bảo wrapper có position relative để marker định vị theo nó */
.eqp-slider-input-wrapper {
    position: relative; 
}

/* Style cho nhãn đáp án đúng của Annotate Image */
.eqp-ani-correct-label {
    position: absolute;
    background-color: rgb(40, 167, 69);
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    
    /* Căn giữa */
    transform: translate(-50%, -100%); /* Dịch lên trên 100% chiều cao của nó */
    pointer-events: none;
    border: 2px solid #fff;
    
    /* Margin bottom để tạo khoảng cách với input */
    margin-bottom: 10px;
}

@media screen and (max-width: 550px) {
    .eqp-ani-correct-label {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Mũi tên nhỏ chỉ lên trên */
.eqp-ani-correct-label::before {
    content: '';
    position: absolute;
    
    /* Đặt ở cạnh dưới */
    bottom: -5px; 
    top: auto; /* Reset top */
    
    left: 50%;
    transform: translateX(-50%);
    
    /* Hình tam giác chỉ xuống */
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: rgb(40, 167, 69) transparent transparent transparent;
    
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.1));
}

/* Select Matching Feedback */
.eqp-sm-correct-label {
    color: rgb(40, 167, 69); /* Xanh lá */
    font-weight: bold;
    margin-left: 10px;
    font-size: 0.95em;
    vertical-align: middle;
}

/* Sentence Ordering Feedback */
.eqp-so-correct-feedback {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0f9eb; /* Nền xanh rất nhạt */
    border: 1px dashed #28a745;
    border-radius: 5px;
}

.eqp-so-feedback-title {
    font-weight: bold;
    color: #155724;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Các thanh đáp án đúng */
.eqp-ordering-item.is-correct-order-item {
    background-color: #fff;
    border: 1px solid #28a745;
    border-left: 5px solid #28a745; /* Viền trái dày màu xanh */
    color: #333;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    cursor: default;
    display: block; /* Đảm bảo nằm trên 1 hàng ngang */
}
.eqp-ordering-item.is-correct-order-item:last-child {
    margin-bottom: 0;
}

/* Sort the Items Feedback */
.eqp-sti-correct-label {
    font-size: 0.85em;
    font-weight: bold;
    color: rgb(40, 167, 69); /* Màu xanh lá */
    margin-top: 4px;
    border-top: 1px dashed rgba(0,0,0,0.1);
    padding-top: 2px;
}

.eqp-sti-item.is-incorrect-item .eqp-sti-correct-label {
    color: rgb(40, 167, 69); /* Trên nền đỏ vẫn dùng chữ xanh cho đáp án đúng */
}

.eqp-fhs-instruction {line-height: 20px;}

/* --- MODULE: IMAGE SEQUENCING --- */
.eqp-iseq-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.eqp-iseq-item {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    cursor: grab;
    width: 150px; /* Kích thước thẻ ảnh */
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.eqp-iseq-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.eqp-iseq-item.ui-sortable-helper {
    cursor: grabbing;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transform: scale(1.05);
    z-index: 100;
}

.eqp-iseq-img-wrapper {
    width: 100%;
    height: 120px; /* Chiều cao cố định ảnh */
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.eqp-iseq-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cắt ảnh cho vừa khung */
    pointer-events: none;
}

.eqp-iseq-caption {
    padding: 8px;
    text-align: center;
    font-size: 0.9em;
    font-weight: 600;
    background: #fff;
    border-top: 1px solid #eee;
}

.eqp-iseq-placeholder {
    border: 2px dashed #007cba;
    background: #f0f8ff;
    border-radius: 6px;
    width: 150px;
    height: 150px;
    visibility: visible !important;
}

/* Feedback Styles */
.eqp-iseq-correct-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    opacity: 0.8; /* Làm mờ một chút để phân biệt với bài làm */
}
.eqp-iseq-correct-item {
    width: 100px; /* Nhỏ hơn ảnh gốc */
    border: 1px solid #28a745;
    border-radius: 4px;
    overflow: hidden;
    text-align: center;
    background: #fff;
}
.eqp-iseq-correct-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}
.eqp-iseq-correct-item span {
    display: block;
    padding: 4px;
    font-size: 10px;
    background: #d4edda;
    color: #155724;
}

/* --- MODULE: IMAGE PAIRING --- */
.eqp-ipair-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 20px;
}

.eqp-ipair-source-col, 
.eqp-ipair-target-col {
    display: flex;
    flex-direction: column; /* Xếp dọc (hoặc grid tùy bạn) */
    gap: 15px;
    min-width: 150px;
}
/* Grid hiển thị */
.eqp-ipair-source-col {
    flex-wrap: wrap;
    flex-direction: row;
    width: 40%;
    align-content: flex-start;
}
.eqp-ipair-target-col {
    flex-wrap: wrap;
    flex-direction: row;
    width: 55%;
}

/* Source Item */
.eqp-ipair-source-item {
    width: 100px; height: 100px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 5px;
    cursor: grab;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.eqp-ipair-source-item img {
    width: 100%; height: 100%; object-fit: contain;
    pointer-events: none;
}

/* Target Item */
.eqp-ipair-target-item {
    width: 100px; height: 100px;
    border: 2px dashed #aaa;
    background: #f9f9f9;
    border-radius: 5px;
    position: relative;
}
.eqp-ipair-target-item.is-hovered {
    border-color: #007cba;
    background: #e6f7ff;
}

/* Ảnh nền của Target (Da động vật) */
.eqp-ipair-target-bg {
    width: 100%; height: 100%;
}
.eqp-ipair-target-bg img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 3px;
}

/* Vùng chứa ảnh thả vào (đè lên trên) */
.eqp-ipair-drop-zone {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Dùng Flexbox để căn chỉnh vị trí ảnh con */
    display: flex; 
    align-items: center;    /* Căn giữa dọc */
    justify-content: center; /* Căn giữa ngang */
    z-index: 5;
    pointer-events: none;
}
/* Ảnh đã thả vào thì nhỏ lại chút để nhìn thấy nền */
.eqp-ipair-drop-zone .eqp-ipair-source-item {
    width: 30% !important;  /* Nhỏ lại 30% */
    height: 30% !important;
    
    /* Căn chỉnh vị trí (Margin này sẽ đẩy ảnh lệch đi so với tâm) */
    margin-right: 50%; 
    margin-bottom: 50%;
    
    /* Style đẹp hơn */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    cursor: default;
    pointer-events: none; /* Khóa click sau khi nộp */
    border-radius: 4px; 
    border: 1px solid #fff;
    overflow: hidden;
    background: #fff;
    padding: 2px;
    
    /* Flex để căn ảnh bên trong */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important; /* Bắt buộc nhận click */
    cursor: pointer !important; /* Hiện bàn tay để biết là click được */
    position: static !important; /* Đảm bảo nằm gọn trong ô */
}

/* Sửa ảnh bên trong cho vừa khung tròn */
.eqp-ipair-drop-zone .eqp-ipair-source-item img {
    width: 100%; height: 100%; object-fit: cover;
}

/* Feedback */
.eqp-ipair-target-item.is-correct {
    border: 3px solid #28a745;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);
}
.eqp-ipair-target-item.is-incorrect {
    border: 3px solid #dc3545;
}

/* Ảnh đáp án đúng nhỏ xíu hiện ra khi sai */
.eqp-ipair-correct-thumb {
    position: absolute;
    bottom: -10px; right: -10px;
    width: 40px; height: 40px;
    border: 2px solid #28a745;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.eqp-ipair-correct-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}

/* --- MODULE: WORD ORDERING --- */
.eqp-wo-container {
    margin-top: 15px;
}

.eqp-wo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Tự xuống dòng */
    gap: 8px;
}

.eqp-wo-item {
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px 15px;
    cursor: grab;
    font-size: 1.1em;
    box-shadow: 0 2px 3px rgba(0,0,0,0.05);
    user-select: none;
    transition: transform 0.1s, background-color 0.2s;
}

.eqp-wo-item:hover {
    background-color: #f0f8ff;
    border-color: #007cba;
}

.eqp-wo-item.ui-sortable-helper {
    cursor: grabbing;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    transform: scale(1.05);
    z-index: 100;
}

.eqp-wo-placeholder {
    background: #e6f7ff;
    border: 1px dashed #007cba;
    border-radius: 20px;
    visibility: visible !important;
    height: 38px; /* Cần khớp chiều cao item */
}

/* Word Ordering Multi Item */
.eqp-wo-item-row {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}
.eqp-wo-item-row:last-child {
    border-bottom: none;
}

/* Feedback từng câu */
.eqp-wo-correct-feedback {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #f1fcf1;
    border-left: 3px solid #28a745;
    border-radius: 3px;
    color: #333;
    font-size: 0.95em;
}
.eqp-wo-correct-feedback strong {
    color: #28a745;
    margin-right: 5px;
}

/* --- MODULE: DRAG IMAGE ON IMAGE --- */
.eqp-dioi-bank {
    display: flex; flex-wrap: wrap; gap: 10px; padding: 10px;
    background: #f0f8ff; border: 2px dashed #007cba; border-radius: 5px;
    margin-bottom: 15px; min-height: 60px;
}
.eqp-dioi-draggable {
    width: 80px; height: 80px;
    border: 2px solid #fff; border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: grab; overflow: hidden;
    background: #fff;
}
.eqp-dioi-draggable img { width: 100%; height: 100%; object-fit: cover; }

.eqp-dioi-wrapper {
    position: relative; width: 100%; overflow: hidden;
    border: 1px solid #ccc;
}
.eqp-dioi-bg { width: 100%; display: block; }

.eqp-dioi-dropzone {
    position: absolute;
    width: 80px; height: 80px; /* Kích thước ô thả */
    border: 2px dashed #fff; /* Viền trắng đứt đoạn cho dễ nhìn trên nền tối */
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
}
.eqp-dioi-dropzone.is-hovered { background: rgba(200,255,200,0.5); border-color: #28a745; }

/* Ảnh khi đã thả vào */
.eqp-dioi-dropzone .eqp-dioi-draggable {
    width: 100%; height: 100%;
    border: none; box-shadow: none;
    cursor: pointer;
}

/* Feedback */
.eqp-dioi-dropzone.is-correct { border: 3px solid #28a745; }
.eqp-dioi-dropzone.is-incorrect { border: 3px solid #dc3545; }

.eqp-dioi-correct-thumb {
    position: absolute; bottom: -15px; right: -15px;
    width: 40px; height: 40px;
    border: 2px solid #28a745; background: #fff;
    border-radius: 50%; overflow: hidden; z-index: 10;
}
.eqp-dioi-correct-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   RESPONSIVE: DRAG IMAGE ON IMAGE (Module 31)
   ============================================================ */

/* 1. Màn hình Tablet (iPad, Tablet dọc) - Dưới 768px */
@media screen and (max-width: 768px) {
    /* Thu nhỏ ô kéo và ô thả xuống 60px */
    .eqp-dioi-draggable,
    .eqp-dioi-dropzone {
        width: 40px;
        height: 40px;
    }
    
    /* Thu nhỏ ảnh đáp án đúng (Feedback) */
    .eqp-dioi-correct-thumb {
        width: 30px;
        height: 30px;
        bottom: -10px;
        right: -10px;
    }
}

/* 2. Màn hình Điện thoại (Mobile) - Dưới 480px */
@media screen and (max-width: 480px) {
    /* Thu nhỏ ô kéo và ô thả xuống 40px */
    /* Dùng !important để ghi đè style inline (nếu có) */
    .eqp-dioi-draggable,
    .eqp-dioi-dropzone {
        width: 40px !important;
        height: 40px !important;
        border-width: 1px; /* Viền mỏng lại cho thanh thoát */
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    /* Điều chỉnh Ngân hàng ảnh cho gọn */
    .eqp-dioi-bank {
        gap: 5px;
        padding: 5px;
        justify-content: center;
    }

    /* Ảnh đáp án đúng nhỏ xíu */
    .eqp-dioi-correct-thumb {
        width: 20px;
        height: 20px;
        bottom: -8px;
        right: -8px;
        border-width: 1px;
    }
}

/* ============================================================
   RESPONSIVE: DRAG ON IMAGE (Module 16 - Kéo Chữ)
   ============================================================ */

/* 1. Màn hình Tablet (iPad, Tablet dọc) - Dưới 768px */
@media screen and (max-width: 768px) {
    /* Thu nhỏ ô chữ */
    .eqp-doi-draggable-word {
        padding: 6px 10px !important;
        font-size: 0.9em !important;
    }
    
    /* Thu nhỏ ô trống trên ảnh */
    .eqp-doi-droppable-blank {
        min-width: 80px !important;
        height: 80px !important;
        font-size: 0.85em !important;
    }
}

/* 2. Màn hình Điện thoại (Mobile) - Dưới 480px */
@media screen and (max-width: 480px) {
    /* Thu nhỏ hơn nữa cho mobile */
    .eqp-doi-draggable-word {
        padding: 4px 8px !important;
        font-size: 0.8em !important;
        border-radius: 3px;
    }
    
    /* Ô trống nhỏ gọn */
    .eqp-doi-droppable-blank {
        min-width: 50px !important;
        height: 50px !important;
        font-size: 0.75em !important;
        border-width: 1px !important;
    }
    
    /* Điều chỉnh Word Bank */
    .eqp-doi-word-bank {
        gap: 5px;
        padding: 8px;
    }
    
    /* Nhãn đáp án đúng cũng cần nhỏ lại */
    .eqp-doi-correct-answer {
        font-size: 0.7em !important;
        bottom: -18px !important;
        padding: 1px 4px !important;
    }
}

/* [FIX MOBILE] Ngăn cuộn trang khi kéo thả trên điện thoại */
.eqp-doi-draggable-word,      /* Module 16: Drag Text */
.eqp-dioi-draggable,          /* Module 31: Drag Image */
.eqp-ipair-source-item,       /* Module 29: Image Pairing */
.eqp-ordering-item,           /* Sentence Ordering */
.eqp-sti-item,                /* Sort the Items */
.eqp-dtw-item,                /* Drag the Words */
.eqp-dtb-item,                /* Drag to Blanks */
.eqp-clock-hand               /* Interactive Clock */
{
    touch-action: none; 
    -ms-touch-action: none;
}

/* ============================================================
   [FIX MOBILE GLOBAL] HỖ TRỢ KÉO THẢ & TƯƠNG TÁC TRÊN ĐIỆN THOẠI
   Ngăn chặn hành vi cuộn trang (Scroll) khi chạm vào các phần tử này
   ============================================================ */

/* 1. Các Module Kéo Thả (Drag & Drop) */
.eqp-sti-item,               /* Sort the Items */
.eqp-dtw-item,               /* Drag the Words */
.eqp-dtb-item,               /* Drag to Blanks */
.eqp-ordering-item,          /* Sentence Ordering */
.eqp-doi-draggable-word,     /* Drag on Image */
.eqp-dioi-draggable,         /* Drag Image on Image */
.eqp-ipair-source-item       /* Image Pairing */
{
    touch-action: none !important;
    -ms-touch-action: none !important;
    cursor: grab;
}

/* 2. Các Module Vẽ/Chọn (Drawing/Selection) */
.eqp-ws-cell,                /* Word Search (Kéo để chọn từ) */
.eqp-fhs-background-image,   /* Find Hotspots (Chạm để đánh dấu) */
.eqp-clock-hand,             /* Interactive Clock (Quay kim) */
.eqp-slider-input            /* Slider (Kéo thanh trượt) */
{
    touch-action: none !important;
    -ms-touch-action: none !important;
}

/* Fix riêng cho Slider: Chỉ chặn cuộn ngang, cho phép cuộn dọc để lướt qua */
.eqp-slider-input {
    touch-action: pan-y !important; 
}

/* Fix trạng thái khi đang kéo */
.ui-draggable-dragging,
.ui-sortable-helper {
    touch-action: none !important;
    opacity: 0.8;
    z-index: 9999 !important; /* Đảm bảo nổi lên trên cùng */
    cursor: grabbing;
}

/* ============================================================
   RESPONSIVE: SORT THE ITEMS (Module 15)
   ============================================================ */

/* 1. Màn hình Tablet (iPad, Tablet dọc) - Dưới 768px */
@media screen and (max-width: 768px) {
    .eqp-sti-item {
        max-width: 120px !important; /* Giảm kích thước item */
        padding: 8px !important;
        font-size: 0.9em !important;
    }
    
    /* Ảnh bên trong item cũng phải co lại */
    .eqp-sti-item img,
    .eqp-sti-item video {
        max-height: 80px; /* Giới hạn chiều cao ảnh */
        width: auto;
        display: block;
        margin: 0 auto;
    }
}

/* 2. Màn hình Điện thoại (Mobile) - Dưới 480px */
@media screen and (max-width: 480px) {
    /* Item Bank: Căn giữa và giảm khoảng cách */
    .eqp-sti-item-bank {
        justify-content: center;
        gap: 5px !important;
        padding: 5px !important;
    }

    /* Item nhỏ gọn hơn nữa */
    .eqp-sti-item {
        max-width: 80px !important; /* Thu nhỏ còn 80px */
        padding: 5px !important;
        font-size: 0.8em !important;
    }

    /* Ảnh nhỏ xíu cho mobile */
    .eqp-sti-item img,
    .eqp-sti-item video {
        max-height: 50px !important; /* Chiều cao tối đa 50px */
        width: auto;
    }

    /* Các hộp phân loại (Category Box) */
    .eqp-sti-category-box {
        min-height: 80px !important;
        padding: 5px !important;
    }
    
    /* Tiêu đề hộp nhỏ lại */
    .eqp-sti-category-title {
        font-size: 1em !important;
        padding: 8px !important;
    }
}

/* ============================================================
   MODULE 32: LISTEN & DRAW LINES (Final Version)
   ============================================================ */

.eqp-ldl-container {
    margin-top: 20px;
}

/* 1. Trình phát Audio */
.eqp-ldl-audio {
    margin-bottom: 15px;
    text-align: center;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #eee;
}
.eqp-ldl-audio audio {
    width: 100%;
    max-width: 400px;
    height: 40px;
}

/* 2. Khung bao (Canvas) */
.eqp-ldl-canvas-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible; /* Để thẻ tên ở mép không bị cắt */
    border: 1px solid #ccc;
    line-height: 0;
    user-select: none;
    -webkit-user-select: none;
}

.eqp-ldl-bg { 
    width: 100%; 
    height: auto; 
    display: block; 
    pointer-events: none;
}

/* 3. Các lớp phủ (Layers) */
.eqp-ldl-line-layer, 
.eqp-ldl-target-layer {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    pointer-events: none; /* Cho phép click xuyên qua */
    z-index: 10;
}

/* 4. Vùng thả (Target Polygon) */
.eqp-ldl-poly-target {
    cursor: default !important; /* Giấu con trỏ chuột để không lộ đáp án */
    pointer-events: auto; /* Bắt buộc để nhận click */
    fill: transparent; 
    stroke: none;
    transition: none;
}
/* Tắt hoàn toàn hiệu ứng hover để người học không dò được vùng */
.eqp-ldl-poly-target:hover {
    fill: transparent !important;
    stroke: none !important;
}

/* 5. Thẻ Tên (Item) */
.eqp-ldl-item {
    position: absolute;
    background: #fff;
    border: 2px solid #007cba;
    border-radius: 6px;
    font-weight: 800; /* Chữ đậm */
    color: #333;
    z-index: 20;
    cursor: pointer !important; /* Con trỏ tay chỉ */
    
    /* Căn tâm thẻ vào đúng tọa độ */
    transform: translate(-50%, -50%);
    
    /* Kích thước to rõ */
    padding: 16px 16px;
    font-size: 15px;
    
    white-space: nowrap;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transition: all 0.2s;
    
    /* Hỗ trợ mobile tốt hơn */
    touch-action: none;
}

/* Trạng thái đang được chọn (Click lần 1) */
.eqp-ldl-item.is-selected {
    background-color: #e6f7ff;
    border-color: #005a8a;
    box-shadow: 0 0 0 4px rgba(0, 124, 186, 0.3); /* Viền sáng */
    transform: translate(-50%, -50%) scale(1.1); /* Phóng to nhẹ */
    z-index: 30;
}

/* Trạng thái đã nối xong */
.eqp-ldl-item.is-connected {
    /* background-color: #f0f0f0; */ /* Có thể bỏ nếu muốn giữ màu trắng */
}

/* 6. Các điểm neo & đích (Ẩn hoặc ảo) */
.eqp-ldl-anchor {
    display: none; /* Ẩn điểm neo đi vì click vào cả hộp */
}

.eqp-ldl-target-center {
    position: absolute;
    width: 1px; height: 1px;
    background: transparent;
    pointer-events: none;
}

.eqp-ldl-correct-point {
    position: absolute;
    width: 1px; height: 1px;
    background: transparent;
    pointer-events: none;
}

/* === RESPONSIVE (Tự động co giãn) === */

/* Tablet (Dưới 768px) */
@media screen and (max-width: 768px) {
    .eqp-ldl-item {
        padding: 10px;
        font-size: 13px;
        border-width: 1px;
        border-radius: 4px;
    }
}

/* Mobile (Dưới 480px) */
@media screen and (max-width: 480px) {
    .eqp-ldl-item {
        padding: 8px;
        font-size: 11px; /* Chữ nhỏ lại */
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
}

/* Module 33: Listen & Colour */
.eqp-lc-container {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.eqp-lc-palette {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.eqp-lc-tool {
    width: 36px;
    height: 36px;
    border: 2px solid #eee;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}
.eqp-lc-tool:hover { transform: scale(1.1); }
.eqp-lc-tool.selected { border-color: #333; transform: scale(1.15); box-shadow: 0 0 0 2px rgba(0,0,0,0.1);}

.eqp-lc-workspace {
    flex: 1;
    position: relative;
}
.eqp-lc-canvas-wrapper {
    position: relative;
    width: 100%;
    line-height: 0;
    border: 1px solid #ccc;
    overflow: hidden;
}
.eqp-lc-svg-layer, .eqp-lc-input-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
}
.eqp-lc-poly { fill: transparent; stroke: none; cursor: pointer; transition: fill 0.2s; pointer-events: auto;}
.eqp-lc-poly:hover { fill: rgba(255, 255, 255, 0.3); stroke: rgba(0,0,0,0.2); stroke-width: 0.3px; }

/* Input */
.eqp-lc-input-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 20;
    pointer-events: auto;
}
.eqp-lc-input {
    width: 100px;
    padding: 5px;
    border: 1px dashed #007cba;
    background: rgba(255,255,255,0.9);
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
}

.eqp-lc-tool[data-color="cursor"] {
    display: none !important;
}

/* Responsive */
@media (max-width: 600px) {
    .eqp-lc-container { flex-direction: column-reverse; }
    .eqp-lc-palette { flex-direction: row; justify-content: center; width: 100%; box-sizing: border-box; }
}

/* ============================================================
   FIX & RESPONSIVE: MODULE 33 (LISTEN & COLOUR)
   ============================================================ */

/* 1. Fix ảnh trong phần Explanation bị tràn ra ngoài */
.eqp-explanation-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 10px auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 2. Fix ô màu bị méo và ẩn icon Edit */
.eqp-lc-tool {
    flex-shrink: 0; /* [QUAN TRỌNG] Ngăn ô màu bị bẹp/méo */
}

/* Ẩn icon bút chì (dashicons-edit) trong công cụ Cursor */
.eqp-lc-tool[data-color="cursor"] .dashicons {
    display: none !important;
}
/* Thêm chữ "A" hoặc icon trỏ chuột thay thế để ô không bị trống (Tùy chọn) */
.eqp-lc-tool[data-color="cursor"]::after {
    content: '✎'; /* Dùng ký tự unicode hình bút hoặc chữ A */
    font-size: 18px;
    font-weight: bold;
    color: #555;
}

/* 3. Responsive cho màn hình nhỏ (Mobile) */
@media screen and (max-width: 600px) {
    
    /* Bảng màu nằm ngang và cho phép xuống dòng */
    .eqp-lc-palette {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    /* Ô màu nhỏ lại một chút trên mobile */
    .eqp-lc-tool {
        width: 32px;
        height: 32px;
    }

    /* Ô nhập liệu (Input) nhỏ gọn hơn để không che ảnh */
    .eqp-lc-input {
        width: 60px !important;  /* Nhỏ hơn */
        padding: 2px 4px !important;
        font-size: 11px !important;
        height: 18px !important;
        line-height: 20px;
        background: rgba(255, 255, 255, 0.95);
    }
    
    /* Nhãn đáp án đúng cũng nhỏ lại */
    .eqp-ani-correct-label {
        font-size: 11px !important;
        padding: 8px !important;
        min-width: auto !important;
    }
}

/* Hiển thị điểm số chi tiết từng câu */
.eqp-question-score-detail {
    margin-top: -5px; /* Kéo sát lên dòng Correct/Incorrect */
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #555;
    font-style: italic;
}

.eqp-question-score-detail strong {
    color: #007cba; /* Tô màu xanh cho số điểm */
    font-weight: 800;
}

/* ============================================================
   GRID VIEW LAYOUT (Picture Choice)
   Dành cho Single Choice & Multiple Choice
   ============================================================ */

.eqp-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Tự động chia cột, tối thiểu 150px */
    gap: 15px;
    margin-top: 15px;
}

.eqp-layout-grid .eqp-option-item {
    margin-bottom: 0; /* Reset margin cũ */
    height: 100%; /* Để các ô cao bằng nhau */
}

.eqp-layout-grid .eqp-option-label {
    display: flex;
    flex-direction: column-reverse; /* Đưa nút radio/checkbox xuống dưới ảnh */
    align-items: center;
    justify-content: space-between;
    text-align: center;
    height: 90%;
    padding: 15px;
    border: 2px solid #eee; /* Viền dày hơn chút */
    border-radius: 8px;
    transition: all 0.2s;
}

/* Hiệu ứng hover */
.eqp-layout-grid .eqp-option-label:hover {
    border-color: #007cba;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Ảnh bên trong Grid */
.eqp-layout-grid .eqp-option-label img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px; /* Khoảng cách với nút radio */
    border-radius: 4px;
    display: block;
}

/* Nút Radio/Checkbox */
.eqp-layout-grid .eqp-option-marker {
    margin-right: 0; /* Bỏ margin phải vì đã xuống dòng */
    margin-top: 5px;
    width: 24px; /* To hơn chút cho dễ bấm */
    height: 24px;
}

/* Feedback khi chọn */
.eqp-radio-input:checked + .eqp-option-label,
.eqp-checkbox-input:checked + .eqp-option-label {
    border-color: #007cba;
    background-color: #f0f8ff;
    box-shadow: 0 0 0 1px #007cba; /* Viền đôi nổi bật */
}

/* Responsive Mobile cho Grid View */
@media screen and (max-width: 600px) {
    .eqp-layout-grid {
        /* [FIX] Trên mobile nhỏ, chuyển thành 1 cột nếu cần, hoặc tối thiểu 2 cột nhưng có min-width */
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); 
        gap: 10px;
    }

    /* Nếu màn hình quá bé (dưới 350px), chuyển hẳn sang 1 cột để dễ nhìn */
    @media screen and (max-width: 350px) {
        .eqp-layout-grid {
            grid-template-columns: 1fr;
        }
        .eqp-layout-grid .eqp-option-label {
            flex-direction: row; /* Quay về hàng ngang truyền thống nếu 1 cột */
            text-align: left;
            justify-content: flex-start;
        }
        .eqp-layout-grid .eqp-option-label img {
            max-width: 80px; /* Ảnh nhỏ lại bên trái */
            margin-bottom: 0;
            margin-right: 10px;
        }
        .eqp-layout-grid .eqp-option-marker {
            margin-top: 0;
            margin-right: 10px;
        }
    }

    .eqp-layout-grid .eqp-option-label {
        padding: 10px;
        font-size: 0.9em;
        /* [FIX] Ngăn text tràn */
        word-break: break-word; 
        hyphens: auto;
    }
}

/* --- MODULE 34: SPOT THE DIFFERENCE --- */
.eqp-std-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 15px;
}
.eqp-std-original, .eqp-std-diff {
    flex: 1;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.eqp-std-label {
    background: #f0f0f0;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    font-size: 0.9em;
    color: #555;
}
.eqp-std-original img {
    display: block; width: 100%; height: auto;
}

/* Tùy chỉnh Feedback riêng cho Module này (Nét khoanh rõ hơn) */
.eqp-module-spot-the-difference .eqp-fhs-feedback-svg polygon {
    fill: transparent !important; /* Không tô nền */
    stroke: #e53935 !important; /* Viền đỏ giống bút chấm bài (hoặc xanh tùy ý) */
    stroke-width: 0.5px !important;
    stroke-dasharray: 0 !important; /* Nét liền */
    filter: drop-shadow(0 0 2px #fff); /* Bóng trắng để nổi bật trên nền tối */
}

/* Responsive */
@media (max-width: 768px) {
    .eqp-std-container { flex-direction: column; }
}

/* Feedback riêng cho Spot the Difference: Chỉ hiện viền, không tô nền */
.eqp-module-spot-the-difference .eqp-fhs-feedback-svg polygon {
    fill: transparent !important; /* Trong suốt */
    stroke: #e53935 !important;   /* Viền màu đỏ (hoặc xanh #28a745) */
    stroke-width: 0.5px !important; /* Nét dày như bút */
    stroke-dasharray: 0 !important; /* Nét liền */
    filter: drop-shadow(0 0 2px #fff); /* Bóng trắng để nổi bật trên nền tối */
}

.eqp-fhs-image-wrapper .eqp-std-label {
    padding: 16px;
}

/* ============================================================
   MODULE 3: TRUE/FALSE SET (Unified Styles)
   Hỗ trợ 2 giao diện: Bảng (Default) & Thẻ (Tick/Cross)
   ============================================================ */

/* ------------------------------------------------------------
   A. GIAO DIỆN BẢNG (DEFAULT TABLE LAYOUT)
   Fix: Ẩn nút tròn, hiện ô vuông to
   ------------------------------------------------------------ */

.eqp-true-false-set-table {
    display: grid;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 15px;
}

/* Header & Rows */
.eqp-tf-table-header, .eqp-tf-table-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px; /* Cột nội dung rộng, 2 cột chọn cố định */
}
.eqp-tf-table-header {
    background-color: #f7f7f7;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}
.eqp-tf-table-row {
    border-top: 1px solid #eee;
    background-color: #fff;
}
.eqp-tf-table-row:nth-child(even) {
    background-color: #fdfdfd;
}

/* Cells */
.eqp-tf-cell-statement {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.eqp-tf-cell-statement img {
    max-width: 80px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #eee;
}
.eqp-tf-cell-option {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #eee;
}

/* [FIX] ẨN HOÀN TOÀN NÚT RADIO MẶC ĐỊNH */
.eqp-true-false-set-table input.eqp-tf-input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    appearance: none;
}

/* [FIX] STYLE Ô VUÔNG (Thay thế nút tròn) */
.eqp-true-false-set-table .eqp-option-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border: 2px solid #ccc;
    border-radius: 6px !important;
    background-color: #fff;
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Font cho icon */
    font-size: 24px;
    font-weight: bold;
    color: #fff; /* Mặc định ẩn icon */
    left: -50%;
    top: -50%;
}

/* Xóa chấm tròn cũ nếu có */
.eqp-true-false-set-table .eqp-option-marker::after { display: none; }

/* Hover */
.eqp-true-false-set-table .eqp-tf-label:hover .eqp-option-marker {
    border-color: #999;
    background-color: #f9f9f9;
}

/* --- TRẠNG THÁI CHECKED (BẢNG) --- */
/* Chọn True (Cột 1) -> Xanh */
.eqp-true-false-set-table input[value="true"]:checked + .eqp-tf-label .eqp-option-marker {
    background-color: #28a745;
    border-color: #28a745;
}
.eqp-true-false-set-table input[value="true"]:checked + .eqp-tf-label .eqp-option-marker::before { content: '✔'; }

/* Chọn False (Cột 2) -> Đỏ */
.eqp-true-false-set-table input[value="false"]:checked + .eqp-tf-label .eqp-option-marker {
    background-color: #dc3545;
    border-color: #dc3545;
}
.eqp-true-false-set-table input[value="false"]:checked + .eqp-tf-label .eqp-option-marker::before { content: '✘'; }

/* --- FEEDBACK (BẢNG) --- */
/* Đáp án đúng */
.eqp-true-false-set-table input.is-correct-answer + .eqp-tf-label .eqp-option-marker {
    background-color: #e8f5e9 !important;
    border: 3px solid #28a745 !important;
    color: #28a745 !important;
}
.eqp-true-false-set-table input[value="true"].is-correct-answer + .eqp-tf-label .eqp-option-marker::before { content: '✔'; }
.eqp-true-false-set-table input[value="false"].is-correct-answer + .eqp-tf-label .eqp-option-marker::before { content: '✘'; }

/* User chọn sai */
.eqp-true-false-set-table input.is-user-incorrect + .eqp-tf-label .eqp-option-marker {
    opacity: 0.5;
}


/* ============================================================
   MODULE 3: TRUE/FALSE SET (Unified Styles - FINAL FIX ICON)
   Hỗ trợ 2 giao diện: Bảng (Default) & Thẻ (Tick/Cross)
   Fix: Đồng bộ icon check/cross bằng CSS content tránh lỗi emoji
   ============================================================ */

/* ------------------------------------------------------------
   A. GIAO DIỆN BẢNG (DEFAULT TABLE LAYOUT)
   ------------------------------------------------------------ */

.eqp-true-false-set-table {
    display: grid;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 15px;
}

/* Header & Rows */
.eqp-tf-table-header, .eqp-tf-table-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
}
.eqp-tf-table-header {
    background-color: #f7f7f7;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}
.eqp-tf-table-row {
    border-top: 1px solid #eee;
    background-color: #fff;
}
.eqp-tf-table-row:nth-child(even) {
    background-color: #fdfdfd;
}

/* Cells */
.eqp-tf-cell-statement {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.eqp-tf-cell-statement img {
    max-width: 80px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #eee;
}
.eqp-tf-cell-option {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #eee;
}

/* ẨN NÚT RADIO MẶC ĐỊNH */
.eqp-true-false-set-table input.eqp-tf-input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    appearance: none;
}

/* STYLE Ô VUÔNG (BẢNG) */
.eqp-true-false-set-table .eqp-option-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border: 2px solid #ccc;
    border-radius: 6px !important;
    background-color: #fff;
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 24px;
    font-weight: bold;
    color: #fff; /* Mặc định ẩn icon */
}

/* Xóa chấm tròn cũ */
.eqp-true-false-set-table .eqp-option-marker::after { display: none; }

/* Hover */
.eqp-true-false-set-table .eqp-tf-label:hover .eqp-option-marker {
    border-color: #999;
    background-color: #f9f9f9;
}

/* --- TRẠNG THÁI CHECKED (BẢNG) --- */
.eqp-true-false-set-table input[value="true"]:checked + .eqp-tf-label .eqp-option-marker {
    background-color: #28a745; border-color: #28a745;
}
.eqp-true-false-set-table input[value="true"]:checked + .eqp-tf-label .eqp-option-marker::before { content: '✓'; }

.eqp-true-false-set-table input[value="false"]:checked + .eqp-tf-label .eqp-option-marker {
    background-color: #dc3545; border-color: #dc3545;
}
.eqp-true-false-set-table input[value="false"]:checked + .eqp-tf-label .eqp-option-marker::before { content: '✗'; }

/* --- FEEDBACK (BẢNG) --- */
.eqp-true-false-set-table input.is-correct-answer + .eqp-tf-label .eqp-option-marker {
    background-color: #e8f5e9 !important;
    border: 3px solid #28a745 !important;
    color: #28a745 !important;
}
.eqp-true-false-set-table input[value="true"].is-correct-answer + .eqp-tf-label .eqp-option-marker::before { content: '✓'; }
.eqp-true-false-set-table input[value="false"].is-correct-answer + .eqp-tf-label .eqp-option-marker::before { content: '✗'; }

.eqp-true-false-set-table input.is-user-incorrect + .eqp-tf-label .eqp-option-marker { opacity: 0.5; }


/* ------------------------------------------------------------
   B. GIAO DIỆN THẺ (TICK & CROSS STYLE - CAMBRIDGE)
   [FIX] Dùng CSS content để chèn icon đồng bộ
   ------------------------------------------------------------ */

.eqp-tf-tick-cross-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.eqp-tf-tc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Nội dung */
.eqp-tf-tc-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}
.eqp-tf-tc-content img {
    max-width: 120px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #eee;
}
.eqp-tf-tc-content p {
    margin: 0;
    font-size: 1.3em;
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
    color: #333;
}

/* Options Container */
.eqp-tf-tc-options {
    display: flex;
    gap: 30px;
    align-items: center;
}

.eqp-tf-tc-option {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

/* Ẩn Radio */
.eqp-tf-tc-option input[type="radio"] {
    display: none !important;
}

/* Box Vuông (Thẻ) */
.eqp-tf-tc-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 3px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    color: #eee; /* Màu xám khi chưa chọn */
    transition: all 0.2s ease;
}

/* [FIX CHÍNH] CHÈN ICON BẰNG CSS */
.eqp-tf-tc-box.is-tick::before {
    content: '✓'; /* Dấu check nét mảnh đồng bộ */
}
.eqp-tf-tc-box.is-cross::before {
    content: '✗'; /* Dấu cross nét mảnh đồng bộ */
}

.eqp-tf-tc-option:hover .eqp-tf-tc-box {
    border-color: #999;
    background-color: #f9f9f9;
    color: #ddd;
}

/* --- TRẠNG THÁI CHECKED (THẺ) --- */
.eqp-tf-input[value="true"]:checked + .eqp-tf-tc-box {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff; /* Icon chuyển màu trắng */
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
    transform: scale(1.1);
}
.eqp-tf-input[value="false"]:checked + .eqp-tf-tc-box {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff; /* Icon chuyển màu trắng */
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.4);
    transform: scale(1.1);
}

/* --- FEEDBACK (THẺ) --- */
.eqp-tf-tc-box.is-tick-correct,
.eqp-tf-tc-box.is-cross-correct {
    border-color: #28a745 !important;
    color: #28a745 !important;
    background: #e8f5e9 !important;
}
.eqp-tf-tc-box.is-user-wrong {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
    opacity: 0.5;
}

/* --- RESPONSIVE CHUNG --- */
@media screen and (max-width: 600px) {
    /* Bảng */
    .eqp-tf-table-header, .eqp-tf-table-row { grid-template-columns: 1fr 60px 60px; }
    .eqp-tf-cell-statement { padding: 10px; font-size: 0.9em; }
    .eqp-true-false-set-table .eqp-option-marker { width: 30px !important; height: 30px !important; font-size: 18px; }
    /* Thẻ */
    .eqp-tf-tc-item { flex-direction: column; text-align: center; gap: 10px; }
    .eqp-tf-tc-content { flex-direction: column; }
}

/* --- BỔ SUNG: STYLE YES/NO --- */

/* Box Yes (Thay vì dấu tích) */
.eqp-tf-tc-box.is-yes {
    width: 60px; /* Rộng hơn để chứa chữ */
    font-size: 14px; /* Chữ nhỏ hơn icon */
    color: #999;
}
.eqp-tf-tc-box.is-yes::before {
    content: 'YES';
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}

/* Box No (Thay vì dấu chéo) */
.eqp-tf-tc-box.is-no {
    width: 60px;
    font-size: 14px;
    color: #999;
}
.eqp-tf-tc-box.is-no::before {
    content: 'NO';
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}

/* Trạng thái Checked (Yes/No) */
.eqp-tf-input[value="true"]:checked + .eqp-tf-tc-box.is-yes {
    background-color: #28a745; border-color: #28a745; color: #fff;
}
.eqp-tf-input[value="false"]:checked + .eqp-tf-tc-box.is-no {
    background-color: #dc3545; border-color: #dc3545; color: #fff;
}

/* Responsive cho Yes/No */
@media screen and (max-width: 600px) {
    /* Điều chỉnh kích thước ô Yes/No trên mobile */
    .eqp-tf-tc-box.is-yes, .eqp-tf-tc-box.is-no {
        width: 50px;
        height: 40px;
        font-size: 12px;
    }
}

/* ============================================================
   MODULE 35: SPOT & WRITE (Super Hard Mode)
   ============================================================ */

.eqp-sw-container { margin-top: 20px; }
.eqp-sw-canvas-wrapper { position: relative; width: 100%; line-height: 0; border: 1px solid #ccc; }
.eqp-sw-svg-layer, .eqp-sw-input-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* 1. Vùng vẽ (Polygon) - Tàng hình hoàn toàn */
.eqp-sw-poly { 
    fill: transparent; 
    stroke: none; 
    cursor: default; /* Không đổi con trỏ chuột */
    pointer-events: auto; /* Vẫn bắt sự kiện click */
    transition: none; 
}

/* Tắt hiệu ứng Hover */
.eqp-sw-poly:hover, .eqp-sw-poly.active { 
    fill: transparent !important; 
    stroke: none !important; 
}

/* 2. Ô Input - Ẩn mặc định */
.eqp-sw-input-wrapper { 
    position: absolute; 
    transform: translate(-50%, -50%); 
    pointer-events: auto; 
    z-index: 20;
    
    /* [FIX] Ẩn đi ban đầu */
    display: none; 
}

/* Class để hiện Input khi click */
.eqp-sw-input-wrapper.is-visible {
    display: block !important;
}

/* Style cho Input */
.eqp-sw-input {
    width: 100px; 
    padding: 4px; 
    border: 1px solid #007cba; /* Viền xanh để biết chỗ gõ */
    background: #fff;
    text-align: center; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.eqp-sw-input:focus { 
    outline: none; 
    border-color: #005a8a; 
    box-shadow: 0 0 0 2px rgba(0,124,186,0.2);
}

/* Responsive cho SPOT & WRITE */
@media screen and (max-width: 600px) {
    .eqp-sw-input {
        width: 40px;  
        height: 12px;
        font-size: 10px;
    }
}

/* --- FIX MODULE 35: SPOT & WRITE (Feedback Label) --- */

/* Nhãn đáp án đúng (Spot & Write) */
.eqp-sw-correct-label {
    position: absolute;
    
    /* Căn giữa theo chiều ngang của ô Input */
    left: 50%;
    
    /* Đặt ở mép trên của ô Input */
    top: 0;
    
    /* Dịch chuyển: 
       -50% ngang: để căn giữa tâm
       -100% dọc: để nhảy lên trên đầu ô input
       -8px: để cách ra một chút cho đẹp (margin)
    */
    transform: translate(-50%, calc(-100% - 8px));
    
    background-color: #28a745;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    pointer-events: none;
}

/* Mũi tên chỉ xuống */
.eqp-sw-correct-label::after {
    content: '';
    position: absolute;
    top: 100%; /* Nằm ngay dưới đáy nhãn */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #28a745 transparent transparent transparent;
}

/* --- MODULE 36: MIXED IMAGE --- */
.eqp-mi-container { margin-top: 20px; }
.eqp-mi-canvas-wrapper { position: relative; width: 100%; line-height: 0; border: 1px solid #ccc; }

/* Layers */
.eqp-mi-svg-layer, .eqp-mi-input-layer { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    pointer-events: none; /* Cho phép click xuyên qua */
}

/* Polygon (Vùng chọn) */
.eqp-mi-poly {
    fill: transparent; 
    stroke: transparent; /* Ẩn viền khi chưa chọn */
    stroke-width: 0.5;
    cursor: pointer;
    pointer-events: auto; /* Bắt click */
    transition: all 0.2s;
}

/* Hiệu ứng Hover: Hiện viền mờ để biết có thể click */
.eqp-mi-poly:hover {
    stroke: rgba(0, 124, 186, 0.5);
    fill: rgba(255, 255, 255, 0.2);
}

/* Trạng thái Đang chọn (Selected) */
.eqp-mi-poly.is-selected {
    fill: rgba(0, 124, 186, 0.4); /* Màu xanh dương */
    stroke: #007cba;
}

/* Input (Ô nhập liệu) - Tái sử dụng style của Spot Write */
.eqp-mi-input {
    width: 100px;
    padding: 4px;
    border: 1px dashed #007cba;
    background: rgba(255,255,255,0.9);
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    pointer-events: auto;
}
.eqp-mi-input:focus {
    background: #fff;
    border-style: solid;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    outline: none;
}

/* Module 37: Table Completion */
.eqp-tc-container { overflow-x: auto; margin-top: 15px; }
.eqp-tc-table { width: 100%; border-collapse: collapse; border: 1px solid #ccc; background: #fff; }
.eqp-tc-table th, .eqp-tc-table td { border: 1px solid #ddd; padding: 10px; text-align: left; min-width: 100px; }
.eqp-tc-table th { background: #f5f5f5; font-weight: bold; color: #333; }
.eqp-tc-table tr:nth-child(even) { background: #fafafa; }

/* Inputs inside table */
.eqp-tc-input, .eqp-tc-select {
    width: 100%; box-sizing: border-box; padding: 6px;
    border: 1px solid #ccc; border-radius: 4px;
}
.eqp-tc-input:focus, .eqp-tc-select:focus { border-color: #007cba; outline: none; }

/* Feedback */
.eqp-tc-correct-ans {
    font-size: 0.85em; color: #28a745; font-weight: bold; margin-top: 4px;
}

/* ============================================================
   MODULE 38: DRAG TEXTS GROUP (Styling & Feedback)
   ============================================================ */

/* 1. Ngân hàng từ (Word Bank) */
.eqp-dtig-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 2px dashed #ccc;
    border-radius: 8px;
    margin-bottom: 20px;
    min-height: 60px;
    align-items: center;
}

/* 2. Các từ/thẻ (Draggable Items) */
.eqp-dtig-item {
    display: inline-block;
    padding: 6px 12px;
    background-color: #fff;
    border: 2px solid #007cba;
    color: #007cba;
    border-radius: 20px; /* Bo tròn kiểu viên thuốc */
    font-weight: 600;
    font-size: 14px;
    cursor: grab;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s;
    user-select: none;
    z-index: 100;
}

.eqp-dtig-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    background-color: #f0f8ff;
}

.eqp-dtig-item.ui-draggable-dragging {
    cursor: grabbing;
    opacity: 0.9;
    transform: scale(1.1);
}

/* 3. Vùng chứa ảnh */
.eqp-dtig-image-wrapper {
    position: relative;
    width: 100%;
    line-height: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: #eee; /* Nền xám loading */
}
.eqp-dtig-bg {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

/* 4. Vùng thả (Drop Zone) */
.eqp-dtig-zone {
    position: absolute;
    /* Viền trắng nét đứt có bóng để nổi trên mọi nền ảnh */
    border: 2px dashed rgba(255, 255, 255, 0.8); 
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2); 
    background-color: rgba(0, 0, 0, 0.1); /* Nền tối nhẹ */
    border-radius: 6px;
    transition: background-color 0.2s;
    
    /* Flexbox để sắp xếp các từ bên trong */
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
    padding: 4px;
    overflow: visible; /* Để item không bị cắt nếu nhiều quá */
    display: flex;
    flex-direction: row; /* Xếp hàng ngang */
    flex-wrap: wrap; /* Tự động xuống dòng nếu hết chỗ */
    align-content: flex-start; /* Dồn lên trên */
    justify-content: center; /* Căn giữa các ảnh (tùy chọn) */
    gap: 5px; /* Khoảng cách giữa các ảnh */
    padding: 5px;
    overflow: auto;
}

/* Hiệu ứng khi kéo từ vào vùng này */
.eqp-dtig-zone.is-hovered {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: #007cba;
}

/* Style của Item khi ĐÃ NẰM TRONG Zone */
.eqp-dtig-zone .eqp-dtig-item {
    border: 2px solid #007cba;
    background-color: rgba(255, 255, 255, 0.9);
    color: #007cba;
    padding: 10px;
    font-size: 12px; /* Nhỏ lại chút để tiết kiệm chỗ */
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: 0;
    cursor: pointer; /* Click để gỡ bỏ */
}
.eqp-dtig-zone .eqp-dtig-item::after {
    content: ' ×'; /* Dấu x nhỏ để biết có thể xóa */
    font-weight: bold;
    color: #999;
    margin-left: 3px;
}

/* === 5. FEEDBACK STYLES (CHẤM ĐIỂM) === */

/* Item ĐÚNG */
.eqp-dtig-item.item-correct {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724 !important;
    cursor: default !important;
}
.eqp-dtig-item.item-correct::after { content: ' ✔'; color: #155724; }

/* Item SAI */
.eqp-dtig-item.item-incorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24 !important;
    text-decoration: line-through;
    opacity: 0.8;
    cursor: default !important;
}
.eqp-dtig-item.item-incorrect::after { content: ''; }

/* Item BỊ THIẾU (Hiển thị gợi ý) */
.eqp-dtig-item.item-missed {
    background-color: #fff;
    border: 1px dashed #28a745 !important;
    color: #28a745 !important;
    font-style: italic;
}

/* Zone Feedback */
.eqp-dtig-zone.is-correct-zone {
    border: 2px solid #28a745 !important; /* Viền xanh liền */
    background-color: rgba(40, 167, 69, 0.1);
    box-shadow: none;
}
.eqp-dtig-zone.is-incorrect-zone {
    border: 2px solid #dc3545 !important; /* Viền đỏ liền */
    background-color: rgba(220, 53, 69, 0.1);
    box-shadow: none;
}

/* Responsive Mobile */
@media screen and (max-width: 600px) {
    .eqp-dtig-zone .eqp-dtig-item {
        font-size: 6px;
        padding: 6px;
    }
}

.eqp-dig-item {
    width: 80px; height: 80px; 
    border: 1px solid #ccc; 
    background: #fff; 
    cursor: grab;
}

@media screen and (max-width: 600px) {
    .eqp-dig-item {
        width: 50px; height: 50px; 
    }
}
.eqp-dig-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }


/* Feedback cho Drag Images Group */
.eqp-dig-item.item-correct {
    border: 3px solid #28a745 !important;
    box-shadow: 0 0 5px #28a745;
}
.eqp-dig-item.item-incorrect {
    border: 3px solid #dc3545 !important;
    opacity: 0.7;
}
.eqp-dig-item.item-missed {
    border: 2px dashed #28a745 !important;
    opacity: 0.6;
}

/* Container bên trong Zone (để chắc chắn) */
.eqp-dtig-zone-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
}

/* Style riêng cho ẢNH trong Zone (Module 39) */
.eqp-dtig-zone .eqp-dig-item {
    /* Kích thước ảnh nhỏ lại khi nằm trong Zone */
    width: 40px !important; 
    height: 40px !important;
    
    /* Reset style */
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    background: #fff;
    flex-shrink: 0; /* Không bị co lại */
}

.eqp-dtig-zone .eqp-dig-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cắt ảnh cho vừa khung vuông */
}

/* --- QUIZ TOOLBAR (Fullscreen & Title) --- */
.eqp-quiz-toolbar {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    border-radius: 6px 6px 0 0; /* Bo tròn 2 góc trên */
    margin-bottom: 20px;
}

/* Nút Fullscreen */
.eqp-btn-toggle-fullscreen {
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.eqp-btn-toggle-fullscreen:hover {
    background-color: #e0e0e0;
    color: #000;
}
.eqp-btn-toggle-fullscreen .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* Tiêu đề Quiz */
.eqp-quiz-toolbar-title {
    margin: 0;
    font-size: 1.3em;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

/* --- TRẠNG THÁI FULLSCREEN --- */
/* Khi class .is-fullscreen được thêm vào container cha */
.eqp-quiz-set.is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: #fff;
    margin: 0;
    border-radius: 0;
    border: none;
    overflow-y: auto; /* Cho phép cuộn dọc khi nội dung dài */
    padding: 0;
}

.eqp-quiz-set.is-fullscreen .eqp-quiz-content-wrap {
    max-width: 1000px; /* Giới hạn chiều rộng nội dung cho dễ đọc */
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    background: #fff;
}

/* Sticky toolbar khi ở chế độ fullscreen (tùy chọn) */
.eqp-quiz-set.is-fullscreen .eqp-quiz-toolbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 2px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* --- SPLIT SCREEN LAYOUT (Reading Comprehension) --- */

.eqp-split-container {
    display: block;
    margin-bottom: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    overflow: hidden; /* Clear float */
}

/* Cột Trái (Bài đọc) */
.eqp-split-left {
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    padding: 20px;
}
.eqp-section-header-content h3 {
    margin-top: 0;
    color: #005a8a;
    border-bottom: 2px solid #007cba;
    padding-bottom: 10px;
    font-size: 1.4em;
}
.eqp-section-body {
    font-size: 1.1em;
    line-height: 1.6;
    color: #333;
}
.eqp-section-body img { max-width: 100%; height: auto; }

/* Cột Phải (Câu hỏi) */
.eqp-split-right {
    padding: 20px;
    background-color: #fff;
}
/* Trong cột phải, bỏ border/shadow của từng câu hỏi để nhìn thoáng hơn */
.eqp-split-right .eqp-question {
    border: none;
    box-shadow: none;
    border-bottom: 1px dashed #eee;
    padding: 15px 0;
    margin-bottom: 0;
}

/* --- Desktop Layout (Màn hình lớn > 1024px) --- */
@media screen and (min-width: 1024px) {
    .eqp-split-container {
        display: flex;
        align-items: flex-start;
    }

    .eqp-split-left {
        width: 50%;
        border-bottom: none;
        border-right: 1px solid #ddd;
        
        /* Sticky: Giữ bài đọc đứng yên khi cuộn câu hỏi */
        position: -webkit-sticky;
        position: sticky;
        top: 20px; 
        
        /* Cho phép cuộn riêng nếu bài đọc quá dài */
        max-height: 90vh; 
        overflow-y: auto;
    }

    .eqp-split-right {
        width: 50%;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ============================================================
   MODULE 40: FLASHCARDS (Fixed Height & Layout)
   ============================================================ */

/* Tabs */
.eqp-fc-tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
.eqp-fc-tab-btn {
    padding: 8px 20px; border: 1px solid #007cba; background: #fff; color: #007cba;
    border-radius: 20px; cursor: pointer; font-weight: bold; transition: all 0.2s;
}
.eqp-fc-tab-btn.active { background: #007cba; color: #fff; }

/* --- 1. STUDY MODE (Giữ chiều cao cố định để lật cho đẹp) --- */
.eqp-fc-slider-container { 
    display: flex; align-items: center; justify-content: center; gap: 10px; 
    min-height: 460px; 
}
.eqp-fc-card-wrapper {
    /* [FIX] Thiết lập chiều rộng cứng để không bị flexbox bóp méo */
    width: 350px; 
    height: 450px;
    
    /* Responsive: Trên mobile, co lại chừa chỗ cho 2 nút (trừ đi khoảng 100px) */
    max-width: calc(100% - 100px); 
    
    /* Căn giữa & 3D */
    margin: 0; /* Không dùng margin auto trong flex */
    position: relative;
    perspective: 1000px;
    
    /* Flex item props */
    flex-shrink: 0;
}
.eqp-fc-card { width: 100%; height: 100%; position: absolute; display: none; }
.eqp-fc-card.active { display: block; }

.eqp-fc-card-inner {
    position: relative; width: 100%; height: 100%; text-align: center;
    transition: transform 0.6s; transform-style: preserve-3d; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 12px;
}
.eqp-fc-card-inner.is-flipped { transform: rotateY(180deg); }

.eqp-fc-card-front, .eqp-fc-card-back {
    position: absolute; width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 20px; 
    box-sizing: border-box; overflow: hidden;
}
.eqp-fc-card-back { transform: rotateY(180deg); background: #f9f9f9; }

/* --- 2. QUIZ MODE (Chiều cao tự động - Fix lỗi mất nội dung) --- */
.eqp-fc-quiz-area { text-align: center; max-width: 100%; margin: 0 auto; }

.eqp-fc-quiz-card {
    width: 100%;
    max-width: 350px; /* Giới hạn chiều rộng */
    height: auto;     /* Chiều cao tự động */
    min-height: 450px; /* Chiều cao tối thiểu bằng thẻ Study */
    
    margin: 0 auto 20px auto;
    position: relative;
    
    border: 2px solid #007cba; 
    border-radius: 12px; 
    overflow: hidden; 
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    
    display: flex; 
    flex-direction: column;
}

/* Phần trên (Câu hỏi) */
.eqp-fc-q-top { 
    padding: 20px; 
    background: #fff;
    
    /* Flex để căn giữa */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Phần dưới (Đáp án) */
.eqp-fc-q-bottom { 
    padding: 20px; 
    background: #f0f8ff; /* Màu nền khác biệt */
    border-top: 1px solid #e0e0e0;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Thanh phân cách */
.eqp-fc-divider { 
    background: #007cba; 
    color: #fff; 
    font-size: 11px; 
    padding: 6px; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

.eqp-fc-label { 
    font-size: 11px; 
    text-transform: uppercase; 
    color: #999; 
    margin-bottom: 8px; 
    font-weight: 600;
}

/* --- 3. RESPONSIVE MEDIA (Chung) --- */

.eqp-fc-inner-content, .eqp-fc-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Ảnh trong thẻ Quiz */
.eqp-fc-quiz-card img {
    max-width: 100%;
    height: auto;
    max-height: 300px; /* Cho phép ảnh cao hơn ở chế độ Quiz */
    object-fit: contain;
    margin: 10px 0;
    border-radius: 4px;
}

/* Ảnh trong thẻ Study (nhỏ hơn vì fixed height) */
.eqp-fc-card-wrapper img {
    max-height: 180px;
}

/* Video & Audio */
video { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0; }
audio { width: 100%; height: 40px; margin-top: 10px; max-width: 280px; }

/* Controls */
.eqp-fc-flip-hint { position: absolute; bottom: 10px; font-size: 12px; color: #999; }
.eqp-fc-nav { background: #eee; border: none; font-size: 24px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.eqp-fc-nav:disabled { opacity: 0.3; cursor: default; }
.eqp-fc-counter { text-align: center; margin-top: 5px; color: #666; font-size: 0.9em; }

.eqp-fc-quiz-controls { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; }
.eqp-fc-quiz-btn {
    padding: 12px 30px; font-size: 16px; font-weight: bold; border: none; border-radius: 30px; cursor: pointer;
    transition: transform 0.1s; min-width: 120px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #fff;
}
.eqp-fc-quiz-btn.btn-wrong { background: #dc3545; box-shadow: 0 4px 0 #c82333; }
.eqp-fc-quiz-btn.btn-correct { background: #28a745; box-shadow: 0 4px 0 #218838; }
.eqp-fc-quiz-btn:active { transform: translateY(4px); box-shadow: none; }

@media screen and (max-width: 480px) {
    /* Giảm chiều cao thẻ trên mobile nếu cần */
    .eqp-fc-card-wrapper { 
        height: 400px; 
        /* Max-width đã được xử lý ở trên (calc) nên không cần set lại ở đây */
         width: 300px;
    }
    .eqp-fc-quiz-card {
        min-height: 400px;
    }
    
    .eqp-fc-card-wrapper img { max-height: 140px; }
    .eqp-fc-slider-container { gap: 5px; }
    .eqp-fc-nav { width: 32px; height: 32px; font-size: 18px; }
}

@media screen and (min-width: 720px) {
    .eqp-fc-quiz-card-placeholder {
        width: 500px;
    }
}

/* --- 6. FEEDBACK LIST (Kết quả chi tiết) --- */

.eqp-fc-correct-feedback {
    margin-top: 15px;
}

.eqp-fc-feedback-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd; /* Viền bao ngoài */
    border-radius: 8px;
    overflow: hidden; /* Bo góc cho các dòng bên trong */
    font-size: 0.95em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.eqp-fc-feedback-list li {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
}

.eqp-fc-feedback-list li:last-child {
    border-bottom: none;
}

/* Dòng ĐÚNG: Nền xanh, Chữ xanh */
.eqp-fc-feedback-list li.correct {
    background-color: #d4edda;
    color: #155724;
    border-bottom-color: #c3e6cb;
}

/* Dòng SAI: Nền đỏ, Chữ đỏ */
.eqp-fc-feedback-list li.incorrect {
    background-color: #f8d7da;
    color: #721c24;
    border-bottom-color: #f5c6cb;
}

/* Làm đậm các thông số quan trọng */
.eqp-fc-feedback-list li strong {
    font-weight: 800;
    min-width: 80px; /* Canh thẳng hàng tiêu đề */
}

.eqp-fc-feedback-list li b {
    background: rgba(255,255,255,0.5);
    padding: 2px 6px;
    border-radius: 4px;
    margin: 0 2px;
}

/* ============================================================
   RESPONSIVE: CONNECT & WRITE (Module 41)
   Thu nhỏ ô input và nhãn đáp án trên màn hình nhỏ
   ============================================================ */

/* Màn hình Tablet (iPad...) */
@media screen and (max-width: 768px) {
    /* 1. Thu nhỏ ô nhập liệu */
    .eqp-caw-text-input {
        font-size: 12px !important;      /* Chữ nhỏ lại */
        padding: 2px 5px !important;     /* Giảm khoảng đệm */
        min-width: 60px !important;      /* Giảm chiều rộng tối thiểu */
        height: auto !important;         /* Để chiều cao tự động theo nội dung/padding */
        line-height: 1.2 !important;
        border-width: 1px !important;    /* Viền mỏng lại */
    }

    /* 2. Thu nhỏ nhãn đáp án đúng (Feedback màu xanh) */
    .eqp-ani-correct-label {
        font-size: 11px !important;
        padding: 3px 6px !important;
        margin-bottom: 2px !important;   /* Kéo sát lại gần ô input hơn */
        white-space: nowrap;             /* Không xuống dòng */
    }
    
    /* Thu nhỏ mũi tên chỉ xuống của nhãn */
    .eqp-ani-correct-label::before {
        border-width: 4px 4px 0 4px !important; /* Tam giác nhỏ lại */
        bottom: -4px !important;
    }
}

/* Màn hình Mobile (Điện thoại dọc) */
@media screen and (max-width: 480px) {
    .eqp-caw-text-input {
        font-size: 10px !important;      /* Chữ bé hơn nữa */
        min-width: 40px !important;      /* Rất gọn */
        padding: 1px 3px !important;
    }
    
    .eqp-ani-correct-label {
        font-size: 9px !important;       /* Nhãn feedback bé xíu */
        padding: 6px !important;
        border-radius: 5px !important;
    }
}

/* ============================================================
   EXPLANATION TOGGLE (Xem thêm / Rút gọn)
   ============================================================ */

/* 1. Trạng thái thu gọn */
.eqp-explanation-content.is-collapsed {
    max-height: 500px; /* Chiều cao tối đa khi thu gọn */
    overflow: hidden;
    position: relative;
}

/* 2. Hiệu ứng mờ dần ở đáy khi thu gọn */
.eqp-explanation-content.is-collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}
/* Nếu nền của explanation không phải màu trắng (ví dụ màu vàng nhạt), đổi màu gradient tương ứng */
.eqp-explanation-content.is-collapsed::after {
    background: linear-gradient(to bottom, rgba(255, 243, 205, 0), #fff3cd);
}

/* 3. Nút Toggle */
.eqp-explain-toggle-btn {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.9em;
    color: #007cba;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
}
.eqp-explain-toggle-btn:hover {
    color: #005a8a;
}