:root {
    color-scheme: light;
    --ink: #111;
    --muted: #555;
    --line: #202020;
    --green: #5d8d22;
    --green-dark: #4b7418;
    --blue-soft: #eaf8ff;
    --page: #e2dfe0;
    --danger: #b42318;
    --ok: #067647;
}

* {
    box-sizing: border-box;
    min-width: 0;
}

body {
    margin: 0;
    font-family: "Segoe UI", "Yu Gothic", Meiryo, "Noto Sans", sans-serif;
    color: var(--ink);
    background: #edf2f5;
    overflow-x: hidden;
}

html {
    width: 100%;
    min-height: 100%;
    /* Safari iPhone tự phóng to chữ khi xoay ngang — giữ đúng cỡ chữ đã đặt */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

button, a {
    font: inherit;
}

ruby {
    ruby-position: over;
}

rt {
    font-size: 0.65em;
    line-height: 1;
}

.admin-toolbar-popup-close {
    display: block;
    width: calc(100% - 16px);
    margin: 8px;
    padding: 7px 10px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #f8fafc;
    color: #0b5953;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.admin-toolbar-popup-close:hover {
    border-color: #0b776f;
    background: #eef8f6;
}

.home-page {
    background:
        radial-gradient(900px 380px at 82% -8%, #e7f6f4 0%, rgba(231, 246, 244, 0) 60%),
        #f5f7fa;
    min-height: 100vh;
}

.home {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 22px 64px;
}

h1, h2 {
    margin: 0;
    letter-spacing: 0;
}

/* ---------- Hero ---------- */
.home-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 36px;
    margin-bottom: 30px;
    border-radius: 20px;
    background: linear-gradient(135deg, #12857b 0%, #0b5f58 55%, #0a4f49 100%);
    color: #fff;
    box-shadow: 0 20px 44px rgba(11, 89, 83, 0.26);
}

.home-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.home-hero-text {
    position: relative;
    z-index: 1;
}

.eyebrow {
    margin: 0 0 8px;
    color: #9df0e7;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.home-hero h1 {
    font-size: 32px;
    line-height: 1.12;
    color: #fff;
}

.home-lead {
    max-width: 640px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.home-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 22px;
}

.home-stat {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
}

.home-stat strong {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
    color: #fff;
}

/* ---------- Thanh logo + tên công ty: dòng riêng trên cùng, cùng kiểu header /dinhhuong/ ---------- */
.home-brandbar {
    display: flex;
    justify-content: center;
    min-height: 64px;
    padding: 8px 16px;
    background: #fff;
    border-bottom: 1px solid #e4e8f0;
    box-shadow: 0 2px 12px rgba(20, 45, 107, 0.08);
}

.home-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.home-brand-logo {
    display: block;
    flex: none;
    width: 46px;
    height: 46px;
}

.home-brand-text {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    text-align: center;
}

/* padding-left = letter-spacing: bù khoảng giãn thừa sau chữ cuối để dòng nhỏ nằm đúng giữa */
.home-brand-text small {
    color: #667085;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding-left: 0.08em;
    line-height: 1.3;
}

.home-brand-text strong {
    color: #142d6b;
    font-size: 18.5px;
    font-weight: 800;
    line-height: 1.2;
}

.home-brand-lod {
    color: #d92e2e;
}

/* ---------- Hàng liên kết hệ thống LOD (phải) ---------- */
.home-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-bottom: 16px;
}

/* Liên kết hệ thống LOD (JLPT · Irodori · Giáo Dục Định Hướng) — cùng màu nút trên topbar /thithu/; cuối hàng là nút Đăng nhập (admin) */
.home-ext {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
    margin-left: auto;
}

.btn-ext {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 10px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s;
}

.btn-ext:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.24);
}

.btn-ext:focus-visible {
    outline: 3px solid rgba(18, 133, 123, 0.45);
    outline-offset: 2px;
}

.btn-ext-jlpt { background: linear-gradient(135deg, #e63946, #c1121f); }
.btn-ext-lessons { background: linear-gradient(135deg, #0d9488, #0f766e); }
.btn-ext-orientation { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.btn-ext-login { background: linear-gradient(135deg, #0b5f58, #0a4f49); }

.btn-ext .ext-short {
    display: none;
}

@media (max-width: 480px) {
    .home-brandbar {
        min-height: 54px;
        padding: 7px 14px;
    }

    .home-brand {
        gap: 9px;
    }

    .home-brand-logo {
        width: 38px;
        height: 38px;
    }

    /* Máy hẹp bất thường: tên xuống dòng thay vì tràn / bị cắt */
    .home-brand-text {
        white-space: normal;
    }

    .home-brand-text small {
        font-size: 9.5px;
    }

    .home-brand-text strong {
        font-size: 14px;
        text-wrap: balance;
    }

    /* 4 nút (kể cả Đăng nhập) không vừa 1 hàng điện thoại → lưới 2×2 cho cân, khỏi lẻ 1 nút ở dòng dưới */
    .home-ext {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-left: 0;
        gap: 8px;
    }

    .btn-ext {
        justify-content: center;
        padding: 7px 12px;
    }

    .btn-ext .ext-full {
        display: none;
    }

    .btn-ext .ext-short {
        display: inline;
    }
}

/* ---------- Lưới đề thi ---------- */
.exam-search {
    position: relative;
    max-width: 440px;
    margin: 0 0 18px;
}

.exam-search-ic {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #0f766e;
    pointer-events: none;
}

.exam-search input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 1.5px solid #cbd5d1;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font-size: 16px;
}

.exam-search input:focus {
    outline: none;
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .15);
}

.exam-search-empty {
    color: #667085;
    padding: 6px 2px;
}

.exam-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.exam-empty {
    grid-column: 1 / -1;
    color: #667085;
}

.exam-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 16px;
    row-gap: 14px;
    padding: 18px 20px;
    border: 1px solid #e4e8ee;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.exam-tile:hover,
.exam-tile:focus-visible {
    transform: translateY(-3px);
    border-color: #0f766e;
    box-shadow: 0 16px 34px rgba(15, 118, 110, 0.16);
    outline: none;
}

.exam-tile-num {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #0b6a62;
    background: linear-gradient(135deg, #e7f6f4, #d1eee9);
    transition: color 0.16s ease, background 0.16s ease;
}

.exam-tile:hover .exam-tile-num,
.exam-tile:focus-visible .exam-tile-num {
    color: #fff;
    background: linear-gradient(135deg, #12857b, #0b5f58);
}

.exam-tile-body {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.exam-tile-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #101828;
}

.exam-tile-desc {
    font-size: 13px;
    color: #667085;
    line-height: 1.45;
}

.exam-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12.5px;
    font-weight: 600;
}

.chip-ic {
    width: 15px;
    height: 15px;
    color: #0f766e;
}

.exam-tile-cta {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid #eef1f5;
    color: #0b6a62;
    font-size: 13.5px;
    font-weight: 700;
}

.exam-tile-arrow {
    width: 17px;
    height: 17px;
    transition: transform 0.16s ease;
}

.exam-tile:hover .exam-tile-arrow,
.exam-tile:focus-visible .exam-tile-arrow {
    transform: translateX(4px);
}

.primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #0f766e;
    text-decoration: none;
    cursor: pointer;
}

.primary-link:hover {
    background: #0b5953;
}

.btn-intro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #1F3864;
    border-radius: 6px;
    background: #1F3864;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.btn-intro:hover {
    background: #162b4d;
    border-color: #162b4d;
}

.home-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.cbt-body {
    height: 100vh;
    background: var(--page);
    font-family: "Segoe UI", "Yu Gothic", Meiryo, "Noto Sans", sans-serif;
    overflow: hidden;
}

.cbt-body.feedback-body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
}

.cbt-window {
    width: min(1120px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    height: calc(100vh - 24px);
    /* dvh = phần màn hình nhìn thấy thật: máy tính bảng Android có thanh địa chỉ thì 100vh cao hơn → mất thanh nút dưới */
    height: calc(100dvh - 24px);
    margin: 12px auto;
    background: #fff;
    box-shadow: 0 0 0 1px #c8c8c8;
    display: grid;
    grid-template-rows: 40px auto 1fr 46px;
    overflow: hidden;
}

.cbt-header {
    display: grid;
    grid-template-columns: 1fr 270px 146px;
    align-items: center;
    gap: 12px;
    padding: 4px 10px 5px 14px;
    background: #000;
    color: #fff;
    font-size: 14px;
    line-height: 1.15;
}

.cbt-header-left {
    display: grid;
    gap: 2px;
}

.cbt-header-left strong,
.cbt-time strong {
    font-weight: 700;
}

.cbt-time {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    column-gap: 6px;
}

.cbt-time strong {
    grid-column: 2;
}

.clock-icon {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border: 3px solid #fff;
    border-radius: 50%;
    color: var(--green);
    font-size: 9px;
}

.finish-section {
    min-height: 32px;
    border: 1px solid #d59b3d;
    border-radius: 4px;
    background: #ffd890;
    color: #263238;
    font-weight: 700;
    cursor: pointer;
}

.finish-section:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.cbt-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: var(--green);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.cbt-meta-test { min-width: 0; }

/* Ảnh + tên thí sinh trên thanh Candidate (nhận diện người làm bài, chống thi hộ) */
.cbt-candidate {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.cbt-portrait {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    background: #eef7ef;
    flex-shrink: 0;
    display: block;
}
img.cbt-portrait { cursor: zoom-in; }
.cbt-portrait-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #2f7d32;
    background: #fff;
}
.cbt-candidate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lightbox phóng to ảnh nhận diện */
.portrait-zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .82);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
    cursor: zoom-out;
}
.portrait-zoom-overlay.open { display: flex; }
.portrait-zoom-fig { margin: 0; text-align: center; }
.portrait-zoom-overlay img {
    max-width: min(92vw, 520px);
    max-height: 82vh;
    border-radius: 14px;
    border: 4px solid #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    object-fit: contain;
    background: #fff;
}
.portrait-zoom-fig figcaption {
    margin-top: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
@media (max-width: 640px) {
    .cbt-meta-test { display: none; }
    .cbt-portrait { width: 48px; height: 48px; }
    .cbt-portrait-ph { font-size: 20px; }
}

.cbt-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: 166px minmax(0, 1fr);
    background: #fff;
    overflow: hidden;
}

.cbt-rail {
    position: relative;
    border-right: 1px solid #d2d2d2;
    background: #f7f7f7;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.rail-back {
    display: block;
    padding: 5px 4px 0;
    color: #444;
    text-decoration: none;
    font-size: 14px;
}

.rail-intro,
.rail-section-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    min-height: 76px;
    border-bottom: 1px solid #d5dbe0;
}

.rail-intro {
    display: none;
}

.rail-intro .rail-section-label i,
.rail-section-label i {
    display: block;
    width: 12px;
    height: 54px;
    margin: 8px auto 0;
    border-radius: 10px;
    background: #e0e7eb;
}

.rail-intro .rail-section-label i,
.rail-section-row.completed .rail-section-label i,
.rail-section-row.active .rail-section-label i {
    background: var(--green);
}

.rail-section-row.upcoming .rail-section-label i {
    background: #e0e7eb;
}

.rail-section-row.active .rail-section-label span {
    color: #333;
    font-weight: 700;
}

.rail-sections {
    min-height: 0;
}

.rail-section-label {
    min-width: 0;
    padding-top: 4px;
    padding-left: 4px;
}

.rail-section-label span {
    display: block;
    color: #4f5962;
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Nhãn "Part 1/4" gọn — chỉ hiện trên điện thoại (xem khối "Tối ưu điện thoại" cuối phần giao diện thi) */
.rail-part {
    display: none;
}

.rail-question-panel {
    min-width: 0;
    padding: 6px 4px 8px 6px;
}

.rail-block {
    min-height: 196px;
    padding: 0 5px 8px;
}

.rail-label,
.section-button span {
    display: block;
    margin-bottom: 5px;
    color: #777;
    font-size: 14px;
    white-space: nowrap;
}

.question-grid {
    display: grid;
    gap: 4px;
    justify-content: center;
    padding-top: 4px;
}

.question-dot {
    position: relative;
    width: 36px;
    height: 18px;
    border: 0;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.question-dot.answered {
    background: #9aa0a6;
}

.question-dot.current {
    background: var(--green);
}

.question-dot.current::after {
    content: "";
    position: absolute;
    top: 4px;
    right: -9px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid var(--green);
}

.question-dot.flagged::before {
    content: attr(data-flag);
    position: absolute;
    top: -10px;
    right: -5px;
    color: #d05a00;
    font-size: 13px;
    line-height: 1;
}

.question-dot:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.section-button {
    display: block;
    width: 100%;
    height: 82px;
    padding: 0 4px;
    border: 1px solid #d5dbe0;
    border-left: 0;
    border-right: 0;
    background: #f7f7f7;
    text-align: left;
    cursor: pointer;
}

.section-button i {
    display: block;
    width: 10px;
    height: 54px;
    margin: 0 auto;
    border-radius: 8px;
    background: #e0e7eb;
}

.section-button.active i {
    background: var(--green);
}

.section-button.active {
    display: none;
}

.section-button:disabled {
    cursor: not-allowed;
}

.section-button.completed i {
    background: #b8c4cc;
}

.cbt-main {
    min-width: 0;
    min-height: 0;
    display: block;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.question-top {
    min-height: 0;
    overflow-y: visible;
    overflow-x: hidden;
    padding: 16px 28px 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.question-top::-webkit-scrollbar {
    display: none;
}

.question-bottom {
    border-top: 2px solid #d8dee4;
    background: #f7f9fb;
    min-height: 0;
    overflow: visible;
    padding: 14px 28px 28px;
}

.prompt-box {
    width: 100%;
    min-height: 0;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--blue-soft);
    color: #111;
    font-size: 18px;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Ô xanh giống đề JFT-Basic thật: dòng hướng dẫn tiếng Anh (prompt_en) ở trên, câu / lời thoại tiếng Nhật ngay dưới. */
.prompt-box .prompt-en {
    font-family: "Segoe UI", Arial, "Helvetica Neue", sans-serif;
    line-height: 1.45;
}

.prompt-box .prompt-en + .prompt-ja {
    margin-top: 10px;
}

/* Câu hỏi tiếng Nhật phần Đọc: nằm sau tài liệu, ngay trên các lựa chọn (như câu (1)(2) của đề thật). */
.question-stem {
    width: min(900px, 100%);
    max-width: 100%;
    margin: 0 0 12px;
    color: #111;
    font-size: 18px;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.question-stem[hidden] {
    display: none;
}

.passage-box {
    width: min(900px, 100%);
    max-width: 100%;
    min-height: 0;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #b7c6d0;
    background: #fff;
    font-size: 17px;
    line-height: 1.65;
    white-space: pre-line;
}

.passage-box:has(.question-visual-document) {
    width: min(860px, 100%);
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.passage-content {
    white-space: pre-line;
}

.question-visual {
    display: grid;
    justify-items: start;
    margin: 8px 0 4px;
}

.question-visual img {
    display: block;
    max-width: min(640px, 100%);
    height: auto;
    object-fit: contain;
}

.question-visual-document img {
    width: auto;
    max-width: 100%;
    max-height: min(600px, 70vh);
}

.question-visual-scene img {
    width: auto;
    /* Ảnh minh hoạ phần Nghe (4 ô lựa chọn). Ảnh gốc rộng ~550–770px; trước bị ép
       320px nên quá nhỏ, khó nhìn chi tiết. Nới gần cỡ gốc để to & vẫn nét. */
    max-width: min(600px, 100%);
    max-height: min(560px, 64vh);
}

/* Tranh BỐI CẢNH câu Nghe kiểu đề thật (ai nói, ở đâu) — nhỏ như câu 7–10 đề mẫu; 3 tranh lựa chọn nằm ở ô đáp án. */
.question-visual-context img {
    width: auto;
    max-width: min(240px, 100%);
    max-height: 170px;
}

.question-visual figcaption {
    margin-top: 8px;
    color: #555;
    font-size: 13px;
}

/* Ảnh chèn thẳng trong prompt (đề nhập từ web cũ, class q-figure).
   An toàn: mọi ảnh trong prompt không được cao quá màn hình, tránh che đáp án. */
.prompt-box img {
    max-width: 100%;
    max-height: min(440px, 52vh);
    height: auto;
}

.prompt-box .q-figure {
    margin: 12px 0;
    text-align: center;
}

.prompt-box .q-figure img {
    display: inline-block;
    width: auto;
    max-width: min(600px, 100%);
    object-fit: contain;
    border-radius: 12px;
}

/* Bảng info-search trong prompt: viền vẫn hiện kể cả khi thẻ <style> nội tuyến bị bỏ (vd sau khi sửa ở admin). */
.prompt-box table {
    border-collapse: collapse;
    margin: 8px 0;
    max-width: 100%;
}

.prompt-box td,
.prompt-box th {
    border: 1px solid #333;
    padding: 6px 10px;
    vertical-align: top;
}

.passage-image {
    width: min(760px, 100%);
    padding: 8px;
    background: #fff;
}

.official-sample-image {
    margin: 0;
}

.official-sample-image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(310px, 34vh);
    height: auto;
    border: 1px solid #d6dde3;
    background: #fff;
}

.official-sample-image figcaption {
    margin-top: 8px;
    color: #555;
    font-size: 13px;
}

.passage-transcript {
    border-color: #9fb6c4;
    background: #f8fcff;
}

.passage-menu,
.passage-schedule,
.passage-table,
.passage-notice {
    border-color: #8fa3b0;
    background: #fff;
    font-family: "Segoe UI", "Yu Gothic", Meiryo, "Noto Sans", sans-serif;
}

.audio-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.audio-player {
    display: none;
}

.audio-play-button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #6c6c6c;
    border-radius: 3px;
    background: #fff;
    color: #111;
    font-weight: 700;
    cursor: pointer;
}

.audio-play-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.language-buttons {
    display: grid;
    gap: 8px;
    width: max-content;
    margin: 0 0 18px;
}

/* Câu không có hướng dẫn: app.js đặt hidden — display:grid ở trên đè mất nên khung rỗng vẫn chiếm chỗ. */
.language-buttons[hidden] {
    display: none;
}

.language-buttons button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #4f5f64;
    border-radius: 4px;
    background: #415055;
    color: #fff;
    font-family: "Courier New", monospace;
    font-size: 14px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.language-guide-icon,
.language-guide-open {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: #fff;
    font-size: 13px;
    line-height: 1;
}

.choices {
    display: grid;
    gap: 14px;
    width: min(900px, 100%);
    max-width: 100%;
}

.choices:has(.choice-media-option) {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: stretch;
    width: 100%;
}

.choices:has(.sub-question-section) {
    grid-template-columns: 1fr;
}

.choice {
    /* BẮT BUỘC giữ `relative`: ô radio bên trong dùng `position: absolute`.
       Nếu thẻ này để `static`, ô radio sẽ lấy khung chứa là toàn trang (ICB) →
       nó KHÔNG cuộn theo `.cbt-main`, nằm lệch cả nghìn px so với chỗ nhìn thấy.
       Khi bấm chọn, trình duyệt focus ô radio rồi tự cuộn tới vị trí lệch đó →
       đẩy cả cửa sổ bài thi ra khỏi màn hình (màn hình xám) ở câu dài. */
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: #111;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.choice-media-option {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    padding: 10px;
}

/*
 * Tô sáng đáp án đang chọn — gắn class `.selected` từ app.js (updateChoiceSelection)
 * thay cho `:has(input:checked)`. Cách này nhẹ và ổn định hơn.
 * LƯU Ý: đây KHÔNG phải nguyên nhân lỗi "màn hình xám" ở câu dài — nguyên nhân thật
 * là ô radio `position:absolute` thoát khỏi vùng cuộn (xem chú thích ở `.choice`).
 */
.choice.selected {
    outline: 3px solid var(--green);
    outline-offset: 1px;
    background: #f4ffe7;
}

.choice-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    background: #eef3f7;
    color: #111;
    font-size: 13px;
}

.choice-media {
    display: grid;
    gap: 6px;
    align-items: center;
    justify-items: start;
    width: 100%;
}

.choice-media img {
    display: block;
    max-width: 180px;
    max-height: 120px;
    border: 1px solid #d8dee4;
    background: #fff;
    object-fit: contain;
}

.choice-media-option .choice-media {
    justify-items: center;
}

.choice-media-option .choice-media img {
    width: 100%;
    max-width: 220px;
    max-height: 150px;
}

.choice-caption {
    font-size: 14px;
    line-height: 1.25;
}

.choice-media-option .choice-caption {
    justify-self: start;
    padding-left: 2px;
}

/* Ghim ô radio vào đúng góc khung đáp án (khung chứa là `.choice` nhờ
   `position: relative` ở trên). Nhờ vậy vị trí thật của ô radio luôn TRÙNG với
   chỗ người dùng nhìn thấy → khi focus, trình duyệt không phải cuộn đi đâu cả. */
.choice input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.sub-question-section {
    margin-bottom: 24px;
}

/* Trang nhóm "1 tài liệu – 2 câu (1)(2)" như đề JFT-Basic thật: dải xanh nhạt chứa số câu + câu hỏi tiếng Nhật (chữ đen, đậm),
   ngay dưới là các lựa chọn của câu đó. */
.sub-question-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 14px;
    margin-bottom: 14px;
    background: #e6f3fb;
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.sub-question-no {
    flex: none;
    white-space: nowrap;
}

/* Đề mẫu JF: CẢ câu hỏi nằm trong nhãn "(1) フェスティバルに 行った 人は…" (không có ô câu hỏi riêng) → phải được xuống
   dòng. Trước 30/9/2026 nhãn nowrap nên trên điện thoại phần cuối câu hỏi tràn ra ngoài, bị cắt mất. */
.sub-question-no:only-child {
    flex: 0 1 auto;
    white-space: normal;
}

.sub-question-prompt {
    min-width: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    overflow-wrap: anywhere;
}

.sub-question-prompt p {
    margin: 0;
}

.sub-question-passage {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #b7c6d0;
    background: #fff;
    font-size: 17px;
    line-height: 1.65;
}

.sub-question-section .question-visual {
    margin: 0 0 12px;
}

.sub-question-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: min(900px, 100%);
    max-width: 100%;
}

/* Lựa chọn CHỮ của câu con: xếp dọc, mỗi lựa chọn một dòng (lựa chọn dài không bị ép 3 cột). */
.sub-question-choices.sub-question-choices-text {
    grid-template-columns: 1fr;
    width: min(760px, 100%);
}

/* ===== Phần 2 kiểu đề mẫu JF: hội thoại ≥ 2 lượt lời nằm DƯỚI ô xanh (app.js parseDialog / renderDialog) ===== */
.passage-box.passage-dialog {
    width: min(900px, 100%);
    padding: 0;
    border: 0;
    background: transparent;
    white-space: normal;
}

.passage-dialog .question-visual {
    margin: 0 0 14px;
}

.dialog-context {
    margin: 0 0 4px;
    color: #555;
    font-size: 15px;
}

/* Câu Diễn đạt: BONG BÓNG CHAT như câu 6 đề mẫu — người thứ nhất bên trái (cam), người thứ hai bên phải (xanh). */
.chat-dialog {
    display: grid;
    gap: 14px;
    width: min(760px, 100%);
}

.chat-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.chat-right {
    flex-direction: row-reverse;
}

.chat-who {
    flex: none;
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 52px;
}

.chat-avatar {
    width: 44px;
    height: 44px;
}

.chat-name {
    max-width: 64px;
    color: #444;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.chat-bubble {
    position: relative;
    max-width: min(560px, calc(100% - 64px));
    padding: 12px 18px;
    background: #fcd9ac;
    color: #111;
    font-size: 17px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.chat-bubble::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -10px;
    border-style: solid;
    border-width: 7px 10px 7px 0;
    border-color: transparent #fcd9ac transparent transparent;
}

.chat-right .chat-bubble {
    background: #aed1f5;
}

.chat-right .chat-bubble::before {
    left: auto;
    right: -10px;
    border-width: 7px 0 7px 10px;
    border-color: transparent transparent transparent #aed1f5;
}

/* Chỗ trống trong hội thoại phần 2: khung đỏ như đề mẫu. */
.dialog-blank {
    display: inline-block;
    width: 7.5em;
    height: 1.55em;
    margin: 0 4px;
    border: 2px solid #e0302a;
    background: #fff;
    vertical-align: middle;
}

/* Câu Ngữ pháp dạng hội thoại: lời thoại có tên người như câu 5 đề mẫu (tranh minh hoạ, nếu có, bên phải). */
.dialog-text-wrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.dialog-text-wrap .question-visual img {
    max-width: 200px;
}

.dialog-text {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #111;
    font-size: 17px;
    line-height: 1.8;
}

.dialog-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
}

.dialog-name {
    white-space: nowrap;
}

.sub-question-choices .choice {
    grid-template-columns: 28px 1fr;
    min-height: 0;
    padding: 8px;
    align-items: start;
}

/* Lựa chọn CHỮ của câu con: chữ A/B/C thẳng hàng với dòng chữ (trước lệch xuống dưới vài px). */
.sub-question-choices-text .choice {
    align-items: center;
}

.sub-question-choices .choice-media img {
    max-width: 100%;
    max-height: 100px;
    width: 100%;
    object-fit: contain;
}

.cbt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-top: 4px solid var(--green);
    background: #000;
}

.footer-icons {
    display: flex;
    gap: 10px;
    color: #fff;
    font-size: 25px;
    line-height: 1;
}

.footer-actions {
    display: flex;
    gap: 6px;
}

.flag-button,
.nav-button {
    min-height: 34px;
    border: 0;
    border-radius: 3px;
    background: var(--green);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.flag-button {
    width: 36px;
    font-size: 18px;
}

.nav-button {
    min-width: 63px;
    padding: 0 10px;
}

.flag-button:hover,
.nav-button:hover {
    background: var(--green-dark);
}

.flag-button.active {
    background: #d05a00;
}

.nav-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.language-modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 0, 0, .42);
}

.language-modal[hidden] {
    display: none;
}

.exam-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.42);
}

.exam-confirm-dialog {
    width: min(360px, 100%);
    padding: 18px;
    border: 2px solid var(--green);
    border-radius: 8px;
    background: #fff;
    color: #111;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
    text-align: center;
}

.exam-confirm-dialog strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
}

.exam-confirm-dialog p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.45;
}

.exam-confirm-dialog div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.exam-confirm-dialog button {
    min-height: 42px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font-weight: 800;
    cursor: pointer;
}

.exam-confirm-dialog .exam-confirm-ok {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.language-dialog {
    width: min(720px, 100%);
    max-height: min(620px, 90vh);
    overflow: auto;
    border: 2px solid #00aeef;
    background: #fff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
}

.language-dialog header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 38px;
    padding: 6px 10px;
    background: #000;
    color: #fff;
}

.language-dialog header button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 3px;
    background: #fff;
    color: #111;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

#languageModalBody {
    padding: 0;
    font-size: 14px;
    line-height: 1.35;
}

#languageModalBody pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid #ccd3d8;
    background: #f8fcff;
    font: inherit;
}

.language-support-image {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ccd3d8;
    background: #fff;
}

.language-support-crop {
    overflow: hidden;
    border: 1px solid #ccd3d8;
    background: #fff;
}

.language-support-crop .language-support-image {
    margin-top: -39px;
    border: 0;
}

.language-guide-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.language-guide-table th,
.language-guide-table td {
    padding: 10px 8px;
    border: 1px solid #6f6f6f;
    vertical-align: middle;
}

.language-guide-table th {
    width: 72px;
    color: #263238;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
}

.language-guide-table td {
    color: #111;
}

/* ===== Phóng to ảnh câu hỏi / tài liệu (app.js openImageZoom — 30/9/2026) ===== */
.cbt-main .question-visual img,
.cbt-main .official-sample-image img,
.cbt-main .prompt-box img {
    cursor: zoom-in;
}

.image-zoom {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    background: #0f1216;
}

.image-zoom[hidden] {
    display: none;
}

.image-zoom-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px 6px 14px;
    background: #000;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.image-zoom-bar small {
    display: block;
    color: #c9d1d9;
    font-size: 11px;
    font-weight: 400;
}

.image-zoom-close {
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.image-zoom-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* margin:auto — nhỏ hơn khung thì căn giữa, lớn hơn thì kéo xem được cả mép trái / trên (căn giữa kiểu grid làm mất mép). */
.image-zoom-scroll img {
    flex: none;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    margin: auto;
    background: #fff;
    cursor: zoom-out;
}

.image-zoom.fit .image-zoom-scroll img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

/* Màn cảm ứng: chạm đúp nhanh vào nút / lựa chọn không làm phóng to trang (vẫn chụm 2 ngón để phóng to được). */
.cbt-window button,
.cbt-window .choice,
.language-modal button,
.exam-confirm-dialog button,
.image-zoom button {
    touch-action: manipulation;
}

/* Màn cảm ứng không có "rê chuột": màu hover bị dính lại sau khi chạm Next / Previous → giữ màu thường. */
@media (hover: none) {
    .nav-button:hover,
    .flag-button:not(.active):hover {
        background: var(--green);
    }
}

.result-panel {
    padding: 22px 28px;
    border-top: 1px solid #ccd3d8;
    background: #fff;
}

.score {
    font-size: 28px;
    font-weight: 700;
}

.answer-review {
    margin-top: 18px;
    border-top: 1px solid #d7dde5;
}

.review-item {
    padding: 14px 0;
    border-bottom: 1px solid #d7dde5;
}

.review-item strong.correct {
    color: var(--ok);
}

.review-item strong.wrong {
    color: var(--danger);
}

.feedback-window {
    width: min(1120px, calc(100vw - 48px));
    margin: 24px auto;
    background: #fff;
    box-shadow: 0 0 0 1px #c8c8c8;
}

.feedback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 10px 0 14px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.exit-test {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 138px;
    height: 32px;
    border: 1px solid #d59b3d;
    border-radius: 4px;
    background: #ffd890;
    color: #263238;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.feedback-green {
    height: 19px;
    background: var(--green);
}

.feedback-main {
    padding: 14px 24px 28px;
}

.feedback-card {
    border: 1px solid #d4d4d4;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: #fff;
}

.feedback-card h1 {
    margin: 0;
    padding: 12px 14px;
    background: #000;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

.feedback-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 14px;
    border-left: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    background: #f8fafc;
    color: #111;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.feedback-score > span,
.feedback-score > small {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    background: #fff;
}

.feedback-score small {
    color: #3f4b57;
    font-size: 13px;
    font-weight: 700;
}

.feedback-pass-status {
    min-width: 82px;
    padding: 8px 14px;
    border-radius: 6px;
    color: #fff;
    text-align: center;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
}

.feedback-pass-status.passed {
    background: #0b8f37;
}

.feedback-pass-status.failed {
    background: #c62828;
}

/* Mức ước tính A1 / A2.1 / A2.2 (thay ô Pass/Fail) */
.feedback-pass-status.level-a22 {
    background: #0b8f37;
}

.feedback-pass-status.level-a21 {
    background: #1565c0;
}

.feedback-pass-status.level-a1 {
    background: #9a5b00;
}

.feedback-pass-status.level-none {
    background: #c62828;
}

.admin-level-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-level-chip.level-a22 {
    background: #dcfae6;
    color: #067647;
}

.admin-level-chip.level-a21 {
    background: #e3eefc;
    color: #1554a8;
}

.admin-level-chip.level-a1 {
    background: #fdf1dc;
    color: #8a5100;
}

.feedback-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.feedback-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

.feedback-table th,
.feedback-table td {
    border: 1px solid #dcdcdc;
    vertical-align: middle;
}

.feedback-table th {
    height: 54px;
    background: #f1f3f4;
    text-align: center;
    font-weight: 700;
}

.feedback-table th span,
.feedback-category span,
.feedback-section span,
.feedback-answer span,
.feedback-answer small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.15;
}

.feedback-table th:nth-child(1) {
    width: 118px;
}

.feedback-table th:nth-child(2) {
    width: 210px;
}

.feedback-table th:nth-child(3) {
    width: 78px;
}

.feedback-table th:nth-child(4) {
    width: 240px;
}

.feedback-section {
    padding: 8px 8px;
    text-align: center;
    line-height: 1.25;
    font-weight: 700;
}

.feedback-section strong,
.feedback-category strong {
    display: block;
}

.feedback-category {
    padding: 10px 12px;
    line-height: 1.35;
    font-weight: 700;
}

.feedback-result {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.feedback-result.correct {
    color: #0b8f37;
}

.feedback-result.wrong {
    color: #001dff;
}

.feedback-answer {
    padding: 10px 12px;
    line-height: 1.35;
    font-weight: 700;
}

.feedback-answer small {
    margin-top: 8px;
    color: #333;
    font-weight: 400;
}

.feedback-answer-key {
    display: block;
    margin-bottom: 6px;
    color: #0b5e16;
}

.feedback-choice-media {
    display: grid;
    gap: 6px;
}

.feedback-choice-media img {
    max-width: 96px;
    max-height: 72px;
    border: 1px solid #d8dee4;
    object-fit: contain;
}

/* ===== Phiếu kết quả kiểu JFT-Basic thật (判定結果通知書) — app.js renderFeedback() ===== */
.feedback-window.report-window {
    width: min(1000px, calc(100vw - 48px));
    background: #e9eaec;
}

.jr-header-ja {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 400;
    opacity: 0.85;
}

.jr-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jr-print {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #6b7280;
    border-radius: 4px;
    background: #1f2937;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.jr-print:hover {
    background: #374151;
}

.jr-main {
    display: grid;
    gap: 18px;
    padding: 22px 24px 34px;
}

.jr-page {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 36px 46px 34px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    color: #111;
    font-family: Arial, "Helvetica Neue", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif;
}

.jr-page,
.jr-page * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.jr-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.jr-brand-test {
    display: grid;
    line-height: 1.1;
}

.jr-brand-test b {
    font-size: 27px;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.jr-brand-test span {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
}

.jr-brand-org {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
}

.jr-brand-org img {
    width: 40px;
    height: 40px;
}

.jr-brand-org small {
    display: block;
    color: #666;
    font-size: 11px;
    font-weight: 600;
}

.jr-title {
    margin: 12px 0 24px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.jr-title-en {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 400;
}

.jr-mock-pill {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 12px;
    border: 1.5px solid #c62828;
    border-radius: 999px;
    color: #c62828;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.jr-candidate {
    display: grid;
    grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
    gap: 24px 44px;
    align-items: start;
}

.jr-photo {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
}

/* Ảnh thẻ dọc 3x4 → hiện TRỌN ảnh giữa khung 4:3 nền trắng (absolute để height 100% không bị tính theo ảnh). */
.jr-photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jr-photo-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: #8a8f96;
    font-size: 12px;
}

.jr-photo-empty svg {
    width: 92px;
    height: 92px;
}

.jr-info {
    display: grid;
    gap: 10px;
    margin: 0;
}

.jr-info > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.jr-info dt {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.25;
}

.jr-info dt span {
    display: block;
    font-size: 12px;
    letter-spacing: 0;
}

.jr-info dd {
    margin: 0;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.jr-scorebox {
    margin-top: 42px;
    padding: 22px 30px 26px;
    border: 2px solid #d3d3d3;
}

.jr-score-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 28px;
}

.jr-kv {
    display: grid;
    grid-template-columns: 180px auto;
    align-items: center;
    gap: 8px;
}

.jr-kv + .jr-kv {
    margin-top: 12px;
}

.jr-k {
    font-size: 16px;
    line-height: 1.2;
}

.jr-k small {
    display: block;
    font-size: 14px;
}

.jr-v {
    font-size: 22px;
    font-weight: 700;
}

.jr-level-note {
    display: block;
    margin-top: 2px;
    color: #b42318;
    font-size: 12px;
    font-weight: 700;
}

.jr-score-meta p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.25;
}

.jr-score-meta small {
    display: block;
    font-size: 11px;
}

.jr-scale {
    position: relative;
    margin: 22px 8px 6px;
    padding-top: 28px;
}

.jr-scale-value {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 15px;
}

.jr-scale-track {
    position: relative;
    height: 18px;
    background: linear-gradient(90deg, #f6e4eb 0%, #efc2d4 22%, #e98bb1 42%, #e24f88 54%, #e6407a 56.25%, #ee6a55 61%, #f39433 66%, #f8b61c 71%, #f5cf06 78%, #e7d80f 86%, #bfd11c 93%, #8dc21f 100%);
}

.jr-tick {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 4px;
    margin-left: -2px;
    background: #111;
}

.jr-dot {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 1px solid #b9b9b9;
    border-radius: 50%;
    background: radial-gradient(circle, #f5a200 0 3.5px, #fff 4px);
}

.jr-scale-labels {
    position: relative;
    height: 40px;
    margin-top: 8px;
}

.jr-scale-lab {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.jr-scale-lab b {
    display: block;
}

.jr-scale-lab-start {
    transform: none;
}

.jr-scale-lab-end {
    transform: translateX(-100%);
}

.jr-sections-title {
    margin: 28px 0 14px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

.jr-sections-title span {
    display: block;
    font-size: 15px;
}

.jr-sec-row {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: end;
    gap: 2px 20px;
}

.jr-sec-row + .jr-sec-row {
    margin-top: 12px;
}

.jr-sec-name strong {
    display: block;
    font-size: 16px;
    font-weight: 400;
}

.jr-sec-name span {
    display: block;
    font-size: 15px;
}

.jr-sec-bar {
    position: relative;
    margin-right: 22px;
    padding-top: 18px;
}

.jr-sec-pct {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 12.5px;
}

.jr-sec-track {
    position: relative;
    height: 18px;
    background: #d9d9d9;
}

.jr-sec-track .jr-dot {
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
}

.jr-note {
    margin: 20px 0 0;
    color: #444;
    font-size: 12px;
    line-height: 1.55;
}

.jr-note span {
    display: block;
    color: #666;
}

.jr-actions {
    display: flex;
    justify-content: center;
}

.jr-review-toggle {
    display: inline-grid;
    justify-items: center;
    gap: 2px;
    min-width: 320px;
    padding: 10px 24px;
    border: 1px solid var(--green-dark);
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.jr-review-toggle small {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
}

.jr-review-toggle[aria-expanded="true"] {
    background: #fff;
    color: var(--green-dark);
}

.jr-review {
    width: 100%;
    scroll-margin-top: 12px;
}

.jr-review[hidden] {
    display: none;
}

.jr-guide-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.jr-guide-title span {
    display: block;
    margin-left: 1.15em;
    font-size: 15px;
}

.jr-guide > p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
}

.jr-cefr {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 18px auto 12px;
}

.jr-guide-levels {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.jr-guide-box {
    padding: 14px 16px;
}

.jr-guide-a1 {
    border: 2px solid #e5487f;
    background: #f9d3e3;
}

.jr-guide-a2 {
    border: 2px solid #f39a3c;
    border-left: 0;
    background: #fdeeb0;
}

.jr-guide-box h3 {
    margin: 0 0 8px;
    color: #e5487f;
    font-size: 18px;
}

.jr-guide-a2 h3 {
    color: #ef8a1f;
}

.jr-guide-box h3 span {
    margin-left: 8px;
    color: #333;
    font-size: 13px;
}

.jr-guide-box ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.55;
}

.jr-guide-split {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.jr-guide-foot {
    margin: 12px 0 0;
    color: #555;
    font-size: 12.5px;
    text-align: right;
}

.jr-error {
    border-left: 5px solid #c62828;
}

.jr-error strong {
    color: #b42318;
    font-size: 17px;
}

.jr-error p {
    margin: 8px 0 0;
    font-size: 14px;
}

/* Nộp lỗi (mạng chập chờn) → nộp lại ngay, bài làm vẫn còn trong trang (app.js renderFeedback). */
.jr-retry {
    display: block;
    width: min(320px, 100%);
    min-height: 46px;
    margin: 16px 0 0;
    border: 1px solid var(--green-dark);
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.jr-retry:disabled {
    opacity: .6;
    cursor: wait;
}

/* Số câu trong bảng đáp án: chỉ hiện ở dạng thẻ trên điện thoại (bảng máy tính giữ nguyên như phiếu thật). */
.feedback-qno {
    display: none;
}

/* "screen": khổ in A4 (~720px) hẹp hơn 760px — bản in phải giữ bố cục phiếu 1 trang, không lấy bố cục điện thoại. */
@media screen and (max-width: 880px) {
    .feedback-window.report-window {
        width: 100%;
    }
}

@media screen and (max-width: 760px) {
    .jr-header-ja,
    .jr-print-en {
        display: none;
    }

    .jr-print {
        height: 34px;
        padding: 0 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .jr-main {
        gap: 12px;
        padding: 12px 8px 24px;
    }

    .jr-page {
        padding: 20px 14px 22px;
    }

    .jr-brand-test b {
        font-size: 20px;
    }

    .jr-brand-org {
        font-size: 15px;
    }

    .jr-brand-org img {
        width: 32px;
        height: 32px;
    }

    .jr-title {
        margin-bottom: 18px;
        font-size: 19px;
    }

    .jr-title-en {
        font-size: 13px;
    }

    .jr-candidate {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .jr-photo {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .jr-info > div,
    .jr-kv {
        grid-template-columns: 128px minmax(0, 1fr);
    }

    .jr-info dt {
        font-size: 13px;
    }

    .jr-info dt span {
        font-size: 10.5px;
    }

    .jr-info dd {
        font-size: 13.5px;
    }

    .jr-scorebox {
        margin-top: 24px;
        padding: 16px 12px 18px;
    }

    .jr-score-head {
        grid-template-columns: 1fr;
    }

    .jr-k {
        font-size: 14px;
    }

    .jr-k small {
        font-size: 12px;
    }

    .jr-scale {
        margin: 18px 12px 4px;
    }

    .jr-scale-lab {
        font-size: 11px;
    }

    .jr-scale-lab:nth-last-child(2) {
        transform: translateX(-30%);
    }

    .jr-sec-row {
        grid-template-columns: 1fr;
    }

    .jr-sec-name strong,
    .jr-sec-name span {
        font-size: 13.5px;
    }

    .jr-sec-bar {
        margin: 0 16px 0 8px;
    }

    .jr-review-toggle {
        width: 100%;
        min-width: 0;
    }

    .jr-guide-levels {
        grid-template-columns: 1fr;
    }

    .jr-guide-a2 {
        border-top: 0;
        border-left: 2px solid #f39a3c;
    }
}

/* Trang in có tên: chỉ trang phiếu dùng khổ A4 lề 10mm — không đổi khổ in của các trang admin.
   Có khai báo vùng lề (@top-left, @bottom-left… dù rỗng) → Chrome/Edge KHÔNG in dòng đầu/chân trang tự động
   (ngày giờ, tiêu đề, URL lộ IP máy chủ, số trang) — phiếu thật cũng không có các dòng này. */
@page jr-report {
    size: A4;
    margin: 10mm;

    @top-left {
        content: "";
    }

    @bottom-left {
        content: "";
    }
}

@media print {
    .cbt-body.feedback-body {
        background: #fff;
    }

    .feedback-window.report-window {
        width: auto;
        max-width: none;
        margin: 0;
        box-shadow: none;
        background: #fff;
    }

    .report-window .feedback-header,
    .report-window .feedback-green,
    .jr-actions,
    .portrait-zoom-overlay {
        display: none !important;
    }

    .jr-main {
        display: block;
        padding: 0;
        page: jr-report;
    }

    .jr-page {
        max-width: none;
        padding: 0;
        box-shadow: none;
        break-after: page;
    }

    .jr-page:last-child {
        break-after: auto;
    }

    .jr-review:not([hidden]) {
        break-after: page;
    }

    /* Khổ in hẹp hơn màn hình: chia cột theo % để cột Đáp án đúng + lời giải không bị bóp. */
    .jr-review .feedback-table {
        min-width: 0;
        font-size: 11px;
    }

    .jr-review .feedback-table th:nth-child(1) {
        width: 13%;
    }

    .jr-review .feedback-table th:nth-child(2) {
        width: 20%;
    }

    .jr-review .feedback-table th:nth-child(3) {
        width: 8%;
    }

    .jr-review .feedback-table th:nth-child(4) {
        width: 27%;
    }

    /* Gọn lại để cả phiếu (kể cả dòng ghi chú) nằm trên 1 trang A4 như phiếu thật. */
    .jr-title {
        margin-bottom: 12px;
    }

    .jr-candidate {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 20px 30px;
    }

    .jr-info {
        gap: 4px;
    }

    .jr-info > div {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .jr-scorebox {
        margin-top: 16px;
        padding-bottom: 18px;
    }

    .jr-sections-title {
        margin-top: 18px;
    }

    .jr-sec-row + .jr-sec-row {
        margin-top: 8px;
    }

    .jr-note {
        margin-top: 10px;
    }
}

@media (max-width: 880px) {
    .cbt-window,
    .feedback-window {
        width: 100%;
        min-height: 100vh;
        margin: 0;
    }

    .cbt-window {
        height: 100vh;
    }
}

@media (max-width: 720px) {
    body {
        min-width: 0;
    }

    .home {
        padding: 22px 14px 44px;
    }

    .home-hero {
        flex-direction: column;
        gap: 18px;
        padding: 24px 22px;
        border-radius: 16px;
    }

    .home-hero h1 {
        font-size: 25px;
        line-height: 1.2;
    }

    .home-stats {
        gap: 22px;
    }

    .exam-grid {
        grid-template-columns: 1fr;
    }

    .primary-link {
        width: 100%;
    }
}

/* Giao diện thi + phiếu kết quả trên điện thoại: màn dọc (≤ 720px) VÀ điện thoại xoay ngang (thấp ≤ 500px) dùng chung bố cục
   gọn này. Trước 30/9/2026 điện thoại xoay ngang lấy bố cục máy tính: thanh câu hỏi dọc 166px, vùng câu hỏi chỉ còn ~200px
   chiều cao, chừa dải xám 48px bên phải. Tinh chỉnh thêm ở khối "Tối ưu điện thoại" ngay sau khối max-width: 390px. */
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
    .cbt-body {
        background: #fff;
    }

    .cbt-window {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        grid-template-rows: auto auto 1fr auto;
        overflow: hidden;
    }

    .cbt-header {
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: 8px;
        padding: 8px;
        font-size: 12px;
    }

    .cbt-header-left {
        min-width: 0;
    }

    .cbt-header-left strong,
    .cbt-header-left span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cbt-time {
        grid-template-columns: 18px 1fr;
        grid-column: 1 / -1;
        order: 3;
        min-width: 0;
    }

    .cbt-time span:not(.clock-icon) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .clock-icon {
        width: 18px;
        height: 18px;
        border-width: 2px;
    }

    .finish-section {
        width: 100%;
        min-height: 38px;
        padding: 0 8px;
        font-size: 12px;
    }

    .cbt-layout {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .cbt-meta {
        display: grid;
        gap: 2px;
        padding: 4px 8px;
        font-size: 11px;
        line-height: 1.2;
    }

    .cbt-meta span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cbt-rail {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        min-height: 50px;
        max-height: 72px;
        padding: 6px 8px;
        border-right: 0;
        border-bottom: 1px solid #d2d2d2;
        overflow: hidden;
    }

    .rail-intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        border-bottom: 0;
    }

    .rail-intro .rail-section-label,
    .rail-sections {
        display: none;
    }

    .rail-sections {
        display: block;
        min-width: 0;
    }

    .rail-section-row {
        display: none;
    }

    .rail-section-row.active {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        min-height: 0;
        border-bottom: 0;
    }

    .rail-section-label {
        padding-top: 0;
    }

    .rail-section-label span {
        max-width: 54px;
        font-size: 12px;
    }

    .rail-section-label i {
        display: none;
    }

    .rail-question-panel {
        padding: 0;
        min-width: 0;
    }

    .rail-label {
        margin: 0;
        font-size: 12px;
    }

    .question-grid {
        display: flex;
        justify-content: flex-start;
        gap: 5px;
        overflow-x: auto;
        padding: 2px 14px 4px 0;
        scrollbar-width: thin;
    }

    .question-dot {
        flex: 0 0 auto;
        width: 34px;
        height: 28px;
        font-size: 12px;
    }

    .question-dot.current::after {
        top: auto;
        right: 11px;
        bottom: -8px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid var(--green);
        border-bottom: 0;
    }

    .section-button {
        display: none;
    }

    .section-button.active {
        display: none;
    }

    .cbt-main {
        flex: 1;
        min-height: 0;
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .question-top {
        overflow: visible;
        padding: 14px 12px 8px;
    }

    .question-bottom {
        min-height: auto;
        overflow: visible;
        padding: 12px 12px 22px;
    }

    .prompt-box {
        min-height: 0;
        padding: 12px;
        font-size: 19px;
        line-height: 1.55;
    }

    .prompt-box .prompt-en {
        font-size: 17px;
    }

    .question-stem {
        font-size: 18px;
    }

    .language-buttons {
        gap: 6px;
        width: min(232px, 100%);
        margin: 8px 0 18px 8px;
    }

    .language-buttons button {
        width: 100%;
        justify-content: space-between;
        height: 34px;
        padding: 0 8px;
        border-color: #777;
        background: #fff;
        color: #333;
        font-size: 16px;
        line-height: 1;
        box-shadow: none;
    }

    .language-guide-icon,
    .language-guide-open {
        color: #555;
        font-size: 18px;
    }

    .passage-box {
        width: 100%;
        padding: 11px;
        font-size: 15px;
        line-height: 1.55;
    }

    .choices {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 0;
        padding-bottom: 8px;
    }

    .choices:has(.choice-media-option),
    .sub-question-choices {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .choice {
        grid-template-columns: 34px 1fr;
        min-height: 48px;
        padding: 9px 10px;
        font-size: 15px;
        line-height: 1.35;
        word-break: break-word;
    }

    .choice-media-option {
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: center;
    }

    .choice-media-option .choice-media {
        justify-items: start;
    }

    .choice-media img,
    .choice-media-option .choice-media img,
    .sub-question-choices .choice-media img {
        width: auto;
        max-width: min(260px, 100%);
        max-height: 170px;
    }

    .question-visual,
    .official-sample-image {
        display: grid;
        justify-items: center;
    }

    .question-visual img,
    .question-visual-scene img,
    .question-visual-document img,
    .official-sample-image img {
        width: auto;
        max-width: 100%;
        max-height: none;
    }

    /* tranh BỐI CẢNH câu Nghe (ai nói, ở đâu) giữ nhỏ trên điện thoại — tranh lựa chọn A/B/C mới là chính (29/9/2026) */
    .question-visual-context img {
        max-width: min(220px, 70%);
        max-height: 150px;
    }

    .sub-question-section {
        margin-bottom: 18px;
    }

    .sub-question-label {
        display: flex;
        gap: 6px;
        width: auto;
        padding: 9px 11px;
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 1.45;
    }

    .sub-question-prompt {
        font-size: 16px;
        line-height: 1.45;
    }

    .sub-question-choices.sub-question-choices-text {
        width: 100%;
    }

    .chat-dialog {
        gap: 12px;
    }

    .chat-row {
        gap: 9px;
    }

    .chat-who {
        width: 40px;
    }

    .chat-avatar {
        width: 36px;
        height: 36px;
    }

    .chat-bubble {
        max-width: calc(100% - 50px);
        padding: 10px 12px;
        font-size: 15px;
        line-height: 1.65;
    }

    .chat-bubble::before {
        top: 12px;
    }

    .dialog-blank {
        width: 5.5em;
    }

    .dialog-text-wrap {
        flex-direction: column;
        gap: 10px;
    }

    .dialog-text {
        font-size: 15px;
    }

    .choice-key {
        width: 24px;
        height: 24px;
    }

    .cbt-footer {
        min-height: 64px;
        padding: 8px 10px;
    }

    .footer-icons {
        gap: 7px;
        font-size: 24px;
    }

    .footer-icons span:last-child {
        display: none;
    }

    .footer-actions {
        flex: 1;
        justify-content: flex-end;
        gap: 8px;
        min-width: 0;
    }

    .flag-button {
        flex: 0 0 48px;
        width: 48px;
        min-height: 48px;
        font-size: 22px;
    }

    .nav-button {
        min-width: 104px;
        min-height: 48px;
        padding: 0 12px;
        font-size: 16px;
        white-space: nowrap;
    }

    .feedback-window {
        min-height: 100svh;
        background: #fff;
    }

    .feedback-header {
        height: auto;
        min-height: 48px;
        padding: 8px 10px;
        font-size: 15px;
    }

    .exit-test {
        width: 104px;
        height: 34px;
        font-size: 13px;
    }

    .feedback-main {
        padding: 12px 10px 20px;
        overflow-x: hidden;
    }

    .feedback-card {
        border-radius: 8px 8px 0 0;
        overflow: hidden;
    }

    .feedback-card h1,
    .feedback-score {
        min-width: 0;
    }

    .feedback-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
        font-size: 10px;
    }

    .feedback-table th {
        height: auto;
        padding: 8px 3px;
        line-height: 1.25;
    }

    .feedback-table th:nth-child(1) {
        width: 17%;
    }

    .feedback-table th:nth-child(2) {
        width: 27%;
    }

    .feedback-table th:nth-child(3) {
        width: 10%;
    }

    .feedback-table th:nth-child(4),
    .feedback-table th:nth-child(5) {
        width: 23%;
    }

    .feedback-category,
    .feedback-answer {
        padding: 8px 5px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .feedback-section {
        padding: 8px 3px;
        overflow-wrap: anywhere;
    }

    .feedback-result {
        font-size: 15px;
    }

    .feedback-table th span,
    .feedback-category span,
    .feedback-section span,
    .feedback-answer span,
    .feedback-answer small {
        font-size: 9px;
        line-height: 1.2;
    }

    .feedback-choice-media img {
        max-width: 66px;
        max-height: 58px;
    }
}

@media (max-width: 390px) {
    .cbt-header {
        grid-template-columns: minmax(0, 1fr) 96px;
        gap: 6px;
        padding: 7px;
    }

    .finish-section {
        font-size: 11px;
    }

    .prompt-box {
        font-size: 17px;
    }

    .choice {
        font-size: 14px;
    }

    .cbt-footer {
        padding: 7px 8px;
    }

    .footer-icons {
        display: none;
    }

    .footer-actions {
        justify-content: stretch;
    }

    .flag-button {
        flex-basis: 44px;
        min-height: 44px;
    }

    .nav-button {
        flex: 1;
        min-width: 0;
        min-height: 44px;
        padding: 0 8px;
        font-size: 14px;
    }

    .feedback-table {
        font-size: 9px;
    }

    .feedback-score {
        gap: 8px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .feedback-category,
    .feedback-answer {
        padding: 7px 4px;
    }

    .feedback-choice-media img {
        max-width: 56px;
        max-height: 50px;
    }
}

/* =====================================================================================================================
   TỐI ƯU ĐIỆN THOẠI cho giao diện thi (rà soát 30/9/2026)
   Đo trên khung 360×640 (điện thoại Android phổ biến, đã trừ thanh trình duyệt): thanh trên + thanh thí sinh + dãy số câu +
   thanh nút chiếm 256px (40% màn hình), vùng câu hỏi chỉ còn 384px → nay ~200px. Thêm: chạm để phóng to ảnh tài liệu,
   3 tranh lựa chọn phần Nghe 1 hàng, bố cục riêng khi xoay ngang, bảng đáp án thành thẻ. Máy tính (> 880px) KHÔNG đổi.
   ===================================================================================================================== */

/* Máy tính bảng dọc (721–880px): khung bài thi phủ đủ bề ngang (trước chừa dải xám 48px bên phải do max-width cũ),
   cao đúng phần nhìn thấy (100vh trên Android tính cả thanh địa chỉ → mất thanh nút dưới). */
@media (max-width: 880px) {
    .cbt-window {
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
    }

    /* 3 tranh lựa chọn phần Nghe vẫn 1 hàng trên máy tính bảng (ô tối thiểu 180px làm tranh C rớt xuống hàng 2). */
    .choices:has(.choice-media-option) {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
    .cbt-window {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        margin: 0;
    }

    /* Thanh trên 2 dòng gọn: [Question] [đồng hồ] [Finish] / [Section …] — nút Finish cao 2 dòng. Trước 86px, nay ~48px. */
    .cbt-header {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "q time finish"
            "sec sec finish";
        align-items: center;
        column-gap: 10px;
        row-gap: 1px;
        padding: 5px 8px;
        font-size: 12px;
    }

    .cbt-header-left {
        display: contents;
    }

    .cbt-header-left strong {
        grid-area: q;
        font-size: 14px;
    }

    .cbt-header-left span {
        grid-area: sec;
        color: #d7dde2;
    }

    .cbt-time {
        grid-area: time;
        display: flex;
        align-items: center;
        gap: 5px;
        order: 0;
    }

    /* Bỏ dòng chữ dài "Time remaining in this section" — còn biểu tượng đồng hồ + giờ, chữ to hơn. */
    .cbt-time > span:not(.clock-icon) {
        display: none;
    }

    .cbt-time strong {
        font-size: 16px;
        font-variant-numeric: tabular-nums;
    }

    .clock-icon {
        width: 16px;
        height: 16px;
        border-width: 2px;
        font-size: 6px;
    }

    .finish-section {
        grid-area: finish;
        width: auto;
        min-height: 38px;
        padding: 0 10px;
        font-size: 12px;
        line-height: 1.15;
    }

    /* Thanh thí sinh: ảnh nhận diện 36px (vẫn chạm để phóng to), bỏ dòng "Test: …". Trước 56px, nay 44px. */
    .cbt-meta {
        display: flex;
        padding: 4px 8px;
        font-size: 12px;
    }

    .cbt-meta-test {
        display: none;
    }

    .cbt-candidate {
        gap: 8px;
    }

    .cbt-portrait {
        width: 36px;
        height: 36px;
        border-width: 1.5px;
    }

    .cbt-portrait-ph {
        font-size: 16px;
    }

    /* Dãy số câu: bỏ tên phần dài bị cắt chữ ("Conversat… & Expressio…") — tên phần đã ở thanh trên — thay bằng "Part 2/4". */
    .cbt-rail {
        min-height: 0;
        max-height: none;
        padding: 4px 8px;
    }

    .rail-section-row.active {
        gap: 6px;
    }

    .rail-section-label > span {
        display: none;
    }

    .rail-part {
        display: grid;
        justify-items: center;
        min-width: 30px;
        color: #4f5962;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.05;
    }

    .rail-part small {
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .question-grid {
        gap: 6px;
        padding: 2px 12px 7px 2px;
    }

    .question-dot {
        width: 36px;
        height: 30px;
        font-size: 13px;
    }

    .question-dot.current::after {
        bottom: -6px;
        border-top-width: 6px;
    }

    .cbt-main {
        overscroll-behavior: contain;
    }

    .question-top {
        padding: 10px 12px 4px;
    }

    .prompt-box {
        margin-bottom: 8px;
    }

    .prompt-box .prompt-en {
        font-size: 16px;
        line-height: 1.4;
    }

    .language-buttons {
        margin: 0 0 8px;
    }

    .language-buttons button {
        height: 32px;
    }

    .question-bottom {
        padding-top: 10px;
    }

    .language-dialog header button {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    /* Tranh minh hoạ câu từ vựng không cao quá ~1/3 màn hình → lựa chọn lọt vào tầm nhìn; muốn xem to thì chạm tranh. */
    .question-visual-image img {
        max-height: min(240px, 34vh);
    }

    .question-visual-scene img {
        max-height: min(440px, 52vh);
    }

    /* Ảnh tài liệu phần Đọc (chữ trong ảnh rất nhỏ trên điện thoại): nhãn "Chạm để phóng to" — app.js openImageZoom.
       Nhãn nằm DƯỚI ảnh, không đè lên ảnh (đè lên thì che mất số liệu cần để trả lời, vd hàng xác suất mưa). */
    .question-visual-document::after,
    .official-sample-image::after {
        content: "Chạm để phóng to";
        justify-self: end;
        margin-top: 5px;
        padding: 4px 10px 4px 27px;
        border-radius: 999px;
        background: rgba(17, 17, 17, .74) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6M10 7v6M7 10h6'/%3E%3C/svg%3E") no-repeat 9px 50% / 13px 13px;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        pointer-events: none;
    }

    /* Câu Nghe có tranh bối cảnh: tranh nhỏ nằm CẠNH nút Play thay vì chiếm cả một khối cao ~220px bên dưới. */
    .passage-box.passage-audio-context {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 8px 10px;
    }

    .passage-audio-context .audio-wrap {
        flex: 0 1 auto;
        margin: 0;
    }

    .passage-audio-context .question-visual-context {
        flex: 0 1 auto;
        margin: 0;
    }

    .passage-audio-context .question-visual-context img {
        max-width: min(150px, 40vw);
        max-height: 96px;
    }

    .audio-play-button {
        min-height: 44px;
        padding: 0 14px;
        font-size: 15px;
        white-space: nowrap;
    }

    /* Lựa chọn chữ: vẫn cao ≥ 44px (dễ chạm) nhưng sát nhau hơn — câu Ngữ pháp 4 lựa chọn đỡ phải cuộn tìm D. */
    .choices,
    .sub-question-choices {
        gap: 10px;
    }

    .choice,
    .sub-question-choices .choice {
        min-height: 44px;
    }

    /* 3 tranh lựa chọn (phần Nghe): 1 hàng, chữ A/B/C trên tranh — đang nghe vẫn thấy đủ cả 3, không phải cuộn.
       Trước mỗi tranh chiếm 1 hàng cao ~190px → phải cuộn ~500px mới thấy tranh C. */
    .choices:has(.choice-media-option),
    .sub-question-choices.sub-question-choices-media {
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
        gap: 8px;
    }

    .choice-media-option,
    .sub-question-choices .choice-media-option {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-items: start;
        row-gap: 6px;
        min-height: 0;
        padding: 6px 5px 8px;
    }

    .choice-media-option .choice-media {
        justify-items: center;
    }

    .choice-media img,
    .choice-media-option .choice-media img,
    .sub-question-choices .choice-media img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 124px;
    }

    /* Thanh nút dưới: bỏ biểu tượng trang trí ⚙ ▦, 2 nút Previous / Next to đều nhau, cao 44px. */
    .cbt-footer {
        min-height: 0;
        padding: 6px 8px;
    }

    .footer-icons {
        display: none;
    }

    .footer-actions {
        flex: 1;
        justify-content: flex-end;
        gap: 8px;
    }

    .flag-button {
        flex: 0 0 48px;
        width: 48px;
        min-height: 44px;
    }

    .nav-button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        padding: 0 10px;
        font-size: 16px;
    }
}

@media (max-width: 390px) {
    .cbt-header {
        column-gap: 8px;
    }

    .finish-section {
        padding: 0 8px;
        font-size: 11px;
    }

    .nav-button {
        font-size: 15px;
    }
}

/* Điện thoại xoay ngang: chiều cao rất quý (~360px) → thanh trên + dãy số câu chung 1 hàng; thanh thí sinh + thanh nút
   chung 1 hàng dưới cùng. Vùng câu hỏi ~260px (trước ~200px, lại thêm thanh câu hỏi dọc 166px bên trái). */
@media (orientation: landscape) and (max-height: 500px) {
    .cbt-window {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .cbt-layout {
        display: contents;
    }

    .cbt-header {
        grid-column: 1;
        grid-row: 1;
    }

    .cbt-rail {
        grid-column: 2;
        grid-row: 1;
        align-content: center;
        border-bottom: 0;
        background: #000;
    }

    .rail-part {
        color: #d7dde2;
    }

    .cbt-main {
        grid-column: 1 / -1;
        grid-row: 2;
        border-top: 1px solid #d2d2d2;
    }

    .cbt-meta {
        grid-column: 1;
        grid-row: 3;
    }

    .cbt-footer {
        grid-column: 2;
        grid-row: 3;
    }

    .cbt-portrait {
        width: 32px;
        height: 32px;
    }
}

/* Phiếu kết quả trên điện thoại (chỉ màn hình — bản in giữ bố cục phiếu A4). */
@media screen and (max-width: 720px), screen and (orientation: landscape) and (max-height: 500px) {
    /* Ảnh thí sinh nhỏ lại để điểm số lên gần đầu trang (trước ảnh rộng cả màn hình, điểm ở cuối màn thứ 2). */
    .jr-photo {
        max-width: 200px;
    }

    /* Bảng "Xem đáp án & lời giải": 5 cột ép vào ~340px → chữ 9px, lời giải trong cột ~80px, bảng dài hơn 8 000px.
       Nay mỗi câu là 1 thẻ: số câu + dạng câu + ○/×, "Bạn chọn", "Đáp án đúng" + lời giải chữ 14px. */
    .jr-review .feedback-table-wrap {
        overflow: visible;
        padding: 10px 8px 2px;
        background: #f4f6f8;
    }

    .feedback-table,
    .feedback-table tbody,
    .feedback-table td {
        display: block;
        width: auto;
    }

    .feedback-table {
        min-width: 0;
        border: 0;
        font-size: 14px;
    }

    .feedback-table thead {
        display: none;
    }

    .feedback-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        margin: 0 0 10px;
        border: 1px solid #d5dbe0;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
    }

    .feedback-table td {
        border: 0;
    }

    .feedback-section,
    .feedback-answer {
        grid-column: 1 / -1;
    }

    /* Tên phần: dải tối ở đầu thẻ đầu tiên của mỗi phần. */
    .feedback-section {
        padding: 8px 12px;
        background: #1f2a33;
        color: #fff;
        text-align: left;
        font-size: 13px;
        line-height: 1.3;
    }

    .feedback-section strong,
    .feedback-section span {
        display: inline;
        margin: 0 5px 0 0;
        font-size: 13px;
    }

    .feedback-category {
        padding: 10px 6px 4px 12px;
        font-size: 13px;
        line-height: 1.35;
    }

    .feedback-category strong,
    .feedback-category span {
        display: inline;
        margin: 0 6px 0 0;
    }

    .feedback-category span {
        color: #555;
        font-size: 12px;
        font-weight: 600;
    }

    .feedback-qno {
        display: inline-block;
        margin-right: 8px;
        padding: 1px 7px;
        border-radius: 4px;
        background: #111;
        color: #fff;
        font-size: 12px;
    }

    .feedback-result {
        padding: 8px 14px 2px 6px;
        font-size: 24px;
        line-height: 1;
    }

    .feedback-answer {
        padding: 6px 12px 10px;
        font-size: 15px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .feedback-answer::before {
        display: block;
        margin-bottom: 2px;
        color: #5b6770;
        font-size: 12px;
        font-weight: 600;
    }

    .feedback-answer-yours::before {
        content: "Your answer · Bạn chọn";
    }

    .feedback-answer-correct {
        border-top: 1px dashed #d5dbe0;
        background: #f7fbf3;
    }

    .feedback-answer-correct::before {
        content: "Correct answer · Đáp án đúng";
    }

    .feedback-answer-key {
        display: inline;
        margin: 0 8px 0 0;
    }

    .feedback-answer span {
        font-size: 12px;
    }

    .feedback-answer small {
        margin-top: 6px;
        font-size: 14px;
        line-height: 1.55;
    }

    .feedback-choice-media img {
        max-width: 140px;
        max-height: 100px;
    }
}

/* Trình duyệt cũ không hiểu dvh (vd WebView đời cũ trong Zalo / Facebook): dùng chiều cao thật app.js đo được (--app-h),
   thiếu thì 100vh như cũ. Trình duyệt mới bỏ qua cả khối này. */
@supports not (height: 100dvh) {
    .cbt-window {
        height: calc(var(--app-h, 100vh) - 24px);
    }

    @media (max-width: 880px), (orientation: landscape) and (max-height: 500px) {
        .cbt-window {
            height: var(--app-h, 100vh);
        }
    }
}

.admin-body {
    height: auto;
    min-height: 100vh;
    background: #edf2f5;
    overflow-y: auto;
}

.admin-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 28px 18px 44px;
}

.admin-top {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.admin-top h1 {
    font-size: 28px;
    line-height: 1.2;
}

.admin-nav {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.admin-nav-groups {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-nav-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #f8fafc;
}

.admin-nav-group > span {
    padding: 0 6px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.admin-nav a,
.admin-row-actions a,
.admin-section-row a,
.admin-submit-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #0b5953;
    text-decoration: none;
    font-weight: 700;
}

.admin-nav a {
    min-height: 32px;
    padding: 0 10px;
    border-color: transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-nav a:hover {
    border-color: #b9d7d3;
    background: #fff;
}

.admin-nav a.is-active {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

/* ── Đầu trang quản trị: HAI KHU tách bạch (người dùng yêu cầu 7/10/2026) — Thi thử JFT-Basic (xanh ngọc) · Bài kiểm tra trung tâm
   (chàm). Thanh hệ thống trên cùng · 2 thẻ khu · menu con của khu đang mở · tên trang. Màu khu: biến --area* trên body.admin-area-*. ── */
.admin-body {
    --area: #0f766e;
    --area-dark: #0b5953;
    --area-soft: #e7f6f3;
    --area-line: #b9d7d3;
}

.admin-body.admin-area-center {
    --area: #4338ca;
    --area-dark: #3730a3;
    --area-soft: #eef2ff;
    --area-line: #c7d2fe;
    background: #eceef8;
}

.admin-body.admin-area-system {
    --area: #475467;
    --area-dark: #344054;
    --area-soft: #f2f4f7;
    --area-line: #d0d5dd;
}

/* Khu "Quản lý chung 5 web" (19/10/2026 — Truy cập, Điểm thi, Cảnh báo): xanh than, khác màu riêng của cả 5 web trên các trang này
   (chàm Bài kiểm tra, xanh ngọc JFT, đỏ Irodori, tím JLPT, nâu cam Định hướng). truy-cap.css / diem-thi.css dùng --area* nên tự đổi theo. */
.admin-body.admin-area-chung {
    --area: #1f4e79;
    --area-dark: #163a5c;
    --area-soft: #e8f0f8;
    --area-line: #bccde0;
    background: #e9eef4;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #d7dde5;
}

.admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #101828;
    text-decoration: none;
}

.admin-brand img {
    flex: none;
    width: 36px;
    height: 36px;
}

.admin-brand b {
    display: block;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
}

.admin-brand small {
    display: block;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.admin-topbar-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-topbar-tools .admin-current-user,
.admin-topbar-tools .admin-online-chip {
    min-height: 32px;
    border-color: #d0d5dd;
    background: #fff;
    color: #344054;
}

.admin-nav.admin-sys-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
}

.admin-nav.admin-sys-links a {
    min-height: 30px;
    padding: 0 8px;
    color: #475467;
    font-size: 13px;
}

.admin-nav.admin-sys-links a:hover {
    border-color: #d0d5dd;
    color: #101828;
}

.admin-nav.admin-sys-links a.is-active {
    border-color: #475467;
    background: #475467;
    color: #fff;
}

.admin-nav.admin-sys-links a.admin-sys-logout {
    color: #b42318;
}

.admin-areas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.admin-area-tab {
    --tab: #0f766e;
    --tab-soft: #e7f6f3;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 10px 14px;
    border: 2px solid #d7dde5;
    border-radius: 10px;
    background: #fff;
    color: #344054;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.admin-area-tab.area-center {
    --tab: #4338ca;
    --tab-soft: #eef2ff;
}

.admin-area-tab.area-chung {
    --tab: #1f4e79;
    --tab-soft: #e8f0f8;
}

.admin-area-tab.area-chung .admin-area-mark {
    font-size: 12.5px;
    line-height: 1.05;
    text-align: center;
}

.admin-area-tab:hover {
    border-color: var(--tab);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .08);
}

.admin-area-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--tab-soft);
    color: var(--tab);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .02em;
}

.admin-area-text {
    min-width: 0;
}

.admin-area-text b {
    display: block;
    color: #101828;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
}

.admin-area-text small {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 12.5px;
    font-weight: 700;
}

.admin-area-tab.is-active {
    border-color: var(--tab);
    background: var(--tab);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .16);
}

.admin-area-tab.is-active .admin-area-mark {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.admin-area-tab.is-active .admin-area-text b {
    color: #fff;
}

.admin-area-tab.is-active .admin-area-text small {
    color: rgba(255, 255, 255, .86);
}

.admin-area-tab .admin-nav-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    margin: 0;
}

.admin-nav.admin-area-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--area-line);
    border-left: 5px solid var(--area);
    border-radius: 8px;
    background: var(--area-soft);
}

.admin-nav.admin-area-menu a {
    color: var(--area-dark);
}

.admin-nav.admin-area-menu a:hover {
    border-color: var(--area-line);
    background: #fff;
}

.admin-nav.admin-area-menu a.is-active {
    border-color: var(--area);
    background: var(--area);
    color: #fff;
}

.admin-area-sep {
    width: 1px;
    height: 22px;
    margin: 0 6px;
    background: var(--area-line);
}

.admin-page-head {
    padding-top: 2px;
}

.admin-page-head .eyebrow,
.admin-top-guest .eyebrow {
    margin-bottom: 4px;
    color: var(--area);
    font-weight: 900;
}

/* Khu Bài kiểm tra trung tâm (chàm) + khu Quản lý chung 5 web (xanh than, 19/10/2026): nút, thẻ số liệu, viền thẻ theo màu khu — nhìn là
   biết đang ở khu nào. */
.admin-area-center .admin-primary,
.admin-area-chung .admin-primary {
    background: var(--area);
}

.admin-area-center .admin-primary:hover,
.admin-area-chung .admin-primary:hover {
    background: var(--area-dark);
}

.admin-area-center .admin-secondary,
.admin-area-chung .admin-secondary {
    border-color: var(--area);
    color: var(--area);
}

.admin-area-center .admin-secondary:hover,
.admin-area-chung .admin-secondary:hover {
    background: var(--area);
    color: #fff;
    box-shadow: 0 2px 8px rgba(67, 56, 202, .25);
}

.admin-area-chung .admin-secondary:hover {
    box-shadow: 0 2px 8px rgba(31, 78, 121, .25);
}

.admin-area-center .admin-neutral-link,
.admin-area-chung .admin-neutral-link {
    color: var(--area-dark);
}

.admin-area-center .admin-stats-summary a:hover,
.admin-area-center .admin-stats-summary a.is-current,
.admin-area-chung .admin-stats-summary a:hover,
.admin-area-chung .admin-stats-summary a.is-current {
    border-color: var(--area);
    background: var(--area-soft);
    box-shadow: inset 0 0 0 1px var(--area);
}

.admin-area-center .admin-stats-summary strong,
.admin-area-chung .admin-stats-summary strong {
    color: var(--area-dark);
}

.admin-area-jft .admin-card,
.admin-area-center .admin-card,
.admin-area-chung .admin-card {
    border-top: 3px solid var(--area);
}

@media (max-width: 820px) {
    .admin-topbar-tools,
    .admin-nav.admin-sys-links {
        justify-content: flex-start;
    }

    .admin-nav.admin-sys-links {
        display: flex;
    }

    .admin-nav.admin-sys-links a {
        width: auto;
        min-height: 34px;
    }

    .admin-areas {
        gap: 8px;
    }

    .admin-area-tab {
        min-height: 56px;
        gap: 8px;
        padding: 8px 10px;
    }

    .admin-area-mark {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .admin-area-tab.area-chung .admin-area-mark {
        font-size: 11px;
    }

    .admin-area-text b {
        font-size: 14px;
    }

    .admin-area-text small,
    .admin-area-sep {
        display: none;
    }

    .admin-nav.admin-area-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-nav.admin-area-menu a {
        width: 100%;
        min-height: 40px;
        white-space: normal;
        text-align: center;
    }
}

.admin-card {
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #fff;
}

.admin-card h2 {
    margin-bottom: 12px;
    font-size: 20px;
}

.admin-flash,
.admin-error {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 6px;
    background: #e7f5f2;
    color: #0b5953;
    font-weight: 700;
}

.admin-error {
    background: #fee4e2;
    color: #912018;
}

.admin-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.38);
}

.admin-alert-dialog {
    width: min(460px, 100%);
    padding: 20px;
    border: 2px solid #d92d20;
    border-radius: 10px;
    background: #fff5f5;
    color: #7a271a;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.28);
    text-align: center;
}

.admin-alert-dialog strong {
    display: block;
    margin-bottom: 8px;
    color: #b42318;
    font-size: 20px;
}

.admin-alert-dialog p {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
}

.admin-alert-dialog button {
    min-width: 92px;
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    background: #d92d20;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.admin-actions {
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.admin-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: #0f766e;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.admin-primary:hover {
    background: #0b5953;
}

/* Nút phụ (viền) — dùng cho "Tạo đề tự động", "Về danh sách đề"… */
.admin-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1.5px solid #0f766e;
    border-radius: 6px;
    background: #fff;
    color: #0f766e;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.admin-secondary:hover {
    background: #0f766e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(15, 118, 110, .25);
}

.admin-primary svg,
.admin-secondary svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.admin-form {
    display: grid;
    gap: 14px;
}

.admin-form label {
    display: grid;
    gap: 6px;
    color: #344054;
    font-weight: 700;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font: inherit;
    font-weight: 400;
}

.admin-form textarea {
    resize: vertical;
    line-height: 1.5;
}

.admin-form input[type="file"] {
    width: min(100%, 280px);
    max-width: 100%;
}

.admin-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-login {
    width: min(440px, 100%);
    max-width: 440px;
    margin: 0;
    padding: 28px;
    border: 1px solid #d6e0e7;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .08);
}

.admin-login-home-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    justify-self: start;
    margin-bottom: 14px;
    padding: 0 12px;
    border: 1px solid #cfd8e3;
    border-radius: 7px;
    background: #fff;
    color: #0b5953;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.admin-login-home-link:hover,
.admin-login-home-link:focus-visible {
    border-color: #0b776f;
    background: #eef8f6;
    outline: none;
}

.admin-centered-panel {
    display: grid;
    place-items: start center;
    width: 100%;
}

.admin-login-panel {
    display: grid;
    justify-items: center;
    align-items: center;
    min-height: calc(100vh - 160px);
    width: min(440px, 100%);
    margin: 0 auto;
}

.admin-login-heading {
    display: grid;
    gap: 6px;
    margin-bottom: 6px;
    text-align: center;
}

.admin-login-heading h1 {
    font-size: 28px;
    line-height: 1.15;
}

/* Logo + tên công ty căn giữa đầu thẻ đăng nhập (6/11/2026 — người dùng: "thêm logo công ty vô nhìn cho chuyên nghiệp … căn giữa bên
   trên"). Chữ nhỏ "Học tập trực tuyến LOD": màu đậm của khu (trước #9df0e7 của .eyebrow — màu cho nền tối, trên thẻ trắng tương phản
   1,3:1 nên trông mờ; nay #3730a3 ≈ 10:1). */
.admin-login-brand {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-login-brand img {
    display: block;
    width: 72px;
    height: 72px;
}

.admin-login-company {
    margin: 0;
    color: #1d2939;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.admin-login-company span {
    display: block;
}

.admin-login-heading .eyebrow {
    color: var(--area-dark, #3730a3);
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 380px) {
    .admin-login-brand img {
        width: 64px;
        height: 64px;
    }

    .admin-login-company {
        font-size: 12.5px;
        letter-spacing: 0;
    }
}

.admin-login .admin-primary {
    min-height: 42px;
    margin-top: 4px;
}

.password-field {
    position: relative;
    display: grid;
    align-items: center;
}

.admin-form .password-field input {
    padding-right: 44px;
}

.password-field button {
    position: absolute;
    top: 4px;
    right: 8px;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #475467;
    cursor: pointer;
}

.password-field button:hover {
    background: #eef4f7;
}

.admin-list {
    display: grid;
    gap: 12px;
}

.admin-exam-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}

.admin-exam-row p,
.admin-user-row p {
    margin: 8px 0;
    color: #667085;
    line-height: 1.45;
}

.admin-user-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}

.admin-row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-row-actions form,
.admin-delete-form {
    margin: 0;
}

.admin-row-actions button,
.admin-delete-form button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #fda29b;
    border-radius: 6px;
    background: #fff;
    color: #b42318;
    font-weight: 700;
    cursor: pointer;
}

.admin-row-actions .admin-neutral-button {
    border-color: #b8c4d0;
    color: #344054;
}

.admin-check-row {
    display: flex;
    gap: 10px;
    align-items: center;
    width: fit-content;
    color: #344054;
    font-weight: 700;
}

.admin-check-row input {
    width: 18px;
    height: 18px;
    accent-color: #0b776f;
}

.admin-status {
    display: inline-flex;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.admin-exam-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
}

.admin-edit-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    background: #f8fafc;
    color: #475467;
    font-size: 13px;
    font-weight: 800;
}

.admin-status.is-public {
    background: #dcfae6;
    color: #067647;
}

.admin-status.is-hidden {
    background: #f2f4f7;
    color: #475467;
}

.admin-trash-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    background: #fff;
}

.admin-trash-row h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.admin-trash-row p {
    margin: 0 0 4px;
    color: #475467;
    font-size: 13px;
    font-weight: 700;
}

.admin-trash-row small {
    color: #667085;
    line-height: 1.4;
}

.admin-trash-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-trash-actions form {
    margin: 0;
}

.admin-trash-actions button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #fda29b;
    border-radius: 6px;
    background: #fff;
    color: #b42318;
    font-weight: 700;
    cursor: pointer;
}

.admin-trash-actions .admin-neutral-button {
    border-color: #b8c4d0;
    color: #344054;
}

.admin-question-list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    background: #fff;
}

.admin-question-list-heading {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.admin-question-list-heading span,
.admin-question-list-row small {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.admin-question-list-row p {
    margin: 6px 0 4px;
    line-height: 1.45;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-pagination-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 12px 0;
    color: #475467;
    font-size: 13px;
    font-weight: 800;
}

.admin-pagination-bottom {
    margin-bottom: 0;
}

.admin-pagination-bar form,
.admin-pagination-bar label {
    display: flex;
    gap: 6px;
    align-items: center;
}

.admin-pagination-bar select {
    min-height: 32px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font: inherit;
}

.admin-pagination {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #0b5953;
    font-weight: 800;
    text-decoration: none;
}

.admin-pagination a.is-current {
    border-color: #0b776f;
    background: #0b776f;
    color: #fff;
}

.admin-pagination a.is-disabled {
    pointer-events: none;
    opacity: 0.45;
}

.admin-question-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1080px;
}

.admin-exam-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 920px;
}

.admin-stats-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
}

.admin-stats-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.admin-stats-summary a {
    display: block;
    padding: 16px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.admin-stats-summary a:hover,
.admin-stats-summary a.is-current {
    border-color: #0b776f;
    background: #eef8f6;
    box-shadow: inset 0 0 0 1px #0b776f;
}

.admin-stats-summary span {
    display: block;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

.admin-stats-summary strong {
    display: block;
    margin-top: 6px;
    color: #0b5953;
    font-size: 28px;
    line-height: 1;
}

.admin-question-table th,
.admin-question-table td,
.admin-exam-table th,
.admin-exam-table td,
.admin-stats-table th,
.admin-stats-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #edf1f5;
    text-align: left;
    vertical-align: middle;
}

.admin-question-table th,
.admin-exam-table th,
.admin-stats-table th {
    color: #344054;
    font-size: 13px;
    font-weight: 900;
    background: #f8fafc;
}

.admin-question-table td,
.admin-exam-table td,
.admin-stats-table td {
    color: #182230;
    font-size: 13px;
    line-height: 1.45;
}

.admin-question-table tbody tr:hover,
.admin-exam-table tbody tr:hover,
.admin-stats-table tbody tr:hover {
    background: #fbfcfe;
}

.admin-question-table tbody tr.admin-shared-group-row {
    background: #fff7df;
    box-shadow: inset 4px 0 0 #f0a400;
}

.admin-question-table tbody tr.admin-shared-group-row:hover {
    background: #fff1c4;
}

.admin-question-table tbody tr.admin-shared-group-row .admin-question-actions-cell {
    background: #fff7df;
}

.admin-group-badge {
    display: inline-flex;
    align-items: center;
    margin: 0 0 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f0a400;
    color: #111;
    font-size: 12px;
    font-weight: 800;
}

.admin-exam-title-cell {
    width: 30%;
}

.admin-exam-table td,
.admin-exam-table th {
    overflow-wrap: anywhere;
}

.admin-exam-table code {
    white-space: normal;
}

.admin-stats-table code {
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-filter-card {
    padding-bottom: 18px;
}

.admin-stats-filter {
    display: grid;
    grid-template-columns: minmax(160px, 1.1fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(100px, .6fr) auto auto;
    gap: 12px;
    align-items: end;
}

.admin-stats-filter label {
    display: grid;
    gap: 6px;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}

.admin-stats-filter input,
.admin-stats-filter select {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #182230;
    font: inherit;
}

.admin-neutral-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #0b5953;
    font-weight: 900;
    text-decoration: none;
}

.admin-stats-table small {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.admin-user-agent {
    max-width: 300px;
    color: #475467;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.admin-exam-title-cell small {
    display: block;
    margin-top: 5px;
    color: #667085;
    line-height: 1.4;
}

.admin-exam-actions-head,
.admin-exam-actions-cell {
    width: 108px;
    min-width: 108px;
}

.admin-table-actions {
    display: grid;
    gap: 6px;
}

.admin-table-actions form {
    margin: 0;
}

.admin-table-actions a,
.admin-table-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #0b5953;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.admin-table-actions a:hover,
.admin-table-actions button:hover {
    border-color: #0b776f;
    background: #eef8f6;
}

/* Nhãn dài (vd "Đưa ra khỏi Đề gốc") xuống dòng trong ô, không tràn ra ngoài nút */
.admin-table-actions .admin-wrap-button {
    padding: 4px 8px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.admin-table-actions .admin-danger-button {
    border-color: #fda29b;
    color: #b42318;
}

.admin-table-actions .admin-danger-button:hover {
    border-color: #d92d20;
    background: #fff5f5;
}

.admin-question-exam {
    min-width: 190px;
    max-width: 240px;
    word-break: normal;
    overflow-wrap: normal;
}

.admin-question-table-prompt {
    min-width: 260px;
    color: #101828;
    font-size: 14px;
}

.admin-question-actions-head,
.admin-question-actions-cell {
    width: 96px;
    min-width: 96px;
}

.admin-question-table .admin-question-actions-head,
.admin-question-table .admin-question-actions-cell {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
    box-shadow: -8px 0 12px rgba(16, 24, 40, 0.04);
}

.admin-question-table .admin-question-actions-head {
    z-index: 2;
    background: #f8fafc;
}

.admin-mini-badge,
.admin-type-pill,
.admin-user-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-mini-badge {
    padding: 3px 8px;
    background: #eef4f7;
    color: #344054;
    white-space: normal;
}

.admin-type-pill {
    padding: 3px 8px;
    background: #e6f4f1;
    color: #0b5953;
}

.admin-user-chip {
    padding: 2px 7px;
    background: #f2f4f7;
    color: #344054;
}

.admin-current-user {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #b9d7d3;
    border-radius: 7px;
    background: #e7f6f3;
    color: #0b5953;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-current-user strong {
    color: #063b36;
}

.admin-current-user em {
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-style: normal;
    font-size: 12px;
}

/* ── Chip "Đang online" trên thanh quản trị ── */
.admin-online-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #b9d7d3;
    border-radius: 7px;
    background: #e7f6f3;
    color: #0b5953;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.admin-online-chip:hover { background: #d3efe9; border-color: #0f766e; }
.admin-online-chip strong { color: #063b36; }
.admin-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    flex-shrink: 0;
}

/* ── Modal chi tiết người đang online ── */
.online-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.online-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); }
.online-modal-box { position: relative; background: #fff; border-radius: 12px; max-width: 1200px; width: 100%; /* 3/10/2026: 960 → 1200 để hiện đủ cột "Hoạt động cuối" */ max-height: 85vh; box-shadow: 0 24px 64px rgba(0,0,0,.22); overflow: hidden; display: flex; flex-direction: column; }
.online-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.online-modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #1e293b; }
.online-modal-close { background: #e2e8f0; border: none; font-size: 1.4rem; color: #475569; cursor: pointer; min-width: 40px; min-height: 40px; line-height: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.online-modal-close:hover { background: #cbd5e1; color: #1e293b; }
.online-modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.online-modal-loading, .online-modal-empty { color: #64748b; text-align: center; padding: 24px; }
.online-modal-table-wrap { overflow-x: auto; }
.online-modal-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.online-modal-table th, .online-modal-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.online-modal-table th { background: #f1f5f9; font-weight: 600; color: #475569; }
.online-modal-table td { color: #334155; }
.online-modal-table tbody tr:hover { background: #f8fafc; }
.om-person { display: flex; align-items: center; gap: 8px; }
.om-person-name { font-weight: 600; }
.om-portrait { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: #fff; text-transform: uppercase; }
.om-portrait-fallback.om-admin { background: #0f766e; }
.om-portrait-fallback.om-guest { background: #64748b; }

.admin-muted {
    margin-top: -4px;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.admin-sample-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.admin-question-table tbody tr.admin-sample-question-row {
    background: #f8fbff;
    box-shadow: inset 4px 0 0 #2563eb;
}

.admin-question-table tbody tr.admin-sample-question-row:hover {
    background: #eff6ff;
}

.admin-question-table tbody tr.admin-sample-question-row .admin-question-actions-cell {
    background: #f8fbff;
}

.admin-section-list {
    display: grid;
    gap: 8px;
}

.admin-section-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    background: #f8fafc;
}

.admin-section-row div {
    display: grid;
    gap: 3px;
}

.admin-section-row span,
.admin-question-row > span:nth-child(2) {
    color: #667085;
    font-size: 13px;
}

.admin-question-row {
    display: grid;
    grid-template-columns: 70px 170px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #edf1f5;
}

.admin-question-row.admin-shared-group-row {
    border-left: 5px solid #f0a400;
    background: #fff7df;
}

.admin-question-row.admin-shared-group-row:hover {
    background: #fff1c4;
}

.admin-question-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #0b5953;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.admin-question-row a:hover {
    border-color: #0b776f;
    background: #eef8f6;
}

.admin-question-summary {
    display: grid;
    gap: 4px;
}

.admin-question-summary small {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.admin-question-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.admin-question-actions form {
    margin: 0;
}

.admin-question-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #fda29b;
    border-radius: 6px;
    background: #fff;
    color: #b42318;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.admin-question-actions button:hover {
    border-color: #d92d20;
    background: #fff5f5;
}

.admin-question-table .admin-question-actions {
    gap: 6px;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
}

.admin-question-table .admin-question-actions a,
.admin-question-table .admin-question-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #0b5953;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.admin-question-table .admin-question-actions a:hover,
.admin-question-table .admin-question-actions button:hover {
    border-color: #0b776f;
    background: #eef8f6;
}

.admin-question-table .admin-question-actions .admin-danger-button {
    border-color: #fda29b;
    color: #b42318;
}

.admin-question-table .admin-question-actions .admin-danger-button:hover {
    border-color: #d92d20;
    background: #fff5f5;
}

.admin-fieldset {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
}

.admin-optional-block {
    background: #fbfcfe;
}

.admin-optional-block summary {
    cursor: pointer;
    font-weight: 700;
    color: #1d2939;
}

.admin-optional-block[open] summary {
    margin-bottom: 10px;
}

.admin-fieldset legend {
    padding: 0 6px;
    font-weight: 700;
}

.admin-visual-preview {
    position: relative;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    background: #fff;
}

.admin-visual-preview img {
    display: block;
    max-width: min(360px, 100%);
    max-height: 240px;
    object-fit: contain;
}

.admin-visual-preview figcaption {
    color: #667085;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.admin-audio-preview {
    display: grid;
    gap: 6px;
    width: min(520px, 100%);
}

.admin-audio-preview audio {
    width: 100%;
}

.admin-audio-preview small {
    color: #667085;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.admin-audio-fieldset {
    display: block;
    padding: 8px 14px 10px;
}

.admin-audio-fieldset legend {
    margin-bottom: 6px;
}

.admin-audio-tools {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-audio-tools label {
    width: auto;
    min-width: 130px;
}

.admin-inline-secondary,
.admin-inline-danger {
    justify-self: start;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.admin-inline-secondary {
    border: 1px solid #cfd8e3;
    color: #344054;
}

.admin-inline-danger {
    border: 1px solid #fda29b;
    color: #b42318;
}

.admin-icon-danger {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid #fda29b;
    border-radius: 50%;
    background: #fff;
    color: #b42318;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.admin-icon-danger:hover {
    background: #fee4e2;
}

.admin-choice-preview {
    position: relative;
    display: inline-grid;
    justify-items: start;
    margin: 0;
}

.admin-choice-preview img {
    display: block;
    max-width: 160px;
    max-height: 110px;
    border: 1px solid #d7dde5;
    border-radius: 4px;
    object-fit: contain;
}

.admin-choice-edit {
    display: grid;
    grid-template-columns: 34px minmax(560px, 1fr) minmax(180px, 240px);
    gap: 12px;
    align-items: end;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f5;
}

.admin-choice-edit .tox-tinymce {
    width: 100%;
}

.admin-choice-media-tools {
    display: grid;
    gap: 8px;
    align-self: start;
}

.admin-choice-edit:last-child {
    border-bottom: 0;
}

.admin-form-note {
    padding: 10px 12px;
    border-radius: 6px;
    background: #f1f5f9;
}

.admin-form-note span {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.admin-question-jump {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(320px, 1.2fr);
    gap: 12px 18px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #b9d7d3;
    border-radius: 8px;
    background: linear-gradient(180deg, #f4fbfa 0%, #eef8f6 100%);
}

.admin-question-jump-head {
    display: grid;
    gap: 4px;
}

.admin-question-jump-head div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

.admin-question-jump-head span {
    color: #0b5953;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-question-jump-head strong {
    color: #101828;
    font-size: 18px;
    line-height: 1.2;
}

.admin-question-jump-head small {
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.admin-question-jump-actions {
    display: grid;
    grid-template-columns: 92px minmax(140px, 1fr) 92px;
    gap: 8px;
    align-items: center;
}

.admin-question-jump-step,
.admin-question-jump-grid a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid #b9d7d3;
    border-radius: 7px;
    background: #fff;
    color: #0b5953;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.admin-question-jump-step:hover,
.admin-question-jump-grid a:hover {
    border-color: #0f766e;
    background: #e7f6f3;
}

.admin-question-jump-step.is-disabled {
    color: #98a2b3;
    border-color: #d7dde5;
    background: #f2f4f7;
    box-shadow: none;
}

.admin-question-jump-actions select {
    width: 100%;
    min-height: 36px;
    border-color: #b9d7d3;
    border-radius: 7px;
    background-color: #fff;
    color: #1d2939;
    font-size: 13px;
    font-weight: 800;
}

.admin-question-jump-grid {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
}

.admin-question-jump-grid a {
    width: 34px;
    min-height: 34px;
    padding: 0;
}

.admin-question-jump-grid a.is-grouped {
    border-color: var(--group-border);
    background: var(--group-bg);
    color: var(--group-text);
    box-shadow: inset 0 -3px 0 var(--group-border), 0 1px 2px rgba(16, 24, 40, .06);
}

.admin-question-jump-grid a.is-grouped:hover {
    filter: saturate(1.08);
}

.admin-question-jump-grid a.is-current {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.admin-question-jump-grid a.is-current.is-grouped {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
    box-shadow: inset 0 -4px 0 var(--group-border), 0 2px 4px rgba(16, 24, 40, .14);
}

.admin-question-jump-section {
    display: grid;
    grid-template-columns: minmax(170px, 240px) 1fr;
    gap: 8px 12px;
    align-items: start;
}

.admin-question-jump-section > span {
    color: #344054;
    font-size: 12px;
    font-weight: 900;
    line-height: 34px;
}

.admin-question-jump-section > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-group-note {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #b2ddff;
    border-radius: 6px;
    background: #eff8ff;
    color: #182230;
}

.admin-group-note span {
    color: #475467;
    font-size: 13px;
    font-weight: 700;
}

.admin-group-note div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-group-note a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #84caff;
    border-radius: 999px;
    background: #fff;
    color: #0b5953;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.admin-group-note a.is-current {
    border-color: #0b776f;
    background: #d9f2ee;
}

.admin-group-fields {
    background: #fbfcfe;
}

.admin-group-fields small {
    color: #667085;
    font-size: 13px;
    line-height: 1.4;
}

.admin-group-fields small code {
    font-size: 12.5px;
}

/* Kiểm nhóm "1 tài liệu – 2 câu (1)(2)" ở trang Sửa câu hỏi */
.admin-group-warnings,
.admin-group-ok {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
}

.admin-group-warnings {
    border: 1px solid #f3c3b9;
    background: #fff4f2;
    color: #8a2a1a;
}

.admin-group-warnings ul {
    margin: 4px 0 0 18px;
    padding: 0;
}

.admin-group-ok {
    border: 1px solid #cdeae5;
    background: #eef8f6;
    color: #0b5953;
}

.admin-vietnamese-field {
    padding: 12px;
    border: 1px solid #b9d7d3;
    border-radius: 8px;
    background: #f4fbfa;
}

.admin-vietnamese-field small {
    color: #667085;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* Hướng dẫn tiếng Anh (prompt_en) — ô xanh đầu câu + dòng English của popup Your Language 1. */
.admin-english-field {
    padding: 12px;
    border: 1px solid #b8cfe6;
    border-radius: 8px;
    background: #f3f8fd;
}

.admin-english-field textarea {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 15px;
}

.admin-english-field small {
    color: #667085;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.admin-submit-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-submit-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #fda29b;
    border-radius: 6px;
    background: #fff;
    color: #b42318;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.admin-submit-danger:hover {
    border-color: #d92d20;
    background: #fff5f5;
}

.admin-delete-form {
    display: none;
}

@media (max-width: 820px) {
    .admin-shell {
        padding: 18px 10px 32px;
    }

    .admin-top,
    .admin-exam-row {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 12px;
    }

    .admin-nav,
    .admin-current-user {
        justify-items: stretch;
        justify-self: stretch;
    }

    .admin-nav-groups {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .admin-nav-group {
        display: grid;
        grid-template-columns: 82px repeat(auto-fit, minmax(112px, 1fr));
        align-items: center;
        width: 100%;
    }

    .admin-nav a {
        min-height: 38px;
    }

    .admin-top h1 {
        font-size: 24px;
    }

    .admin-card {
        padding: 12px;
        border-radius: 6px;
    }

    .admin-grid-2,
    .admin-question-row,
    .admin-choice-edit {
        grid-template-columns: 1fr;
    }

    .admin-stats-summary {
        grid-template-columns: 1fr 1fr;
    }

    .admin-stats-filter {
        grid-template-columns: 1fr;
    }

    .admin-section-row {
        grid-template-columns: 1fr;
    }

    .admin-nav a,
    .admin-row-actions a,
    .admin-section-row a,
    .admin-submit-row a,
    .admin-primary,
    .admin-submit-danger,
    .admin-delete-form button {
        width: 100%;
        min-height: 44px;
    }

    .admin-submit-row,
    .admin-nav,
    .admin-row-actions,
    .admin-question-jump-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-question-jump {
        grid-template-columns: 1fr;
    }

    .admin-question-jump-section {
        grid-template-columns: 1fr;
    }

    .admin-question-jump-section > span {
        line-height: 1.3;
    }

    .admin-fieldset {
        padding: 12px;
    }

    .admin-form input[type="file"] {
        padding: 8px;
        font-size: 14px;
    }

    .admin-choice-preview img,
    .admin-visual-preview img {
        max-width: 100%;
        max-height: 180px;
    }

    .admin-delete-form {
        padding: 0 10px 24px;
    }
}

/* Bảng "Danh sách đề thi" → dạng thẻ trên điện thoại (chống dồn chữ theo cột) */
@media (max-width: 640px) {
    .admin-table-wrap {
        overflow-x: visible;
    }

    .admin-exam-table {
        min-width: 0;
        table-layout: auto;
    }

    .admin-exam-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .admin-exam-table,
    .admin-exam-table tbody,
    .admin-exam-table tr,
    .admin-exam-table td {
        display: block;
        width: 100%;
    }

    .admin-exam-table tr {
        margin-bottom: 14px;
        padding: 4px 14px 8px;
        border: 1px solid #e0e6ee;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

    .admin-exam-table tbody tr:hover {
        background: #fff;
    }

    .admin-exam-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 0;
        border-bottom: 1px solid #f1f5f9;
        text-align: right;
    }

    .admin-exam-table td:last-child {
        border-bottom: none;
    }

    .admin-exam-table td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        color: #475467;
        font-size: 12px;
        font-weight: 800;
        text-align: left;
    }

    .admin-exam-table td.admin-exam-title-cell,
    .admin-exam-table td.admin-exam-actions-cell {
        display: block;
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .admin-exam-table td.admin-exam-title-cell::before,
    .admin-exam-table td.admin-exam-actions-cell::before {
        display: block;
        margin-bottom: 6px;
        flex: none;
    }

    .admin-table-actions {
        grid-template-columns: 1fr 1fr;
    }

    .admin-table-actions a,
    .admin-table-actions button {
        min-height: 40px;
    }
}
/* Guest entry form */
.guest-entry-body {
    min-height: 100vh;
    margin: 0;
    background: #eef5f8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.guest-entry-shell {
    width: min(100%, 480px);
}

.guest-entry-card {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
}

.guest-home-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 14px;
    padding: 0 12px;
    border: 1px solid #cfd8e3;
    border-radius: 7px;
    background: #fff;
    color: #0b5953;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}

.guest-home-link:hover,
.guest-home-link:focus-visible {
    border-color: #0b776f;
    background: #eef8f6;
    outline: none;
}

.guest-entry-head {
    margin-bottom: 20px;
}

.guest-entry-head h1 {
    margin: 4px 0 0;
    font-size: 1.35rem;
    line-height: 1.25;
}

.guest-exam-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}

.guest-exam-info div {
    border: 1px solid #d7e0eb;
    border-radius: 8px;
    padding: 10px 12px;
    background: #f8fafc;
}

.guest-exam-info dt {
    margin: 0 0 4px;
    color: #64748b;
    font-size: .78rem;
}

.guest-exam-info dd {
    margin: 0;
    color: #0f172a;
    font-weight: 700;
}

.guest-form-group {
    margin-bottom: 16px;
}

.guest-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: .88rem;
    font-weight: 700;
}

.guest-form-group label span {
    color: #d32f2f;
}

.guest-form-group label em {
    color: #94a3b8;
    font-style: normal;
    font-weight: 500;
}

.guest-form-group input,
.class-combo-input {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    color: #334155;
    background: #fff;
    font: inherit;
    font-size: .96rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.guest-form-group input:focus,
.class-combo-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.class-combo-input {
    text-transform: uppercase;
}

.class-combo-wrap {
    position: relative;
}

.class-combo-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    display: none;
    max-height: min(240px, 42vh);
    overflow-y: auto;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}

.class-combo-list.open {
    display: block;
}

.class-combo-item,
.class-combo-msg {
    padding: 10px 14px;
    color: #334155;
    font-size: .92rem;
}

.class-combo-item {
    cursor: pointer;
}

.class-combo-item:hover,
.class-combo-item.class-combo-active {
    background: #eff6ff;
}

.class-combo-msg {
    color: #64748b;
}

.guest-start-button {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #244bbf 0%, #0f5a84 100%);
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 7px 20px rgba(15, 90, 132, .25);
}

.guest-start-button:hover {
    filter: brightness(1.04);
}

.guest-form-error {
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: .9rem;
}

.guest-field-error {
    display: none;
    margin-top: 6px;
    color: #d32f2f;
    font-size: .82rem;
}

.guest-field-error.show {
    display: block;
}

.guest-form-group input.input-invalid,
.class-combo-input.input-invalid {
    border-color: #d32f2f;
    background: #fff8f8;
}

.guest-class-notice {
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: .78rem;
    line-height: 1.45;
}

@media (max-width: 560px) {
    .guest-entry-body {
        align-items: flex-start;
        padding: 16px;
    }

    .guest-entry-card {
        padding: 22px;
    }
}

/* ---------- Bảng vinh danh (trang chủ) ---------- */
.honor-board {
    margin: 0 0 26px;
    border: 1px solid #e4e8ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    overflow: hidden;
}

.honor-board-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7 60%, #fde68a);
    border-bottom: 1px solid #fce9b0;
}

.honor-board-ic {
    font-size: 1.7rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(180, 120, 0, 0.3));
}

.honor-board-heading h2 {
    font-size: 17px;
    font-weight: 800;
    color: #7c2d12;
}

.honor-board-heading p {
    margin: 3px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #92400e;
}

.honor-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.honor-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 12px;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.honor-row + .honor-row {
    border-top: 1px solid #f1f5f9;
}

.honor-row:hover {
    background: #f6faf9;
}

.honor-row.is-first {
    background: linear-gradient(135deg, #fffdf5, #fefce8);
}

.honor-rank {
    flex: 0 0 30px;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1;
}

.honor-rank[data-rank="4"],
.honor-rank[data-rank="5"] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #94a3b8;
}

.honor-avatar {
    position: relative;
    overflow: hidden;
    flex: 0 0 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, #12857b, #0b5f58);
    box-shadow: 0 3px 10px rgba(11, 95, 88, 0.3);
}

.honor-row.is-first .honor-avatar {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.4);
    border: 2px solid #fbbf24;
}

.honor-ini {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.honor-photo {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #e2e8f0;
}

.honor-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.honor-name {
    font-weight: 700;
    font-size: 14.5px;
    color: #101828;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.honor-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    color: #667085;
}

.honor-meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.honor-score {
    flex: 0 0 auto;
    text-align: right;
    line-height: 1.15;
}

.hs-pct {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #067647;
}

.hs-detail {
    font-size: 11.5px;
    font-weight: 600;
    color: #667085;
}

@media (max-width: 640px) {
    .honor-board-head {
        padding: 13px 15px;
    }

    .honor-avatar {
        flex: 0 0 46px;
        height: 46px;
        font-size: 0.95rem;
    }

    .honor-exam {
        display: none;
    }

    .honor-name {
        font-size: 13.5px;
    }

    .hs-pct {
        font-size: 1.05rem;
    }
}

/* ---------- Bài kiểm tra của trung tâm (trang chủ, 7/10/2026): dưới Bảng vinh danh, trên lưới đề JFT-Basic ----------
   Đề exam_kind = center (vd bộ SUNBELX: 9 đề theo bài + 5 đề cuối khóa). Tông xanh dương (khác xanh ngọc của đề JFT),
   đề cuối khóa cam. Ô dùng class riêng .ct-tile → ô tìm đề (chỉ lọc .exam-tile) không ẩn mất các bài này. */
.ct-board {
    margin: 0 0 30px;
    border: 1px solid #c7d7fe;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(29, 78, 216, 0.1);
    overflow: hidden;
}

.ct-board-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    color: #fff;
}

.ct-board-ic {
    font-size: 1.7rem;
    line-height: 1;
}

.ct-board-heading h2 {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.ct-board-heading p {
    margin: 3px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
}

.ct-group-title {
    margin: 16px 20px 10px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #1e40af;
}

.ct-group-title.is-final {
    color: #c2410c;
}

/* Mỗi NHÓM (công ty / lớp — exams.center_group, vd SUNBELX, BESIA) 1 khối; trong nhóm mới chia theo bài / cuối khóa */
.ct-series + .ct-series {
    border-top: 1px solid #e0e7ff;
}

.ct-series-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 16px 20px 4px;
    color: #1e3a8a;
    font-size: 17px;
    font-weight: 800;
}

.ct-series-title small {
    color: #667085;
    font-size: 12.5px;
    font-weight: 700;
}

.ct-series-title + .ct-grid {
    margin-top: 10px;
}

.ct-series .ct-group-title {
    margin-top: 10px;
}

.ct-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    padding: 0 16px 18px;
}

.ct-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    background: #f8faff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.ct-tile:hover,
.ct-tile:focus-visible {
    transform: translateY(-2px);
    border-color: #1d4ed8;
    background: #fff;
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.14);
    outline: none;
}

.ct-tile-num {
    flex: 0 0 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1e40af);
}

.ct-tile-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ct-tile-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #101828;
}

.ct-tile-desc {
    font-size: 12.5px;
    line-height: 1.4;
    color: #475467;
}

.ct-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #667085;
}

.ct-tile-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ct-tile-meta .chip-ic {
    width: 13px;
    height: 13px;
    color: #1d4ed8;
}

.ct-tile-go {
    flex: 0 0 auto;
    color: #1d4ed8;
}

.ct-tile:hover .exam-tile-arrow,
.ct-tile:focus-visible .exam-tile-arrow {
    transform: translateX(3px);
}

.ct-tile.is-final {
    border-color: #fed7aa;
    background: #fffaf5;
}

.ct-tile.is-final:hover,
.ct-tile.is-final:focus-visible {
    border-color: #ea580c;
    background: #fff;
    box-shadow: 0 10px 22px rgba(234, 88, 12, 0.16);
}

.ct-tile.is-final .ct-tile-num {
    background: linear-gradient(135deg, #f97316, #c2410c);
}

.ct-tile.is-final .ct-tile-meta .chip-ic,
.ct-tile.is-final .ct-tile-go {
    color: #c2410c;
}

/* Màn làm bài của Bài kiểm tra trung tâm dạng NHÌN TRANH CHỌN TỪ (exam.php body.center-exam, app.js .choices-compact):
   ảnh vừa phải + 4 lựa chọn xếp 2 cột trên máy tính → không phải cuộn mới thấy hết đáp án; điện thoại giữ 1 cột. */
.center-exam .question-visual-image img {
    max-height: min(320px, 42vh);
}

@media (min-width: 721px) {
    .choices.choices-compact {
        grid-template-columns: 1fr 1fr;
    }
}

/* Điện thoại: ảnh không cao quá ~1/3 màn hình + bớt khoảng trống quanh ảnh / giữa lựa chọn → đề bài, ảnh và 4 lựa chọn nằm gọn
   1 màn hình (đo 7/10/2026: 375×812 và 360×640 không phải cuộn); muốn xem kỹ thì chạm ảnh để phóng to (openImageZoom). */
@media (max-width: 720px) {
    .center-exam .question-visual-image img {
        max-height: min(250px, 34vh);
    }

    .center-exam .prompt-box {
        padding: 9px 12px;
    }

    .center-exam .passage-box {
        padding: 6px;
    }

    .center-exam .passage-box .question-visual {
        margin: 0;
    }

    .center-exam .choices.choices-compact {
        gap: 8px;
    }

    .center-exam .choices.choices-compact .choice {
        min-height: 40px;
        padding: 7px 10px;
    }

    .center-exam .question-bottom {
        padding-bottom: 10px;
    }
}

/* Máy màn thấp (≤ 700px chiều cao, vd 360×640): ảnh thấp hơn nữa để vẫn thấy đủ 4 lựa chọn */
@media (max-width: 720px) and (max-height: 700px) {
    .center-exam .question-visual-image img {
        max-height: 22vh;
    }
}

/* Tiêu đề lưới đề JFT-Basic — chỉ hiện khi trang chủ có thêm khu vực Bài kiểm tra của trung tâm */
.home-section-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 800;
    color: #0b5953;
}

@media (max-width: 640px) {
    .ct-board-head {
        padding: 13px 15px;
    }

    .ct-board-heading h2 {
        font-size: 16.5px;
    }

    .ct-group-title {
        margin: 14px 14px 8px;
    }

    .ct-series-title {
        margin: 14px 14px 2px;
        font-size: 16px;
    }

    .ct-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0 10px 14px;
    }

    .ct-tile {
        padding: 10px 12px;
    }
}

/* ---------- Dòng bản quyền cuối trang ---------- */
.site-copyright {
    margin: 0;
    padding: 22px 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
}

/* Trang nhập Mã TTS (bat_dau.php) trên điện thoại: ô nhập chữ < 16px thì Safari iPhone tự phóng to trang khi chạm vào ô
   (và giữ nguyên độ phóng) → đặt đúng 16px. (30/9/2026) */
@media (max-width: 720px) {
    .guest-form-group input,
    .class-combo-input {
        font-size: 16px;
    }
}

/* ===================================================================================================================
   LỊCH SỬ THI + nút "Tải ảnh" trên phiếu kết quả (2/10/2026)
   lich_su_thi.php (đăng nhập Mã TTS + ngày sinh, danh sách các lần thi), ket_qua_thi.php (xem lại 1 bài — app.js renderFeedback)
   =================================================================================================================== */

/* Phiếu kết quả (app.js renderFeedback): "⬇ Tải ảnh" (xanh lá) + "Lịch sử thi" cạnh In phiếu / Exit Test */
.jr-header-actions .jr-save {
    border-color: #8fbf4d;
    background: var(--green);
}

.jr-header-actions .jr-save:hover {
    background: var(--green-dark);
}

.jr-header-actions .jr-print:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* inline-block (không flex: flex nuốt khoảng trắng đầu " · History"); line-height = chiều cao nút .jr-print − 2px viền */
.jr-header-actions a.jr-history {
    display: inline-block;
    line-height: 30px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

@media screen and (max-width: 760px) {
    .jr-header-actions a.jr-history {
        line-height: 32px;
    }
}

/* Dòng trạng thái khi tạo ảnh (assets/result-sheet-export.js) */
.report-window .rs-status {
    margin: 12px 24px 0;
    padding: 9px 12px;
    border-radius: 6px;
    background: #eef4ff;
    color: #1d3f8f;
    font-size: 14px;
    font-weight: 700;
}

.report-window .rs-status.is-ok {
    background: #e7f6ec;
    color: #0b6b35;
}

.report-window .rs-status.is-err {
    background: #fdecec;
    color: #b42318;
}

.report-window .rs-status[hidden] {
    display: none;
}

@media print {
    .report-window .rs-status {
        display: none !important;
    }
}

/* Điện thoại: chữ "Test Results" + 4 nút không vừa 1 hàng → các nút xuống hàng dưới, canh phải */
@media screen and (max-width: 640px) {
    .report-window .feedback-header {
        flex-wrap: wrap;
        row-gap: 6px;
        height: auto;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .report-window .jr-header-actions {
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .report-window .exit-test {
        width: auto;
        padding: 0 12px;
    }

    .report-window .rs-status {
        margin: 10px 8px 0;
    }
}

/* Trang chủ: nút "Lịch sử thi của tôi" trong khung xanh */
.home-history-btn {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin-top: 22px;
    padding: 11px 18px;
    border-radius: 12px;
    background: #fff;
    color: #0b5f58;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(4, 47, 43, 0.25);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.home-history-btn small {
    color: #52665f;
    font-size: 12.5px;
    font-weight: 600;
}

.home-history-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(4, 47, 43, 0.32);
}

.home-history-btn:focus-visible {
    outline: 3px solid #9df0e7;
    outline-offset: 3px;
}

/* bat_dau.php: "← Trang chủ" trái · "📋 Lịch sử thi" phải */
.guest-entry-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 8px;
}

/* Trang đăng nhập Lịch sử thi (khung giống bat_dau.php) */
.history-eyebrow {
    color: #0b776f;
}

.history-login-lead {
    margin: 8px 0 0;
    color: #475467;
    font-size: 0.9rem;
    line-height: 1.5;
}

.history-notice {
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.9rem;
}

/* Trang Lịch sử thi: thẻ học viên + danh sách các lần thi */
.history {
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 20px 48px;
}

.history-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.history-top .guest-home-link {
    margin-bottom: 0;
}

.history-logout {
    margin: 0;
}

.history-logout-btn {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #cfd8e3;
    border-radius: 7px;
    background: #fff;
    color: #b42318;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.history-logout-btn:hover,
.history-logout-btn:focus-visible {
    border-color: #b42318;
    background: #fef2f2;
    outline: none;
}

.history-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    margin: 14px 0 18px;
    padding: 22px 26px;
    border-radius: 18px;
    background: linear-gradient(135deg, #12857b 0%, #0b5f58 55%, #0a4f49 100%);
    color: #fff;
    box-shadow: 0 16px 36px rgba(11, 89, 83, 0.24);
}

.history-who {
    display: flex;
    align-items: center;
    gap: 16px;
}

.history-photo {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 3px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.history-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-ini {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.history-hero .eyebrow {
    margin-bottom: 4px;
}

.history-hero h1 {
    color: #fff;
    font-size: 24px;
    line-height: 1.2;
}

.history-who-meta {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 600;
}

.history-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.history-stats div {
    min-width: 118px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
}

.history-stats dt {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
}

.history-stats dd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
}

.history-stats dd strong {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.history-hint {
    margin: 0 0 14px;
    color: #475467;
    font-size: 13.5px;
    line-height: 1.55;
}

.history-list {
    display: grid;
    gap: 12px;
}

.history-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid #e4e8ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* Ô điểm 10–250, màu theo mức ước tính (cùng bảng màu chip mức) */
.history-score {
    display: grid;
    place-items: center;
    align-content: center;
    width: 88px;
    height: 88px;
    border-radius: 16px;
    background: #f2f4f7;
    color: #475467;
}

.history-score strong {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.history-score small {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.8;
}

.history-score.lv-a22 {
    background: #dcfae6;
    color: #067647;
}

.history-score.lv-a21 {
    background: #e3eefc;
    color: #1554a8;
}

.history-score.lv-a1 {
    background: #fdf1dc;
    color: #8a5100;
}

.history-score.lv-none {
    background: #fdecec;
    color: #b42318;
}

.history-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0;
    color: #667085;
    font-size: 12.5px;
    font-weight: 600;
}

.history-attempt {
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef8f6;
    color: #0b5f58;
    font-weight: 800;
}

.history-trend.up {
    color: #067647;
}

.history-trend.down {
    color: #b42318;
}

.history-trend.same {
    color: #667085;
}

.history-item-title {
    margin: 4px 0 6px;
    color: #101828;
    font-size: 16px;
    line-height: 1.3;
}

.history-item-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    color: #344054;
    font-size: 13.5px;
    font-weight: 600;
}

.history-sections {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.history-sections li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 6px;
    color: #475467;
    font-size: 12px;
}

.history-sec-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-sections b {
    color: #101828;
    font-size: 12.5px;
}

.history-sec-bar {
    grid-column: 1 / -1;
    display: block;
    height: 5px;
    border-radius: 999px;
    background: #eaecf0;
    overflow: hidden;
}

.history-sec-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
}

.history-item-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #cfd8e3;
    border-radius: 9px;
    background: #fff;
    color: #0b5f58;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.history-btn:hover,
.history-btn:focus-visible {
    border-color: #0b776f;
    background: #eef8f6;
    outline: none;
}

.history-btn-main {
    border-color: #0b5f58;
    background: #0b5f58;
    color: #fff;
}

.history-btn-main:hover,
.history-btn-main:focus-visible {
    background: #0a4f49;
    color: #fff;
}

.history-empty {
    padding: 28px 22px;
    border: 1px dashed #cfd8e3;
    border-radius: 14px;
    background: #fff;
    color: #475467;
    text-align: center;
}

.history-empty p {
    margin: 0 0 8px;
}

.history-empty .history-btn {
    margin-top: 8px;
}

/* Thẻ hẹp: 4 phần → 2×2 cho tên phần ("Chữ – Từ vựng") khỏi bị cắt */
@media (max-width: 860px) {
    .history-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .history {
        padding: 14px 12px 36px;
    }

    .history-hero {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .history-photo {
        width: 64px;
        height: 64px;
    }

    .history-hero h1 {
        font-size: 20px;
    }

    .history-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .history-stats div {
        min-width: 0;
        padding: 8px 10px;
    }

    .history-stats dd {
        flex-wrap: wrap;
        gap: 4px;
    }

    .history-stats dd strong {
        font-size: 20px;
    }

    .history-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .history-score {
        width: 64px;
        height: 64px;
        border-radius: 12px;
    }

    .history-score strong {
        font-size: 22px;
    }

    .history-sections {
        gap: 6px 10px;
    }

    .history-sections li {
        gap: 2px 4px;
        font-size: 11.5px;
    }

    .history-item-actions {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .history-item-actions .history-btn {
        flex: 1 1 0;
    }
}

/* =====================================================================
   BÁO CÂU SAI (2/10/2026) — nút "⚠ Báo lỗi" ở thanh dưới màn thi, nút "Báo câu này sai" trong bảng đáp án,
   hộp báo lỗi (.qreport-*) — app.js openQuestionReport; admin/question_reports.php + khung trên question_edit.php (.qr-*)
   ===================================================================== */
/* Nút ĐỎ nổi bật trên thanh đen (người dùng yêu cầu 2/10/2026) — khác hẳn các nút xanh Previous / Next / cờ ⚑. */
.report-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #ef4444;
    border-radius: 3px;
    background: #dc2626;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, .35);
    touch-action: manipulation;
}

.report-button[hidden] {
    display: none;
}

.report-button:hover {
    background: #b91c1c;
}

/* Đã báo câu này: nền trắng chữ đỏ "✓ Đã báo" — vẫn thấy rõ nhưng biết là đã gửi. */
.report-button.done {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b91c1c;
    box-shadow: none;
}

.report-button-icon {
    font-size: 16px;
    line-height: 1;
}

@media (hover: none) {
    .report-button:not(.done):hover {
        background: #dc2626;
    }

    .report-button.done:hover {
        background: #fff1f2;
    }
}

/* Điện thoại: ô vuông như nút cờ ⚑ — biểu tượng + chữ nhỏ "Báo lỗi" bên dưới để học sinh hiểu ngay nút làm gì */
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
    .report-button {
        flex: 0 0 52px;
        flex-direction: column;
        gap: 2px;
        width: 52px;
        min-height: 44px;
        padding: 0;
    }

    .report-button-icon {
        font-size: 18px;
    }

    .report-button-text {
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }
}

.feedback-report {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 4px 10px;
    border: 1px solid #dc2626;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.feedback-report:hover {
    background: #dc2626;
    color: #fff;
}

.feedback-report.done {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

@media print {
    .report-button,
    .feedback-report,
    .qreport-overlay {
        display: none !important;
    }
}

/* Hộp báo lỗi: đặt cao cố định (không căn giữa dọc) để hiện / ẩn lời nhắc lỗi không làm hộp nhảy. */
.qreport-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    justify-items: center;
    align-items: start;
    padding: max(16px, 5vh) 16px 16px;
    overflow-y: auto;
    background: rgba(0, 0, 0, .45);
}

.qreport-dialog {
    display: flex;
    flex-direction: column;
    width: min(480px, 100%);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 0;
    overflow: hidden;
    border: 2px solid #dc2626;
    border-radius: 8px;
    background: #fff;
    color: #111;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .28);
    text-align: left;
}

.qreport-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px 10px 16px;
    border-bottom: 1px solid #fecaca;
    background: #fef2f2;
}

.qreport-head strong {
    color: #b91c1c;
    font-size: 17px;
    line-height: 1.3;
}

.qreport-head strong small {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

.qreport-close {
    flex: none;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.qreport-close:hover {
    background: #fee2e2;
}

.qreport-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 16px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.qreport-target {
    margin: 0 0 10px;
    color: #374151;
    font-size: 14px;
}

.qreport-group {
    min-width: 0;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.qreport-group legend {
    margin-bottom: 6px;
    padding: 0;
    font-size: 14px;
    font-weight: 800;
}

.qreport-group legend small,
.qreport-note small {
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

.qreport-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}

.qreport-check:has(input:checked) {
    border-color: #dc2626;
    background: #fef2f2;
}

.qreport-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #dc2626;
}

.qreport-check small {
    display: block;
    color: #6b7280;
    font-size: 12px;
}

.qreport-note {
    display: grid;
    gap: 6px;
    font-size: 14px;
    font-weight: 800;
}

.qreport-note textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 70px;
    padding: 8px 10px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    font: inherit;
    font-size: 16px; /* ≥ 16px: iPhone không tự phóng to trang khi gõ */
    font-weight: 400;
    resize: vertical;
}

.qreport-hint {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.45;
}

.qreport-error {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fee4e2;
    color: #912018;
    font-size: 14px;
    font-weight: 700;
}

.qreport-error[hidden] {
    display: none;
}

.qreport-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.qreport-actions button {
    min-height: 44px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.qreport-actions .qreport-send {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

.qreport-actions .qreport-send:hover {
    background: #b91c1c;
}

.qreport-actions .qreport-send:disabled {
    opacity: .65;
    cursor: progress;
}

.qreport-actions .qreport-ok {
    grid-column: 1 / -1;
}

.qreport-done {
    padding: 18px 4px;
    text-align: center;
}

.qreport-done strong {
    display: block;
    margin-bottom: 6px;
    color: #15803d;
    font-size: 18px;
}

.qreport-done p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.qreport-done small {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
}

/* ----- Admin: menu "Báo lỗi câu hỏi" (huy hiệu đỏ), lời nhắc trang đầu, admin/question_reports.php, khung trên question_edit.php ----- */
/* Mục menu màu CAM để nổi hơn các mục xanh (người dùng yêu cầu 2/10/2026): thường = chữ cam nền cam nhạt; còn câu chưa xử lý =
   nền cam đậm chữ trắng; đang mở trang = cam sẫm. */
.admin-nav a.admin-nav-report {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
}

.admin-nav a.admin-nav-report:hover {
    border-color: #fb923c;
    background: #ffedd5;
}

.admin-nav a.admin-nav-report.has-pending {
    border-color: #ea580c;
    background: #f97316;
    color: #fff;
    box-shadow: 0 1px 3px rgba(234, 88, 12, .35);
}

.admin-nav a.admin-nav-report.has-pending:hover {
    background: #ea580c;
}

.admin-nav a.admin-nav-report.is-active,
.admin-nav a.admin-nav-report.is-active:hover {
    border-color: #c2410c;
    background: #c2410c;
    color: #fff;
}

.admin-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
}

.qr-home-alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 2px solid #dc2626;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-weight: 700;
    text-decoration: none;
}

.qr-home-alert > span:first-child {
    font-size: 20px;
    line-height: 1;
}

.qr-home-alert em {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 6px;
    background: #dc2626;
    color: #fff;
    font-style: normal;
    font-weight: 800;
}

.qr-home-alert:hover em {
    background: #b91c1c;
}

.qr-intro p {
    margin: 0 0 12px;
    color: #374151;
    line-height: 1.55;
}

.qr-demo-button {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    background: #dc2626;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.qr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.qr-tabs a {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #fff;
    color: #0b5953;
    font-weight: 800;
    text-decoration: none;
}

.qr-tabs a span {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.qr-tabs a.qr-tab-alert {
    border-color: #fca5a5;
    color: #b91c1c;
}

.qr-tabs a.is-active {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.qr-tabs a.qr-tab-alert.is-active {
    border-color: #dc2626;
    background: #dc2626;
}

.qr-tabs a.is-active span {
    color: rgba(255, 255, 255, .85);
}

.qr-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.qr-filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.qr-filter select {
    max-width: min(520px, 80vw);
    min-height: 36px;
}

.qr-empty p {
    margin: 0;
    color: #15803d;
    font-weight: 800;
}

.qr-card {
    border-left: 5px solid #d7dde5;
}

.qr-card-new {
    border-left-color: #dc2626;
}

.qr-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 14px;
    margin-bottom: 10px;
}

.qr-qno {
    flex: none;
    padding: 6px 12px;
    border-radius: 6px;
    background: #111827;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
}

.qr-card-new .qr-qno {
    background: #dc2626;
}

.qr-card-title {
    flex: 1 1 320px;
    min-width: 0;
}

.qr-card-title strong {
    font-size: 17px;
}

.qr-card-title small {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 13px;
}

.qr-card-count {
    flex: none;
    color: #374151;
    text-align: right;
}

.qr-card-count b {
    color: #b91c1c;
    font-size: 20px;
}

.qr-card-count small {
    display: block;
    color: #667085;
    font-size: 12px;
}

.qr-tag {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef2f6;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    vertical-align: middle;
}

.qr-tag-bad {
    background: #fee4e2;
    color: #b42318;
}

.qr-tag-warn {
    background: #fef0c7;
    color: #93370d;
}

.qr-tag-ok {
    background: #dcfae6;
    color: #067647;
}

.qr-snippet {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f8fafc;
    color: #111827;
    font-size: 15px;
    line-height: 1.5;
}

.qr-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.qr-reason {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #fca5a5;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 800;
}

.qr-reason-sm {
    margin: 1px 2px 1px 0;
    padding: 1px 7px;
    font-size: 12px;
}

.qr-table-wrap {
    margin-bottom: 10px;
}

.qr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.qr-table th,
.qr-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eaecf0;
    text-align: left;
    vertical-align: top;
}

.qr-table th {
    background: #f8fafc;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.qr-table td small {
    display: block;
    color: #667085;
    font-size: 12px;
}

.qr-note {
    max-width: 320px;
    overflow-wrap: anywhere;
}

.qr-mini-link {
    display: inline-block;
    margin-top: 2px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 800;
}

.qr-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.qr-status-new {
    background: #fee4e2;
    color: #b42318;
}

.qr-status-fixed {
    background: #dcfae6;
    color: #067647;
}

.qr-status-dismissed {
    background: #eef2f6;
    color: #475467;
}

.qr-admin-note {
    font-style: italic;
}

.qr-copies {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px dashed #f79009;
    border-radius: 6px;
    background: #fffaeb;
    color: #7a2e0e;
    font-size: 14px;
}

.qr-copies ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.qr-copies li {
    margin: 2px 0;
}

.qr-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.qr-status-form {
    display: flex;
    flex: 1 1 420px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.qr-status-form input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    font: inherit;
}

.qr-btn-fixed,
.qr-btn-dismiss {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 6px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.qr-btn-fixed {
    border: 1px solid #15803d;
    background: #15803d;
    color: #fff;
}

.qr-btn-fixed:hover {
    background: #166534;
}

.qr-btn-dismiss {
    border: 1px solid #cfd8e3;
    background: #fff;
    color: #475467;
}

.qr-btn-dismiss:hover {
    background: #f2f4f7;
}

.qr-banner {
    border: 2px solid #dc2626;
    background: #fff;
}

.qr-banner h2 {
    display: flex;
    align-items: center;
    color: #b91c1c;
    font-size: 18px;
}

.qr-banner-list {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.qr-banner-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f2f4f7;
}

.qr-banner-list small {
    color: #667085;
}

.qr-banner-list q {
    flex-basis: 100%;
    color: #374151;
    font-style: italic;
}

.qr-banner-changed {
    margin: 0 0 10px;
    color: #067647;
    font-weight: 800;
}

@media (max-width: 640px) {
    .qr-card-count {
        text-align: left;
    }

    .qr-status-form {
        justify-content: stretch;
    }

    .qr-btn-fixed,
    .qr-btn-dismiss {
        flex: 1 1 auto;
    }
}

/* ===================================================================================================================
   PHIẾU KẾT QUẢ BÀI KIỂM TRA CỦA TRUNG TÂM (7/10/2026) — app.js renderCenterFeedback() + admin/result_sheet.php
   Gọn: thông tin học viên + điểm thang 10 + số câu đúng / sai / bỏ trống. KHÔNG có đáp án (người dùng yêu cầu — máy chủ cũng
   không gửi). Dùng chung khung .feedback-window.report-window / .jr-main / .jr-page của phiếu JFT.
   =================================================================================================================== */
.jr-page.ctr-report {
    padding: 30px 40px 26px;
    /* Phông như trang chủ: phiếu tiếng Việt — Arial của phiếu JFT có máy dựng dấu "ề, ồ" bị tách rời */
    font-family: "Segoe UI", "Noto Sans", Arial, "Yu Gothic", Meiryo, sans-serif;
}

.ctr-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 3px solid #1d4ed8;
}

.ctr-org {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ctr-org img {
    width: 44px;
    height: 44px;
}

.ctr-org span {
    display: flex;
    flex-direction: column;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.ctr-org strong {
    color: #1e3a8a;
    font-size: 14px;
}

.ctr-pill {
    padding: 5px 12px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #1e3a8a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.ctr-title {
    margin: 18px 0 4px;
    color: #101828;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.ctr-sub {
    margin: 0 0 18px;
    color: #475467;
    font-size: 14px;
    text-align: center;
}

.ctr-body {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin-top: 16px;
}

.jr-photo.ctr-photo {
    width: 136px;
    max-width: none;
    margin: 0;
    aspect-ratio: 3 / 4;
    border: 1px solid #d0d5dd;
    background: #f8fafc;
}

.jr-photo.ctr-photo .jr-photo-empty svg {
    width: 64px;
    height: 64px;
}

.ctr-info {
    display: grid;
    gap: 9px;
    margin: 0;
}

.ctr-info div {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 8px;
    font-size: 15px;
}

.ctr-info dt {
    color: #667085;
    font-weight: 600;
}

.ctr-info dd {
    margin: 0;
    color: #101828;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ctr-score {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 26px;
    align-items: center;
    margin-top: 22px;
    padding: 18px 22px;
    border: 1px solid #c7d7fe;
    border-radius: 14px;
    background: linear-gradient(135deg, #eff6ff, #e0e7ff);
}

.ctr-score-big {
    min-width: 120px;
    text-align: center;
}

.ctr-score-big strong {
    display: block;
    color: #1d4ed8;
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
}

.ctr-score.is-high .ctr-score-big strong {
    color: #067647;
}

.ctr-score.is-low .ctr-score-big strong {
    color: #b42318;
}

.ctr-score-big span {
    color: #475467;
    font-size: 13px;
    font-weight: 700;
}

.ctr-score-detail p {
    margin: 0;
    color: #101828;
    font-size: 16px;
    font-weight: 700;
}

.ctr-bar {
    height: 12px;
    margin: 9px 0;
    overflow: hidden;
    border: 1px solid #c7d7fe;
    border-radius: 999px;
    background: #fff;
}

.ctr-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.ctr-score.is-high .ctr-bar i {
    background: linear-gradient(90deg, #22c55e, #067647);
}

.ctr-score.is-low .ctr-bar i {
    background: linear-gradient(90deg, #f87171, #b42318);
}

.ctr-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13.5px;
    font-weight: 700;
}

.ctr-counts .ok {
    color: #067647;
}

.ctr-counts .no {
    color: #b42318;
}

.ctr-counts .na {
    color: #667085;
}

.ctr-score-detail p.ctr-msg {
    margin-top: 10px;
    color: #1e3a8a;
    font-size: 14px;
    font-weight: 600;
}

.ctr-note {
    margin: 16px 0 0;
    color: #667085;
    font-size: 12px;
}

/* Dưới phiếu (không nằm trong ảnh "Tải ảnh"): bài trung tâm không xem đáp án sau khi nộp */
.ctr-locked {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 12px 16px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

@media print {
    .ctr-locked {
        display: none;
    }
}

@media screen and (max-width: 760px) {
    .jr-page.ctr-report {
        padding: 18px 14px 18px;
    }

    .ctr-org strong {
        font-size: 12.5px;
    }

    /* Điện thoại: thanh trên cùng đã ghi "Kết quả bài kiểm tra" — bỏ nhãn để tên công ty khỏi bị chèn / tràn mép */
    .ctr-pill {
        display: none;
    }

    .ctr-title {
        font-size: 20px;
    }

    .ctr-body {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 14px;
    }

    .jr-photo.ctr-photo {
        width: 96px;
    }

    .ctr-info div {
        grid-template-columns: 1fr;
        gap: 0;
        font-size: 14px;
    }

    .ctr-info dt {
        font-size: 12px;
    }

    .ctr-score {
        grid-template-columns: 1fr;
        padding: 14px 14px;
        text-align: center;
    }

    .ctr-counts {
        justify-content: center;
    }
}

/* ===== Admin — khu Bài kiểm tra trung tâm (7/10/2026): Kết quả (center_results.php), Thống kê (center_stats.php),
   Xuất đề Word (center_export.php), danh sách bài kiểm tra (center_exams.php). Màu chàm theo body.admin-area-center. ===== */
.admin-rating-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 900;
    white-space: nowrap;
}

.admin-rating-chip.rating-gioi { background: #dcfae6; color: #067647; }
.admin-rating-chip.rating-kha { background: #e0eaff; color: #2d31a6; }
.admin-rating-chip.rating-tb { background: #fef0c7; color: #93370d; }
.admin-rating-chip.rating-yeu { background: #fee4e2; color: #b42318; }

.admin-stats-summary.ctr-res-summary {
    grid-template-columns: repeat(7, minmax(110px, 1fr));
}

.admin-stats-summary span em {
    display: block;
    margin-top: 2px;
    color: #98a2b3;
    font-size: 11.5px;
    font-style: normal;
}

.admin-stats-summary strong.ctr-res-latest {
    font-size: 18px;
    line-height: 1.25;
}

.admin-stats-summary a.ctr-rating-card { border-left: 4px solid #d0d5dd; }
.admin-stats-summary a.ctr-rating-card.rating-gioi { border-left-color: #17b26a; }
.admin-stats-summary a.ctr-rating-card.rating-kha { border-left-color: #6172f3; }
.admin-stats-summary a.ctr-rating-card.rating-tb { border-left-color: #f79009; }
.admin-stats-summary a.ctr-rating-card.rating-yeu { border-left-color: #f04438; }

/* Danh sách bài kiểm tra + Xuất đề Word */
.ctr-word-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-table-actions a.ctr-word-btn,
a.ctr-word-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    background: #f5f7ff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.admin-table-actions a.ctr-word-btn:hover,
a.ctr-word-btn:hover {
    border-color: #4338ca;
    background: #4338ca;
    color: #fff;
}

a.ctr-word-btn.is-key {
    border-color: #fecdca;
    background: #fff6f5;
    color: #b42318;
}

a.ctr-word-btn.is-key:hover {
    border-color: #d92d20;
    background: #d92d20;
    color: #fff;
}

.ctr-word-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #2b579a;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.ctr-export-groups {
    display: grid;
    gap: 16px;
}

.ctr-export-group {
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.ctr-export-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: #eef2ff;
    border-bottom: 1px solid #c7d2fe;
}

.ctr-export-group-head h3 {
    margin: 0;
    color: #1e1b4b;
    font-size: 17px;
}

.ctr-export-group-head h3 small {
    margin-left: 6px;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.ctr-export-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ctr-export-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 16px;
    border-top: 1px solid #eef0f6;
}

.ctr-export-list li:first-child {
    border-top: 0;
}

.ctr-export-list strong {
    display: block;
    color: #101828;
}

.ctr-export-list small {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 12.5px;
    font-weight: 600;
}

.ctr-export-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.ctr-export-note img {
    width: 120px;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .08);
}

.ctr-export-note ul {
    margin: 6px 0 0;
    padding-left: 20px;
    color: #475467;
    font-size: 14px;
    line-height: 1.6;
}

/* Thống kê */
.ctr-stats-kpis {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.ctr-stats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.ctr-stats-grid > .admin-card {
    margin-bottom: 0;
}

.ctr-bars {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ctr-bars li {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #344054;
}

.ctr-bars .ctr-bar-track {
    height: 18px;
    border-radius: 4px;
    background: #f2f4f7;
    overflow: hidden;
}

.ctr-bars .ctr-bar-fill {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 4px;
    background: #6172f3;
}

.ctr-bars .ctr-bar-fill.rating-gioi { background: #17b26a; }
.ctr-bars .ctr-bar-fill.rating-kha { background: #6172f3; }
.ctr-bars .ctr-bar-fill.rating-tb { background: #f79009; }
.ctr-bars .ctr-bar-fill.rating-yeu { background: #f04438; }

.ctr-bars b {
    text-align: right;
    color: #101828;
}

.ctr-cols {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    padding: 8px 4px 0;
    border-bottom: 1px solid #d0d5dd;
}

.ctr-cols span {
    position: relative;
    flex: 1;
    min-width: 6px;
    border-radius: 3px 3px 0 0;
    background: #818cf8;
}

.ctr-cols span:hover {
    background: #4338ca;
}

.ctr-cols-labels {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    padding: 0 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

.ctr-cols-labels span {
    flex: 1;
    min-width: 6px;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
}

.ctr-caption {
    margin: 10px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.55;
}

.ctr-caption b {
    color: #344054;
}

.ctr-matrix td,
.ctr-matrix th {
    text-align: center;
}

.ctr-matrix td:first-child,
.ctr-matrix th:first-child {
    text-align: left;
}

.ctr-matrix .ctr-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 26px;
    padding: 0 6px;
    border-radius: 5px;
    font-weight: 900;
    font-size: 13px;
    text-decoration: none;
}

.ctr-matrix .ctr-cell.rating-gioi { background: #dcfae6; color: #067647; }
.ctr-matrix .ctr-cell.rating-kha { background: #e0eaff; color: #2d31a6; }
.ctr-matrix .ctr-cell.rating-tb { background: #fef0c7; color: #93370d; }
.ctr-matrix .ctr-cell.rating-yeu { background: #fee4e2; color: #b42318; }
.ctr-matrix .ctr-cell.is-none { color: #d0d5dd; }

.ctr-matrix small.ctr-cell-times {
    display: block;
    margin: 2px 0 0;
    color: #98a2b3;
    font-size: 10.5px;
}

.ctr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.ctr-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #fff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.ctr-tabs a.is-current {
    border-color: #4338ca;
    background: #4338ca;
    color: #fff;
}

.ctr-hard-q {
    min-width: 240px;
    line-height: 1.5;
}

.ctr-hard-q rt {
    font-size: .62em;
    color: #667085;
}

.ctr-pct {
    font-weight: 900;
}

.ctr-pct.is-low { color: #b42318; }
.ctr-pct.is-mid { color: #b54708; }
.ctr-pct.is-high { color: #067647; }

@media (max-width: 820px) {
    .admin-stats-summary.ctr-res-summary,
    .ctr-stats-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .ctr-stats-grid,
    .ctr-export-note,
    .ctr-export-list li {
        grid-template-columns: 1fr;
    }

    .ctr-export-note img {
        display: none;
    }

    .ctr-bars li {
        grid-template-columns: 70px minmax(0, 1fr) 56px;
    }
}

/* Điện thoại: bảng số liệu (Kết quả, Thống kê) cuộn ngang TRONG khung — luật ≤ 640px phía trên tắt cuộn cho bảng "Danh sách đề thi"
   (thành dạng thẻ) làm bảng số liệu tràn ra cả trang. */
@media (max-width: 640px) {
    .admin-table-wrap:has(> .admin-stats-table) {
        overflow-x: auto;
    }
}

/* /tructuyen (8/10/2026) — Sửa bài kiểm tra → khung "Các phần của bài": đổi tên / thêm / xoá phần trống (admin/exam_edit.php). */
.tt-section-form { display: grid; gap: 8px; margin: 10px 0 14px; }
.tt-section-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e3e8f2;
    border-radius: 10px;
    background: #fafbff;
}
.tt-section-row input { width: 100%; margin: 0; }
.tt-section-row small { color: #64748b; white-space: nowrap; }
.tt-section-form > .admin-secondary { justify-self: start; }
.tt-section-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px dashed #d6dcea; }
.tt-section-add input { flex: 1 1 260px; margin: 0; }
@media (max-width: 640px) {
    .tt-section-row { grid-template-columns: auto minmax(0, 1fr); }
    .tt-section-row small, .tt-section-row button { grid-column: 2; justify-self: start; }
}

/* /tructuyen (8/10/2026) — điện thoại: luật ≤ 640px phía trên tắt cuộn ngang của MỌI .admin-table-wrap (cho bảng Bài kiểm tra thành dạng
   thẻ) và chỉ bật lại bằng :has() — iPhone trước iOS 15.4 không hiểu :has(), còn bảng Câu hỏi (rộng ~1100px) không được bật lại → CẢ TRANG
   bị kéo ngang. Khung bảng rộng gắn thêm class tt-scroll-x: cuộn ngang TRONG khung bảng, trang không lệch. */
@media (max-width: 640px) {
    .admin-table-wrap.tt-scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* /tructuyen (8/10/2026) — iPhone / iPad: MỌI trình duyệt trên iOS đều là WebKit; ô nhập có cỡ chữ < 16px làm Safari TỰ PHÓNG TO
   trang khi chạm vào (và không tự thu lại → lệch bố cục, phải kéo ngang). @supports (-webkit-touch-callout: none) CHỈ đúng trên iOS —
   máy tính, Android giữ nguyên cỡ chữ cũ. Bảng / ô lọc ở trang quản trị cũng được áp (giáo viên xem Kết quả trên iPhone). */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }
}

/* ===== Nhắc tự bấm "Nộp bài" khi gần hết giờ (12/10/2026, app.js updateTimeWarning) — hộp dùng khung .exam-confirm-dialog,
   dải nhắc nằm ngay trên thanh nút dưới cùng (app.js tự tính vị trí). Còn 1 phút: viền đỏ + nhấp nháy. ===== */
.time-warn-dialog {
    width: min(400px, 100%);
    border-color: #d97706;
    text-align: left;
}

.time-warn-dialog strong {
    color: #92400e;
    font-size: 19px;
}

.time-warn-dialog.is-urgent {
    border-color: #dc2626;
}

.time-warn-dialog.is-urgent strong {
    color: #b91c1c;
}

.time-warn-chip {
    position: fixed;
    left: 50%;
    bottom: 66px;
    z-index: 990; /* dưới hộp xác nhận (.exam-confirm-overlay 1000) */
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 16px);
    padding: 6px 6px 6px 12px;
    border: 1px solid #f59e0b;
    border-left: 6px solid #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
    color: #78350f;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    transform: translateX(-50%);
}

.time-warn-chip[hidden] {
    display: none;
}

.time-warn-chip.is-urgent {
    border-color: #dc2626;
    background: #fef2f2;
    color: #7f1d1d;
    animation: timeWarnPulse 1s ease-in-out infinite;
}

.time-warn-clock {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.time-warn-submit {
    flex: none;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: var(--green);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.time-warn-close {
    flex: none;
    width: 32px;
    min-height: 32px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.time-warn-short {
    display: none;
}

@media (max-width: 640px) {
    .time-warn-chip {
        width: calc(100vw - 16px);
    }

    .time-warn-long {
        display: none;
    }

    .time-warn-short {
        display: inline;
    }
}

@keyframes timeWarnPulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(220, 38, 38, 0.25); }
    50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.35), 0 8px 24px rgba(220, 38, 38, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
    .time-warn-chip.is-urgent {
        animation: none;
    }
}

/* ===== GIÁO VIÊN THI THỬ NHƯ HỌC SINH (16/10/2026 — thi_thu.php, admin/thi_thu.php, data/thi_thu.php; lớp thu-* riêng, không đụng tt-*) ===== */
/* Nhãn "Giáo viên thi thử · không lưu" cạnh tên thí sinh trên thanh Candidate */
.cbt-trial-badge {
    flex-shrink: 0;
    padding: 2px 10px;
    border: 1px solid #f5c26b;
    border-radius: 999px;
    background: #fff7e6;
    color: #8a4b00;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .cbt-trial-badge {
        padding: 1px 7px;
        font-size: 11px;
    }
}

/* Dưới phiếu điểm: bài không lưu, thi thử lại / chọn bài khác, nhắc không chia sẻ đáp án */
.thu-note {
    width: 100%;
    max-width: 880px;
    margin: 0 auto 12px;
    padding: 12px 16px;
    border: 1px solid #f5c26b;
    border-radius: 10px;
    background: #fff7e6;
    color: #7a4100;
    font-size: 14px;
    line-height: 1.6;
}

.thu-note-warn {
    display: block;
    margin-top: 4px;
    color: #b42318;
    font-weight: 600;
}

@media print {
    .thu-note {
        display: none;
    }
}

/* Bảng đáp án của giáo viên thi thử: hiện số câu cả trên máy tính (bảng học sinh JFT chỉ hiện ở điện thoại) */
.thu-review .feedback-qno {
    display: inline-block;
    margin: 0 8px 4px 0;
    padding: 1px 7px;
    border-radius: 4px;
    background: #111;
    color: #fff;
    font-size: 12px;
}

.thu-body .review-boot {
    display: block;
    height: auto;
    min-height: 0;
    padding: 40px 20px;
    text-align: center;
    color: #475467;
}

.thu-missing-body {
    margin: 0;
    background: #f2f4f7;
    color: #101828;
}

.thu-missing {
    max-width: 560px;
    margin: 60px auto;
    padding: 24px 28px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
    line-height: 1.6;
}

/* Trang quản trị "Thi thử như học sinh" */
.thu-intro h2 u {
    text-decoration-color: #f5a524;
    text-underline-offset: 3px;
}

.thu-points {
    margin: 8px 0 6px;
    padding-left: 20px;
    line-height: 1.65;
}

.thu-warn {
    display: block;
    margin-top: 4px;
    color: #b42318;
}

.thu-table th small {
    color: #667085;
    font-weight: 600;
}

/* Mô tả bài dài — gọn 2 dòng, rê chuột xem đủ */
.thu-table .thu-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.thu-state {
    color: #98a2b3;
    font-size: 13px;
}

.thu-state.is-done {
    color: #0b6a62;
}

.thu-state.is-doing {
    color: #b54708;
    font-weight: 700;
}

.thu-state small {
    color: #667085;
    font-weight: 600;
}

.thu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.thu-btn,
.thu-btn-mini {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--area, #4338ca);
    border-radius: 6px;
    background: var(--area, #4338ca);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.thu-btn-mini {
    min-height: 30px;
    padding: 0 10px;
    font-size: 13px;
}

/* Nút "▶ Thi thử" trong cột Thao tác của trang Bài kiểm tra (đè kiểu chung .admin-table-actions a) */
.admin-table-actions a.thu-btn-mini {
    border-color: var(--area, #4338ca);
    background: var(--area, #4338ca);
    color: #fff;
    font-weight: 800;
}

@media (hover: hover) {
    .admin-table-actions a.thu-btn-mini:hover {
        border-color: var(--area-dark, #3730a3);
        background: var(--area-dark, #3730a3);
    }
}

.thu-btn.is-soft {
    border-color: #d0d5dd;
    background: #fff;
    color: #344054;
}

@media (hover: hover) {
    .thu-btn:hover,
    .thu-btn-mini:hover {
        background: var(--area-dark, #3730a3);
    }

    .thu-btn.is-soft:hover {
        background: #f2f4f7;
    }
}

.thu-btn:focus-visible,
.thu-btn-mini:focus-visible {
    outline: 3px solid var(--area-line, #c7d2fe);
    outline-offset: 1px;
}