/*!
 * IELTS CBT Reading — stylesheet
 * Chuyen doi tu ban Divi 5 sang GeneratePress. Khong con selector .et_pb_* nao
 * ngoai mot dong tuong thich nguoc cho de cu (xem phan #watupro-left-answers).
 */

/* =========================================================================
   IELTS CBT READING — GENERATEPRESS COMPATIBILITY LAYER
   -------------------------------------------------------------------------
   Thay thế cho khối "JAILBREAK" và các selector .et_pb_* của Divi.
   Mọi rule ở đây đều bị khóa sau body.ielts-cbt-active nên KHÔNG rò rỉ ra
   các trang khác của website.
   ========================================================================= */

/* 1. GeneratePress giới hạn nội dung theo Customizer (mặc định 1200px).
      Ép trang thi tràn toàn màn hình mà không đụng tới cài đặt của theme. */
body.ielts-cbt-active #page,
body.ielts-cbt-active #content,
body.ielts-cbt-active .site-content,
body.ielts-cbt-active .content-area,
body.ielts-cbt-active #main,
body.ielts-cbt-active .inside-article,
body.ielts-cbt-active .entry-content,
body.ielts-cbt-active .grid-container,
body.ielts-cbt-active .ielts-cbt-root {
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
}

/* GeneratePress "separate containers" bọc bài viết trong hộp có padding + bóng */
body.ielts-cbt-active.separate-containers .inside-article,
body.ielts-cbt-active.separate-containers .site-main,
body.ielts-cbt-active.one-container .site-content,
body.ielts-cbt-active .inside-article {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.ielts-cbt-active .site-content,
body.ielts-cbt-active #content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ẩn sidebar nếu trang lỡ được đặt có sidebar */
body.ielts-cbt-active #left-sidebar,
body.ielts-cbt-active #right-sidebar {
    display: none !important;
}

/* 2. Tràn viền tuyệt đối, không phụ thuộc chiều rộng container của theme.
      Thay cho ghi chú "TRÀN FULL THEO 1920PX CỦA DIVI" ở file Final Screen. */
body.ielts-cbt-active .reading-results-master-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
}

/* Trên mobile khung bài thi cũng phải tràn hết bề ngang.
   KHÔNG áp dụng cho desktop vì ở đó khung đang dùng position:fixed + left/right:0. */
@media screen and (max-width: 768px) {
    body.ielts-cbt-active .ielts-reading-master-container {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box !important;
    }
}

/* Thẻ bọc của shortcode chỉ để chứa cấu hình, không được ảnh hưởng bố cục */
.ielts-cbt-root {
    display: contents;
}

/* 3. Reset nội bộ — không dựa vào bất kỳ class nào của theme */
.ielts-cbt-root,
.ielts-cbt-root *,
.ielts-top-header,
.ielts-top-header *,
.ielts-bottom-nav,
.ielts-bottom-nav *,
.ielts-confirm-modal,
.ielts-confirm-modal *,
.notepad-sidebar,
.notepad-sidebar *,
#choose-mode-modal,
#choose-mode-modal *,
#cbt-global-preloader,
#cbt-global-preloader * {
    box-sizing: border-box;
}

.ielts-top-header button,
.ielts-bottom-nav button,
.ielts-confirm-modal button,
.notepad-sidebar button,
#choose-mode-modal button {
    font-family: inherit;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}

.ielts-top-header a,
.ielts-bottom-nav a,
.ielts-confirm-modal a,
.notepad-sidebar a {
    box-shadow: none;
    text-decoration: none;
}

.ielts-top-header img,
.ielts-bottom-nav img {
    box-shadow: none;
    border: none;
    border-radius: 0;
}

/* 4. GeneratePress Premium: thanh điều hướng dính và header mobile */
body.ielts-cbt-active #sticky-navigation,
body.ielts-cbt-active .navigation-stick,
body.ielts-cbt-active #mobile-header.navigation-stick,
body.ielts-cbt-active .gen-sidebar-nav,
body.ielts-cbt-active .slideout-navigation,
body.ielts-cbt-active .slideout-overlay {
    display: none !important;
}

/* 5. Chặn theme/plugin khác dựng ngữ cảnh chồng lấn phá position:fixed */
body.ielts-cbt-active {
    overflow-x: hidden !important;
}


    /* =======================================================
       IELTS CBT EXPERT - READING MODULE (ULTIMATE OPTIMIZED)
       ======================================================= */

    /* -------------------------------------------------------
       1. DESIGN TOKENS & OVERRIDES
       ------------------------------------------------------- */
       /* =======================================================
       JAILBREAK: GIẢI PHÓNG POSITION FIXED KHỎI THEME (CSS-ONLY)
       ======================================================= */
    body.ielts-cbt-active #page,
    body.ielts-cbt-active #content,
    body.ielts-cbt-active .site-content,
    body.ielts-cbt-active .content-area,
    body.ielts-cbt-active #main,
    body.ielts-cbt-active .inside-article,
    body.ielts-cbt-active .entry-content,
    body.ielts-cbt-active .gb-container,
    body.ielts-cbt-active .wp-block-group,
    body.ielts-cbt-active .ielts-cbt-root {
        transform: none !important;
        animation: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        perspective: none !important;
        contain: none !important;
        will-change: auto !important;
    }
    :root {
        --cbt-primary: #2598a3;
        --cbt-primary-light: #37b7c3;
        --cbt-primary-hover: #1b7a73;
        --cbt-navy: #244159;
        --cbt-text-dark: #1a202c;
        --cbt-text-main: #2c3e50;
        --cbt-text-muted: #4a5568;
        --cbt-bg-gray: #f8fafc;
        --cbt-border: #cbd5e0;
        --ielts-top-space: 70px;
        --ielts-bottom-space: 70px;
    }
  
    /* 1. MÀN HÌNH LOADING CHUYÊN NGHIỆP */
    #cbt-global-preloader {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background-color: #f1f5f9;
        /* ĐÃ SỬA: Hạ số cuối từ 8 xuống 7 (Mức tối đa tuyệt đối của trình duyệt) */
        z-index: 2147483647 !important; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    
    /* Class để JS gọi ẩn Loading mượt mà */
    #cbt-global-preloader.hide-loader {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .cbt-loader-spinner {
        width: 45px; height: 45px;
        border: 4px solid #cbd5e0; border-top-color: #2598a3;
        border-radius: 50%;
        animation: cbt-spin 0.9s linear infinite;
        margin-bottom: 15px;
    }

    .cbt-loader-text {
        font-size: clamp(20px, 5vw, 26px); /* Tự động bóp nhỏ font chữ nếu màn hình quá hẹp */
        color: var(--cbt-navy); font-weight: 700; margin-bottom: 12px; text-align: center; line-height: 1.3;
    }

    @keyframes cbt-spin { to { transform: rotate(360deg); } }
    @keyframes cbt-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

    /* 2. CSS MODAL CHỌN CHẾ ĐỘ (Trả về cơ chế an toàn) */
    #choose-mode-modal { 
        display: none; /* Ẩn đi, chờ JS gọi */
        position: fixed; 
        z-index: 2147483646 !important; /* ĐÃ SỬA: Nâng lên cao hơn thanh Header để che phủ hoàn toàn */
        left: 0; top: 0; width: 100%; height: 100%; 
        background-color: rgba(241, 245, 249, 0.98); 
        align-items: center; flex-direction: column; 
        backdrop-filter: blur(5px); overflow-y: auto; 
        justify-content: flex-start; padding: 50px 15px; box-sizing: border-box; 
    }
  
    body.ielts-cbt-active .site-header,
    body.ielts-cbt-active #masthead,
    body.ielts-cbt-active #site-navigation,
    body.ielts-cbt-active .main-navigation,
    body.ielts-cbt-active #mobile-header,
    body.ielts-cbt-active .nav-above-header,
    body.ielts-cbt-active .nav-below-header,
    body.ielts-cbt-active #sticky-navigation,
    body.ielts-cbt-active .site-footer,
    body.ielts-cbt-active #footer-widgets,
    body.ielts-cbt-active .site-info,
    body.ielts-cbt-active .entry-header,
    body.ielts-cbt-active .page-hero,
    body.ielts-cbt-active .featured-image,
    body.ielts-cbt-active .generate-back-to-top { display: none !important; }
    body.ielts-cbt-active #content,
    body.ielts-cbt-active .site-content { min-height: 100vh !important; }
    body.ielts-cbt-active { padding-top: var(--ielts-top-space) !important; padding-bottom: var(--ielts-bottom-space) !important; transition: padding 0.3s ease !important; }
    body.ielts-cbt-active #page { padding-top: 0 !important; margin-top: 0 !important; }
    body.ielts-cbt-active .generate-back-to-top { z-index: 100000 !important; bottom: 135px !important; right: 0px !important; }

    body.test-submitted, body.test-submitted #page { padding-bottom: 0 !important; }
    body.ielts-cbt-active.test-submitted .site-footer,
    body.ielts-cbt-active.test-submitted #footer-widgets,
    body.ielts-cbt-active.test-submitted .site-info { display: block !important; opacity: 1 !important; visibility: visible !important; }

    body.ielts-cbt-active #content,
    body.ielts-cbt-active .site-content,
    body.ielts-cbt-active .content-area,
    body.ielts-cbt-active #main,
    body.ielts-cbt-active .inside-article,
    body.ielts-cbt-active #content > .grid-container,
    body.ielts-cbt-active .watupro-wrap, .watupro_form, #watupro_quiz, .watupro-question, .watupro_question { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
    body.ielts-cbt-active .entry-content { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding-top: 0px !important; padding-bottom: 0 !important; padding-left: 40px !important; padding-right: 40px !important; }
    body.ielts-cbt-active .entry-content > .gb-container,
    body.ielts-cbt-active .entry-content > .wp-block-group,
    body.ielts-cbt-active .ielts-cbt-root { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-bottom: 0 !important; }

    [id*="watupro_loading"], [class*="watupro-loading"], [class*="watupro_loading"] { display: none !important; opacity: 0 !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; z-index: -9999 !important; height: 0 !important; overflow: hidden !important; }
    [id*="watupro_loading"].force-show, [class*="watupro-loading"].force-show { display: block !important; opacity: 1 !important; visibility: visible !important; position: static !important; height: auto !important; }
    .watupro-buttons, .watupro_buttons { position: absolute !important; opacity: 0 !important; z-index: -9999 !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; }
    .watupro_quiz, .watupro_quiz * { user-select: text !important; -webkit-user-select: text !important; }

    /* Fix giãn dòng WatuPro & Divi */
    .cbt-reading-passage ul li, .cbt-reading-questions ul li, .cbt-results-questions ul li, .cbt-results-explanations ul li, .ielts-cbt-root ul li, .cbt-reading-passage ol li, .cbt-reading-questions ol li, div[class*="watupro"] ul li { margin-bottom: 0px !important; padding-bottom: 5px !important; line-height: 2.0 !important; display: list-item !important; }
    .cbt-reading-passage ul ul li, .cbt-reading-questions ul ul li, .cbt-results-questions ul ul li, .cbt-results-explanations ul ul li, .ielts-cbt-root ul ul li, div[class*="watupro"] ul ul li { margin-bottom: 0px !important; margin-top: 0px !important; }

    /* -------------------------------------------------------
       2. TYPOGRAPHY & QUESTIONS
       ------------------------------------------------------- */
    .cbt-reading-passage h2, .cbt-reading-questions h2, .cbt-results-questions h2, .cbt-results-explanations h2, .watupro_quiz h2, .quiz-form h2 { color: var(--cbt-navy) !important; font-size: 24px !important; font-weight: 700 !important; margin-top: 0 !important; margin-bottom: 25px !important; padding-bottom: 15px !important; border-bottom: 1px solid #e2e6e9 !important; }
    .cbt-reading-passage h3, .cbt-reading-questions h3, .cbt-results-questions h3, .cbt-results-explanations h3, .watupro_quiz h3, .quiz-form h3 { color: var(--cbt-navy) !important; font-size: 20px !important; font-weight: 700 !important; text-transform: none !important; margin-top: 25px !important; margin-bottom: 20px !important; line-height: 1.4 !important; display: block !important; }
    .cbt-reading-passage h4, .cbt-reading-questions h4, .cbt-results-questions h4, .cbt-results-explanations h4, .watupro_quiz h4, .quiz-form h4 { color: var(--cbt-primary-light) !important; font-size: 18px !important; font-weight: 700 !important; margin: 10px 0 !important; display: flex !important; align-items: center !important; gap: 15px !important; }
    .cbt-reading-passage h2 b, .cbt-reading-passage h3 b, .cbt-reading-passage h4 b, .cbt-reading-questions h2 b, .cbt-reading-questions h3 b, .cbt-reading-questions h4 b, .cbt-results-questions h2 b, .cbt-results-questions h3 b, .cbt-results-questions h4 b { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

    .watupro-question { margin-bottom: 50px !important; }
    .watupro-question-content { font-weight: 600 !important; font-size: 16px !important; line-height: 1.6 !important; margin-bottom: 10px !important; color: #222 !important; }
    p.ielts-hint, p.ielts-qtext { margin-bottom: 0 !important; padding: 0 !important; }
    p.ielts-hint { margin-top: 8px !important; } p.ielts-qtext { margin-top: 4px !important; }
    .ielts-qnum { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; background-color: var(--cbt-primary-light) !important; color: white !important; border-radius: 50% !important; font-weight: 700 !important; font-size: 13px !important; margin-right: 2px !important; vertical-align: middle !important; }

    input[type="text"].watupro-gap, .watupro-question input[type="text"] { border: 1px solid var(--cbt-border) !important; border-radius: 16px !important; padding: 4px 15px !important; height: 30px !important; font-size: 15px !important; outline: none !important; min-width: 150px !important; background-color: #fff !important; transition: all 0.3s ease !important; box-sizing: border-box !important; vertical-align: middle !important; margin-left: 0px !important; }
    input[type="text"].watupro-gap:focus, .watupro-question input[type="text"]:focus { border-color: var(--cbt-primary-light) !important; box-shadow: 0 0 0 2px rgba(45, 161, 167, 0.2) !important; }

    .cbt-mcq-container { display: flex !important; flex-direction: column !important; gap: 2px !important; margin-top: 15px !important; margin-bottom: 30px !important; }
    .cbt-mcq-option { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 15px !important; margin-bottom: 0px !important; cursor: pointer !important; user-select: text !important; -webkit-user-select: text !important; position: relative !important; }
    .cbt-mcq-container br, .cbt-mcq-container p { display: none !important; }
    
    .cbt-mcq-option input { 
    position: absolute !important; 
    opacity: 0 !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 60px !important; /* ĐIỂM MẤU CHỐT: Chỉ phủ tấm kính lên ô A,B,C,D và nút tròn, giải phóng phần Text */
    height: 100% !important;
    margin: 0 !important; 
    padding: 0 !important; 
    z-index: 10 !important; 
    cursor: pointer !important;
}
    
    .cbt-mcq-letter { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; background-color: #e2e8f0 !important; color: var(--cbt-text-dark) !important; border-radius: 50% !important; font-weight: 800 !important; font-size: 14px !important; flex-shrink: 0 !important; transition: all 0.2s ease !important; }
    .cbt-mcq-text { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 16px !important; color: #2d3748 !important; }
    .cbt-mcq-text::before { content: '' !important; display: inline-block !important; width: 24px !important; height: 24px !important; border: 2px solid var(--cbt-primary-light) !important; flex-shrink: 0 !important; background-color: transparent !important; transition: all 0.2s ease !important; }
    .cbt-mcq-option input[type="checkbox"] ~ .cbt-mcq-text::before { border-radius: 4px !important; }
    .cbt-mcq-option input[type="radio"] ~ .cbt-mcq-text::before { border-radius: 50% !important; }
    .cbt-mcq-option:hover .cbt-mcq-text::before { border-color: var(--cbt-primary-hover) !important; }
    .cbt-mcq-option:hover .cbt-mcq-letter { background-color: #cbd5e0 !important; }
    .cbt-mcq-option input:checked ~ .cbt-mcq-letter { background-color: var(--cbt-primary) !important; color: #ffffff !important; }
    .cbt-mcq-option input:checked ~ .cbt-mcq-text::before { background-color: var(--cbt-primary) !important; border-color: var(--cbt-primary) !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important; background-size: 75% !important; background-position: center !important; background-repeat: no-repeat !important; }
    body.test-submitted .cbt-mcq-option { pointer-events: none !important; cursor: default !important; }

    /* -------------------------------------------------------
       3. HEADER & BOTTOM NAV
       ------------------------------------------------------- */
    .ielts-top-header { position: fixed; top: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); z-index: 2147483640; overflow: visible !important; font-family: 'Segoe UI', Arial, sans-serif; }
    .ielts-top-bar { display: flex; justify-content: space-between; align-items: center; overflow: visible !important; padding: 10px 40px; height: 56px; box-sizing: border-box; }
    .ielts-logo { display: flex; align-items: center; height: 100%; } .ielts-logo img { height: 35px; width: auto; margin: 0 !important; display: block; }
    
    div[id*="watupro_timer"], .watupro_timer, #timer { margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; display: inline-block !important; font-size: 0 !important; }
    .ielts-timer-wrap { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; }
    body.test-submitted .ielts-timer-wrap { display: none !important; }
    .timer-icon { display: flex !important; align-items: center !important; justify-content: center !important; } .timer-icon svg { width: 28px !important; height: 28px !important; stroke-width: 2.2 !important; color: var(--cbt-primary) !important; }
    #ielts-timer-destination { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }
    #ielts-timer-destination * { margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; font-size: 0px !important; line-height: 0 !important;}
    #ielts-timer-destination .ielts-time-number { font-size: 26px !important; font-weight: 800 !important; color: var(--cbt-primary) !important; line-height: 1 !important; letter-spacing: 1px !important; display: inline-block !important; }
    .timer-text { display: block !important; font-size: 18px !important; font-weight: 500 !important; color: var(--cbt-text-muted) !important; margin: 4px 0 0 0 !important; line-height: 1 !important; }

    .ielts-tools { display: flex; align-items: center; gap: 15px; }
    .icon-btn { background: none; border: none; cursor: pointer; color: var(--cbt-text-muted); padding: 5px; transition: 0.2s; } .icon-btn:hover { color: #00b2a9; }
    .btn-review { background: #fff; border: 1px solid var(--cbt-border); padding: 6px 15px; border-radius: 20px; cursor: pointer; font-weight: 600; color: var(--cbt-text-muted); display: flex; align-items: center; gap: 5px; font-size: 14px; transition: 0.2s; } .btn-review:hover { border-color: #00b2a9; color: #00b2a9; }
    .btn-submit-top { background: var(--cbt-primary) !important; color: #fff !important; border: none !important; padding: 7px 18px !important; border-radius: 25px !important; cursor: pointer; font-weight: 500; font-size: 15px; transition: 0.2s; align-items: center; gap: 6px; } .btn-submit-top:hover { background: var(--cbt-primary-hover) !important; } .btn-submit-top[style*="display: block"] { display: inline-flex !important; } 
    
    .ielts-menu-container { position: relative; overflow: visible !important }
    .ielts-dropdown-menu { display: none; position: absolute; top: 40px; right: 0; background: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); flex-direction: column; min-width: 180px; z-index: 2147483645; border: 1px solid #e2e8f0; overflow: hidden; }
    .ielts-dropdown-menu.show { display: flex; }
    .ielts-dropdown-menu a { padding: 12px 20px; text-decoration: none; color: var(--cbt-text-main); border-bottom: 1px solid #edf2f7; font-size: 14px; transition: 0.2s; display: flex; align-items: center; gap: 8px; } .ielts-dropdown-menu a:hover { background: #f7fafc; color: #00b2a9; }
  
    /* =======================================================
       HIỆU ỨNG TÔ MÀU CÂU HỎI ĐÃ TRẢ LỜI & THANH STATUS
       ======================================================= */
    .q-circle.answered {
        background-color: var(--cbt-primary) !important;
        color: #ffffff !important;
        border-color: var(--cbt-primary) !important;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Hiệu ứng nút bấm cơ học (Thu nhỏ rồi nảy lên) chống bị lẹm viền tuyệt đối */
    @keyframes circlePop {
        0% { transform: scale(1); }
        50% { transform: scale(0.8); } /* Lún nhỏ lại thay vì phình to ra */
        100% { transform: scale(1); }
    }
    
    .q-circle.just-answered {
        animation: circlePop 0.25s ease-out; /* Tăng tốc độ nảy lên một chút cho giật gân */
    }

    /* =======================================================
       BOTTOM NAV & TRACKER (MATCHING DESIGN)
       ======================================================= */
    .floating-arrows { display: flex; position: fixed; bottom: 75px; right: 40px; gap: 15px; z-index: 99997; }
    .nav-arrow { width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--cbt-primary-light); color: var(--cbt-primary-light); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .nav-arrow:disabled { border-color: #c1e5e3; color: #c1e5e3; cursor: not-allowed; box-shadow: none; } .nav-arrow svg { width: 24px; height: 24px; }    
    
    .ielts-bottom-nav { 
        box-sizing: border-box !important; 
        width: 100% !important; 
        position: fixed; 
        bottom: 0; left: 0; 
        background-color: #ffffff; 
        box-shadow: 0 -3px 15px rgba(0,0,0,0.05); 
        padding: 12px 0; 
        z-index: 99998; 
        font-family: Arial, sans-serif; 
    }
    
    .nav-container { 
        display: flex; 
        align-items: center; 
        gap: 12px; 
        width: 100%; 
        padding: 0 40px; 
        box-sizing: border-box; 
    }

    /* Định dạng chung cho khối Part */
.part-group { 
    border: 1px solid #cbd5e0; 
    border-radius: 8px; 
    padding: 0 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; /* SỬA TẠI ĐÂY: Canh giữa nội dung của tất cả các thanh */
    background: #ffffff; 
    transition: all 0.3s ease; 
    height: 48px; 
    box-sizing: border-box; 
    flex: 1; /* Các thanh không chọn sẽ lấy tỷ lệ rộng là 1 */
    cursor: pointer;
    overflow: hidden;
}

.part-title-area { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    white-space: nowrap; 
}

.part-name { 
    font-weight: 700; 
    color: #1a202c; 
    font-size: 15px; 
}

/* Chữ hiển thị tiến độ (in nghiêng, xám) */
.part-summary {
    font-style: italic;
    color: #64748b;
    font-size: 14px;
    display: inline-block;
}

/* TRẠNG THÁI ACTIVE (Khi thẻ đang được chọn) */
.part-group.active { 
    border-color: var(--cbt-primary); 
    flex: 1.8; /* SỬA TẠI ĐÂY: Ép thanh đang chọn chỉ rộng gấp 1.8 lần thanh thường (thay vì giãn vô tận), giúp 2 thanh kia dài ra */
}
/* Khi Active thì giấu dòng text tiến độ đi */
.part-group.active .part-summary {
    display: none;
}

    .part-circles { 
        display: none; 
        margin-left: 15px; 
        align-items: center; 
        gap: 8px !important; 
        flex-wrap: nowrap; 
        overflow-x: auto; 
        width: max-content !important; 
        flex: 0 0 auto !important; 
        -ms-overflow-style: none; 
        scrollbar-width: none;
    }
    
    .part-circles::-webkit-scrollbar { display: none; }
    
    .part-group.active .part-circles { 
        display: flex; 
    }

    .q-circle { 
        width: 28px; 
        height: 28px; 
        flex: 0 0 28px !important; 
        border-radius: 50%; 
        border: 1px solid #cbd5e0 !important; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        color: #4a5568 !important; 
        text-decoration: none !important; 
        font-size: 13px;
        background-color: #ffffff;
        transition: 0.2s; 
    }

    .q-circle:hover { background-color: #00b2a9 !important; color: #fff !important; border-color: #00b2a9 !important; }

    /* -------------------------------------------------------
       4. READING DESKTOP LAYOUT (SPLIT SCREEN)
       ------------------------------------------------------- */
    body.ielts-cbt-active .entry-content { width: 100% !important; max-width: 100% !important; padding: 0 !important; display: block !important; }
    body.ielts-cbt-active .entry-content > .gb-container,
    body.ielts-cbt-active .entry-content > .wp-block-group,
    body.ielts-cbt-active .ielts-cbt-root { width: 100% !important; max-width: 100% !important; padding: 0 !important; }

    .cbt-reading-layout { display: flex; width: 100% !important; margin: 0 !important; height: calc(100vh - var(--ielts-top-space) - var(--ielts-bottom-space)) !important; overflow: hidden !important; background: #fff; position: relative !important; }
    
    /* Ép 2 cột 50/50 cho Desktop và KHÔNG cho phép chồng chéo */
    .cbt-reading-passage, .cbt-reading-questions { 
        position: relative !important; /* Chặn xếp chồng */
        width: 50% !important; 
        flex: 0 0 50% !important; 
        height: 100% !important; 
        overflow-y: auto !important; 
        padding: 40px 50px !important; 
        border-radius: 0 !important; 
        box-sizing: border-box !important; 
        box-shadow: none !important; 
        border: none !important; 
        overflow-x: hidden !important; 
        overflow-wrap: break-word !important; 
        word-wrap: break-word !important; 
        max-width: 100% !important; 
        transform: none !important; /* Tắt hiệu ứng trượt của Mobile */
        opacity: 1 !important; 
        pointer-events: auto !important;
    }
    
    .cbt-reading-passage { background: #ffffff !important; border-right: 1px solid #cbd5e0 !important; }
    .cbt-reading-questions { background: #f8fafc !important; }
    
    .cbt-reading-passage::-webkit-scrollbar, .cbt-reading-questions::-webkit-scrollbar { width: 8px; }

    /* -------------------------------------------------------
       5. NOTEPAD & HIGHLIGHT TOOLS (FIXED POSITIONS)
       ------------------------------------------------------- */
    .notepad-sidebar { position: fixed; right: -450px; top: calc(var(--ielts-top-space) + 10px) !important; width: 380px; height: calc(100vh - var(--ielts-top-space) - var(--ielts-bottom-space) - 20px) !important; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: 99997; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; border: 1px solid #cbd5e0; border-radius: 16px; overflow: hidden; }
    .notepad-sidebar.open { right: 1px; }
    .notepad-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 5px 20px; border-bottom: none; }
    .notepad-header h3 { margin: 0 !important; font-size: 20px !important; color: #243545 !important; font-weight: 800 !important; }
    .close-notepad { cursor: pointer; font-size: 24px; color: #243545; line-height: 1; transition: 0.2s; }
    .close-notepad:hover { color: #e53e3e; transform: scale(1.1); }
    .notepad-search-container { padding: 10px 20px 20px 20px; border-bottom: none; background: #fff; }
    .notepad-search-box { display: flex; align-items: center; border: 1px solid #cbd5e0; border-radius: 20px; padding: 6px 15px; background: #fff; }
    .notepad-search-box input { border: none; outline: none; width: 100%; font-size: 14px; color: #4a5568; }
    .notepad-search-box svg { width: 18px; height: 18px; color: #64748b; }
    .notepad-body { flex: 1; overflow-y: auto; background: #fff; padding: 0; }
    
    .ielts-note-item { padding: 15px 20px; border-bottom: 1px solid #edf2f7; display: flex; flex-direction: column; gap: 8px; }
    .ielts-note-header { display: flex; justify-content: space-between; align-items: flex-start; }
    .ielts-note-title { color: #2598a3; font-weight: 700; font-size: 14px; text-decoration: underline; line-height: 1.4; word-break: break-word; flex: 1; padding-right: 10px; cursor: pointer; }
    .ielts-note-dots { color: #64748b; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; }
    .ielts-note-dots:hover { background: #f1f5f9; color: #1a202c; }
    .ielts-note-content { font-size: 14px; color: #2d3748; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

    .cbt-selection-tooltip, .cbt-remove-tooltip { position: fixed !important; background: #243545; border-radius: 6px; display: none; align-items: center; padding: 0 4px; z-index: 2147483647 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2); height: 42px; transform: translateX(-50%); font-family: 'Segoe UI', Arial, sans-serif; }
    .cbt-selection-tooltip::after, .cbt-remove-tooltip::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; }
    .cbt-tooltip-top::after { bottom: -12px; border-color: #243545 transparent transparent transparent; }
    .cbt-tooltip-bottom::after { top: -12px; border-color: transparent transparent #243545 transparent; }
    .cbt-selection-tooltip button, .cbt-remove-tooltip button { background: none; border: none; color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; padding: 0 14px; height: 100%; display: flex; align-items: center; transition: color 0.2s; white-space: nowrap; }
    .cbt-selection-tooltip button:hover, .cbt-remove-tooltip button:hover { color: #37b7c3; }
    .cbt-selection-tooltip .divider { width: 1px; height: 20px; background: rgba(255,255,255,0.3); }

    .cbt-inline-note-modal { position: fixed !important; background: #fff; border: 1px solid #cbd5e0; border-radius: 8px; display: none; flex-direction: column; padding: 15px; z-index: 2147483647 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15); width: 320px; transform: translateX(-50%); font-family: 'Segoe UI', Arial, sans-serif; }
    .cbt-inline-note-modal::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; }
    .cbt-modal-top::after { bottom: -16px; border-color: #fff transparent transparent transparent; filter: drop-shadow(0 2px 1px rgba(0,0,0,0.1)); }
    .cbt-modal-bottom::after { top: -16px; border-color: transparent transparent #fff transparent; filter: drop-shadow(0 -2px 1px rgba(0,0,0,0.1)); }
    .cbt-inline-note-modal textarea { width: 100%; height: 90px; border: 1px solid #cbd5e0; border-radius: 6px; padding: 12px; font-size: 14px; resize: none; outline: none; margin-bottom: 12px; box-sizing: border-box; color: #2d3748; }
    .cbt-inline-note-modal textarea:focus { border-color: var(--cbt-primary); }
    .inline-note-actions { display: flex; justify-content: center; gap: 10px; }
    .inline-note-actions button { padding: 8px 24px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: 0.2s; border: 1px solid #cbd5e0; background: #fff; color: #1a202c; }
    .inline-note-actions button:hover { border-color: #1a202c; background: #f8fafc; }

    .ielts-highlight-span { background-color: #ffff99; border-radius: 2px; padding: 2px 0; color: inherit; cursor: pointer; }
    .ielts-top-header, .ielts-bottom-nav, .floating-arrows { user-select: none; -webkit-user-select: none; }

    .note-options-wrap { position: relative; }
    .ielts-note-dots { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #243545; transition: 0.2s; }
    .ielts-note-dots:hover { background: #e2e8f0; }
    .note-dropdown-menu { position: absolute; right: 0; top: 100%; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 1px solid #cbd5e0; border-radius: 6px; width: 105px; display: none; flex-direction: column; z-index: 100; overflow: hidden; margin-top: 5px; }
    .note-dropdown-menu.flip-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 5px; box-shadow: 0 -4px 15px rgba(0,0,0,0.1); }
    .note-dropdown-menu.show { display: flex; }
    .note-dropdown-item { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #243545; transition: 0.2s; border-bottom: 1px solid #edf2f7; font-weight: 500; }
    .note-dropdown-item:last-child { border-bottom: none; }
    .note-dropdown-item:hover { background: #f8fafc; color: #1a202c; }
    .note-dropdown-item svg { width: 18px; height: 18px; color: #4a5568; }

    .inline-edit-area { width: 100%; height: 75px; border: 1px solid #cbd5e0; border-radius: 6px; padding: 10px; font-size: 14px; resize: none; outline: none; margin-top: 8px; color: #2d3748; box-sizing: border-box; }
    .inline-edit-area:focus { border-color: #2598a3; }
    .inline-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
    .inline-edit-actions button { padding: 6px 16px; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid #cbd5e0; background: #fff; transition: 0.2s; }
    .inline-edit-actions button:hover { background: #f1f5f9; }
    .inline-edit-actions button.btn-save-edit { background: #2598a3; color: #fff; border-color: #2598a3; }
    .inline-edit-actions button.btn-save-edit:hover { background: #1d7b84; }

    .note-delete-confirm { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; margin-top: 8px; font-size: 14px; color: #243545; }
    .note-delete-confirm span { font-style: italic; }
    .note-delete-actions { display: flex; gap: 15px; }
    .note-delete-actions button { background: none; border: none; font-size: 15px; font-weight: 600; cursor: pointer; padding: 0; color: #243545; transition: 0.2s; }
    .note-delete-actions button:hover { color: #37b7c3; }
    
    #btn-notepad { position: relative; }
    #btn-notepad.has-new-note::after { content: ''; position: absolute; top: 0px; right: 0px; width: 10px; height: 10px; background-color: #e53e3e; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); animation: notePulse 1.5s infinite; z-index: 10; pointer-events: none; }
    @keyframes notePulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); } 70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(229, 62, 62, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); } }

    /* -------------------------------------------------------
       6. MODALS & ALERT DIALOGS
       ------------------------------------------------------- */
    @keyframes smoothModalLoad {
        0% { opacity: 0; transform: scale(0.98); }
        100% { opacity: 1; transform: scale(1); }
    }

    #choose-mode-modal[style*="display: flex"] {
        animation: smoothModalLoad 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    }
    .mode-header-title { color: var(--cbt-primary); font-weight: 900; font-size: 36px; margin-bottom: 30px; text-align: center; margin-top: auto; }
    .mode-container { display: flex; flex-direction: row !important; gap: 30px; max-width: 900px; width: 95%; justify-content: center; align-items: stretch; margin-bottom: auto; }
    .mode-card { background: #fff; border-radius: 20px; padding: 40px 30px; flex: 1; width: 100%; box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,0.08); text-align: center; border: 2px solid transparent; transition: all 0.3s ease; position: relative; display: flex !important; flex-direction: column !important; }
    .mode-card:hover { border-color: var(--cbt-primary-light); transform: translateY(-5px); box-shadow: 0 15px 40px rgba(55, 183, 195, 0.15); }
    .mode-icon { font-size: 45px; margin-bottom: 20px; }
    .mode-title { font-size: 24px; color: var(--cbt-text-main); font-weight: 800; margin-bottom: 15px; min-height: 60px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    .mode-desc { font-size: 15px; color: #64748b; margin-bottom: 30px; line-height: 1.6; flex-grow: 1 !important; }
    .btn-start-mode { background: var(--cbt-primary); color: #fff; border: none; padding: 14px 40px; border-radius: 30px; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 4px 10px rgba(37, 152, 163, 0.3); width: 100%; max-width: 200px; margin: auto auto 0 auto !important; }

    .ielts-confirm-modal { display: none; position: fixed; z-index: 1000006; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
    .confirm-modal-content { background: #fff; padding: 40px 30px; border-radius: 16px; width: 90%; max-width: 500px; position: relative; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.15); animation: popIn 0.3s ease; max-height: 90vh; overflow-y: auto; box-sizing: border-box; }
    @keyframes popIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .close-confirm { position: absolute; right: 20px; top: 20px; cursor: pointer; color: #64748b; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .close-confirm svg { width: 24px; height: 24px; stroke-width: 2; } .close-confirm:hover { color: #e53e3e; transform: scale(1.2); }
    .confirm-icon { width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .confirm-icon svg { width: 60px; height: 60px; stroke-linecap: round; stroke-linejoin: round; }
    .confirm-title { font-size: 22px; color: var(--cbt-text-main); margin-bottom: 30px; font-weight: 800; }
    .confirm-btn-group { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
    .btn-cancel-submit { background: #fff; border: 1px solid var(--cbt-border); color: var(--cbt-text-main); padding: 12px 30px; border-radius: 30px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; letter-spacing: 0.5px; }
    .btn-real-submit { background: var(--cbt-primary); border: 1px solid var(--cbt-primary); color: #fff; padding: 12px 30px; border-radius: 30px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(37, 152, 163, 0.3); }

    #share-test-modal .confirm-title { border-bottom: 1px solid #e2e8f0 !important; padding-bottom: 20px !important; margin-bottom: 25px !important; }
    .share-url-container { background: var(--cbt-bg-gray) !important; border-radius: 25px !important; padding: 12px 20px !important; margin-bottom: 25px !important; border: 1px solid #e2e8f0 !important; }
    .share-url-input { width: 100% !important; border: none !important; background: transparent !important; font-size: 15px !important; font-style: italic !important; color: var(--cbt-text-muted) !important; outline: none !important; text-align: center !important; box-shadow: none !important; }
    .share-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; }
    .btn-copy-url { display: flex !important; align-items: center !important; gap: 8px !important; background: var(--cbt-bg-gray) !important; border: 1px solid var(--cbt-border) !important; padding: 10px 20px !important; border-radius: 25px !important; font-weight: 700 !important; color: #334155 !important; cursor: pointer !important; transition: 0.2s !important; font-size: 14px !important; } .btn-copy-url:hover { background: #e2e8f0 !important; }
    .social-icons { display: flex !important; gap: 10px !important; align-items: center !important; }
    .social-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; text-decoration: none !important; transition: transform 0.2s !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; } .social-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; }
    
    #report-mistake-form input, #report-mistake-form textarea { border: 1px solid var(--cbt-border) !important; background: #fff !important; box-shadow: none !important; outline: none !important; font-family: inherit !important; color: #2d3748 !important; box-sizing: border-box !important; width: 100% !important; }
    #report-mistake-form input:focus, #report-mistake-form textarea:focus { border-color: var(--cbt-primary) !important; box-shadow: 0 0 0 2px rgba(37, 152, 163, 0.2) !important; }

    div:has(> #timeNagText) { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background: #ffffff !important; padding: 40px 30px !important; border-radius: 16px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important; z-index: 1000000 !important; text-align: center !important; width: 90% !important; max-width: 450px !important; font-size: 16px !important; color: #2d3748 !important; line-height: 1.6 !important; border: 1px solid #edf2f7 !important; }
    div:has(> #timeNagText)::before { content: ''; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; z-index: -1 !important; }
    #timeNagText { display: block !important; margin-bottom: 25px !important; font-size: 18px !important; font-weight: 500 !important; }
    div:has(> #timeNagText) a { display: inline-block !important; background: #00b2a9 !important; color: #ffffff !important; padding: 14px 30px !important; border-radius: 30px !important; text-decoration: none !important; font-weight: bold !important; font-size: 16px !important; text-transform: uppercase !important; transition: all 0.3s ease !important; box-shadow: 0 4px 10px rgba(0, 178, 169, 0.3) !important; }

    /* -------------------------------------------------------
       7. RESULTS PAGE & ANIMATIONS
       ------------------------------------------------------- */
    @keyframes textBlinkSmooth { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
    @keyframes topbarDangerBg { 0%, 100% { background-color: #ffffff; } 50% { background-color: #fee2e2; } }
    #ielts-timer-destination .ielts-time-number.ielts-time-warning { color: #e53e3e !important; }
    .timer-icon svg.ielts-time-warning-icon { color: #e53e3e !important; stroke: #e53e3e !important; }
    .timer-text.ielts-time-warning-text { color: #e53e3e !important; }
    #ielts-timer-destination .ielts-time-blink-once { animation: textBlinkSmooth 0.8s ease-in-out 5; }
    #ielts-timer-destination .ielts-time-blink-infinite { animation: textBlinkSmooth 1.2s ease-in-out infinite; }
    body .ielts-top-header.topbar-danger-bg { animation: topbarDangerBg 1.2s ease-in-out infinite; }
    
    body.test-submitted .ielts-top-header, body.test-submitted .ielts-timer-wrap { animation: none !important; background-color: #ffffff !important; border-color: transparent !important; }
    body.test-submitted .user-answer, body.test-submitted .correct-gap-answer, body.test-submitted .wrong-gap-answer { font-weight: 800 !important; }
    body.test-submitted .watupro-revealed-gap { margin-left: 4px !important; white-space: nowrap !important; display: inline-block !important; vertical-align: middle !important; }
    
    .review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 10px; max-height: 80vh; overflow-y: auto; padding-right: 5px; max-width: 650px !important; margin: 0 auto !important; }  
    .review-item { background: var(--cbt-bg-gray); padding: 4px 12px; border-radius: 6px; border: 1px solid #e2e8f0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
    .review-item strong { color: var(--cbt-text-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
    .review-val { color: var(--cbt-primary); font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; flex: 1; padding-right: 10px; }
    .review-grid::-webkit-scrollbar { width: 4px; } .review-grid::-webkit-scrollbar-track { background: transparent; } .review-grid::-webkit-scrollbar-thumb { background: var(--cbt-border); border-radius: 4px; }

    body.test-submitted .ielts-tools .btn-review, body.test-submitted .ielts-tools #btn-notepad { display: none !important; }
    body.test-submitted .watupro-question .hidden-watupro-gaps { display: none !important; }
    body.test-submitted .hidden-watupro-gaps { background-color: var(--cbt-bg-gray) !important; border: 1px dashed var(--cbt-border) !important; padding: 15px !important; border-radius: 8px !important; line-height: 2 !important; }
    body.test-submitted .watupro-revealed-gap { color: #e53e3e !important; font-weight: 700 !important; font-style: normal !important; margin-left: 8px !important; margin-right: 15px !important; background: #fee2e2 !important; padding: 4px 10px !important; border-radius: 6px !important; display: inline-block !important; border: 1px solid #fecaca !important; }

    .mcq-result-correct { color: #059669 !important; font-weight: 700 !important; }
    .mcq-result-wrong { color: #e53e3e !important; font-weight: 600 !important; }
    .mcq-icon-correct { color: #059669; font-weight: bold; margin-left: 8px; font-size: 16px; vertical-align: middle; }
    .mcq-icon-wrong { color: #e53e3e; font-weight: bold; margin-left: 8px; font-size: 16px; vertical-align: middle; }
    .mcq-img-icon { width: 18px !important; height: 18px !important; margin-left: 10px !important; vertical-align: middle !important; border: none !important; box-shadow: none !important; background: transparent !important; display: inline-block !important; }
    .cbt-mcq-letter.mcq-bg-correct { background-color: #d1fae5 !important; color: #059669 !important; border-color: #059669 !important; }
    .cbt-mcq-letter.mcq-bg-wrong { background-color: #fee2e2 !important; color: #e53e3e !important; border-color: #e53e3e !important; }

    /* =======================================================
       RESULTS PAGE (TRỊ BỆNH CHIA CỘT KÉP CỦA WATUPRO)
       ======================================================= */
    .reading-results-master-wrap { 
        max-width: 100% !important; 
        width: 100% !important; 
        margin: 0 auto !important; 
        padding: 0 40px !important;
        box-sizing: border-box !important; 
    }
    .reading-results-master-wrap h3 { margin-left: 0 !important; padding-left: 0 !important; }
    
    .cbt-results-split { display: flex !important; flex-direction: row !important; width: 100% !important; height: 75vh !important; background: #ffffff !important; border: 1px solid #cbd5e0 !important; border-radius: 8px !important; margin-top: 15px !important; overflow: hidden !important; }
    .cbt-results-questions { width: 50% !important; flex: 0 0 50% !important; height: 100% !important; overflow-y: auto !important; padding: 30px !important; border-right: 1px solid #cbd5e0 !important; background: #ffffff !important; box-sizing: border-box !important; }
    .cbt-results-explanations { width: 50% !important; flex: 0 0 50% !important; height: 100% !important; overflow-y: auto !important; padding: 30px !important; background: #f8fafc !important; box-sizing: border-box !important; }
    
    #watupro-left-answers .cbt-reading-layout {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    #watupro-left-answers .cbt-reading-passage, 
    #watupro-left-answers .cbt-reading-questions {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        height: auto !important;
        padding: 0 !important;
        border: none !important;
        position: static !important;
        overflow: visible !important;
    }

    #watupro-left-answers .gb-container, #watupro-left-answers .wp-block-group, #watupro-left-answers .wp-block-columns, #watupro-left-answers .wp-block-column, #watupro-left-answers .et_pb_section, #watupro-left-answers .et_pb_row, #watupro-left-answers .et_pb_column { display: block !important; width: 100% !important; max-width: 100% !important; flex: none !important; margin: 0 !important; padding: 0 !important; float: none !important; }
    #watupro-left-answers .watupro-my-result, #watupro-left-answers .res-part-container { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; }
    
    .cbt-results-questions h2, .cbt-results-questions h3, .cbt-results-questions h4, .cbt-results-questions p, .cbt-results-questions .watupro-question, .cbt-results-questions .watupro_question { margin-left: 0 !important; padding-left: 0 !important; }
    .cbt-results-questions::-webkit-scrollbar, .cbt-results-explanations::-webkit-scrollbar { width: 6px; }
    .cbt-results-questions::-webkit-scrollbar-track, .cbt-results-explanations::-webkit-scrollbar-track { background: transparent; }
    .cbt-results-questions::-webkit-scrollbar-thumb, .cbt-results-explanations::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; }
    
    .ielts-results-layout { display: flex !important; flex-direction: column !important; margin: 30px 0 0 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
    .ielts-results-questions { width: 100% !important; max-width: 100% !important; margin: 0 !important; background: var(--cbt-bg-gray) !important; padding: 25px !important; border-radius: 12px !important; border: 1px solid #e2e8f0 !important; box-sizing: border-box !important; }
    .ielts-results-script { display: none !important; }
    
    /* -------------------------------------------------------
       THANH ĐIỀU HƯỚNG PASSAGE
       ------------------------------------------------------- */
    .results-part-nav { 
        display: flex; 
        gap: 10px; 
        margin-bottom: 25px; 
        flex-wrap: wrap; 
        width: 100%;
    }
    .res-part-btn { 
    padding: 5px 24px !important; 
    border: 1px solid #00b2a9 !important; background: #fff !important; color: #00b2a9 !important; border-radius: 20px !important; cursor: pointer !important; font-weight: 700 !important; font-size: 15px !important; transition: all 0.2s !important; outline: none !important; 
    }
    .res-part-btn:hover { background: #e6f7f6 !important; }
    .res-part-btn.active { background: #00b2a9 !important; color: #fff !important; border-color: #00b2a9 !important; }

    /* -------------------------------------------------------
       8. SIMULATION MODE & BODY SCROLL LOCK
       ------------------------------------------------------- */
    body.simulation-mode .ielts-menu-container, body.simulation-mode #btn-review { display: none !important; }
    body.simulation-mode.test-submitted .ielts-menu-container { display: flex !important; margin: 0 !important; }   
    
    @media screen and (min-width: 769px) {
        html.ielts-cbt-html:not(.test-submitted), body.ielts-cbt-active:not(.test-submitted) { overflow: hidden !important; height: 100vh !important; box-sizing: border-box !important; }
        .ielts-tools { gap: 25px !important; }
        .icon-btn { padding-left: 0 !important; padding-right: 0 !important; }
        #btn-fullscreen, .ielts-menu-container, #btn-review, #btn-submit-top, #btn-retake-top, #btn-menu { margin: 0 !important; }
        #btn-submit-top, #btn-retake-top { order: 99 !important; }
        body.simulation-mode .ielts-top-header { display: flex; align-items: center; padding: 0 40px; height: 56px; background: #fff; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 2147483640 !important;overflow: visible !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        body.simulation-mode .ielts-top-bar { display: contents; }
        body.simulation-mode .ielts-logo { order: 1; margin: 0 !important; }
        body.simulation-mode .ielts-timer-wrap { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 10; }
        body.simulation-mode .ielts-tools { order: 5; gap: 25px !important; margin-left: auto !important; }
        body.notepad-open { padding-right: 420px !important; }
        .floating-arrows { transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
        body.notepad-open .floating-arrows { right: 440px !important; }
        .mobile-flip-btn, .mobile-questions-btn { display: none !important; }
      /* BẬT CUỘN NGANG CHO THANH BOTTOM NAV KHI MÀN HÌNH BỊ CO HẸP */
    .nav-container {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        /* Ẩn thanh cuộn (scrollbar) để giao diện gọn gàng giống app */
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-behavior: smooth;
        cursor: grab; /* Hiển thị biểu tượng bàn tay */
    }
    
    .nav-container:active {
        cursor: grabbing; /* Đổi biểu tượng khi đang giữ chuột */
    }
    
    .nav-container::-webkit-scrollbar {
        display: none;
    }

    /* CHỐNG ÉP KÍCH THƯỚC GÂY LẸM SỐ (FIX LỖI NHƯ ẢNH image_0732c2.png) */
    .part-group {
        flex-shrink: 0 !important; /* Cấm trình duyệt ép co lại */
        min-width: 180px !important; /* Đảm bảo đủ chỗ hiện chữ "Part X" */
    }
    
    .part-group.active {
        flex-shrink: 0 !important;
        min-width: max-content !important; /* Ép độ rộng phải ôm trọn toàn bộ dải số bên trong */
        padding-right: 25px !important; /* Thêm khoảng trống đuôi để số cuối cùng không bị sát mép */
    }
  }

    /* -------------------------------------------------------
       9. RESPONSIVE MOBILE (GOM NHÓM TẤT CẢ <= 768px)
       ------------------------------------------------------- */
    @media screen and (max-width: 768px) {
        .btn-review, #btn-fullscreen, .desktop-only { display: none !important; }
        #btn-notepad, #ielts-notepad-sidebar, .cbt-selection-tooltip, .cbt-inline-note-modal { display: none !important; }
        
        .ielts-top-bar { flex-wrap: nowrap !important; height: auto !important; padding: 4px 15px !important; justify-content: space-between !important; align-items: center !important; min-height: 56px !important; }
        #btn-menu svg { width: 26px !important; height: 26px !important; }
        .ielts-logo { order: 1; display: flex; align-items: center; height: auto !important; } 
        
        .ielts-timer-wrap { order: 2 !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; display: grid !important; grid-template-columns: auto auto !important; grid-template-rows: auto auto !important; column-gap: 8px !important; row-gap: 0px !important; align-items: center !important; justify-content: center !important; }
        .timer-icon { grid-column: 1 !important; grid-row: 1 / span 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--cbt-primary) !important; margin: 0 !important; } .timer-icon svg { width: 34px !important; height: 34px !important; stroke-width: 2 !important; }
        #ielts-timer-destination { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } #ielts-timer-destination, #ielts-timer-destination * { font-size: 20px !important; color: var(--cbt-primary) !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; margin: 0 !important; padding: 0 !important; letter-spacing: 0px !important; }
        .timer-text { grid-column: 2 !important; grid-row: 2 !important; text-align: center !important; display: block !important; font-size: 10px !important; color: var(--cbt-text-muted) !important; line-height: 1 !important; font-weight: 200 !important; margin: 0 !important; margin-top: 0px !important; }
        
        .ielts-tools { order: 3 !important; gap: 12px !important; display: flex; align-items: center; }
        .ielts-menu-container { display: flex; align-items: center; height: 100%; }
        #btn-menu { padding: 0; margin: 0; color: #2d3748; display: flex; align-items: center; justify-content: center; } #btn-menu svg { display: block; }            

        body.ielts-cbt-active .entry-content { width: 100% !important; max-width: 100% !important; padding-top: 15px !important; padding-left: 15px !important; padding-right: 15px !important; margin: 0 !important; }
        body.ielts-cbt-active .entry-content > .gb-container,
        body.ielts-cbt-active .entry-content > .wp-block-group,
        body.ielts-cbt-active .ielts-cbt-root { width: 100% !important; padding: 0 !important; }
        .watupro-question { padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
        
        .ielts-bottom-nav { padding: 10px !important; overflow: visible !important; } 
        .nav-container { padding: 0; }
        .part-group:not(.active) { display: none !important; }
        
        /* SỬA LỖI TRÀN LỀ VÀ BỊ KÉO NGƯỢC LÊN TRÊN MOBILE */
        .cbt-reading-passage, .cbt-reading-questions { 
            position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
            width: 100% !important; height: 100% !important; 
            padding-left: 0 !important; padding-right: 0 !important;
            padding-top: 15px !important; 
            padding-bottom: 135px !important;
            border: none !important; transition: opacity 0.3s ease, transform 0.3s ease !important;
            background: #fff !important; z-index: 1;
            overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior-y: none !important; -webkit-overflow-scrolling: touch;
            box-sizing: border-box !important;
            flex: none !important; /* Vô hiệu hóa tỷ lệ 50% của Desktop */
        }
        
        .cbt-reading-passage {
            transform: translateX(0) !important;
        }

        .cbt-reading-questions { transform: translateX(100%) !important; opacity: 0 !important; pointer-events: none !important; background: #f8fafc !important; }
        .cbt-reading-layout.show-questions .cbt-reading-passage { transform: translateX(-100%) !important; opacity: 0 !important; pointer-events: none !important; }
        .cbt-reading-layout.show-questions .cbt-reading-questions { transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important; z-index: 2 !important; }

        .floating-arrows { display: flex !important; bottom: 75px !important; right: 15px !important; z-index: 99997 !important; }
        /* Nút "Read Passage" (Sẽ hiện khi ĐANG mở câu hỏi) */
.mobile-flip-btn { display: none !important; position: fixed; bottom: 75px !important; left: 15px !important; transform: none !important; background: var(--cbt-primary) !important; color: #fff !important; border: none !important; padding: 12px 20px !important; border-radius: 30px !important; font-weight: 700 !important; font-size: 14px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; z-index: 99996 !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; }
body.questions-active .mobile-flip-btn { display: flex !important; }

/* Nút "View Questions" (Sẽ hiện khi ĐANG mở bài đọc) */
.mobile-questions-btn { display: flex !important; position: fixed; bottom: 75px !important; left: 15px !important; transform: none !important; background: var(--cbt-primary) !important; color: #fff !important; border: none !important; padding: 12px 20px !important; border-radius: 30px !important; font-weight: 700 !important; font-size: 14px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; z-index: 99996 !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; }
body.questions-active .mobile-questions-btn { display: none !important; }

        /* Trả lại khung viền, đổi màu xanh thành màu xám nhạt (như thẻ bình thường) */
        .part-group.active { 
            position: relative; 
            width: 100%; 
            display: flex; 
            border: 1px solid var(--cbt-primary) !important; /* Viền xám nhạt thay cho viền xanh */
            border-radius: 8px !important;
            background: #ffffff !important;
            justify-content: flex-start !important; 
            padding: 8px 10px !important; /* Trả lại khoảng cách để vòng tròn không bị chạm sát mép viền */
            height: auto !important;
        } 
        
        /* Vẫn giữ lệnh ẩn đoạn chữ "Part X" bị nhảy lung tung trên mobile */
        .part-group.active .part-title-area { 
            display: none !important; 
        }
        
        /* Căn chỉnh lại dải vòng tròn nằm gọn gàng giữa khung viền */
        .part-circles { 
            position: relative !important; z-index: 10 !important; width: 100% !important; 
            justify-content: flex-start !important; gap: 8px !important; overflow-x: auto !important; 
            -webkit-overflow-scrolling: touch !important; 
            padding: 2px 0 !important; 
            margin-left: 0 !important; 
            box-sizing: border-box !important; scroll-behavior: smooth !important; 
        }
        .q-circle { flex: 0 0 30px !important; width: 30px !important; height: 30px !important; font-size: 13px !important; }

        .confirm-modal-content { padding: 25px 20px !important; }
        #report-mistake-form textarea { height: 100px !important; margin-bottom: 10px !important; }
        #report-mistake-form > div:nth-of-type(1), #report-mistake-form div[style*="flex"]:first-of-type { flex-direction: column !important; gap: 10px !important; margin-bottom: 15px !important; }
        #report-mistake-form input { width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
        #report-mistake-form div:last-child, #report-mistake-form div[style*="flex"]:last-of-type, #report-mistake-modal .confirm-btn-group { display: block !important; width: 100% !important; overflow: hidden !important; margin-top: 10px !important; padding: 0 !important; }
        #report-mistake-form button, #report-mistake-modal .btn-cancel-submit, #report-mistake-modal .btn-real-submit { width: 48% !important; padding: 12px 0 !important; margin: 0 !important; font-size: 15px !important; box-sizing: border-box !important; }
        #report-mistake-form button:first-of-type, #report-mistake-modal .btn-cancel-submit { float: left !important; }
        #report-mistake-form button:last-of-type, #report-mistake-modal .btn-real-submit { float: right !important; }
        
        /* =======================================================
           ĐỒNG BỘ GIAO DIỆN THANH CHUYỂN PASSAGE (CHỈ MOBILE)
           ======================================================= */
        
        /* 1. Trạng thái bình thường (relative): Dùng margin âm để ép tràn viền */
        .results-part-nav[style*="position: relative"],
        .cbt-results-questions > .results-part-nav:not([style*="position: fixed"]) {
            margin-left: -15px !important;
            margin-right: -15px !important;
            width: calc(100% + 30px) !important;
            
            /* Đồng bộ nền, viền và padding giống y hệt trạng thái sticky */
            padding: 10px 15px !important;
            background-color: #f8fafc !important;
            border-top: 1px solid #edf2f7 !important;
            border-bottom: 1px solid #e2e8f0 !important;
        }

        /* 2. Trạng thái dính (fixed): Chặn JS can thiệp làm sai padding trên mobile */
        .results-part-nav[style*="position: fixed"] {
            padding-left: 15px !important; 
            padding-right: 15px !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        /* 3. Tăng kích thước nút bấm để mập mạp và bo tròn đẹp hơn cho cả 2 trạng thái */
        .res-part-btn { 
            flex: 1 !important; 
            padding: 10px 0 !important;  /* Tăng chiều cao nút */
            font-size: 14px !important;  /* Chữ to rõ hơn */
            border-radius: 25px !important; 
        }
        
        #choose-mode-modal .mode-container { flex-direction: column !important; align-items: center !important; gap: 20px !important; }
        #choose-mode-modal .mode-card { width: 100% !important; max-width: 400px !important; padding: 30px 20px !important; }
  }
    
    @media screen and (max-width: 400px) { 
        #choose-mode-modal .mode-title { height: 90px !important; }
        .review-grid { grid-template-columns: repeat(2, 1fr) !important; padding-right: 0 !important; }
    }
    
  /* =======================================================
   ẨN BÀI ĐỌC VÀ HƯỚNG DẪN Ở CỘT TRÁI TRANG KẾT QUẢ
   ======================================================= */
   #watupro-left-answers .hide-on-results-page { display: none !important; }

/* =======================================================
   TỐI ƯU TRANG KẾT QUẢ CHO MOBILE (LỀ & TOGGLE CỘT) - ĐÃ HỢP NHẤT
   ======================================================= */
@media screen and (max-width: 768px) {
  /* ẨN 2 NÚT HOÁN ĐỔI KHI MODAL CHỌN CHẾ ĐỘ ĐANG MỞ */
    body.mode-selecting .mobile-flip-btn,
    body.mode-selecting .mobile-questions-btn {
        display: none !important;
    }
    body.test-submitted #mobile-flip-btn,
body.test-submitted #mobile-questions-btn,
body.test-submitted .floating-arrows,
body.results-applied #mobile-flip-btn,
body.results-applied #mobile-questions-btn,
body.results-applied .floating-arrows {
    display: none !important;
}
    
    body.test-submitted .reading-results-master-wrap,
    body.results-applied .reading-results-master-wrap {
        padding: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    body.test-submitted .cbt-results-split,
    body.results-applied .cbt-results-split {
        flex-direction: column !important;
        height: auto !important;
        border: none !important;
        display: flex !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    body.test-submitted .cbt-results-questions, 
    body.test-submitted .cbt-results-explanations,
    body.results-applied .cbt-results-questions, 
    body.results-applied .cbt-results-explanations {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        border: 1px solid #cbd5e0 !important;
        border-radius: 8px !important;
        
        /* 1. ĐỔI THÀNH dvh: Tự động co giãn khi thanh đen trình duyệt ẩn/hiện */
        /* Trừ đi khoảng 135px cho thanh Top Header và thanh Passage bên trên */
        height: calc(100dvh - 170px) !important; 
        
        /* 2. Đệm lề dưới 75px để khi cuộn tới cuối bài, chữ không bị kẹt dưới nút bấm */
        padding: 20px 15px 75px 15px !important;
        margin: 0 !important;
    }

    .cbt-results-split > br,
    .cbt-results-split > p {
        display: none !important;
    }

    #watupro-left-answers h3:first-of-type,
    #watupro-left-answers h2:first-of-type,
    .cbt-results-explanations h3:first-of-type,
    .cbt-results-explanations h2:first-of-type,
    .cbt-results-explanations .watupro-main-feedback h3:first-of-type {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    #watupro-left-answers > br, 
    #watupro-left-answers > p:empty,
    .hide-on-results-page + br,
    .hide-on-results-page + p:empty {
        display: none !important;
    }

    body.test-submitted:not(.show-results-right-col) .cbt-results-explanations,
    body.results-applied:not(.show-results-right-col) .cbt-results-explanations {
        display: none !important;
    }
    body.test-submitted:not(.show-results-right-col) .cbt-results-questions,
    body.results-applied:not(.show-results-right-col) .cbt-results-questions {
        display: block !important;
    }
    body.test-submitted.show-results-right-col .cbt-results-questions,
    body.results-applied.show-results-right-col .cbt-results-questions {
        display: none !important;
    }
    body.test-submitted.show-results-right-col .cbt-results-explanations,
    body.results-applied.show-results-right-col .cbt-results-explanations {
        display: block !important;
    }

    /* 3. FIX CỨNG NÚT BẤM: Ép cách đáy màn hình (hoặc thanh đen trình duyệt) đúng 3px */
    #mobile-results-toggle-btn {
        position: relative !important;  /* Đổi từ relative thành fixed */
        inset-block: 3px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: inline-flex !important;
        flex: 0 0 auto !important; 
        width: 90% !important; 
        margin: 0 !important;        /* Bỏ margin cũ để không bị lệch */
        border-radius: 12px !important; 
        justify-content: center !important; 
        
        background: var(--cbt-primary, #2598a3) !important;
        color: #fff !important;
        border: none !important;
        padding: 14px 22px !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important; 
        z-index: 99999 !important;   /* Z-index lớn để luôn nổi lên trên cùng */
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media screen and (min-width: 769px) {
    #mobile-results-toggle-btn { display: none !important; }
}

  /* =======================================================
   PATCH: KHÓA CHẶT TRỤC CUỘN & VỊ TRÍ THẺ ẨN
   ======================================================= */
@media screen and (min-width: 769px) {
    html.ielts-cbt-html:not(.test-submitted), 
    body.ielts-cbt-active:not(.test-submitted) {
        overflow: hidden !important;
        height: 100vh !important;
    }

    body:not(.test-submitted) .hidden-watupro-gaps,
    body:not(.test-submitted) .watupro-buttons,
    body:not(.test-submitted) .watupro-choices {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -100 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.test-submitted) .ielts-reading-master-container {
        position: fixed !important;
        top: var(--ielts-top-space, 56px) !important;
        bottom: var(--ielts-bottom-space, 66px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: auto !important;
        z-index: 999999 !important;
        background: #f8fafc !important;
    }
}
  /* =======================================================
   KÉO SÁT KHUNG NỘI DUNG LÊN TOP BAR (CHỈ MOBILE & LÚC ĐANG LÀM BÀI)
   ======================================================= */
@media screen and (max-width: 768px) {
    /* Khử khoảng trống của container bọc ngoài */
    body.ielts-cbt-active:not(.test-submitted) .entry-content {
        padding-top: 0 !important;
    }
    
    /* Khử khoảng trống của bản thân khung bài đọc và câu hỏi */
    body:not(.test-submitted) .cbt-reading-passage, 
    body:not(.test-submitted) .cbt-reading-questions {
        padding-top: 15px !important; /* Tôi để 10px để phần chữ không bị cắt sát rạt vào viền bóng đổ. Bạn có thể đổi thành 0px nếu muốn sát hoàn toàn. */
    }
}
  /* =======================================================
   KHÓA KHUNG CUỘN BÀI ĐỌC TRÊN MOBILE (CÁCH LY TUYỆT ĐỐI)
   ======================================================= */
@media screen and (max-width: 768px) {
    /* 1. Chỉ khóa cứng trình duyệt khi thẻ body KHÔNG có class nộp bài. 
       Dùng :has() để ép thẻ html cũng tuân thủ theo trạng thái của thẻ body */
    html.ielts-cbt-html:not(.test-submitted), 
    body.ielts-cbt-active:not(.test-submitted) {
        overflow: hidden !important;
        height: 100vh !important;
        overscroll-behavior-y: none !important; 
    }

    /* 2. Chỉ đẩy padding 175px và khóa cuộn khi thẻ body đang ở chế độ làm bài */
    body:not(.test-submitted) .cbt-reading-passage, 
    body:not(.test-submitted) .cbt-reading-questions {
        height: 100% !important;
        bottom: 0 !important; 
        padding-bottom: 175px !important; 
        overscroll-behavior-y: contain !important; 
    }
}
/* =======================================================
       XỬ LÝ BẢNG TRÀN KHUNG (KẾT HỢP BỌC DIV TỪ HTML)
       ======================================================= */
       
    /* 1. KHÓA CHẶT CỘT & CÂU HỎI (BẢO VỆ CHỮ KHÔNG BỊ TRƯỢT) */
    .cbt-reading-passage, 
    .cbt-reading-questions,
    .watupro-question,
    .watupro_question {
        min-width: 0 !important; 
        max-width: 100% !important; 
        overflow-x: hidden !important; 
    }

    /* 2. VỎ BỌC BẢNG (VÙNG ĐƯỢC PHÉP TRƯỢT NGANG) */
    .cbt-table-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important; 
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 20px !important;
        padding-bottom: 8px !important; /* Dành chỗ cho thanh cuộn hiển thị */
    }
    
    /* 🔥 HIỂN THỊ LẠI THANH CUỘN CHO DESKTOP VÀ TRANG TRÍ THẬT ĐẸP 🔥 */
    .cbt-table-scroll::-webkit-scrollbar { 
        height: 8px !important; /* Độ dày của thanh trượt */
        display: block !important; 
    }
    .cbt-table-scroll::-webkit-scrollbar-track {
        background: #f1f5f9 !important; /* Màu nền rãnh trượt */
        border-radius: 4px !important;
    }
    .cbt-table-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e0 !important; /* Màu cục trượt */
        border-radius: 4px !important;
    }
    .cbt-table-scroll::-webkit-scrollbar-thumb:hover {
        background: #2598a3 !important; /* Đổi sang màu xanh IELTS khi di chuột vào */
    }

    /* 3. BẢNG BÊN TRONG (GIỮ NGUYÊN FORM) */
    .cbt-table-scroll table {
        display: table !important;
        width: 100% !important;
        min-width: 650px !important; /* Ép bảng to 650px để gọi thanh trượt xuất hiện */
        table-layout: auto !important;
        border-collapse: collapse !important;
        margin: 0 !important;
    }

    /* 4. CHỐNG RỚT CHỮ TRONG Ô */
    .cbt-table-scroll td, 
    .cbt-table-scroll th {
        padding: 10px 15px !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    
    .cbt-table-scroll td:has(input[type="text"]) {
        min-width: 120px !important;
    }
	/* =======================================================
       HIỆU ỨNG CON TRỎ CHUỘT KHI KÉO BẢNG (DRAG TO SCROLL)
       ======================================================= */
    .cbt-table-scroll {
        cursor: grab; /* Mặc định hiện bàn tay xòe */
    }
    .cbt-table-scroll.is-dragging {
        cursor: grabbing !important; /* Khi bấm giữ chuột hiện bàn tay nắm */
        user-select: none !important; /* Cấm bôi đen chữ khi đang kéo bảng */
        -webkit-user-select: none !important;
    }
    .cbt-table-scroll input[type="text"],
    .cbt-table-scroll select {
        cursor: text; /* Trỏ chuột vào ô điền chữ thì trả lại con trỏ văn bản */
    }

/* =========================================================================
   PATCH TƯƠNG THÍCH — PHÁT HIỆN KHI KIỂM THỬ TỰ ĐỘNG
   -------------------------------------------------------------------------
   Khối "PATCH: KHÓA CHẶT TRỤC CUỘN" đặt .ielts-reading-master-container ở
   z-index 999999 trên desktop. Trong khi đó .notepad-sidebar và
   .floating-arrows chỉ có z-index 99997, nên bị khung bài đọc che mất:
   mở Notepad ra không thấy gì, hai mũi tên chuyển passage bấm không ăn.

   Đây là lỗi có sẵn từ bản Divi (các giá trị z-index giữ nguyên không đổi),
   không phải do việc chuyển theme. Hai dòng dưới đây đưa chúng lên trên
   khung bài đọc nhưng vẫn nằm dưới các modal (1000006) và thanh header.
   ========================================================================= */
@media screen and (min-width: 769px) {
    .notepad-sidebar,
    .floating-arrows {
        z-index: 1000005 !important;
    }
}

/* -------------------------------------------------------------------------
   PATCH 2 — TRANG KẾT QUẢ: ẨN ĐÚNG PASSAGE KHÔNG ĐƯỢC CHỌN
   -------------------------------------------------------------------------
   Quy tắc "h3 { display: block !important }" và "h4 { display: flex !important }"
   (kế thừa nguyên vẹn từ bản Divi) đè lên inline style display:none mà
   JavaScript đặt vào, nên tiêu đề "Reading Passage 1/3" vẫn hiện khi đang
   xem Passage 2. Hai selector dưới đây có độ ưu tiên cao hơn nên trả lại
   đúng hành vi. Cũng là lỗi có sẵn từ bản Divi.
   ------------------------------------------------------------------------- */
#watupro-left-answers > [data-results-part][style*="display: none"],
#watupro-left-answers > [data-results-part][style*="display:none"],
#dynamic-script-container > [data-script-part][style*="display: none"],
#dynamic-script-container > [data-script-part][style*="display:none"] {
    display: none !important;
}