.me-question.me-question-evaluated .me-question-wrap,
.me-question.me-question-evaluated .me-question-drag,
.me-question.me-question-evaluated .me-question-recheck,
.me-question.me-question-evaluated .me-question-speak,
.me-question.me-question-evaluated .me-question-essay {
    pointer-events: none;
}

/* me-question-dragdropFormat */
.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaFalse,
.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaTrue {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaFalse i,
.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaTrue i {
    position: relative;
    top: 0;
    right: 0;
    width: 2.4rem;
    height: 2.4rem;
}

.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaFalse i {
    background-color: transparent;
    color: var(--color-pri);
    font-weight: bolder;
    font-size: 1.6rem;
}

.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaTrue {
    border-color: var(--color-true);
}

.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaFalse {
    border-color: var(--color-pri);
}

.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaTrue i {
    background-color: transparent;
    color: var(--color-true);
    font-weight: bolder;
    font-size: 1.6rem;
}

.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaTrue i::before {
    content: "\f00c";
}

/* Hiển thị đáp án đúng khi sai cho dragdrop format */
.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaFalse .correct-answer-display {
    display: block;
    font-size: 1.2rem;
    color: var(--color-true);
    margin-top: 0.4rem;
    font-style: italic;
    position: absolute;
    bottom: -2.5rem;
    left: 0;
    white-space: nowrap;
    z-index: 15;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: calc(100% - 4rem);
    overflow: visible;
}

/* Đảm bảo icon check/xmark không bị đè */
.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaFalse i,
.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .monaTrue i {
    z-index: 10;
    right: 1rem;
}

/* Đảm bảo icon check/xmark của words format không bị đè */
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse i,
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue i {
    z-index: 10;
    right: 1rem;
}

/* FIX: Đặt dấu ? icon (explanation) cùng hàng với nội dung, không xuống dưới */
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-explanation {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 20;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transform: none !important;
    margin-left: 0.5rem;
    margin-top: -2rem;
    /* Đẩy lên để cùng hàng với nội dung */
    vertical-align: top;
}

/* Điều chỉnh vị trí dấu hỏi cho dragdrop - đặt trước đáp án đúng */
.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-explanation {
    position: absolute;
    left: 0;
    bottom: -2.5rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(50%);
    margin-right: 0.5rem;
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-input-wrapper,
.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-drog {
    position: relative;
}

.me-question.me-question-wordsFormat.me-question-evaluated .meqb-tab-btn,
.me-question.me-question-dragdropFormat.me-question-evaluated .meqb-tab-btn {
    margin: 0;
    padding: 0;
}

.me-question.me-question-wordsFormat.me-question-evaluated .explanation-icon-btn,
.me-question.me-question-dragdropFormat.me-question-evaluated .explanation-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--color-sec);
    cursor: pointer;
}

/* Tạo không gian cho đáp án đúng và icon */
.me-question.me-question-dragdropFormat.me-question-evaluated .me-question-wrap .me-question-drog {
    padding-right: 5.5rem !important;
    margin-bottom: 3rem !important;
}

/* Tạo không gian cho đáp án đúng và icon của words format */
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .me-question-input-wrapper {
    padding-right: 5.5rem !important;
    margin-bottom: 3rem !important;
    position: relative;
    min-width: 80px;
    /* Đảm bảo đủ rộng cho số */
    display: inline-flex !important;
    align-items: center !important;
}

/* FIX: Số blank CHỈ cho dropdown type - khi có .me-words-select sibling */
/* Áp dụng cho wrapper có chứa select dropdown */
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .me-question-input-wrapper:has(.me-words-select) .me-question-blank-number:not(.hidden) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    pointer-events: none !important;
    /* Thêm border để giống select box */
    border: 1px solid #666666 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    padding: 0.2rem 1rem !important;
    min-width: 60px !important;
    min-height: 2rem !important;
}

/* Ẩn select khi có số blank hiển thị (không có đáp án) - CHỈ dropdown type */
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .me-question-input-wrapper:has(.me-words-select):has(.me-question-blank-number:not(.hidden)) .me-words-select {
    display: none !important;
}

/* ============================================= */
/* HIDE BOOKMARK - Ẩn bookmark trong chế độ xem đáp án chi tiết */
/* ============================================= */
.me-question-evaluated .me-question-bookmark {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* FIX: Số blank cho INPUT type (không phải dropdown) - căn giữa trong input */
/* Wrapper KHÔNG có .me-words-select = INPUT type */
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .me-question-input-wrapper:not(:has(.me-words-select)) {
    position: relative;
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .me-question-input-wrapper:not(:has(.me-words-select)) .me-question-blank-number:not(.hidden) {
    position: absolute !important;
    left: 0 !important;
    right: 5.5rem !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
}

/* ============================================= */
/* EXPLANATION ICON - Di chuyển vào vị trí bookmark */
/* ============================================= */
/* Container của heading cần position relative */
.me-question-evaluated .me-question-in4r {
    position: relative !important;
}

/* Di chuyển explanation icon đến vị trí bookmark (bên trái của input wrapper) */
.me-question-evaluated .me-question-explanation {
    position: absolute !important;
    top: 0 !important;
    left: -2.5rem !important;
    /* Di chuyển sang trái để vào vị trí bookmark */
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 30 !important;
    transform: translateY(-50%) !important;
}

/* Hoặc đặt ở góc phải của heading nếu bookmark ở đó */
.me-question-evaluated .me-question-heading.t-head-number {
    position: relative !important;
}

.me-question-evaluated .me-question-heading.t-head-number .me-question-explanation {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
}

/* Đảm bảo icon ? nhỏ gọn và phù hợp với vị trí bookmark */
.me-question-evaluated .me-question-explanation .explanation-icon-btn {
    font-size: 1.6rem !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* me-question-defaultFormat */
.me-question.me-question-defaultFormat.me-question-evaluated .me-question-wrap .monaTrue i,
.me-question.me-question-defaultFormat.me-question-evaluated .me-question-wrap .monaFalse i {
    background-color: transparent;
    font-weight: bolder;
    font-size: 1.6rem;
    border-radius: 100rem;
    justify-content: center;
    align-items: center;
    display: flex;
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue i {
    color: var(--color-pri);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaFalse i::before {
    content: "\f00d";
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaFalse .me-recheck-text {
    color: var(--color-false);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaFalse .recheck-radio {
    border: 0.1rem solid var(--color-pri);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaFalse .recheck-radio::before {
    background-color: var(--color-pri);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue i {
    color: var(--color-true);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue i::before {
    content: "\f00c";
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue .recheck-radio::before {
    opacity: 1;
    background-color: var(--color-true);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue .recheck-radio {
    border: 0.1rem solid var(--color-true);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue .me-recheck-text {
    color: var(--color-true);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue .recheck-radio::before,
.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaFalse .recheck-radio::before {
    opacity: 1;
}

/* me-question-defaultFormat */

/** me-question-wordsFormat  **/
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue,
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse {
    position: relative;
    width: max-content;
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue i,
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse i {
    background-color: transparent;
    font-weight: bolder;
    font-size: 1.6rem;
    border-radius: 100rem;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    right: 1rem;
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue i {
    color: var(--color-true);
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue i::before {
    content: "\f00c";
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse i {
    color: var(--color-pri);
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse i::before {
    content: "\f00d";
}

/* Hiển thị đáp án đúng khi sai */
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse .correct-answer-display {
    display: block;
    font-size: 1.2rem;
    color: var(--color-true);
    margin-top: 0.4rem;
    font-style: italic;
    position: absolute;
    bottom: -2.5rem;
    right: 5.5rem;
    white-space: nowrap;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse .correct-answer-hint {
    display: block;
    font-size: 1.2rem;
    color: var(--color-true);
    margin-top: 0.4rem;
    font-style: italic;
}

/* Hiển thị đáp án sai của user với gạch ngang - dùng cho select from list */
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse .me-user-wrong-answer {
    display: inline-block;
    font-size: 1.4rem;
    color: var(--color-pri);
    text-decoration: line-through;
    text-decoration-color: var(--color-pri);
    text-decoration-thickness: 2px;
    padding: 0.2rem 0.8rem;
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid var(--color-pri);
    border-radius: 3px;
    min-width: 80px;
    text-align: center;
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse .me-recheck-text {
    color: var(--color-pri);
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse .recheck-radio {
    border: 0.1rem solid var(--color-pri);
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse .recheck-radio::before {
    background-color: var(--color-pri);
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue i {
    color: var(--color-true);
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue i::before {
    content: "\f00c";
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue .recheck-radio::before {
    opacity: 1;
    background-color: var(--color-true);
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue .recheck-radio {
    border: 0.1rem solid var(--color-true);
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue .me-recheck-text {
    color: var(--color-true);
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue,
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse {
    display: inline-flex;
}

/*ME-styles*/
:root {
    --me-primary-color: #8701ca;
}

.me-question-dt-wrp {
    padding: 3.2rem 2.8rem;
    border-radius: 0.8rem;
    background: var(--color-white);
    border: 0.1rem solid var(--color-border);
}

.me-question-head {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.6rem;
    border-bottom: 0.1rem solid var(--color-border);
}

.me-question-head .question-numb {
    font-size: 1.8rem;
    color: var(--me-primary-color);
    font-weight: 600;
}

@media only screen and (max-width: 1200px) {
    .me-question-head .question-numb {
        font-size: 1.6rem;
    }

    .me-question-group-wrapper {
        flex-direction: column;
    }

    .exam-container {
        width: 100%;
    }
}

@media only screen and (max-width: 800px) {
    .me-question {
        padding: 1.2rem 1.2rem;
    }

    .me-question-head .question-numb {
        font-size: 1.5rem;
    }
}

/* Justify text trong phần test exam only - CHỈ text passages, KHÔNG ảnh hưởng input */
.me-question-content p,
.testQuestionContent p,
.testing-wrap .me-question-content,
.main-test-exam .me-question-content p {
    text-align: justify;
    text-justify: inter-word;
}

.mona-highlightable-content .mona-replaced-content {
    text-align: justify;
    text-justify: inter-word;
}

/* Updated Justify Rules for Exam Content (Questions & Passages) */
.main-test-exam .mona-content,
.main-test-exam .mona-content p,
.main-test-exam .part-term-description,
.main-test-exam .part-term-description p,
.main-test-exam .mona-highlightable-content,
.main-test-exam .mona-highlightable-content p {
    text-align: justify;
    text-justify: inter-word;
}

/* KHÔNG justify cho phần CÂU HỎI trong xem đáp án chi tiết (evaluated) */
/* Chỉ áp dụng cho panel bên phải (câu hỏi), panel bên trái (passage) vẫn justify */
.me-question-evaluated .meq-panel-block-right .mona-content,
.me-question-evaluated .meq-panel-block-right .mona-content p,
.me-question-evaluated .meq-panel-block-right .mona-highlightable-content,
.me-question-evaluated .meq-panel-block-right .mona-highlightable-content p,
.me-question-evaluated .me-question-in4r .mona-content,
.me-question-evaluated .me-question-in4r .mona-content p,
.me-question-evaluated .me-question-in4r .t-question,
.me-question-evaluated .me-question-in4r .t-question p,
.me-question-evaluated .me-question-in4r-content .mona-content,
.me-question-evaluated .me-question-in4r-content .mona-content p,
.me-question-evaluated .me-question-wrap,
.me-question-evaluated .me-question-wrap p {
    text-align: left;
    text-justify: auto;
}

/* Đảm bảo passage trong panel trái VẪN justify (override nếu cần) */
.me-question-evaluated .meq-panel-block-left .mona-content,
.me-question-evaluated .meq-panel-block-left .mona-content p,
.me-question-evaluated .meq-panel-block-left .mona-highlightable-content,
.me-question-evaluated .meq-panel-block-left .mona-highlightable-content p,
.me-question-evaluated .meq-panel-block-left .t-question,
.me-question-evaluated .meq-panel-block-left .t-question p {
    text-align: justify;
    text-justify: inter-word;
}

/* CSS Variable để điều chỉnh vertical offset cho input và dragdrop - CÓ THỂ TỰ ĐIỀU CHỈNH */
:root {
    --input-vertical-offset: 0.1em;
    /* Điều chỉnh giá trị này để nâng/hạ input và dragdrop (âm = nâng lên, dương = hạ xuống) */
}

.me-question-input-wrapper {
    display: inline-flex !important;
    /* Dùng flex để căn giữa */
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0.6rem;
    position: relative;
    vertical-align: baseline !important;
    /* Căn baseline với text */
    line-height: inherit !important;
    /* Kế thừa line-height từ text xung quanh */
    transform: translateY(var(--input-vertical-offset)) !important;
    /* Dùng CSS variable để dễ điều chỉnh */
    min-width: 80px;
    /* Đảm bảo đủ rộng cho số */
    min-height: 2.4rem;
    /* Đảm bảo đủ cao cho số */
}

/* Input boxes - Design đẹp như hình: viền xám đậm mỏng, bo góc nhẹ */
/* Đồng bộ kích thước với drag-drop boxes để match khi đặt giữa câu */
.me-question-input {
    border: 1px solid #666666 !important;
    /* Viền xám đậm mỏng như hình */
    outline: none;
    border-radius: 2px !important;
    /* Bo góc nhẹ như hình */
    font-size: 1.6rem;
    display: inline-block;
    padding: 0 0.6rem !important;
    /* Bỏ padding top/bottom để text căn giữa hoàn hảo */
    text-align: center;
    background: #ffffff;
    color: #000000;
    min-width: 100px !important;
    /* Updated to 100px minimum width per user request */
    width: auto;
    /* Tự động fit content */
    height: 2.4rem !important;
    /* Cố định chiều cao như theme tham khảo */
    line-height: 2.4rem !important;
    /* Căn giữa text theo chiều dọc - PHẢI bằng height */
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    vertical-align: middle !important;
    /* Căn giữa với text xung quanh */
}

/* Số nằm giữa input/select/dragdrop - CĂN GIỮA HOÀN HẢO BẰNG FLEXBOX */
.me-question-input-wrapper .me-question-blank-number,
.me-question-drog.testDragBox .me-question-blank-number,
.me-question-drog.testDragGroupBox .me-question-blank-number {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 1.4rem !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 3 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* FIX: Đảm bảo wrapper có overflow hidden để số không lòi ra ngoài */
.me-question-input-wrapper {
    overflow: hidden !important;
}

/* NHƯNG trong evaluated mode, cần overflow visible để hiện correct-answer-display */
.me-question.me-question-evaluated .me-question-input-wrapper {
    overflow: visible !important;
}

/* FIX: Đảm bảo số trong select dropdown không vượt quá container */
.me-question-input-wrapper .me-question-blank-number {
    max-width: 100% !important;
    overflow: hidden !important;
}

.me-question-blank-number.hidden {
    display: none !important;
}

/* Đảm bảo số LUÔN hiển thị khi input/select/dragdrop rỗng - mặc định hiển thị */
.me-question-input-wrapper .me-question-blank-number:not(.hidden),
.me-question-drog.testDragBox .me-question-blank-number:not(.hidden) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ẩn số khi input/select/dragdrop có giá trị - JavaScript sẽ thêm class hidden */
.me-question-input-wrapper .me-question-blank-number.hidden,
.me-question-drog.testDragBox .me-question-blank-number.hidden {
    display: none !important;
}

/* ẨN SỐ KHI DRAGDROP BOX CÓ GIÁ TRỊ (class active) - CSS THUẦN */
.me-question-drog.active .me-question-blank-number,
.me-question-drog.testDragBox.active .me-question-blank-number,
.me-question-drog.testDragGroupBox.active .me-question-blank-number {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ẩn số trong heading cho các câu hỏi fill-in-the-blank (words format) */
.me-question-wordsFormat .me-question-heading.t-head-number .t-num,
.me-question-dragdropFormat .me-question-heading.t-head-number .t-num {
    display: none !important;
}

.me-question-infor {
    margin: 2.4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 2.4rem;
}

.me-question-link-wrp {
    max-width: 50%;
    display: flex;
    gap: 1rem;
    border-radius: 0.4rem;
    font-weight: 500;
    padding: 0.8rem 1.2rem;
    background: #f7f7f7;
    justify-content: space-between;
    align-items: center;
}

.me-question-link-wrp .me-question-infor-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    max-width: 90%;
    word-break: break-all;
    background-color: var(--color-white);
    padding: 0.8rem 1rem;
    pointer-events: none;
    line-height: 2;
}

.me-question-link-wrp .me-question-infor-ic {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}

.me-question-link-wrp .me-question-infor-ic img {
    max-width: 100%;
    height: 100%;
}

.me-question-infor-wrp {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.me-question-infor-wrp .me-question-infor-item {
    font-size: 1.6rem;
}

.me-question-infor-wrp .me-question-infor-item span.item__label {
    font-weight: bold;
}

@media only screen and (max-width: 1200px) {

    .me-question-link-wrp,
    .me-question-infor-wrp {
        max-width: 100%;
    }
}

.meqb-tab {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 1.2rem;
}

.meqb-tab-btn {
    transition: 0.3s ease-in-out;
    cursor: pointer;
    color: var(--color-sec);
    font-size: 1.6rem;
    font-weight: 500;
}

.meqb-tab-btn .explanation-txt-btn {
    margin-left: 0.5rem;
    display: flex;
    gap: 10px;
    align-items: center;
}

.meqb-tab-btn .explanation-txt-btn i {
    transition: transform 0.3s ease;
}

.meqb-tab-btn.active .explanation-txt-btn i {
    transform: rotate(180deg);
}

.meqb-tab-btn.active .text {
    text-decoration: underline;
}

.meqb-result {
    font-size: 1.8rem;
    font-weight: bold;
}

.meqb-result.text-true {
    color: var(--color-true);
}

.meqb-result.text-false {
    color: var(--color-pri);
}

/* .me-recheck-block .me-recheck-item {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.me-recheck-block .me-recheck-checkbox {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.6rem;
  border: 0.1rem solid #d9d9d9;
  flex-shrink: 0;
  position: relative;
}

.me-recheck-block .me-recheck-checkbox::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.6rem;
  background-color: #f9841a;
  opacity: 0;
}

.me-recheck-item .me-recheck-input:checked~.me-recheck-checkbox {
  border: 0.1rem solid #f9841a;
}

.me-recheck-item .me-recheck-input:checked~.me-recheck-checkbox::before {
  opacity: 1;
} */

/* .me-recheck-block .me-recheck-radio {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 100rem;
  border: 0.1rem solid #d9d9d9;
  flex-shrink: 0;
  position: relative;
} */

/* .me-recheck-block .me-recheck-text {
  margin-left: 0.8rem;
  line-height: 1.1;
  color: #313131;
}

.me-recheck-block .me-recheck-radio::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 100rem;
  background-color: #f9841a;
  opacity: 0;
}

.me-recheck-item .me-recheck-input:checked~.me-recheck-radio {
  border: 0.1rem solid #f9841a;
}

.me-recheck-item .me-recheck-input:checked~.me-recheck-radio::before {
  opacity: 1;
}

.me-recheck-item .me-recheck-input:checked~.me-recheck-text {
  color: #f9841a;
} */

.me-question-drog {
    display: inline-flex;
    /* Dùng flex để căn giữa nội dung */
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    /* Match với input boxes */
    border-radius: 2px !important;
    /* Bo góc nhẹ như hình */
    color: #000000;
    border: 1px solid #666666 !important;
    /* Viền xám đậm mỏng như hình */
    background: #ffffff;
    margin: 0 0.6rem;
    /* Match với input boxes */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    min-width: 3.125em !important;
    /* Match với input boxes - responsive với font size */
    width: auto !important;
    /* Tự động fit content */
    min-height: 2em !important;
    /* Match với input boxes - responsive với font size */
    height: auto !important;
    /* Tự động fit content */
    box-sizing: border-box;
    text-align: center;
    vertical-align: baseline !important;
    /* Căn baseline với text như word in blank */
    line-height: 1.5 !important;
    /* Cùng line-height với text để căn giữa theo tâm */
    transform: translateY(var(--input-vertical-offset, 0.1em)) !important;
    /* Match với input boxes */
}

/* Text bên trong dragdrop box */
.me-question-drog .testDragText,
.me-question-drog .text {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5 !important;
    /* Cùng line-height với text xung quanh */
    text-align: center;
    white-space: nowrap;
    /* Không wrap text */
}

.me-question-drog.testDragGroupBox {
    display: inline-flex !important;
    /* Giữ inline-flex để không break layout */
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0.6rem !important;
    vertical-align: middle !important;
    /* Căn giữa theo chiều dọc với text và bookmark */
    line-height: 1.5 !important;
    /* Cùng line-height với text để căn giữa theo tâm */
    transform: translateY(0) !important;
    /* Không cần transform để căn giữa perfect với text */
}

/* Đảm bảo select và dragdrop box có position relative để số absolute căn giữa */
.me-words-select.me-question-input,
select.me-question-input {
    position: relative;
    z-index: 2;
}

.me-question-drog:hover {
    border-color: #666666 !important;
    /* Giữ viền xám đậm khi hover */
    background-color: #f5f5f5;
}

/* Khi dragdrop box có nội dung (active) */
.me-question-drog.active {
    background-color: #ffffff;
    border: 1px solid #666666 !important;
    /* Viền xám đậm khi active */
}

/* Khi dragdrop box có nội dung trong contrast modes */
.testQuestionExam.contrast-wb .me-question-drog.active {
    background-color: #707070 !important;
    border-color: #ffffff !important;
}

html .testQuestionExam.contrast-yb .me-question-drog.active {
    background-color: #000000 !important;
    border-color: #FFFF54 !important;
}

.me-question-drog i {
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-radius: 100rem;
    background-color: var(--color-pri);
    display: none;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    top: -0.5rem;
    right: -0.5rem;
}

.me-question-drog.active i {
    display: none !important;
    /* Ẩn nút X khi có đáp án như Inspera */
}

/* Ẩn nút X cho testDragGroupBox */
.me-question-drog.testDragGroupBox.active .testDragGroupClear,
.me-question-drog.testDragGroupBox.active i {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.me-question-drag {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.me-question-drag-item {
    border-radius: 3px;
    font-weight: 500;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    width: 523px;
    /* Kích thước như Inspera */
    min-height: 24px;
    /* Kích thước như Inspera */
    box-sizing: border-box;
}

/* Auto resize fit content cho testDragGroupItem khi chưa kéo vào ô */
.me-question-drag-item.testDragGroupItem {
    width: auto !important;
    min-width: auto !important;
    max-width: 100%;
    /* Auto fit content */
}

.me-question-drag-item:hover {
    border-color: #000000;
    background-color: #f5f5f5;
}

.me-question-drag-item .text {
    display: block;
    padding: 4px 8px;
    /* Padding như Inspera (4px all sides) */
    position: relative;
    z-index: 2;
    color: #000000;
    font-weight: 500;
    line-height: 1.5;
}

.me-question-drag-item.disable {
    background-color: #ddd;
    pointer-events: none;
    color: #f1f1f1;
    cursor: default;
}

/*BỘ ĐỀ*/
.me-mask-list .me-mask-item {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.me-mask-list .me-mask-box {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.6rem;
    border: 0.1rem solid var(--color-border);
    flex-shrink: 0;
    position: relative;
}

.me-mask-box.disabled {
    display: none;
}

.me-mask-list .me-mask-box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.6rem;
    background-color: #f9841a;
    opacity: 0;
}

.me-mask-item .me-mask-input:checked~.me-mask-box {
    border: 0.1rem solid #f9841a;
}

.me-mask-item .me-mask-input:checked~.me-mask-box::before {
    opacity: 1;
}

.me-mask-list .me-mask-name {
    margin-left: 0.8rem;
    line-height: 1.1;
    color: #313131;
}

.me-question-single,
.me-question-group {
    display: none;
}

.me-question-single.open,
.me-question-group.open {
    display: block;
}

.testing-side,
.testing-part-selection {
    display: none;
}

.testing-side.open,
.testing-part-selection.open {
    display: block;
}

.testing-side .testing-flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

.processing-area.processing {
    opacity: 0.6;
    pointer-events: none;
}

.testing-part-selection.processing .b-btn-start .testStart {
    opacity: 0.6;
    pointer-events: none;
}

.b-btn-start .text-processing {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 10px !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.testing-part-selection:not(.processing) .b-btn-start .testStart .text-processing,
.testing-part-selection.processing .b-btn-start .testStart .text {
    display: none !important;
}

.b-btn-start .text-processing .icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    /* Tăng nhẹ container để thoáng */
    height: 24px !important;
    min-width: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    background: none !important;
    border: none !important;
}

.b-btn-start .text-processing .icon i {
    display: flex !important;
    /* Dùng flex để center nội dung pseudo :before */
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    width: 1em !important;
    /* Width = Font size */
    height: 1em !important;
    /* Height = Font size */
    line-height: 1 !important;
    animation: spinIcon 1s linear infinite !important;
    transform-origin: center center !important;
    margin: 0 !important;
    text-align: center !important;
}

@keyframes spinIcon {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.readyForRecord .testRecordFinal {
    display: none;
    padding: 0.4rem;
    font-size: 1.4rem;
    border-radius: 0.2rem;
    position: absolute;
    left: 100%;
    bottom: 0;
    width: max-content;
    margin-left: 0.8rem;
}

.readyForRecord.processRecord .testRecordFinal {
    display: block;
}

.readyForRecord.processRecord .testRecordStart {
    opacity: 0.65;
    pointer-events: none;
}

.me-history-detail-item.false .me-history-detail-result {
    text-decoration: line-through;
}

.me-history-detail-part:not(:first-child) {
    margin-top: 2.4rem;
}

.me-history-detail-part-title {
    font-weight: bold;
    font-size: 2rem;
}

.me-btn.none {
    display: none;
}

/* .listening.none-click {
  pointer-events: none;
} */

.testing-part-selection.history .selection-part-inf {
    display: none;
}

.testQuesItem.none-click {
    pointer-events: none;
}

.testQuesLetter {
    display: none;
}

.testing-side.hidden-ques .testing-left {
    display: none;
}

.testing-side.record-live .part-term-list {
    pointer-events: none;
    opacity: 0.5;
}

.testing-side.record-live .meQuestionaireSubmitJs {
    pointer-events: none;
    opacity: 0.5;
}

.testing-side.record-live .testNext {
    pointer-events: none;
    opacity: 0.5;
}

.testing-side.record-live .testPrev {
    pointer-events: none;
    opacity: 0.5;
}

.testRecordStart.disabled {
    display: none;
}

.testRecordStart.none-click {
    pointer-events: none;
}

.testing-audio-player.disable {
    pointer-events: none;
}

.b-btn-start .inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.b-btn-guide .b-switch {
    margin-top: 0;
}

.me-question-group-flex {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.exams-main-question .t-note {
    font-size: 1.4rem;
    margin: 1.2rem 0;
}

.b-ans-it.essayFormat .b-gr,
.b-ans-it.speakFormat .b-gr {
    flex-direction: column;
    align-items: flex-start !important;
}

/* .testing.testing-exam .me-question-part-term.listening */
.testing.testing-history .otest-panel,
.testing.testing-history .b-switch {
    display: none;
}

.testing.testing-exam .completedRecord .testRecordStart {
    display: none;
}

.testing-part-selection.processing .b-btn-start .testStart .icon {
    /* -webkit-animation: spin 1s ease-in-out infinite; */
    /* animation: spin 1s ease-in-out infinite; */
    animation: none !important;
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue .check-radio {
    border-color: var(--color-true);
    background: var(--color-true);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaFalse .check-radio {
    border-color: var(--color-pri);
    background: var(--color-pri);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue .check-radio::before,
.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaFalse .check-radio::before {
    opacity: 1;
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue .checkbox::before,
.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaFalse .checkbox::before {
    opacity: 1;
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue .checkbox {
    border-color: var(--color-true);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaFalse .checkbox {
    border-color: var(--color-pri);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaFalse .checkbox::before {
    color: var(--color-pri);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue .checkbox::before {
    color: var(--color-true);
}

.explain-content {
    margin: 1.6rem 0 2.4rem;
    padding: 2.4rem;
    background: #fafafc;
    border-radius: 0.4rem;
}

.explain-content-action {
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    transition: 0.3s ease-in-out;
}

.explain-content-action::after {
    content: "\f078";
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 6 Pro";
}

.explain-content-action.active {
    color: var(--color-true);
}

.explain-content-action.active::after {
    transform: rotate(180deg);
}

.tcus-point {
    font-size: 1.8rem;
    color: var(--color-pri);
    font-weight: 700;
}

.tcus-point .t-review-label {
    font-weight: 500;
    color: var(--color-sec);
}

.tcus-review .t-review-label {
    font-weight: 500;
    color: var(--color-sec);
    font-size: 1.8rem;
}

.exam-mode-tag {
    border-radius: 0.6rem;
    padding: 0.6rem 1.2rem;
    background: #a8a8a8;
    color: var(--color-white);
    font-size: 1.6rem;
    text-align: center;
    font-weight: bold;
}

.exam-mode-tag.exam {
    background: #2b3789;
}

.testCheckItem.monaFalse {
    border: 0.2rem solid var(--color-false);
}

.exams-ques-item.monaTrue .b-ans {
    border-color: var(--color-true);
    color: var(--color-true);
}

.exams-ques-item.monaFalse .b-ans {
    border-color: var(--color-false);
    color: var(--color-false);
}

.popup-ques.success .popup-overlay {
    pointer-events: none;
}

.popup-ques.success .popup-close {
    display: none;
    pointer-events: none;
}

.testing-part-infor,
.testing-part-guide {
    display: none;
}

.testing-part-infor.tst-active,
.testing-part-guide.tst-active {
    display: block;
}

.b-btn-guide .inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.me-question-wordsFormat .hasAudioReading .me-question-input {
    width: 100%;
}

/* .exams-main-question .t-head-number {
  margin-bottom: 0;
} */

/* .exams-main-wrap {
  padding: unset;
  background-color: unset;
} */
.exams-main-wrap {
    position: relative;
    z-index: 1;
}

/* .meq-panel-block-left,
.meq-panel-block-right,
.me-question-group-left,
.me-question-group-right {
  width: 100%;
  background-color: var(--color-white);
  border-radius: 0.8rem;
  padding: 2.4rem 3.2rem;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 0.8rem 2.4rem;
} */
.me-question-part-label {
    /* width: 100%;
  background-color: var(--color-white);
  border-radius: 0.8rem; */
    /* Bỏ fixed font-size để tự do như mona-content */
    font-weight: 500;
    color: var(--color-pri);
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.05);
    /* padding-bottom: 1.2rem; */
    /* Background màu #f1f2ec khi ở chế độ black on white bình thường */
    background-color: #f1f2ec !important;
    padding: 1.2rem 1.6rem;
    border-radius: 0.8rem;
}

/* Fix CSS Layout Issue: Constrain height and handle overflow for extension */
.me-question-part-label-extension {
    max-height: 200px;
    /* Limit height to prevent pushing content */
    overflow-y: auto;
    /* Allow internal scrolling */
    font-size: 1.6rem;
    line-height: 1.5;
}

/* Ensure content inside doesn't have excessive margins */
.me-question-part-label-extension p {
    margin: 0;
    padding: 0;
}

/* Optional: Custom scrollbar for better aesthetics */
.me-question-part-label-extension::-webkit-scrollbar {
    width: 6px;
}

.me-question-part-label-extension::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.me-question-part-label-extension::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.me-question-part-label-extension::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* Nếu me-question-part-label chứa nội dung format (có class mona-content), áp dụng style giống mona-content */
.me-question-part-label.mona-content,
.me-question-part-label .mona-content {
    font-size: inherit;
    line-height: inherit;
}

.me-question-panel-listening .me-question-part-label,
.me-question-panel-reading .me-question-part-label {
    display: block;
}

.me-question-group-wrapper,
.me-question-panel-block {
    display: flex !important;
    gap: 1.6rem;
    align-items: center !important;
    /* Căn giữa vertical để input/dragdrop thẳng hàng với text */
    line-height: 1.5 !important;
    /* Đảm bảo line-height đồng nhất */
}

/* Đảm bảo text trong paragraph có line-height phù hợp để căn giữa với input */
.me-question-content p,
.testQuestionContent p,
.mona-highlightable-content .mona-replaced-content p {
    line-height: 1.5 !important;
    /* Cùng line-height với input/dragdrop */
    display: inline;
    /* Để inline với input */
}

.meq-panel-block-left,
.me-question-group-left {
    flex: 1;
}

.me-question-group-right {
    flex: 1;
}

.t-title-area-mona .exam-it .b-if .b-box .t-gr {
    display: flex;
    gap: 0.5rem;
}

.pac-head.pac-head-history .t-head .t-title {
    align-items: center;
}

.me-question-essay-content {
    width: 100%;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.8rem;
    min-height: 12rem;
    font-family: var(--font-pri);
    padding: 0.8rem;
    color: var(--color-body);
    --f-sz: 1.6rem;
    font-size: var(--f-sz);
}


.part-term-mp3 {
    display: none;
}

/* (animation me-part-click-flash trước đây đã bỏ, giữ lại chỗ này để tránh nhầm lẫn) */

.exams-part-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* .exams-part-title-name {
  max-width: 65%;
} */

/* .side-fixed {
  width: 50rem;
} */

/* .popup-ques .popup-wrapper {
  padding: 12vh 16vh;
} */

.popup-content-submit {
    display: none;
}

.popup-content-submit.active {
    display: block;
}

@media only screen and (max-width: 800px) {

    /* .test-panel-wrap {
    padding: 1.2rem;
  } */
    .me-question-group-wrapper,
    .me-question-panel-block {
        flex-direction: column;
    }

    .meq-panel-block-left,
    .meq-panel-block-right,
    .me-question-group-left,
    .me-question-group-right {
        max-width: 100%;
        /* padding: 0.8rem; */
    }

    /* .side-fixed {
    width: 100%;
    max-width: 100%;
  } */

    .popup-ques .popup-wrapper {
        padding: 6vh 4vh;
    }
}

.me-question-group-right .meq-panel-block-left,
.me-question-group-right .meq-panel-block-right {
    padding: 0;
    width: 100%;
}

.exams-ques-item.testQuesPartOverview .b-ans {
    background: unset;
    color: var(--color-sec);
    border: unset;
}

.main-test-exam-history .exams-hd.active {
    z-index: 50;
}

.exam-container {
    width: 100%;
    height: 100%;
    padding: 0 1rem;
}

.main-test-exam-history .exams-hd-gr .b-group {
    text-align: right;
}

.me-question-single .exams-main-recheck {
    margin-top: 0;
}

.me-question-group .exams-main-recheck {
    margin: 1rem 0;
}

.popup-open-disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.testing-qw-time .time-out-message {
    display: none;
}

.testing-qw-time.timeOut span {
    display: none;
}

.testing-qw-time.timeOut span.time-out-message {
    display: block;
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap.hasAudioReading {
    width: 100%;
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap.hasAudioReading .monaTrue i,
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap.hasAudioReading .monaFalse i {
    bottom: 0rem;
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap.hasAudioReading .monaTrue,
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap.hasAudioReading .monaFalse {
    display: unset;
}

.testCountTimeCustom.disabled {
    display: none !important;
}

.exams-main-record .record-wrap .record-countdown {
    flex-direction: column;
    border: 0.1rem solid var(--color-border);
    border-color: #d3262e;
    border-radius: 0.6rem;
    width: 100%;
    max-width: 20rem;
    padding-bottom: 0.6rem;
}

.exams-main-record .record-wrap .record-countdown .t-text {
    padding: 0.8rem;
    background: #d3262e;
    color: #fff;
    width: 100%;
    text-align: center;
}

.exams-main-record .record-wrap .record-countdown.respone .t-text {
    background: #2b3789;
    color: #fff;
}

.exams-main-record .record-wrap .record-countdown.respone .t-num {
    background: #2b3789;
}

.exams-main-record .record-wrap .record-countdown.respone {
    border-color: #2b3789;
}

.testing-exam .completedRecord .exams-main-record .record-wrap .record-countdown {
    display: none;
}

.meq-panel-block-right.noPanelLeft {
    max-width: 100%;
    width: 100%;
}

.me-question .lb-ip {
    padding: 1.2rem 1.6rem;
    background: #f5f5f5;
    border-radius: 0.6rem;
}

.exams-controler {
    background-color: unset;
    gap: 1.6rem;
    justify-content: center;
}

/* Desktop Alignment for Navigation Buttons (inline with me-question-part-label) */
/* ONLY apply this layout to the History View (.sec-exp-history) to avoid affecting Active Test */
@media screen and (min-width: 769px) {
    .sec-exp-history .exams-controler.testQuestionController {
        position: absolute;
        top: 0.8rem;
        /* Adjusted for larger button alignment */
        right: 1.6rem;
        margin: 0;
        z-index: 10;
        padding: 0;
        justify-content: flex-end;
    }

    /* Force specific size for desktop buttons to fit in header - Scoped to History */
    /* Updated to 4rem to match Active Test typical sizing */
    .sec-exp-history .exams-controler.testQuestionController .btn-nav {
        width: 4rem;
        height: 4rem;
        min-width: 4rem;
        min-height: 4rem;
        line-height: 4rem;
        font-size: 1.6rem;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }
}

/* .exams-controler .btn {
  background-color: #ef4444;
  color: var(--color-white);
}

.exams-controler .btn::after {
  background: var(--color-pri);
}

.exams-controler .btn.second {
  background-color: var(--color-white);
  border: 0.1rem solid #ef4444;
  color: #ef4444;
}

@media (hover: hover) {
  .exams-controler .btn.second:hover {
    color: var(--color-white);
    border-color: transparent;
  }
  .lswd-btn:hover {
    border-color: var(--color-pri);
    background: var(--color-pri);
    color: var(--color-white);
  }
  .lswd-btn.lswd-check-btn:hover {
    border-color: var(--color-pri);
    background: var(--color-pri);
  }
  .lswd-btn.lswd-skip-btn:hover {
    background: var(--color-sec);
    color: var(--color-white);
  }
} */
/* .me-question-part-overview {
  max-width: 90rem;
  margin: auto;
} */

.history-process-items {
    margin: 1.2rem 0 1.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
}

.history-process-items .hpi {
    width: calc(100% / 3 - 2.4rem);
}

.history-process-items .hpi .hpi-label {
    font-weight: bold;
    font-size: 1.8rem;
}

.hpi .exam-mode-tag {
    max-width: 14rem;
    margin: 0 auto;
}

.me_textarea_block .me_textarea_top {
    padding: 1.6rem 1.2rem;
    border: 0.1rem solid var(--color-border);
    border-bottom: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f2f3f5;
    gap: 1rem;
}

.me-question-essay .me_textarea_block textarea {
    padding: 1.2rem;
    border-color: #f2f3f5;
    border-radius: unset;
    min-height: 25rem;
}

.me_textarea_block .me_textarea_controls button {
    background-color: #2b3789;
    padding: 1rem 1.2rem;
    color: var(--color-white);
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 1rem;
}

.me_textarea_block .me_textarea_controls button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: 0.7;
}

.me_textarea_block .me_textarea_top .wordNumber {
    padding: 1.2rem 2.4rem;
    background: var(--color-white);
    border-radius: 0.6rem;
}

.me-question-group .exams-main-recheck {
    width: 100%;
}

/* feedback 30/10/2024 */
.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue {
    border: 0.2rem solid var(--color-true);
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue.monaNotSelected i {
    display: none;
}

.me-question.me-question-defaultFormat.me-question-evaluated .me-question-recheck .monaTrue.monaNotSelected .check-radio {
    border-color: #8c8982;
    background: var(--color-white) f;
}

.monafb-reorder-1 {
    order: 1;
}

.monafb-reorder-2 {
    order: 2;
}

.monafb-reorder-3 {
    order: 3;
}

.lswd-test {
    background: var(--color-white);
    padding: 1.2rem;
    margin: 2.4rem 0;
    border-radius: 1rem;
}

.lswd-controller {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.6rem;
    justify-content: center;
}

.lswd-number {
    font-size: 1.8rem;
}

.lswd-controller .btn {
    padding: 1rem;
}

.lswd-controller .btn .inner {
    display: none;
}

.lswd-flx {
    display: flex;
    gap: 1.6rem;
}

.lswd-flx .lswd-left {
    width: 65%;
}

.lswd-flx .lswd-right {
    width: 35%;
}

@media screen and (max-width: 1000px) {
    .lswd-flx {
        flex-wrap: wrap;
        flex-direction: column;
        gap: 1rem;
    }

    .lswd-flx .lswd-left,
    .lswd-flx .lswd-right {
        width: 100%;
    }
}

.lswd-thumb-label,
.lswd-exp-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: bold;
}

.lswd-thumb-icon,
.lswd-exp-icon {
    width: 1.6rem;
    height: 1.6rem;
}

.lswd-thumbnail,
.lswd-explaination {
    background: #f5f7fa;
    padding: 1rem;
    border-radius: 1rem;
}

.lswd-thumbnail {
    margin-bottom: 1.6rem;
}

.lswd-exp-action {
    cursor: pointer;
    text-decoration: underline;
}

.lswd-textarea {
    padding: 1.6rem;
    background: #f9fafb;
    --f-sz: clamp(1.5rem, calc(1.3279rem + 0.2459vw), 1.8rem);
    font-size: var(--f-sz);
    font-weight: 500;
    border-radius: 0.4rem;
    color: #404040;
    width: 100%;
    outline: unset;
    border: unset;
    resize: unset;
    min-height: 16rem;
    margin: 1.6rem 0;
    font-size: 2rem;
}

.lswd-thumbnail .inner {
    display: block;
    padding-top: calc((450 / 600) * 100%);
    position: relative;
    overflow: hidden;
    border-radius: 0.8rem;
}

.lswd-thumbnail .inner img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.lswd-textarea-ctr-flex {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: space-between;
}

.lswd-btn-grouped {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lswd-btn {
    padding: 1rem 1.4rem;
    font-size: 1.8rem;
    border-radius: 0.8rem;
    cursor: pointer;
    transition: 0.4s all;
    color: var(--color-sec);
    font-weight: 600;
}

.lswd-btn.lswd-skip-btn {
    margin-right: auto;
    border: 0.1rem solid var(--color-sec);
}

.lswd-btn.lswd-check-btn {
    background: var(--color-sec);
    color: var(--color-white);
}

.lswd-btn.lswd-next-btn {
    display: none;
    margin-left: auto;
    background: #2b3789;
    color: var(--color-white);
}

.lswd-question {
    display: none;
}

.lswd-feedback {
    margin: 1rem 0;
    padding: 1rem;
    font-size: 1.8rem;
}

.lswd-feedback.correct {
    color: var(--color-true);
}

.lswd-feedback.warning {
    color: #d3262e;
}

.lswd-textarea.lswdReadonly {
    background: #f5f7fa;
}

/* giaidoan2 */
.testing-response-check {
    display: none;
}

.testing-response-check.open {
    display: block;
}

.testing-response-check .meQuestionaireSubmitJs {
    margin: auto;
}

.respo-skill {
    margin: 1.2rem 0 2.4rem;
}

.respo-skill .respo-writting,
.respo-skill .respo-speaking {
    display: none;
}

.respo-skill .respo-writting.open,
.respo-skill .respo-speaking.open {
    display: block;
}

.respo-skill .respo-title {
    background: var(--color-sec);
    color: var(--color-white);
    font-weight: bold;
    width: max-content;
    padding: 0.6rem 1.2rem;
    border-radius: 0.6rem 0.6rem 0px 0;
}

.respo-skill .respo-bottom {
    background: var(--color-white);
    padding: 1.2rem 2.4rem;
}

.respo-skill .respo-ids {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.respo-id {
    width: 6rem;
    height: 6rem;
    background: #a0a0a0;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rem;
    cursor: pointer;
    position: relative;
}

.respo-id.open {
    background: var(--color-sec);
}

.respo-id.open::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    color: var(--color-true);
    background: var(--color-white);
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.respo-writting {
    margin: 2.8rem 0 1.4rem;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.6rem;
}

.respo-writting .respo-writting-title {
    border-bottom: 0.1rem solid var(--color-border);
    padding: 1.2rem;
    font-weight: bold;
}

.respo-writting .respo-writting-essay {
    padding: 1.2rem;
    white-space: pre-line;
}

/* .me-question-panel-speaking {
  max-width: 80rem;
  margin: auto;
} */
.btn.testRecordFinal.none {
    display: none;
}

.testing-practice .testTermPartTimeToRead {
    display: none;
}

.meqwr-controller {
    display: flex;
    gap: 1.2rem;
    justify-content: flex-end;
    padding: 1.2rem 0;
}

.meqwr-btn.next.last .meqwr-text {
    display: none;
}

.meqwr-btn.next.last .meqwr-text-next {
    display: inline-block;
}

.meqwr-text-next {
    display: none;
}

.part-term-time-to-read .testTermPartNumber {
    color: var(--color-pri);
}

.testRecordStart.disable {
    pointer-events: none;
}

.testing-exam .mqgc .btn {
    pointer-events: none;
    opacity: 0.5;
}

.testing-exam .mqgc {
    display: none;
}

.btn.meqwr-btn.prev.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.btn.meqwr-btn.next.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.popup-submit-alert-open.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.exams-controler.none {
    display: none;
}

.me_textarea_block .me_textarea_top {
    flex-wrap: wrap;
}

@media only screen and (max-width: 1024px) {
    .me-question-panel-writting .me-question-panel-block {
        flex-direction: column;
    }

    .me-question-panel-writting .test-panel-wrap {
        padding: 0.8rem;
    }

    .me_textarea_block .me_textarea_top .wordNumber {
        padding: 0.2rem 1.4rem;
    }

    .respo-id {
        width: 4rem;
        height: 4rem;
    }
}

.meQuestionaireFinishBackJs.btn.none {
    display: none;
}

.respo-speaking-audio {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
    margin-bottom: 1.2rem;
}

.respo-speaking-audio .box-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    height: 4rem;
    min-width: 10rem;
    padding: 0.6rem;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.8rem;
    font-weight: 600;
}

.audio-control {
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: #d3262e;
    color: var(--color-white);
    height: 4rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .testing-qw-group {
  position: static;
  width: auto;
} */
.tcus-review-audio audio {
    margin: auto;
    display: block;
    margin-bottom: 2rem;
}

/* writing & speaking: history */
.tcusReviewGroupPrimarys,
.tcusReviewGroupSecondarys {
    padding: 1rem 0rem 3rem;
}

.tcusReviewGroupPrimarys,
.tcusReviewGroupSecondarys {
    display: none;
    /* Hidden by default */
}

.tcusReviewGroupPrimarys.active,
.tcusReviewGroupSecondarys.active {
    display: block;
    /* Show the active panel */
}

.tcusReviewGroupButtons {
    display: flex;
    gap: 1rem;
}

.tcusReviewGroupButton {
    cursor: pointer;
    padding: 1.2rem;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s;
    font-size: 1.4rem;
}

.tcusReviewGroupButton:hover {
    background-color: #d6d6d6;
}

.tcusReviewGroupButton.open {
    background-color: #ccc;
}

span.tcusReviewGroupButtonCounter {
    padding: 0.6rem 1.2rem;
}

.tcusReviewGroupSecondary {
    padding: 0 1rem;
}

.rvw-secondary-heading {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.rvw-secondary-inf {
    border-bottom: 0.1rem solid #ccc;
    padding: 1rem 0;
}

.rvw-secondary-inf .rvw-secondary-inf-1 {
    margin-bottom: 1rem;
}

.sec-exp-history .testing-wrsp .me-question-group .me-question-group-wrapper .me-question-group-right {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

.sec-exp-history .testing-wrsp .me-question-group .me-question-group-top {
    background-color: var(--color-white);
    border-radius: 0.8rem;
    padding: 1.6rem;
    -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0 0.8rem 2.4rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0 0.8rem 2.4rem;
    margin-bottom: 1rem;
}

.hisdetail-wrsp-waitting {
    background: var(--color-white);
    padding: 2.4rem;
    margin-bottom: 2.4rem;
}

.hisdetail-wrsp-waitting .wrsp-waitting-title {
    text-align: center;
}

.hisdetail-wrsp-waitting .wrsp-waitting-description {
    text-align: center;
    padding: 1.6rem;
}

.hisdetail-wrsp-waitting .wrsp-waitting-description .highlight-email {
    font-weight: bold;
    text-decoration: underline;
}

.hisdetail-wrsp-waitting .wrsp-waitting-description .highlight-blog {
    font-weight: bold;
    color: #8701ca;
}

.monafb-history-detail.wrsp .tcus-ans {
    max-width: 75rem;
    width: 100%;
}

.monafb-history-detail.wrsp .tcus-ans .tcus-ans-content textarea {
    width: 100%;
    height: 20rem;
    border: 0.1rem solid var(--color-border) !important;
    padding: 1rem !important;
    box-shadow: none !important;
    resize: none;
}

.tcusReviewGroupPrimary,
.tcus-review-content.tcus-review-essay {
    max-height: 30rem;
    overflow-y: auto;
    background: #dddddd;
    padding: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.mys {
    max-width: 35rem;
    margin: 0 auto 2rem;
}

.mys-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 3.2rem;
}

.mys-head {
    text-align: center;
    --f-sz: clamp(1.6rem, calc(1.3705rem + 0.3279vw), 2rem);
    font-size: var(--f-sz);
    color: var(--color-sec);
    font-weight: 500;
}

.mys-head .txt {
    font-weight: 600;
    color: var(--color-pri);
}

.mys-box {
    position: relative;
}

.mys-box .txt {
    position: absolute;
    color: var(--color-sec);
    font-weight: 600;
    bottom: 100%;
    --f-sz: clamp(1.5rem, calc(1.3279rem + 0.2459vw), 1.8rem);
    font-size: var(--f-sz);
}

.mys-box .txt.t-min {
    left: 0;
}

.mys-box .txt.t-max {
    right: 0;
}

.mys-box .b-line {
    position: relative;
    height: 0.4rem;
    width: 100%;
    margin: 0 auto;
}

.mys-box .b-line::before {
    content: "";
    position: absolute;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 100%;
    background: #ddd;
}

.mys-box .b-line .range {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    height: 0.4rem;
    background: var(--color-pri);
    left: var(--left);
    right: var(--right);
}

.mys-box .b-line .range::after,
.mys-box .b-line .range::before {
    content: "";
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 100rem;
    background: var(--color-pri);
    top: 50%;
}

.mys-box .b-line .range::before {
    left: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.mys-box .b-line .range::after {
    right: 0;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}

.hisdetail-wrsp-done {
    margin-bottom: 2.4rem;
    display: flex;
    gap: 2.4rem;
}

.hisdetail-wrsp-done .wrsp-done-skill {
    background: var(--color-white);
    border-radius: 0.6rem;
    width: 50%;
}

@media screen and (max-width: 1000px) {
    .hisdetail-wrsp-done {
        flex-wrap: wrap;
    }

    .hisdetail-wrsp-done .wrsp-done-skill {
        width: 100%;
    }
}

.wrsp-dst-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
}

.wrsp-dst-icon img {
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
}

.wrsp-done-skill-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background: #c5e4ff;
    border-radius: 0.6rem 0.6rem 0px 0px;
}

.wrsp-done-skill.writing .wrsp-done-skill-top {
    background: antiquewhite;
}

.wrsp-done-skill-bottom {
    padding: 2rem;
    border-radius: 0px 0px 0.6rem 0.6rem;
    background: transparent;
}

.wrsp-dst-title {
    --f-sz: clamp(1.7rem, calc(1.2984rem + 0.5738vw), 2rem);
    font-size: var(--f-sz);
    color: var(--color-tt);
    font-weight: 600;
    color: var(--color-sec);
    margin-left: 1rem;
}

.wrsp-done-skill-review {
    max-height: 30rem;
    height: 100%;
    padding: 1rem;
    overflow-y: auto;
}

.wrsp-done-btn {
    width: max-content;
    margin: 0 auto 2.4rem;
}

.me-question-speak audio {
    display: none;
}

.meQuestionaireFinishBackJs {
    display: none !important;
}

.meqwr-controller {
    /* position: fixed;
  bottom: 0;
  left: 0;
  background: var(--color-white);
  width: 100%;
  padding: 1.2rem; */
    display: none;
}

.testing-wrsp .testPanel:last-child .meqwr-btn.next {
    display: none;
}

.respo-speaking.vw-sample {
    margin: 2.8rem 0 1.4rem;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.6rem;
}

.respo-speaking.vw-sample .respo-speaking-title {
    border-bottom: 0.1rem solid #cacaca;
    padding: 1.2rem;
    font-weight: bold;
}

.respo-speaking.vw-sample .respo-speaking-transcript {
    padding: 1.2rem;
}

.main-test-exam-history .exams-hd-gr .b-group::before,
.me-question-report-action {
    display: none !important;
}

.test-panel-feedback-left,
.test-panel-feedback-right {
    width: 100%;
    padding: 0 2.4rem;
}

.me-recheck-item .me-recheck-mask-replaced,
.mona-replaced-content .me-recheck-item.testCheckItemReplaced .me-recheck-text {
    display: none;
}

.me-recheck-mask-replaced {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    position: relative;
}

.me-recheck-mask-replaced:before {
    display: none;
    content: "\f00c";
    font-size: 1.6rem;
    color: var(--color-true);
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 6 Pro";
}

.mona-replaced-content .me-recheck-item.testCheckItemReplaced input.me-recheck-input:checked~.me-recheck-mask-replaced:before {
    display: block;
}

.mona-replaced-content table td:has(.me-recheck-item.testCheckItemReplaced),
.mona-replaced-content table th:has(.me-recheck-item.testCheckItemReplaced) {
    padding: 0 !important;
}

.mona-replaced-content .me-recheck-item.testCheckItemReplaced {
    height: 100%;
    width: 100%;
    background: #e7e7e7;
    transition: background 0.3s ease;
    justify-content: center;
    border-radius: unset;
}

/* .mona-replaced-content .me-recheck-item.testCheckItemReplaced:has(.me-recheck-input:checked) {
  background: #ffffff;
}

.mona-replaced-content .me-recheck-item.testCheckItemReplaced:hover {
  background: #ffffff;
} */

.mona-replaced-content .me-recheck-item.testCheckItemReplaced .me-recheck-text-wrap {
    display: none;
}

.mona-replaced-content .me-recheck-item.testCheckItemReplaced .me-recheck-checkbox,
.mona-replaced-content .me-recheck-item.testCheckItemReplaced .me-recheck-radio {
    display: none;
}

.mona-replaced-content .me-recheck-item.testCheckItemReplaced .me-recheck-mask-replaced {
    display: block;
}

.mona-replaced-content .exams-main-question.me-question-defaultFormat.testQuestion.testReplacedQuestion .t-question {
    margin-bottom: 0 !important;
}

.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced {
    pointer-events: none;
}

.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaTrue i::before {
    content: "\f00c" !important;
}

.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaTrue i {
    color: var(--color-true) !important;
}

.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaFalse i::before {
    content: "\f00d" !important;
}

.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaFalse i {
    color: var(--color-false) !important;
}

.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaFalse .check-radio {
    border-color: var(--color-false) !important;
    background: var(--color-false) !important;
}

.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaTrue .check-radio::before,
.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaFalse .check-radio::before {
    opacity: 1 !important;
}

.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaTrue {
    border: 0.2rem solid var(--color-true) !important;
}

.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaFalse {
    border: 0.2rem solid var(--color-false) !important;
}

.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced .me-recheck-text {
    display: block;
}

/* .main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaTrue,
.main-test-exam.sec-exp-history .mona-replaced-content .me-recheck-item.testCheckItemReplaced.monaFalse {
  border: unset !important;
} */

.main-test-exam.sec-exp-history .mona-replaced-content table .me-recheck-item.testCheckItemReplaced.monaTrue,
.main-test-exam.sec-exp-history .mona-replaced-content table .me-recheck-item.testCheckItemReplaced.monaFalse {
    justify-content: center;
}

.takeItToReplacedJs.replaced-done .mona-replaced-content tr.me-question.me-question-defaultFormat {
    display: table-row;
}

.me-question-group-feedback:not(:first-child) {
    margin-top: 2.4rem;
}

/* Group question heading - font size bằng với câu hỏi thông thường */
.me-question-group-feedback .me-question-heading.forgroup,
.me-question-heading.t-head-number.forgroup {
    font-size: 1.6rem !important;
    /* Bằng với font-size câu hỏi thông thường */
    font-weight: bold;
    margin-bottom: 1.6rem;
}

.me-recheck-item.disabled-option {
    background: #dddddd !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.me-recheck-item.notchecked-option {
    opacity: 0.5 !important;
    background: #dddddd !important;
}

.testReplacedQuestion .meq-panel-block-left,
.testReplacedQuestion .meq-panel-block-right {
    height: 100%;
    overflow: unset;
}

#formExamQuestionSet[data-questionaire_audio="1"] .test-panel-feedback-wrap.test-panel-feedback-audio .testing-audio {
    display: none;
}

#formExamQuestionSet .question-set-audio {
    padding: 1.6rem;
    background: var(--bg-exam-main);
    border-radius: 0.8rem;
    margin-bottom: 1.2rem;
}

#formExamQuestionSet.testing-exam .question-set-audio {
    display: none;
}

.mona-replaced-content-table td {
    position: relative;
    overflow: hidden;
}

.mona-replaced-content-table td .testCheckItemReplaced {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Popup Dictionary Styles */

/* Word header row - aligned items */
.popup-translate-word {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #eee;
}

.popup-translate-word-info {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.popup-translate-word-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
}

.popup-translate-word-phonetic {
    font-size: 1.2rem;
    color: #666;
    font-style: italic;
}

/* Button group - keeps buttons together */
.popup-translate-word-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.popup-translate-word-audio {
    width: 2.8rem;
    height: 2.8rem;
    background: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.popup-translate-word-audio:hover {
    background: #d3262e;
    color: #fff;
}

.popup-translate-word-copy {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    background: #f0f0f0;
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
    white-space: nowrap;
}

.popup-translate-word-copy:hover {
    background: #333;
    color: #fff;
}

.popup-translate-word-save {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    background: rgba(211, 38, 46, 0.1);
    border: 1px solid rgba(211, 38, 46, 0.3);
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: #d3262e;
    transition: all 0.2s;
    white-space: nowrap;
}

.popup-translate-word-save:hover {
    background: #d3262e;
    color: #fff;
}

.popup-translate-word-save.saved {
    background: #27ae60;
    color: #fff;
    border-color: #27ae60;
    cursor: default;
}

.popup-translate-word-save.saved i {
    color: #fff;
}

/* ========================================
   EXAM TABLE OF CONTENTS STYLES
   ======================================== */

/* Exam Table of Contents */
.exam-toc {
    position: fixed;
    left: -320px;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    max-height: 80vh;
    background: #fff;
    border-radius: 0 1.2rem 1.2rem 0;
    box-shadow: 0.4rem 0 2.4rem rgba(0, 0, 0, 0.12);
    z-index: 1000;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.exam-toc.show {
    left: 0;
}

/* Floating Toggle Button - Text "Mục lục" dọc */
.exam-toc-toggle-btn {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3.2rem;
    padding: 1.2rem 0.6rem;
    background: #d3262e;
    border-radius: 0 0.6rem 0.6rem 0;
    box-shadow: 0.2rem 0 1.2rem rgba(211, 38, 46, 0.35);
    z-index: 100;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.exam-toc-toggle-btn:hover {
    transform: translateY(-50%) translateX(0.2rem);
    box-shadow: 0.3rem 0 1.8rem rgba(211, 38, 46, 0.5);
    background: #b8222a;
}

.exam-toc-toggle-btn .exam-toc-toggle-icon {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
}

.exam-toc-toggle-btn.hide {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(-100%);
}

/* Header - Đỏ tươi, modern */
.exam-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.4rem;
    background: #d3262e;
    flex-shrink: 0;
    min-height: 4.8rem;
}

.exam-toc-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 2.4rem;
}

/* Nút Close X - Hình vuông đều đặn, căn giữa */
.exam-toc-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    width: 2.4rem;
    height: 2.4rem;
    min-width: 2.4rem;
    min-height: 2.4rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    margin: 0;
}

.exam-toc-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.exam-toc-close-icon {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    position: relative;
    top: -0.2rem;
}

/* Content area */
.exam-toc-content {
    overflow-y: auto;
    max-height: calc(80vh - 5.6rem);
    flex: 1;
}

.exam-toc-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
}

.exam-toc-item {
    border-bottom: 1px solid #eee;
}

.exam-toc-item:last-child {
    border-bottom: none;
}

.exam-toc-link {
    display: block;
    padding: 1rem 1.6rem;
    color: #333;
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 1.5;
    transition: all 0.2s ease;
    position: relative;
    border-left: 3px solid transparent;
}

.exam-toc-link:hover {
    background: #fef5f5;
    color: #d3262e;
    border-left-color: #d3262e;
}

.exam-toc-link.active {
    background: #fef5f5;
    color: #d3262e;
    font-weight: 600;
    border-left-color: #d3262e;
}

.exam-toc-link.active::before {
    display: none;
}

/* Tablet Portrait - Compact sidebar like desktop */
@media (max-width: 1200px) and (orientation: portrait) {
    .exam-toc {
        width: 280px;
        max-height: 70vh;
        left: -300px;
    }

    .exam-toc.show {
        left: 0 !important;
    }
}

/* Tablet Landscape - PC-like behavior */
@media (max-width: 1200px) and (orientation: landscape) {
    .exam-toc {
        width: 280px;
        max-height: 70vh;
        left: -300px;
    }

    .exam-toc.show {
        left: 0 !important;
    }
}

/* Mobile - Compact sidebar, auto height */
@media (max-width: 992px) {
    .exam-toc {
        width: 260px;
        max-height: 60vh;
        left: -280px;
    }

    .exam-toc.show {
        left: 0 !important;
    }

    .exam-toc-header {
        padding: 1rem 1.2rem;
    }

    .exam-toc-title {
        font-size: 1.4rem;
    }

    .exam-toc-close {
        width: 2.2rem;
        height: 2.2rem;
        min-width: 2.2rem;
        min-height: 2.2rem;
    }

    .exam-toc-content {
        max-height: calc(60vh - 4.5rem);
        padding: 0;
    }

    .exam-toc-link {
        padding: 1rem 1.4rem;
        font-size: 1.3rem;
    }

    .exam-toc-toggle-btn {
        width: 3.2rem;
        padding: 1.2rem 0.6rem;
        height: auto;
    }

    .exam-toc-toggle-btn .exam-toc-toggle-icon {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .exam-toc {
        width: 240px;
        max-height: 55vh;
        left: -260px;
    }

    .exam-toc-header {
        padding: 0.8rem 1rem;
    }

    .exam-toc-title {
        font-size: 1.3rem;
    }

    .exam-toc-close {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        min-height: 2rem;
    }

    .exam-toc-close-icon {
        font-size: 1.2rem;
    }

    .exam-toc-link {
        padding: 0.9rem 1.2rem;
        font-size: 1.2rem;
    }

    .exam-toc-toggle-btn {
        width: 3rem;
        padding: 1rem 0.5rem;
    }

    .exam-toc-toggle-btn .exam-toc-toggle-icon {
        font-size: 1.1rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .exam-toc {
        width: 200px;
        max-height: 50vh;
        left: -220px;
    }

    .exam-toc-toggle-btn {
        width: 2.8rem;
        padding: 0.8rem 0.4rem;
    }

    .exam-toc-toggle-btn .exam-toc-toggle-icon {
        font-size: 1rem;
    }
}



/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Nội dung từ field "Nội dung" trong KÉO THẢ/ĐIỀN TỪ không in đậm */
.t-question.me-question-wrap,
.me-question-wrap,
.me-question-wordsFormat .me-question-wrap,
.me-question-dragdropFormat .me-question-wrap,
.me-question-gap-text {
    font-weight: normal !important;
}

/* FIX: Header Icons Layout (Wifi, Bell, Menu, Note) */
.exams-hd-act {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 20px !important;
    /* Even spacing */
}

.exams-hd-act .btn-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    line-height: 1 !important;
    color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    /* Ensure no background interferes */
    border: none !important;
}

.exams-hd-act .btn-icon i {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Ensure consistent spacing on mobile */
@media only screen and (max-width: 800px) {
    .exams-hd-act {
        gap: 20px !important;
    }
}

/* FIX: Header Group Spacing (Text vs Icons) */
.exams-hd-gr .b-group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 35px !important;
    /* Spacing between text and icon group */
}

/* FIX: Override mona-custom.css 44px mobile touch target size for Menu Icon in Header */
.exams-hd-act .btn-icon.OpenSideDarkMode {
    min-width: 24px !important;
    min-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure no other mobile specific styles conflict */
@media only screen and (max-width: 800px) {
    .exams-hd-act .btn-icon.OpenSideDarkMode {
        min-width: 24px !important;
        width: 24px !important;
    }
}

/* ============================================
   INSPERA-STYLE UNIFIED PART BOX
   New structure: Questions are INSIDE the Title Box
   ============================================ */

@media screen and (min-width: 1025px) {

    /* The Container (Unified Title + Questions) */
    .exams-part-title {
        display: flex !important;
        /* Căn giữa theo chiều dọc giống Inspera */
        align-items: center !important;
        position: relative !important;
        /* For absolute centering of summary */
        gap: 12px !important;
        padding: 8px 16px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        min-height: 44px !important;
        background-color: transparent !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
    }

    .exams-part-title-name {
        font-size: 1.8rem !important;
        font-weight: inherit;
        line-height: 1.55 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Hover Effect - Default (Black on White) - chỉ đổi nền, KHÔNG border */
    .exams-part-title:hover {
        background-color: #D6D6D6 !important;
    }

    /* White on Black: chỉ đổi nền khi hover */
    body.white-on-black .exams-part-title:hover {
        background-color: #be7039 !important;
    }

    /* Yellow on Black: chỉ đổi nền khi hover */
    .contrast-yb .exams-part-title:hover,
    body.contrast-yb .exams-part-title:hover,
    body.yellow-on-black .exams-part-title:hover {
        background-color: #535353 !important;
    }

    /* Border flash chỉ khi click: dùng class part-click-flash gán bằng JS */
    .exams-part-title.part-click-flash {
        box-shadow: 0 0 0 2px #409cf3 !important;
    }

    body.white-on-black .exams-part-title.part-click-flash {
        box-shadow: 0 0 0 2px #bf630c !important;
    }

    body.yellow-on-black .exams-part-title.part-click-flash,
    .contrast-yb .exams-part-title.part-click-flash,
    body.contrast-yb .exams-part-title.part-click-flash {
        box-shadow: 0 0 0 2px #00ffff !important;
    }

    /* Dark mode hover - White on Black */
    body.white-on-black .exams-part-title:hover {
        background-color: #502a0f !important;
    }

    /* Yellow on Black Mode */
    .contrast-yb .exams-part-title:hover,
    body.contrast-yb .exams-part-title:hover {
        background-color: #535353 !important;
    }

    /* === INACTIVE PART STATE === */
    .me-question-part-term:not(.part-active) .exams-part-title {
        min-width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
        /* Căn giữa cả nhóm [Part X + summary] giống Inspera */
    }

    /* Ensure horizontal scrolling for the wrapper */
    .exams-side-wrapper {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        align-items: center !important;
        height: 100% !important;
        width: 100% !important;
        padding-right: 90px !important;
        /* Chừa chỗ cho nút .btn-submit-checkmark bên phải, tránh che số câu hỏi */
        /* Ensure padding doesn't break layout */
        box-sizing: border-box !important;
        white-space: nowrap !important;
        /* Cấm toàn bộ thanh Part + số câu hỏi bị xuống dòng, luôn nằm trên 1 hàng */
    }

    /* Mỗi part (me-question-part-term) tự động dãn rộng, chia đều không gian còn lại */
    .exams-side-wrapper .me-question-part-term {
        flex: 1 1 0 !important;
    }

    /* Hide scrollbar for cleaner look if desired, or keep it */
    .exams-side-wrapper::-webkit-scrollbar {
        height: 6px;
    }

    .exams-side-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .exams-side-wrapper::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }

    /* Show Summary cạnh Part X, cùng font và trung điểm chiều cao với số câu hỏi (18px) */
    .me-question-part-term:not(.part-active) .exams-part-ques-summary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.8rem !important;
        line-height: 1.55 !important;
        font-weight: inherit !important;
        color: #333 !important;
        /* Default Dark Text */
        gap: 4px !important;
        margin-left: 8px !important;
        /* nằm sát ngay bên phải "Part X" nhưng không dính quá */
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        pointer-events: none !important;
    }

    /* Dark Mode - White on Black - Summary Text */
    body.white-on-black .me-question-part-term:not(.part-active) .exams-part-ques-summary {
        color: #ffffff !important;
    }

    /* Yellow on Black Mode - Summary Text */
    .contrast-yb .me-question-part-term:not(.part-active) .exams-part-ques-summary,
    body.contrast-yb .me-question-part-term:not(.part-active) .exams-part-ques-summary,
    body.yellow-on-black .me-question-part-term:not(.part-active) .exams-part-ques-summary {
        color: #ffffff !important;
    }

    /* Hide Questions */
    .me-question-part-term:not(.part-active) .exams-part-ques {
        display: none !important;
    }

    /* === ACTIVE PART STATE === */
    .me-question-part-term.part-active .exams-part-title {
        min-width: auto !important;
        /* Shrink to fit content */
        background-color: transparent !important;
        justify-content: center !important;
        align-items: center !important;
        /* Căn giữa theo chiều dọc cả "Part X" và dãy số câu hỏi */
    }

    /* Font weight cho tiêu đề Part:
     - Inactive: không in đậm
     - Active: đậm hơn nhưng không phình quá so với số câu hỏi */
    .me-question-part-term:not(.part-active) .exams-part-title,
    .me-question-part-term:not(.part-active) .exams-part-title-name {
        font-weight: 400 !important;
    }

    .me-question-part-term.part-active .exams-part-title,
    .me-question-part-term.part-active .exams-part-title-name {
        font-weight: 600 !important;
        /* Nudge nhẹ xuống ~1.2px để trung điểm Part trùng với số câu hỏi, chỉ khi active */
        transform: translateY(1.2px);
    }

    /* Hide Summary */
    .me-question-part-term.part-active .exams-part-ques-summary {
        display: none !important;
    }

    /* Show Questions (Inside Title Box) */
    .me-question-part-term.part-active .exams-part-ques {
        display: flex !important;
        align-items: center !important;
        margin-left: 8px !important;
        margin-top: 0 !important;
    }

    /* Question List Layout */
    .exams-part-list {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }

    /* Mỗi ô số câu hỏi là inline-block để không tự xuống hàng */
    .exams-part-list .exams-ques-item {
        display: inline-block !important;
    }
}

/* =========================
   MOBILE / TABLET SIDEBAR
   Giữ layout gốc Mona: Part ở trên, dãy số câu ở dưới, KHÔNG có summary "0 of 13"
   ========================= */
@media screen and (max-width: 1024px) {

    /* 1. Layout Part trong sidebar mobile: chỉ hiện Part + dãy số câu hỏi (KHÔNG summary) */
    .side-fixed .exams-part-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    /* 2. Ẩn hoàn toàn summary trong sidebar mobile */
    .side-fixed .exams-part-ques-summary {
        display: none !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        margin-top: 0 !important;
    }

    /* 3. Dãy số câu hỏi là hàng bên dưới */
    .side-fixed .exams-part-ques {
        display: block !important;
        margin-top: 4px !important;
    }
}

/* Active Question Styling - REMOVED per user request to keep original theme styles */
/* .exams-ques-item.is-active .b-ans,
.exams-ques-item.active .b-ans {
  border-color: #007bff !important; 
} */

/* REMOVED: Custom sizing for .b-ans to revert to Original Mona Style */
/* Relocated Submit Button Styling */
.exams-side-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    /* Ensure it doesn't shrink in flex container */
    height: 100%;
    /* Match height of navigation parts if needed */
    margin-left: auto;
    /* Push to the right */
}

/* Spacer to prevent submit button form obscuring content */
.exams-spacer {
    min-width: 96px !important;
    /* Same width as submit button */
    flex-shrink: 0 !important;
    height: 100% !important;
    background: transparent !important;
    /* Show parent background (purple) */
}

/* Ensure the button itself fits well */
.exams-side-submit .btn-submit-checkmark {
    width: 96px !important;
    height: 4rem;
    font-size: 1.8rem;
    box-shadow: none;
    border-radius: 4px;
    /* Slight radius */
    /* Remove shadow for cleaner inline look */
}

/* Notes Sidebar Styles */
.notes-sidebar {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 99999;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.notes-sidebar.open {
    right: 0;
}

.notes-sidebar-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.notes-sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.close-sidebar-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

.notes-sidebar-body {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}

.note-edit-area textarea {
    width: 100%;
    height: 150px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 10px;
}

.note-actions {
    display: flex;
    justify-content: space-between;
}

.note-actions button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

#sidebar-save-note-btn {
    background: #007bff;
    color: white;
}

#sidebar-delete-note-btn {
    background: transparent;
    color: #dc3545;
}

/* Sidebar Polish */
.sidebar-context {
    background: #d1ecf1;
    color: #0c5460;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
    font-style: italic;
    border-left: 4px solid #17a2b8;
    word-break: break-word;
}

.sidebar-delete-confirm {
    background: #cce5ff;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    color: #004085;
    margin-top: 10px;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 15px;
}

#sidebar-cancel-delete-btn {
    background: none;
    border: none;
    padding: 0;
    color: #6c757d;
    cursor: pointer;
    text-decoration: underline;
}

#sidebar-confirm-delete-btn {
    background: none;
    border: none;
    padding: 0;
    color: #007bff;
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
}

/* FIX: Mobile Navigation Buttons Z-Index and Clickability */
@media screen and (max-width: 992px) {
    .exams-controler {
        position: relative;
        z-index: 9000;
    }

    .btn-nav.testPrev,
    .btn-nav.testNext {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative;
        z-index: 99999 !important;
        opacity: 1 !important;
        touch-action: manipulation;
        /* Improves touch response */
        display: inline-flex !important;
        /* Force display if hidden */
        align-items: center;
        justify-content: center;
    }

    /* Respect disabled state */
    .btn-nav.testPrev.disable,
    .btn-nav.testNext.disable,
    .btn-nav.testPrev:disabled,
    .btn-nav.testNext:disabled,
    .btn-nav.testPrev.none-prev,
    .btn-nav.testNext.none-next {
        opacity: 0.3 !important;
        pointer-events: none !important;
    }
}

/* Sticky Note UI for Highlight Feature */
.sticky-note-wrapper.menuNote {
    display: none;
    /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    background-color: #fff56c;
    /* Bright yellow */
    border: 1px solid #e1d683;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 0;
    z-index: 10000;
    flex-direction: column;
    margin-top: 15px;
}

/* Arrow indicator for sticky note */
.sticky-note-wrapper.menuNote::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #fff9c4 transparent;
}

.sticky-note-wrapper.menuNote.open {
    display: flex !important;
}

.sticky-note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 5px;
}

.sticky-note-title {
    font-weight: 600;
    color: #555;
    font-size: 14px;
}

/* Mac-style Close Button Container */
.sticky-note-close,
.sticky-note-close-display {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
}

.sticky-note-close:hover,
.sticky-note-close-display:hover {
    background-color: transparent;
    filter: none;
}

.sticky-note-wrapper #note-input {
    width: 100%;
    min-height: 100px;
    border: none;
    background: transparent;
    padding: 8px 12px;
    resize: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin: 0;
}

.sticky-note-wrapper #add-note-btn {
    margin: 8px 12px 12px;
    background-color: #fdd835;
    color: #333;
    border-radius: 4px;
    padding: 6px 12px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background-color 0.2s;
    border: 1px solid #fbc02d;
    align-self: flex-end;
    width: auto;
}

.sticky-note-wrapper #add-note-btn:hover {
    background-color: #fbc02d;
}

/* Ensure textarea placeholder matches feel */
.sticky-note-wrapper #note-input::placeholder {
    color: #999;
    font-style: italic;
}

/* Display View of Sticky Note (after saving) */
.sticky-note-display {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    background-color: #fff9c4;
    border: 1px solid #e1d683;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    z-index: 1000;
    flex-direction: column;
    text-align: left;
    cursor: default;
}

.sticky-note-display::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #e1d683 transparent;
    /* Border Color */
}

/* Inner arrow matching background */
.sticky-note-display::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fff9c4 transparent;
    /* Background Color */
}

/* Hide the default highlight remove button in sidebar as per request */
.highlight-list-item .remove-highlight-btn {
    display: none !important;
}

.sticky-note-display .sticky-note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sticky-note-display .sticky-note-title {
    font-weight: 600;
    font-size: 12px;
    color: #666;
}

.sticky-note-display .sticky-note-close-display {
    margin: 0;
}

.sticky-note-display .sticky-note-close-display:hover {
    /* Styles handled by shared class above */
}

.sticky-note-display .sticky-note-content {
    padding: 10px;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.sticky-confirm-yes,
.sticky-confirm-no {
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.2s;
    border: none;
}

.sticky-confirm-yes {
    background-color: #ef4444;
    color: white;
}

.sticky-confirm-yes:hover {
    background-color: #dc2626;
}

.sticky-confirm-no {
    background-color: #e5e5e5;
    color: #333;
}

.sticky-confirm-no:hover {
    background-color: #d4d4d4;
}

/* Mac-style Green Button (Trash) -> NOW RED (Global) */
.sticky-note-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background-color: #ff5f57;
    /* Mac Red */
    border: 1px solid #e0443e;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.2s;
}

.sticky-note-delete-btn:hover {
    background-color: #dc2626;
    filter: brightness(0.9);
    border-color: #c92a2a;
    box-shadow: none;
    color: inherit;
}

/* Inline Sticky Note for Sidebar */
.sticky-note-inline {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 10px;
    z-index: 1 !important;
    display: flex !important;
    /* Ensure it shows */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.sticky-note-inline .sticky-note-title {
    display: none;
}

.sticky-note-inline::before {
    /* Move arrow to top left or hide? User said "fit normal". Let's keep arrow or hide it. */
    left: 20px !important;
    margin-left: 0 !important;
}

/* Ensure highlight list item wraps sidebar note correctly */
.highlight-list-item {
    display: flex;
    flex-wrap: wrap;
    /* Allow note to drop to next line */
    align-items: center;
    gap: 8px;
    /* Spacing between X and Text */
    margin-bottom: 12px;
    /* Spacing between items */
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.highlight-list-item .remove-highlight-btn {
    flex-shrink: 0;
}

.highlight-list-item mark {
    /* Ensure mark doesn't take 100% width unless needed */
    max-width: calc(100% - 30px);
    display: inline-block;
    word-break: break-word;
}

/* Hide the close button in inline sidebar notes */
.sticky-note-inline .sticky-note-close-display {
    display: none !important;
}

/* Sidebar Note Trash -> Red (per request) - Removed as redundant, base class is now Red */

/* Note Editing UI */
.sticky-note-editor {
    width: 100%;
    min-height: 80px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 8px;
    font-size: 13px;
    color: #333;
    resize: vertical;
    outline: none;
    margin-bottom: 8px;
    font-family: inherit;
}

.sticky-note-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.sticky-edit-save,
.sticky-edit-cancel {
    padding: 4px 12px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    font-weight: 500;
}

.sticky-edit-save {
    background: #007AFF;
    color: #fff;
}

.sticky-edit-cancel {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

.sticky-edit-save:hover {
    background: #0062CC;
}

.sticky-edit-cancel:hover {
    background: rgba(0, 0, 0, 0.1);
}

.sticky-note-edit-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    transition: opacity 0.2s;
}

.sticky-note-edit-btn:hover {
    opacity: 0.8;
}

.sticky-note-move-btn {
    cursor: move;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    transition: opacity 0.2s;
}

.sticky-note-move-btn:hover {
    opacity: 0.8;
}

.btn-download-pdf {
    display: block;
    background-color: #e74c3c;
    color: #fff;
    border: 1px solid #c0392b;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
    margin-bottom: 10px;
}

.btn-download-pdf:hover {
    background-color: #c0392b;
}

.btn-download-pdf i {
    margin-right: 5px;
}

/* ========================================= */
/* MOBILE NAVIGATION FIX - REFERENCE THEME (INSPERA) STYLE */
/* ========================================= */
@media screen and (max-width: 768px) {

    /* Override default positioning logic - Keep valid */
    .exams-controler.testQuestionController {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 2.4px !important;
        /* Inspera gap */
        z-index: 99999 !important;
        background: transparent !important;
        pointer-events: auto;
    }

    /* Shared Button Styles (Inspera) */
    .exams-controler.testQuestionController .btn-nav,
    .exams-controler.testQuestionController .btn-submit-checkmark,
    .exams-controler.testQuestionController .btn-submit-mobile {
        width: 55.88px !important;
        height: 55.2px !important;
        min-width: 55.88px !important;
        min-height: 55.2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        border-radius: 0 !important;
        /* Square - Key Difference */
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        font-size: 1.6rem !important;
        opacity: 1 !important;
        visibility: visible !important;
        cursor: pointer !important;
    }

    /* Previous Button - Dark Gray */
    .exams-controler.testQuestionController .btn-nav.testPrev {
        background: #4C4C4C !important;
        color: #ffffff !important;
        margin-right: 0 !important;
        /* Managed by gap */
        order: 1;
    }

    /* Next Button - Black */
    .exams-controler.testQuestionController .btn-nav.testNext {
        background: #000000 !important;
        color: #ffffff !important;
        order: 2;
    }

    /* Submit Button - Matches Prev Button Style */
    .exams-controler.testQuestionController .btn-submit-checkmark,
    .exams-controler.testQuestionController .btn-submit-mobile {
        background: #4C4C4C !important;
        color: #ffffff !important;
        order: 3;
        display: flex !important;
        /* Force show */
    }

    /* Icons */
    .exams-controler.testQuestionController i {
        color: #ffffff !important;
        font-size: 1.8rem !important;
        display: block !important;
    }

    /* Active State Feedback */
    .exams-controler.testQuestionController .btn-nav:active,
    .exams-controler.testQuestionController .btn-submit-checkmark:active,
    .exams-controler.testQuestionController .btn-submit-mobile:active {
        background: #245e82 !important;
    }

    /* Logic Sync: Disabled / Hidden States */
    .exams-controler.testQuestionController .btn-nav.none-prev,
    .exams-controler.testQuestionController .btn-nav.none-next,
    .exams-controler.testQuestionController .btn-nav:disabled,
    .exams-controler.testQuestionController .btn-nav.disable,
    .exams-controler.testQuestionController .btn-submit-checkmark:disabled,
    .exams-controler.testQuestionController .btn-submit-checkmark.popup-open-disabled {
        opacity: 0.4 !important;
        pointer-events: none !important;
        background: #E0E0E0 !important;
        color: #9E9E9E !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
    }
}

/* Header Flash Animation for Last Minute */
@keyframes blinkRed {
    0% {
        background-color: initial;
        color: initial;
    }

    50% {
        background-color: #fca5a5;
        color: #7f1d1d;
    }

    100% {
        background-color: initial;
        color: initial;
    }
}

.exams-hd.time-warning-flash {
    background-color: #fca5a5;
    /* Màu hồng/đỏ nhạt */
    color: #7f1d1d;
    /* Màu chữ đỏ đậm */
}