/* --- CONTAINER CHUNG CHO UI BÀI TẬP --- */
.thx-ec-practice-ui-container {
    background: #fff;
    border: 2px solid #2271b1;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    /* Đảm bảo nằm trên lớp mờ */
}

/* --- LOGIC ẨN TEXT REGION GỐC --- */
/* Đảm bảo Text Region gốc luôn bị ẩn trong chế độ luyện tập để không bị đè lên bản clone, 
   ngay cả khi CSS của chế độ Annotate cố gắng hiển thị nó (specificity hack). */
body.thx-ec-mode-practice .thx-ec-text-block.thx-ec-hidden-by-core,
body.thx-ec-mode-annotate .thx-ec-text-block.thx-ec-hidden-by-core[data-thx-ec-visibility-locked="true"],
body.thx-ec-mode-read .thx-ec-text-block.thx-ec-hidden-by-core[data-thx-ec-visibility-locked="true"],
.thx-ec-text-block.thx-ec-hidden-by-core[data-thx-ec-visibility-locked="true"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* --- LOGIC TRẠNG THÁI ACTIVE TRUNG GIAN (DÙNG CHUNG) --- */
/* Khi active, Text Region vẫn giữ layout nhưng ẩn chữ */
.thx-ec-text-block.thx-ec-practice-mode-active {
    position: relative;
    user-select: none;
    /* Chống copy */
}

/* Làm mờ nội dung bên trong */
.thx-ec-text-block.thx-ec-practice-mode-active .seg,
.thx-ec-text-block.thx-ec-practice-mode-active p,
.thx-ec-text-block.thx-ec-practice-mode-active span {
    color: transparent !important;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    /* Hiệu ứng bóng ma */
    pointer-events: none;
}

/* (Tuỳ chọn) Style nút bấm chung */
.thx-ec-practice-controls {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

/* --- PLAY SENTENCE FEATURE --- */
.thx-ec-text-clone .seg {
    position: relative;
    border-radius: 4px;
    transition: background-color 0.15s ease-in-out;
}

/* Chống chọn text sau khi hoàn thành bài tập */
.thx-ec-text-clone.is-finished {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Biệt trừ: Gỡ bỏ toàn bộ highlight (is-current, active) hoặc outline bị sót lại trên Segment (câu) đầu tiên sau khi kết thúc do Audio reset về 0s */
.thx-ec-text-clone.is-finished .seg,
.thx-ec-text-clone.is-finished .seg.is-current,
.thx-ec-text-clone.is-finished .seg:focus {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Highlight cố định cho câu đang làm bài (is-current) */
.thx-ec-text-clone .seg.is-current {
    background-color: #f0f9ff !important;
}

/* Tăng cường nhẹ màu highlight khi hover */
.thx-ec-text-clone .seg.is-current:hover {
    background-color: #e6f7ff !important;
}

/* Cảnh báo highlight màu cam cho câu bị cấm sửa (is-blocked) */
.thx-ec-text-clone .seg.is-blocked {
    background-color: #fff7ed !important;
    /* Orange-50 */
}

.thx-ec-text-clone .seg.is-blocked:hover {
    background-color: #ffedd5 !important;
    /* Orange-100 */
}

/* Nút bấm nghe âm thanh */
.thx-ec-practice-play-icon {
    display: none;
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #2271b1;
    font-size: 18px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: all 0.1s;
}

/* Chỉ hiện nút bấm trên câu đang được chọn làm bài */
.thx-ec-text-clone .seg.is-current .thx-ec-practice-play-icon {
    display: inline-block;
}

/* Cầu nối vô hình giúp giữ hover khi di chuột từ chữ sang Loa (không cần thiết nữa nếu loa luôn hiện, nhưng cứ giữ) */
.thx-ec-practice-play-icon::after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -15px;
    /* Cầu nối vươn qua bên phải để đè lên text */
    background: transparent;
}

.thx-ec-practice-play-icon:hover {
    background-color: #2271b1;
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

/* --- IMMERSIVE FOCUS MODE (Ẩn các thành phần phân tâm khi làm bài) --- */
body.thx-focus-active .thx-ec-sidebar-toggle-btn,
body.thx-focus-active .thx-ec-page-sidebar,
body.thx-focus-active .thx-ec-learning-helper-panel,
body.thx-focus-active #thx-ec-learning-helper-panel,
body.thx-focus-active .thx-ec-pagination-controls,
body.thx-focus-active .thx-ec-slider-wrapper,
body.thx-focus-active .thx-ec-rescued-pagination,
body.thx-focus-active .lelib-global-interaction-panel,
body.thx-focus-active .tv-doc-meta,
body.thx-focus-active .tv-single-layout,
body.thx-focus-active .thx-ec-doc-pagination-tabs,
body.thx-focus-active .tax-template,
body.thx-focus-active #tax-template,
body.thx-focus-active .thx-ec-main-panel,
body.thx-focus-active #thx-ec-main-panel,
body.thx-focus-active #thx-ec-comments-area,
body.thx-focus-active #thx-ec-main {
    display: none !important;
}

/* --- BÀI TẬP BOTTOM PANEL RESPONSIVE (Dành cho Cloze, Dictation, Reorder, Speech) --- */
@media (max-width: 768px) {
    .thx-ec-cloze-bp-controls,
    .thx-ec-dictation-bp-controls,
    .thx-ec-reorder-bp-controls,
    .thx-ec-speech-bp-controls {
        flex-wrap: wrap;
        gap: 15px !important;
        justify-content: center !important;
        padding: 5px 0;
    }
    .thx-ec-cloze-bp-controls .thx-ec-bp-group-left,
    .thx-ec-dictation-bp-controls .thx-ec-bp-group-left,
    .thx-ec-reorder-bp-controls .thx-ec-bp-group-left,
    .thx-ec-speech-bp-controls .thx-ec-bp-group-left {
        min-width: unset !important;
        width: 100%;
        justify-content: center !important;
        gap: 10px !important;
    }
    .thx-ec-cloze-bp-controls .thx-ec-bp-group-center,
    .thx-ec-dictation-bp-controls .thx-ec-bp-group-center,
    .thx-ec-reorder-bp-controls .thx-ec-bp-group-center,
    .thx-ec-speech-bp-controls .thx-ec-bp-group-center {
        width: 100%;
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 10px !important;
    }
    .thx-ec-cloze-bp-controls .thx-ec-bp-group-right,
    .thx-ec-dictation-bp-controls .thx-ec-bp-group-right,
    .thx-ec-reorder-bp-controls .thx-ec-bp-group-right,
    .thx-ec-speech-bp-controls .thx-ec-bp-group-right {
        min-width: unset !important;
        width: 100%;
        justify-content: center !important;
        order: 3; /* Xếp bộ lọc độ khó xuống cuối cùng */
    }
    
    /* Gọn các nút trên mobile để khỏi bị tràn */
    .thx-ec-bp-btn {
        padding: 0 10px !important;
        font-size: 14px;
        flex-shrink: 0;
    }
}

/* =========================================
   NHÃN ĐÁP ÁN DÙNG CHUNG (CHO CÁC LỖI TỪ/Ô TRỐNG)
   ========================================= */
.thx-ec-hint-always {
    position: absolute;
    bottom: 70%;
    left: 50%;
    transform: translateX(-50%);
    color: #128a13;
    font-weight: 700;
    font-size: 0.8em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    margin-bottom: 0;
    letter-spacing: normal;
    z-index: 100;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.8), -1px -1px 0 rgba(255,255,255,0.8), 1px -1px 0 rgba(255,255,255,0.8), -1px 1px 0 rgba(255,255,255,0.8);
}

/* =========================================
   MIC & AUDIO TESTER MODAL
   ========================================= */
.thx-ec-mic-test-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s;
}
.thx-ec-mic-test-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.2s;
}
.thx-ec-mic-test-title {
    font-size: 20px;
    font-weight: bold;
    color: #1e293b;
    margin: 0 0 15px 0;
}
.thx-ec-mic-test-vu-meter {
    height: 15px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.thx-ec-mic-test-vu-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10b981 30%, #f59e0b 70%, #ef4444 100%);
    transition: width 0.05s linear;
}
.thx-ec-mic-test-log {
    font-size: 15px;
    color: #475569;
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
    margin: 15px 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
}
.thx-ec-mic-test-actions-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}
.thx-ec-mic-test-btn {
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.thx-ec-mic-test-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.thx-ec-mic-btn-primary { background: #2271b1; color: #fff; }
.thx-ec-mic-btn-primary:not(:disabled):hover { background: #135e96; }
.thx-ec-mic-btn-record { background: #d63638; color: #fff; }
.thx-ec-mic-btn-record:not(:disabled):hover { background: #b32d2e; }
.thx-ec-mic-btn-record.is-recording {
    animation: flash_record 1.5s infinite;
}
@keyframes flash_record {
    0% { background: #d63638; }
    50% { background: #f56e6e; box-shadow: 0 0 10px #f56e6e; }
    100% { background: #d63638; }
}
.thx-ec-mic-btn-close { background: #f1f5f9; color: #475569; }
.thx-ec-mic-btn-close:hover { background: #e2e8f0; }