/* Giao diện sát hạch desktop — mô phỏng phần mềm Bộ GTVT / EcoTek
   v3.8.0 — 2026-09-16
   File này là LAST-WORD cho thi.html trên máy tính (≥992px).
   Chỉ còn 2 media query. Không chồng skin. Không giả lập điện thoại.

   Nguyên nhân bản cũ "nền xanh che hết":
   - 3 khối @media (min-width:992px) viết đè nhau
   - #examScreen bị gán height:auto + min-height:0 → cột trắng co về 0
     chỉ còn nền navy của page / "footer xanh"
   - landscape 600px bật panel Bộ trên điện thoại mà không có layout 2 cột
   - hlx-last + responsive-inject load SAU file này
*/

/* Mobile / tablet dọc: giữ app 4 khối, ẩn skin phần mềm Bộ */
@media (max-width: 991px) {
    .exam-right-desktop,
    .exam-bottom-panel,
    .exam-progress-desktop,
    .exam-status-bar,
    .gtvt-page-title { display: none !important; }
}

/* ==========================================================================
   DESKTOP ≥992px — phần mềm sát hạch
   ========================================================================== */
@media (min-width: 992px) {

    /* Setup: cho phép cuộn trang chọn hạng */
    html, body {
        min-height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Chrome web + footer + FAB — biến mất khi đang thi */
    body.exam-active .mp-top,
    body.exam-active .bottom-nav,
    body.exam-active nav.bottom-nav,
    body.exam-active #setupScreen,
    body.exam-active .floating-action-menu,
    body.exam-active .app-header,
    body.exam-active .exam-app-header,
    body.exam-active .exam-matrix-bar,
    body.exam-active .exam-nav,
    body.exam-active .hlx-q-spacer,
    body.exam-active #hlxs-footer-mount,
    body.exam-active .hlxs-footer,
    body.exam-active footer.hlxs-footer,
    body.exam-active footer,
    body.exam-active .fs-btn,
    body.exam-active .desktop-nav,
    #examScreen.is-on .exam-app-header,
    #examScreen.is-on .exam-matrix-bar,
    #examScreen.is-on .exam-nav,
    #examScreen.is-on .hlx-q-spacer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* Nền cửa sổ phần mềm — KHÔNG phải footer */
    body.exam-active,
    body:has(#examScreen.is-on),
    body:has(#examScreen.exam-visible) {
        background: #0a3d73 !important;
        color: #111 !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        font-family: Tahoma, Arial, "Segoe UI", sans-serif !important;
    }

    /* Phòng thi chiếm TRỌN viewport, z-index trên mọi inject */
    #examScreen.is-on,
    #examScreen.exam-visible,
    body.exam-active #examScreen {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 8px !important;
        background: #0a3d73 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        z-index: 10050 !important;
    }

    /* 2 cột: giấy thi | phiếu */
    .exam-body {
        display: flex !important;
        flex-direction: row !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        overflow: hidden !important;
        grid-template-columns: none !important;
    }

    /* ---------- CỘT TRÁI: câu hỏi + tiến độ + thí sinh + status ---------- */
    .exam-left {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        width: auto !important;
        gap: 4px !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        border: 0 !important;
    }

    .exam-q-stage {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        background: #fff !important;
        border: 2px inset #9aa !important;
        padding: 14px 20px 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .exam-q-text {
        color: #c00000 !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        padding: 0 0 10px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        font-family: Tahoma, Arial, sans-serif !important;
    }
    .exam-q-text::before { content: none !important; }

    .exam-q-img {
        margin: 4px auto 10px !important;
        border: 0 !important;
        background: transparent !important;
        max-width: 72% !important;
        text-align: center !important;
    }
    .exam-q-img.has-image {
        display: block !important;
        border: 1px solid #9aa !important;
        background: #fff !important;
        padding: 4px !important;
    }
    .exam-q-img img,
    .exam-img-fluid {
        max-width: 100% !important;
        max-height: 220px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .exam-options {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        max-height: none !important;
        background: transparent !important;
    }
    .exam-opt {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 6px 4px !important;
        min-height: 0 !important;
        max-height: none !important;
        color: #111 !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        cursor: pointer !important;
        font-family: Tahoma, Arial, sans-serif !important;
    }
    .exam-opt:hover { background: #f3f8ff !important; }
    .exam-opt.selected { background: #ffe08a !important; }
    .exam-opt.correct { background: #c8f0c8 !important; }
    .exam-opt.wrong { background: #ffc8c8 !important; }
    .exam-opt-key {
        width: auto !important;
        height: auto !important;
        min-width: 1.2em !important;
        border: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        color: #111 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    .exam-opt.selected .exam-opt-key,
    .exam-opt.correct .exam-opt-key,
    .exam-opt.wrong .exam-opt-key {
        background: transparent !important;
        color: #111 !important;
    }
    .exam-opt-text {
        flex: 1 1 auto !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #111 !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-word !important;
    }

    /* Thanh % đỏ — kiểu phần mềm Bộ */
    .exam-progress-desktop {
        display: block !important;
        position: relative !important;
        flex: 0 0 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        width: 100% !important;
        background: #f3d6d6 !important;
        border: 2px solid #c62828 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .exam-progress-desktop-fill {
        background: #d32f2f !important;
        height: 100% !important;
        width: 0;
    }
    .exam-progress-desktop-label {
        color: #000 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-shadow: none !important;
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1 !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }

    /* Thông tin thí sinh + quốc huy */
    .exam-bottom-panel {
        display: flex !important;
        position: static !important;
        flex: 0 0 112px !important;
        height: 112px !important;
        min-height: 112px !important;
        max-height: 112px !important;
        width: 100% !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
    .exam-bottom-panel-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
    }
    .exam-candidate-photo { display: none !important; }
    .exam-candidate-info {
        flex: 1 1 auto !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 4px 12px 6px !important;
        background: #fff8d6 !important;
        border: 1.5px solid #1e4a7a !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    .exam-candidate-info legend {
        color: #c00000 !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        padding: 0 6px !important;
        background: #fff !important;
        border: 0 !important;
    }
    .exam-info-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        font-size: 13px !important;
        color: #222 !important;
    }
    .exam-info-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .exam-info-row.exam-info-line {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 12px !important;
    }
    .exam-info-cell {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
    }
    .exam-info-lbl {
        color: #333 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
    .exam-info-val {
        color: #0d47a1 !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .exam-bottom-panel-right {
        flex: 0 0 280px !important;
        width: 280px !important;
        height: 100% !important;
        background: #fff8d6 !important;
        border: 1.5px solid #1e4a7a !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 8px !important;
        box-sizing: border-box !important;
    }
    .exam-panel-title {
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #c00000 !important;
        text-align: center !important;
        letter-spacing: .2px !important;
        margin: 0 0 4px !important;
        line-height: 1.25 !important;
    }
    .exam-bo-badge {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .exam-bo-emblem {
        width: 42px !important;
        height: 42px !important;
        flex-shrink: 0 !important;
    }
    .exam-bo-emblem img {
        width: 42px !important;
        height: 42px !important;
        object-fit: contain !important;
        display: block !important;
    }
    .exam-panel-org {
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
    }
    .exam-panel-org strong {
        font-size: 12px !important;
        color: #163b66 !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }
    .exam-panel-org small {
        font-size: 10px !important;
        color: #334 !important;
        letter-spacing: .3px !important;
    }

    .exam-status-bar {
        display: flex !important;
        position: static !important;
        flex: 0 0 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 0 8px !important;
        background: linear-gradient(180deg, #eee 0%, #cfcfcf 100%) !important;
        border: 1px inset #bbb !important;
        color: #222 !important;
        font-size: 11.5px !important;
        font-family: Tahoma, Arial, sans-serif !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .exam-status-bar .status-left {
        flex: 1 1 auto !important;
        color: #163b66 !important;
        font-style: italic !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .exam-status-bar .status-right {
        flex: 0 0 auto !important;
        color: #555 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    /* ---------- CỘT PHẢI: đồng hồ + phiếu + Kết thúc ---------- */
    #examRightDesktop,
    .exam-right-desktop {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 340px !important;
        width: 340px !important;
        max-width: 340px !important;
        height: 100% !important;
        min-height: 0 !important;
        background: #0d47a1 !important;
        border: 2px solid #002171 !important;
        padding: 4px !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .exam-timer-card {
        display: flex !important;
        flex: 0 0 52px !important;
        height: 52px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        background: #fff9c4 !important;
        border: 2px solid #f9a825 !important;
        padding: 4px 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .exam-timer-card-label {
        font-size: 12px !important;
        font-weight: 800 !important;
        color: #0d47a1 !important;
        letter-spacing: .2px !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
        text-align: left !important;
        flex: 1 1 auto !important;
    }
    .exam-timer-card-val {
        font-size: 28px !important;
        font-weight: 800 !important;
        color: #003399 !important;
        letter-spacing: 1px !important;
        font-variant-numeric: tabular-nums !important;
        flex: 0 0 auto !important;
    }
    .exam-timer-card-val::before,
    .exam-timer-card-val::after { content: none !important; }
    .exam-timer-card-val.urgent { color: #c62828 !important; }

    .exam-ticket {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        background: #fff !important;
        border: 1px solid #555 !important;
        display: flex !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 2px !important;
        color: #111 !important;
        box-sizing: border-box !important;
        scrollbar-width: thin;
        scrollbar-color: #0d47a1 #e3eaf3;
    }
    .exam-ticket::-webkit-scrollbar { width: 10px; }
    .exam-ticket::-webkit-scrollbar-thumb { background: #0d47a1; border-radius: 6px; }
    .exam-ticket::-webkit-scrollbar-track { background: #e3eaf3; }
    .exam-ticket-hdr,
    .exam-ticket-legend,
    .exam-ticket-col-hdr { display: none !important; }

    .exam-ticket-cols {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        gap: 0 !important;
        grid-template-columns: none !important;
    }
    .exam-ticket-col {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 100% !important;
        padding: 1px 2px !important;
        border-right: 1px solid #b0bec5 !important;
        gap: 0 !important;
    }
    .exam-ticket-col:last-child { border-right: none !important; }

    .exam-ticket-row {
        flex: 0 0 auto !important;
        min-height: 28px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 2px !important;
        padding: 0 4px !important;
        border: 0 !important;
        border-bottom: 1px dotted #cfd8dc !important;
        background: #fff !important;
        color: #111 !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        grid-template-columns: none !important;
    }
    .exam-ticket-row:last-child { border-bottom: none !important; }
    .exam-ticket-row.current {
        background: #ffcccc !important;
        outline: none !important;
    }
    .exam-ticket-row.answered { background: #fff3c4 !important; }
    .exam-ticket-row.current.answered { background: #ffcccc !important; }
    .exam-ticket-row::before,
    .exam-ticket-row::after,
    .exam-ticket-opts::before,
    .exam-ticket-opts::after {
        display: none !important;
        content: none !important;
    }

    .exam-ticket-num {
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #111 !important;
        width: 22px !important;
        text-align: center !important;
        flex: 0 0 22px !important;
    }
    .exam-ticket-opts {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        height: auto !important;
        background: transparent !important;
        grid-template-columns: none !important;
        grid-column: auto !important;
    }

    .exam-ticket-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        gap: 1px !important;
        cursor: pointer !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        color: #111 !important;
    }
    .exam-ticket-num-opt {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #0d47a1 !important;
        line-height: 1 !important;
        background: transparent !important;
        display: block !important;
    }
    .exam-ticket-box {
        width: 13px !important;
        height: 13px !important;
        border: 1.5px solid #333 !important;
        background: #fff !important;
        box-sizing: border-box !important;
        display: block !important;
        flex-shrink: 0 !important;
        border-radius: 1px !important;
    }
    .exam-ticket-cell.checked .exam-ticket-box {
        background: #0d47a1 !important;
        box-shadow: inset 0 0 0 2px #fff !important;
    }
    .exam-ticket-cell.checked .exam-ticket-num-opt {
        color: #0d47a1 !important;
    }

    .exam-finish-wrap {
        flex: 0 0 44px !important;
        height: 44px !important;
        margin: 0 !important;
    }
    .exam-finish-desktop {
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
        color: #c62828 !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: 1px !important;
        border: 2px outset #bbb !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: none !important;
        text-transform: uppercase !important;
    }
    .exam-finish-desktop:hover {
        background: #c62828 !important;
        color: #fff !important;
    }
    .exam-finish-desktop:active { border-style: inset !important; }

    /* Modal kết quả vẫn nổi trên phòng thi */
    .modal-overlay {
        z-index: 10100 !important;
    }
}