/* Module Trắc nghiệm — giao diện tông xanh lá (y dược), nằm trong theme default của NukeViet.
   Một hệ thống duy nhất cho mọi trang của module (thiết kế lại 24/10/2026):
     1. Token          5. Thành phần: nút, thẻ, bảng, form, tab, thông báo, nhãn
     2. Tiện ích, lưới 6. Bảng → thẻ trên điện thoại
     3. Bố cục trang   7. Từng chức năng (đáp án, câu hỏi, phiếu, camera, thống kê, duyệt, làm bài, cổng HS)
     4. Thanh cổng     8. In ấn, điện thoại, giảm chuyển động
   Bootstrap 3 của theme chỉ được chỉnh lại TRONG phạm vi module (.tn-wrap, .tn-test, .tn-portal, .tn-print-bar),
   các module khác của site giữ nguyên. Màu chỉ sửa ở :root. */

/* ===================================================================== 1. Token */
:root {
    /* Chủ đạo: xanh ngọc đậm; nhấn: xanh lơ. Đúng/sai giữ xanh lá tươi / đỏ để không lẫn với màu chủ đạo. */
    --tn-primary: #0b6e4f; --tn-primary-hover: #085a40; --tn-primary-dark: #06402e;
    --tn-primary-soft: #e3f2ea; --tn-tint: #f1f8f4; --tn-primary-line: #b6dcc8;
    --tn-accent: #12928a; --tn-accent-hover: #0e7a73; --tn-accent-soft: #def3f0; --tn-accent-ink: #0d5753;
    --tn-ink: #1c2723; --tn-ink-2: #38463f; --tn-muted: #62706a; --tn-faint: #9aa8a2;
    --tn-line: #dde7e1; --tn-line-2: #edf2ef; --tn-field: #cfdcd5;
    --tn-bg: #f4f8f6; --tn-surface: #fff;
    --tn-ok: #16a34a; --tn-ok-soft: #dcfce7; --tn-ok-ink: #15803d;
    --tn-bad: #dc2626; --tn-bad-soft: #fde4e4; --tn-bad-ink: #b42318;
    --tn-warn: #b45309; --tn-warn-soft: #fef3c7; --tn-warn-ink: #8a4b06;
    --tn-mark: #24312d;        /* ô học sinh đã tô (màn duyệt) */
    --tn-hl: #db2777;          /* khung câu đang chọn trên ảnh phiếu */
    --tn-focus: 0 0 0 3px rgba(18,146,138,.35);
    --tn-r-sm: 6px; --tn-r: 10px; --tn-r-lg: 14px;
    --tn-shadow-sm: 0 1px 2px rgba(16,40,30,.06);
    --tn-shadow: 0 1px 2px rgba(16,40,30,.06), 0 4px 14px rgba(16,40,30,.06);
    --tn-hero: linear-gradient(115deg, var(--tn-primary-dark), var(--tn-primary) 50%, var(--tn-accent));
    --tn-hero-hs: linear-gradient(115deg, #0a5a52, var(--tn-accent) 60%, #2bb5a0);
}

/* ===================================================================== 2. Tiện ích, lưới */
/* style.css của theme đặt a.btn { color: #fff } → nút liên kết btn-default thành chữ trắng trên nền trắng */
a.btn.btn-default, a.btn.btn-default:link, a.btn.btn-default:visited { color: #333; }
a.btn.btn-default:hover, a.btn.btn-default:focus { color: #111; }

.tn-muted { color: var(--tn-muted); }
.tn-small { font-size: 12px; }
.tn-nowrap { white-space: nowrap; }
.tn-mono { font-family: Consolas, "Courier New", monospace; letter-spacing: .5px; }
.tn-inline { display: inline; margin: 0; }

/* Lưới riêng của module (12 phần) — theme NukeViet dùng Bootstrap 24 cột nên không dùng col-*-N của theme */
.tn-row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
.tn-row > [class*="tn-xs-"], .tn-row > [class*="tn-sm-"], .tn-row > [class*="tn-md-"] { box-sizing: border-box; flex: 0 0 100%; max-width: 100%; min-width: 0; padding-left: 8px; padding-right: 8px; }
.tn-row > .tn-xs-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.tn-row > .tn-xs-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.tn-row > .tn-xs-3 { flex: 0 0 25%; max-width: 25%; }
.tn-row > .tn-xs-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.tn-row > .tn-xs-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.tn-row > .tn-xs-6 { flex: 0 0 50%; max-width: 50%; }
.tn-row > .tn-xs-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.tn-row > .tn-xs-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.tn-row > .tn-xs-9 { flex: 0 0 75%; max-width: 75%; }
.tn-row > .tn-xs-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.tn-row > .tn-xs-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.tn-row > .tn-xs-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
    .tn-row > .tn-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
    .tn-row > .tn-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .tn-row > .tn-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .tn-row > .tn-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .tn-row > .tn-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .tn-row > .tn-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .tn-row > .tn-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .tn-row > .tn-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .tn-row > .tn-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .tn-row > .tn-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .tn-row > .tn-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .tn-row > .tn-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
    .tn-row > .tn-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
    .tn-row > .tn-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .tn-row > .tn-md-3 { flex: 0 0 25%; max-width: 25%; }
    .tn-row > .tn-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .tn-row > .tn-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .tn-row > .tn-md-6 { flex: 0 0 50%; max-width: 50%; }
    .tn-row > .tn-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .tn-row > .tn-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .tn-row > .tn-md-9 { flex: 0 0 75%; max-width: 75%; }
    .tn-row > .tn-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .tn-row > .tn-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .tn-row > .tn-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ===================================================================== 3. Bố cục trang */
.tn-wrap { margin-bottom: 30px; color: var(--tn-ink); }
.tn-wrap.tn-exam-head { margin-bottom: 16px; }
.tn-wrap a:not(.btn), .tn-test a:not(.btn) { color: var(--tn-primary); }
.tn-wrap a:not(.btn):hover, .tn-test a:not(.btn):hover { color: var(--tn-primary-hover); }
.tn-wrap h2, .tn-wrap h3, .tn-test h2 { color: var(--tn-ink); font-weight: 700; }
.tn-wrap code { padding: 1px 5px; border-radius: 4px; color: var(--tn-primary-dark); background: var(--tn-primary-soft); }
/* Theme bỏ dấu đầu dòng của ul/ol → trả lại cho danh sách nội dung (trừ list-group, nav) */
.tn-wrap ul:not(.list-group):not(.nav):not(.pagination):not(.tn-door-list):not(.tn-share-list) { list-style: disc; padding-left: 20px; }
.tn-wrap ol:not(.list-group) { list-style: decimal; padding-left: 22px; }
.tn-wrap ul:not(.list-group):not(.nav):not(.pagination):not(.tn-door-list):not(.tn-share-list) > li, .tn-wrap ol:not(.list-group) > li { display: list-item; }
.tn-wrap li::marker { color: var(--tn-accent); }

/* Tiêu đề trang — một mẫu cho mọi trang:
   .tn-page-head > .tn-page-title (.tn-back?, h2 > i, .tn-page-sub?) + .tn-page-actions? */
.tn-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin: 4px 0 16px; }
.tn-page-title { min-width: 0; flex: 1 1 320px; }
.tn-page-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; line-height: 1.3; }
.tn-page-head h2 > i { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--tn-r); background: var(--tn-primary-soft); color: var(--tn-primary); font-size: 17px; }
.tn-page-sub { margin-top: 4px; color: var(--tn-muted); }
.tn-page-sub:empty { display: none; }
.tn-page-head h2 + .tn-page-sub { padding-left: 46px; }
.tn-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tn-back, .tn-wrap a.tn-back, .tn-test a.tn-back { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 6px; color: var(--tn-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.tn-wrap a.tn-back:hover, .tn-test a.tn-back:hover { color: var(--tn-primary); }
.tn-page-title > .tn-back { display: flex; width: max-content; }

/* Tiêu đề mục trong trang */
.tn-section { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0 10px; font-size: 17px; font-weight: 700; color: var(--tn-ink); }
.tn-section:first-child { margin-top: 4px; }
.tn-section a { font-size: 13px; font-weight: 600; }

/* Thanh công cụ (tìm kiếm / tóm tắt bên trái, nút bên phải) */
.tn-toolbar { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.tn-toolbar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tn-toolbar .form-inline { display: flex; gap: 6px; flex: 1 1 260px; max-width: 420px; }
.tn-toolbar .form-inline .form-control { flex: 1; min-width: 0; }
.tn-toolbar label { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tn-toolbar label select { width: auto; }
.tn-sum b { color: var(--tn-primary-dark); font-size: 16px; }
.tn-flash { margin-top: -5px; }

/* ===================================================================== 4. Thanh cổng (giáo viên / học sinh) */
.tn-portal { margin: 0 0 18px; border: 1px solid var(--tn-line); border-radius: var(--tn-r-lg); overflow: hidden; background: var(--tn-surface); box-shadow: var(--tn-shadow); }
.tn-portal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; color: #fff; background: var(--tn-hero); }
.tn-portal-hs .tn-portal-head { background: var(--tn-hero-hs); }
.tn-portal-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tn-portal-logo { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--tn-r); background: rgba(255,255,255,.16); font-size: 20px; }
.tn-portal-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.tn-portal-name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.tn-portal-user { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; }
.tn-portal-user a, .tn-portal-user a:link, .tn-portal-user a:visited { color: #fff; opacity: .92; text-decoration: none; }
.tn-portal-user a:hover { opacity: 1; text-decoration: underline; }
.tn-portal-switch { padding: 3px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; }
.tn-portal-who { font-weight: 600; }
.tn-portal-nav { display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; scrollbar-width: thin; }
.tn-portal-nav a, .tn-portal-nav a:link, .tn-portal-nav a:visited { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 12px 14px 10px; border-bottom: 3px solid transparent; color: var(--tn-ink-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tn-portal-nav a i { color: var(--tn-muted); }
.tn-portal-nav a:hover { color: var(--tn-primary-dark); background: var(--tn-tint); }
.tn-portal-nav a.active { color: var(--tn-primary-dark); border-bottom-color: var(--tn-primary); }
.tn-portal-nav a.active i { color: var(--tn-primary); }
.tn-portal-hs .tn-portal-nav a.active { border-bottom-color: var(--tn-accent); }
.tn-portal a:focus-visible { outline: none; box-shadow: var(--tn-focus); }

/* ===================================================================== Đầu trang tổng quan, thẻ số liệu, cổng vào */
.tn-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; padding: 24px 26px; margin-bottom: 18px; border-radius: var(--tn-r-lg); color: #fff; background: var(--tn-hero); box-shadow: var(--tn-shadow); }
.tn-hero-hs { background: var(--tn-hero-hs); }
.tn-hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; color: #fff; }
.tn-hero p { margin: 0; opacity: .9; }
.tn-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.tn-stats .tn-stat { position: relative; display: block; padding: 16px 16px 14px; margin-bottom: 16px; border: 1px solid var(--tn-line); border-radius: var(--tn-r-lg); background: var(--tn-surface); box-shadow: var(--tn-shadow); color: var(--tn-ink); text-decoration: none; }
.tn-stats a.tn-stat:hover { border-color: var(--tn-primary-line); text-decoration: none; }
.tn-stats .tn-stat > i { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--tn-r); background: var(--tn-primary-soft); color: var(--tn-primary); font-size: 16px; }
.tn-stats .tn-stat b { display: block; font-size: 28px; line-height: 1.2; color: var(--tn-primary-dark); }
.tn-stats .tn-stat span { color: var(--tn-muted); font-size: 13px; }
.tn-steps { padding-left: 18px; }
.tn-steps li { margin-bottom: 6px; }
.tn-steps li::marker { font-weight: 700; }

.tn-gate { max-width: 920px; margin: 0 auto 30px; }
.tn-gate-hero { text-align: center; padding: 30px 16px 22px; }
.tn-gate-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 18px; background: linear-gradient(135deg, var(--tn-primary), var(--tn-accent)); color: #fff; font-size: 30px; box-shadow: 0 6px 18px rgba(11,110,79,.28); }
.tn-gate-hero h1 { margin: 0 0 4px; font-size: 30px; font-weight: 800; color: var(--tn-ink); }
.tn-gate-hero p { margin: 0; color: var(--tn-muted); font-size: 16px; }
.tn-door { display: flex; flex-direction: column; height: calc(100% - 16px); margin-bottom: 16px; padding: 24px 22px 20px; border: 1px solid var(--tn-line); border-top: 5px solid var(--tn-accent); border-radius: var(--tn-r-lg); background: var(--tn-surface); box-shadow: var(--tn-shadow); }
.tn-door-gv { border-top-color: var(--tn-primary); }
.tn-door-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--tn-r-lg); background: var(--tn-primary-soft); color: var(--tn-primary); font-size: 25px; }
.tn-door-hs .tn-door-icon { background: var(--tn-accent-soft); color: var(--tn-accent); }
.tn-door h2 { margin: 14px 0 10px; font-size: 22px; }
.tn-wrap ul.tn-door-list { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; }
.tn-wrap ul.tn-door-list > li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; color: var(--tn-ink-2); }
.tn-door-list i { width: 16px; color: var(--tn-accent); text-align: center; }
.tn-door-note { margin: 10px 0 0; text-align: center; color: var(--tn-muted); font-size: 13px; }
.tn-gate-foot { text-align: center; color: var(--tn-muted); }
.tn-gate-norole { max-width: 620px; margin: 0 auto; padding: 22px; }
.tn-gate-norole h2 { margin-top: 0; font-size: 20px; }

/* ===================================================================== 5. Thành phần */
/* Nút: chính = xanh ngọc, phụ = viền, "Chấm" = xanh lơ, xóa = viền đỏ (đặc khi rê chuột) */
.tn-wrap .btn, .tn-test .btn, .tn-portal .btn, .tn-print-bar .btn { border-radius: 8px; font-weight: 600; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
.tn-wrap .btn > .fa, .tn-test .btn > .fa, .tn-print-bar .btn > .fa { margin-right: 3px; }
.tn-wrap .btn-xs { border-radius: var(--tn-r-sm); }
.tn-wrap .btn-primary, .tn-test .btn-primary, .tn-print-bar .btn-primary { background: var(--tn-primary); border-color: var(--tn-primary); color: #fff; }
.tn-wrap .btn-primary:hover, .tn-wrap .btn-primary:focus, .tn-test .btn-primary:hover, .tn-test .btn-primary:focus, .tn-print-bar .btn-primary:hover { background: var(--tn-primary-hover); border-color: var(--tn-primary-hover); color: #fff; }
.tn-wrap .btn-success, .tn-test .btn-success { background: var(--tn-accent); border-color: var(--tn-accent); color: #fff; }
.tn-wrap .btn-success:hover, .tn-wrap .btn-success:focus, .tn-test .btn-success:hover, .tn-test .btn-success:focus { background: var(--tn-accent-hover); border-color: var(--tn-accent-hover); color: #fff; }
.tn-wrap .btn-default, .tn-wrap .btn-info, .tn-test .btn-default, .tn-print-bar .btn-default { background: var(--tn-surface); border-color: var(--tn-line); color: var(--tn-ink-2); }
.tn-wrap .btn-default:hover, .tn-wrap .btn-default:focus, .tn-wrap .btn-info:hover, .tn-test .btn-default:hover, .tn-print-bar .btn-default:hover { background: var(--tn-tint); border-color: var(--tn-primary-line); color: var(--tn-primary-dark); }
.tn-wrap a.btn.btn-default, .tn-wrap a.btn.btn-default:link, .tn-wrap a.btn.btn-default:visited, .tn-wrap a.btn.btn-info, .tn-test a.btn.btn-default, .tn-print-bar a.btn.btn-default { color: var(--tn-ink-2); }
.tn-wrap .btn-warning { background: var(--tn-warn); border-color: var(--tn-warn); color: #fff; }
.tn-wrap .btn-warning:hover, .tn-wrap .btn-warning:focus { background: var(--tn-warn-ink); border-color: var(--tn-warn-ink); color: #fff; }
.tn-wrap .btn-danger, .tn-wrap a.btn.btn-danger { background: var(--tn-surface); border-color: #f1c4c0; color: var(--tn-bad-ink); }
.tn-wrap .btn-danger:hover, .tn-wrap .btn-danger:focus, .tn-wrap a.btn.btn-danger:hover { background: var(--tn-bad); border-color: var(--tn-bad); color: #fff; }
.tn-wrap .btn-link { color: var(--tn-primary); font-weight: 600; }
.tn-wrap .btn-link:hover { color: var(--tn-primary-hover); }
.tn-wrap .btn.disabled, .tn-wrap .btn[disabled] { opacity: .5; }
.tn-wrap .btn:focus-visible, .tn-test .btn:focus-visible, .tn-print-bar .btn:focus-visible { outline: none; box-shadow: var(--tn-focus); }
/* Nút trên nền gradient (đầu trang) */
.btn.btn-light, a.btn.btn-light, a.btn.btn-light:link, a.btn.btn-light:visited { background: #fff; border-color: #fff; color: var(--tn-primary-dark); }
.btn.btn-light:hover, a.btn.btn-light:hover { background: var(--tn-primary-soft); color: var(--tn-primary-dark); }
.btn.btn-ghost, a.btn.btn-ghost, a.btn.btn-ghost:link, a.btn.btn-ghost:visited { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.55); color: #fff; }
.btn.btn-ghost:hover, a.btn.btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; }

/* Thẻ: .panel của Bootstrap và .tn-card dùng chung một dáng. Mọi biến thể panel-* có cùng tiêu đề nền nhạt;
   cảnh báo / lỗi chỉ đổi màu tiêu đề. */
.tn-wrap .panel, .tn-card { margin-bottom: 18px; border: 1px solid var(--tn-line); border-radius: var(--tn-r-lg); background: var(--tn-surface); box-shadow: var(--tn-shadow); }
.tn-wrap .panel { overflow: hidden; }
.tn-card { padding: 16px 18px; }
.tn-wrap .panel > .panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 46px; padding: 10px 16px; border-bottom: 1px solid var(--tn-line); border-radius: 0; background: var(--tn-tint); color: var(--tn-ink); }
.tn-wrap .panel > .panel-heading > strong { font-size: 15px; }
.tn-wrap .panel > .panel-heading > strong > .fa { margin-right: 4px; color: var(--tn-accent); }
.tn-wrap .panel > .panel-heading > .pull-right { float: none !important; margin-left: auto; }
.tn-wrap .panel-primary { border-color: var(--tn-line); }
.tn-wrap .panel-primary > .panel-heading { background: var(--tn-tint); border-color: var(--tn-line); color: var(--tn-ink); box-shadow: inset 4px 0 0 var(--tn-primary); }
.tn-wrap .panel-info > .panel-heading { background: var(--tn-accent-soft); border-color: #bfe3e0; color: var(--tn-accent-ink); }
.tn-wrap .panel-warning > .panel-heading { background: var(--tn-warn-soft); border-color: #f5dc9a; color: var(--tn-warn-ink); }
.tn-wrap .panel-danger > .panel-heading { background: var(--tn-bad-soft); border-color: #f5c2bd; color: var(--tn-bad-ink); }
.tn-wrap .panel-body { padding: 16px; }
.tn-wrap .panel-footer { padding: 10px 16px; border-top: 1px solid var(--tn-line-2); background: var(--tn-surface); }
.tn-wrap .panel > .list-group { margin: 0; }
.tn-wrap .panel > .list-group .list-group-item { border-left: 0; border-right: 0; border-color: var(--tn-line-2); }
.tn-wrap .panel > .list-group .list-group-item:first-child { border-top: 0; }
.tn-wrap .panel > .list-group .list-group-item:last-child { border-bottom: 0; border-radius: 0; }
.tn-wrap a.list-group-item:hover { background: var(--tn-tint); }
.tn-wrap h3:first-child, .tn-wrap h4:first-child, .tn-card h2:first-child { margin-top: 0; }

/* Bảng (luôn đặt trong thẻ) */
.tn-wrap .table { margin-bottom: 0; }
.tn-wrap .table > thead > tr > th { padding: 10px 12px; background: var(--tn-tint); color: var(--tn-ink-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--tn-line); white-space: nowrap; }
.tn-wrap .table > tbody > tr > td { padding: 10px 12px; border-top-color: var(--tn-line-2); vertical-align: middle; }
.tn-wrap .table-condensed > thead > tr > th, .tn-wrap .table-condensed > tbody > tr > td { padding: 7px 10px; }
.tn-wrap .table-hover > tbody > tr:hover { background: #f7fbf9; }
.tn-wrap .table > tbody > tr.warning > td { background: #fffaeb; }
.tn-wrap .table-responsive { margin-bottom: 0; border: 0; }
.tn-wrap .panel > .table-responsive > .table > thead > tr > th:first-child, .tn-wrap .panel > .table-responsive > .table > tbody > tr > td:first-child { padding-left: 16px; }
.tn-wrap .panel > .table-responsive > .table > thead > tr > th:last-child, .tn-wrap .panel > .table-responsive > .table > tbody > tr > td:last-child { padding-right: 16px; }
.tn-wrap .table-bordered { border-color: var(--tn-line); }
.tn-wrap .table-bordered > tbody > tr > td, .tn-wrap .table-bordered > tbody > tr > th { border-color: var(--tn-line); padding: 5px 8px; }
.tn-wrap .tn-table .btn-link { padding: 0 4px; }
.tn-table-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -8px 0 18px; font-size: 13px; }

/* Form */
.tn-wrap .form-control, .tn-test .form-control { border-color: var(--tn-field); border-radius: 8px; box-shadow: none; }
.tn-wrap .form-control:focus, .tn-test .form-control:focus { border-color: var(--tn-accent); box-shadow: var(--tn-focus); }
.tn-wrap label { color: var(--tn-ink-2); }
.tn-wrap .help-block { color: var(--tn-muted); font-size: 13px; }
.tn-wrap .input-group-btn > .btn { border-radius: 0 8px 8px 0; }
.tn-wrap .input-group > .form-control:first-child { border-radius: 8px 0 0 8px; }
.tn-wrap input[type=range] { accent-color: var(--tn-primary); }
.tn-wrap input[type=checkbox], .tn-wrap input[type=radio] { accent-color: var(--tn-primary); }
.tn-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }

/* Thanh tab — một kiểu cho mọi nơi: chức năng của đề, camera/tải ảnh, nhập đáp án, bộ lọc duyệt bài, sắp xếp */
.tn-wrap .nav-pills, .tn-wrap .nav-tabs, .tn-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 16px; border: 1px solid var(--tn-line); border-radius: var(--tn-r); background: var(--tn-tint); }
.tn-wrap .nav-pills::before, .tn-wrap .nav-pills::after, .tn-wrap .nav-tabs::before, .tn-wrap .nav-tabs::after { display: none; }
.tn-wrap .nav-pills > li, .tn-wrap .nav-tabs > li { float: none; margin: 0; }
.tn-wrap .nav-pills > li + li { margin-left: 0; }
.tn-wrap .nav-pills > li > a, .tn-wrap .nav-tabs > li > a, .tn-seg > .btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 14px; border: 0; border-radius: var(--tn-r-sm); background: transparent; color: var(--tn-ink-2); font-size: 14px; font-weight: 600; line-height: 1.4; box-shadow: none; }
.tn-wrap .nav-pills > li > a:hover, .tn-wrap .nav-tabs > li > a:hover, .tn-seg > .btn:hover { background: rgba(255,255,255,.7); color: var(--tn-primary-dark); }
.tn-wrap .nav-pills > li.active > a, .tn-wrap .nav-pills > li.active > a:hover, .tn-wrap .nav-pills > li.active > a:focus,
.tn-wrap .nav-tabs > li.active > a, .tn-wrap .nav-tabs > li.active > a:hover, .tn-wrap .nav-tabs > li.active > a:focus,
.tn-seg > .btn-primary, .tn-seg > .btn-primary:hover, .tn-seg > .btn-primary:focus { border: 0; background: var(--tn-surface); color: var(--tn-primary-dark); box-shadow: 0 1px 3px rgba(16,40,30,.14); }
.tn-wrap .nav-pills > li > a:focus-visible, .tn-wrap .nav-tabs > li > a:focus-visible { outline: none; box-shadow: var(--tn-focus); }
/* Tab trong nội dung (camera/tải ảnh, cách nhập đáp án) co theo nội dung để không trông như thanh chức năng của đề */
.tn-wrap .nav-tabs { display: inline-flex; max-width: 100%; vertical-align: top; }
.tn-seg { display: inline-flex; margin: 0; padding: 3px; }
.tn-seg > .btn { padding: 4px 10px; font-size: 13px; }
.tn-seg > .btn-sm { padding: 6px 12px; }
.tn-wrap .tab-content > .tab-pane { padding-top: 2px; }

/* Thông báo */
.tn-wrap .alert, .tn-test .alert, .tn-flash { border: 1px solid; border-left-width: 4px; border-radius: var(--tn-r); }
.tn-wrap .alert-success, .tn-test .alert-success, .alert-success.tn-flash { background: #e6f6ee; border-color: #bfe6d0; border-left-color: var(--tn-primary); color: #0d5a3d; }
.tn-wrap .alert-info, .tn-test .alert-info, .alert-info.tn-flash { background: #e8f5f4; border-color: #bfe3e0; border-left-color: var(--tn-accent); color: var(--tn-accent-ink); }
.tn-wrap .alert-warning, .tn-test .alert-warning, .alert-warning.tn-flash { background: #fff8e6; border-color: #f5dc9a; border-left-color: var(--tn-warn); color: var(--tn-warn-ink); }
.tn-wrap .alert-danger, .tn-test .alert-danger, .alert-danger.tn-flash { background: #fdf0ef; border-color: #f5c2bd; border-left-color: var(--tn-bad); color: var(--tn-bad-ink); }
.tn-wrap .alert ul { margin: 6px 0 0; }
.tn-alert-row i { margin-right: 6px; }

/* Nhãn trạng thái: nền nhạt, chữ đậm cùng màu */
.tn-wrap .label, .tn-test .label { display: inline-block; padding: .3em .75em; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.2; vertical-align: middle; }
.tn-wrap .label-success, .tn-test .label-success { background: var(--tn-primary-soft); color: var(--tn-primary-dark); }
.tn-wrap .label-primary, .tn-test .label-primary { background: var(--tn-primary); color: #fff; }
.tn-wrap .label-info, .tn-test .label-info { background: var(--tn-accent-soft); color: var(--tn-accent-ink); }
.tn-wrap .label-warning, .tn-test .label-warning { background: var(--tn-warn-soft); color: var(--tn-warn-ink); }
.tn-wrap .label-danger, .tn-test .label-danger { background: var(--tn-bad-soft); color: var(--tn-bad-ink); }
.tn-wrap .label-default, .tn-test .label-default { background: #edf1ef; color: #4b5853; }
.tn-count { display: inline-block; min-width: 30px; padding: 1px 8px; border-radius: 999px; background: var(--tn-primary-soft); color: var(--tn-primary-dark); font-weight: 700; text-align: center; }
.tn-pill { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--tn-primary); color: #fff; font-size: 12px; line-height: 18px; }
.tn-wrap .badge { display: inline-block; min-width: 18px; padding: 2px 7px; border-radius: 999px; background: var(--tn-muted); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.3; }

/* Thanh tiến độ, phân trang */
.tn-wrap .progress { border-radius: 999px; background: var(--tn-line-2); box-shadow: none; }
.tn-wrap .progress-bar { background-color: var(--tn-accent); box-shadow: none; }
.tn-wrap .progress-bar-success { background-color: var(--tn-ok); }
.tn-wrap .progress-bar-warning { background-color: #e0a100; }
.tn-wrap .progress-bar-danger { background-color: var(--tn-bad); }
.tn-wrap .pagination > li > a { color: var(--tn-primary); }
.tn-wrap .pagination > .active > a, .tn-wrap .pagination > .active > span { background: var(--tn-primary); border-color: var(--tn-primary); }
.tn-pager { padding: 6px 16px; text-align: center; }

/* Trạng thái rỗng (thay alert "Chưa có…") */
.tn-empty-state { padding: 30px 16px; text-align: center; color: var(--tn-muted); }
.tn-empty-state > i { display: block; margin-bottom: 8px; font-size: 32px; color: var(--tn-primary-line); }
.tn-empty-state p { margin: 0; }
.tn-empty-state p + p, .tn-empty-state .btn { margin-top: 12px; }

/* Danh sách dạng thẻ (cổng học sinh) */
.tn-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tn-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--tn-line); border-radius: var(--tn-r-lg); background: var(--tn-surface); box-shadow: var(--tn-shadow-sm); }
.tn-item-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--tn-r); background: var(--tn-primary-soft); color: var(--tn-primary); font-size: 18px; }
.tn-item-main { flex: 1 1 220px; min-width: 0; }
.tn-item-main b, .tn-item-main span { display: block; }
.tn-item-main span { color: var(--tn-muted); font-size: 13px; }
.tn-score { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.tn-score b { font-size: 24px; color: var(--tn-primary-dark); }
.tn-score small { color: var(--tn-muted); }
.tn-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; }
.tn-dl dt { color: var(--tn-muted); font-weight: 600; }
.tn-dl dd { margin: 0; }
.tn-me { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--tn-r); background: var(--tn-primary-soft); }
.tn-me > i { font-size: 30px; color: var(--tn-primary); }
.tn-me b, .tn-me span { display: block; }
.tn-me span { color: var(--tn-muted); font-size: 13px; }

/* ===================================================================== 6. Bảng → thẻ trên điện thoại
   Mỗi dòng một thẻ, ô tiêu đề (.tn-cell-main) lên đầu, ô có data-label hiện kèm nhãn, nút thao tác (.tn-cell-act) xuống dòng riêng.
   Bảng mới thêm cần gắn tn-stack + các lớp ô này. */
@media (max-width: 640px) {
    .tn-wrap .table-responsive { overflow: visible; border: 0; }
    .tn-stack, .tn-stack > tbody { display: block; width: 100%; }
    .tn-stack > thead { display: none; }
    .tn-wrap .tn-stack > tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 14px; border-top: 1px solid var(--tn-line); }
    .tn-wrap .tn-stack > tbody > tr:first-child { border-top: 0; }
    .tn-wrap .tn-stack > tbody > tr > td, .tn-wrap .panel > .table-responsive > .tn-stack > tbody > tr > td:first-child, .tn-wrap .panel > .table-responsive > .tn-stack > tbody > tr > td:last-child { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
    .tn-wrap .tn-stack > tbody > tr > td.tn-cell-hide, .tn-wrap .tn-stack > tbody > tr > td[data-label]:empty { display: none; }
    .tn-stack .tn-cell-main { order: -1; flex: 1 1 100%; font-size: 15px; }
    .tn-stack .tn-cell-wide { flex: 1 1 100%; }
    .tn-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--tn-muted); font-size: 12px; }
    .tn-stack .tn-cell-score b { font-size: 17px; color: var(--tn-primary-dark); }
    .tn-wrap .tn-stack > tbody > tr > td.tn-cell-act, .tn-wrap .panel > .table-responsive > .tn-stack > tbody > tr > td.tn-cell-act:last-child { display: flex; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; }
    .tn-stack .tn-cell-act .btn { padding: 6px 12px; font-size: 13px; }

    /* Thẻ danh sách cổng học sinh: biểu tượng + tên trên một hàng, trạng thái / điểm / nút ở hàng dưới */
    .tn-item { gap: 8px 12px; }
    .tn-item-main { flex: 1 1 calc(100% - 56px); }
    .tn-item > .label, .tn-item > .tn-score, .tn-item > .tn-small { margin-left: 52px; margin-right: auto; }
    .tn-score { flex-direction: row; align-items: baseline; gap: 6px; }
    .tn-item .btn { margin-left: auto; }
}

/* ===================================================================== 7. Từng chức năng */
/* --- Đáp án & mã đề */
.tn-code-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.tn-code-no { font-weight: 700; font-size: 16px; }
.tn-code-act { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.tn-keys { line-height: 2; }
.tn-k { display: inline-block; min-width: 44px; margin: 0 2px 2px 0; padding: 0 5px; border: 1px solid var(--tn-line); border-radius: 4px; font-size: 12px; background: #fafcfb; }
.tn-k i { font-style: normal; color: var(--tn-faint); margin-right: 3px; }
.tn-k2 { background: var(--tn-tint); } .tn-k3 { background: var(--tn-accent-soft); }
.tn-part-title { margin: 14px 0 8px; font-size: 15px; font-weight: 700; color: var(--tn-primary-dark); }
.tn-part-title:first-child { margin-top: 0; }
.tn-part-title small { font-weight: 400; color: var(--tn-muted); }
.tn-grid1 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; margin-bottom: 15px; }
.tn-gq { display: flex; align-items: center; gap: 4px; }
.tn-gno { display: inline-block; min-width: 30px; font-weight: 700; color: var(--tn-ink-2); }
.tn-bub { margin: 0; cursor: pointer; }
.tn-bub input { position: absolute; opacity: 0; pointer-events: none; }
.tn-bub span { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1.5px solid var(--tn-faint); border-radius: 50%; font-weight: 600; color: var(--tn-ink-2); user-select: none; }
.tn-bub input:checked + span { background: var(--tn-primary); border-color: var(--tn-primary); color: #fff; }
.tn-bub input:focus-visible + span { box-shadow: var(--tn-focus); }
.tn-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 15px; }
.tn-gq2 { border: 1px solid var(--tn-line); border-radius: var(--tn-r-sm); padding: 6px 8px; }
.tn-gs { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.tn-gs > span:first-child { width: 20px; font-weight: 600; }
.tn-grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; margin-bottom: 15px; }
.tn-gq3 { display: flex; align-items: center; gap: 6px; }
.tn-struct td { vertical-align: middle !important; }
.tn-struct input { max-width: 90px; }

/* --- Câu hỏi (đề tách từ Word) */
.tn-q { padding: 12px 0; border-bottom: 1px dashed var(--tn-line); }
.tn-q:first-child { padding-top: 0; }
.tn-q:last-child { border-bottom: 0; padding-bottom: 0; }
.tn-qhead { margin-bottom: 4px; }
.tn-qbody p, .tn-group p { margin: 0 0 4px; }
.tn-opt { padding: 2px 8px; margin: 2px 0; border-radius: var(--tn-r-sm); }
.tn-opt p { display: inline; margin: 0; }
.tn-right { background: var(--tn-ok-soft); }
.tn-group { padding: 8px 10px; margin-bottom: 6px; background: var(--tn-tint); border-left: 3px solid var(--tn-primary-line); }
.tn-explain { margin-top: 4px; color: var(--tn-ink-2); }
.tn-explain summary { cursor: pointer; color: var(--tn-primary); font-weight: 600; }
.tn-qimg { max-width: 100%; height: auto; vertical-align: middle; }
.tn-noimg { color: var(--tn-warn); font-style: italic; }
.tn-qtable { width: auto; margin: 6px 0; }
.tn-rules li { margin-bottom: 5px; }

/* --- Hướng dẫn */
.tn-guide h3 { margin: 22px 0 8px; font-size: 18px; color: var(--tn-primary-dark); }
.tn-guide h4 { margin: 14px 0 6px; font-size: 15px; font-weight: 700; }
.tn-guide p, .tn-guide li { line-height: 1.6; }

/* --- Phiếu trả lời */
.tn-sheet-preview { border: 1px solid var(--tn-line); border-radius: var(--tn-r-sm); box-shadow: var(--tn-shadow); background: #fff; overflow: hidden; }
.tn-sheet-preview svg { display: block; width: 100%; height: auto; }
.tn-print-bar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 16px; background: var(--tn-primary-dark); color: #e6f2ec; }
.tn-print-bar > span { flex: 1 1 200px; }
.tn-print { background: var(--tn-line); padding: 20px 0; }
.tn-page { width: 210mm; height: 297mm; margin: 0 auto 20px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.2); overflow: hidden; }
.tn-page svg { display: block; width: 210mm; height: 297mm; }

/* --- Chấm bằng camera / ảnh */
.tn-cam-box { position: relative; background: #111; border-radius: var(--tn-r-lg); overflow: hidden; aspect-ratio: 3 / 4; max-height: 75vh; margin: 0 auto; }
@media (min-width: 992px) { .tn-cam-box { aspect-ratio: 4 / 3; } }
.tn-cam-box video { width: 100%; height: 100%; object-fit: fill; display: block; }
#tn-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tn-cam-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.tn-cam-frame span { height: 88%; aspect-ratio: 210 / 297; border: 2px dashed rgba(255,255,255,.45); border-radius: var(--tn-r-sm); }
.tn-cam-msg { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; text-align: center; }
.tn-cam-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.tn-cam-ctl .checkbox-inline { padding-top: 0; }
.tn-last { padding: 16px; border: 2px solid var(--tn-line); border-radius: var(--tn-r-lg); min-height: 160px; background: var(--tn-surface); }
.tn-last.tn-empty { color: var(--tn-faint); display: flex; align-items: center; justify-content: center; }
.tn-last.tn-ok { border-color: var(--tn-ok); }
.tn-last.tn-bad { border-color: var(--tn-bad); }
.tn-last .tn-big { font-size: 48px; font-weight: 800; color: var(--tn-primary); line-height: 1; }
.tn-last .tn-big small { font-size: 18px; color: var(--tn-muted); }
.tn-last .tn-who { margin: 6px 0; font-size: 15px; }
.tn-last img { width: 100%; margin-top: 10px; border: 1px solid var(--tn-line); border-radius: 4px; }
.tn-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 16px 0; padding: 10px 14px; border: 1px solid var(--tn-line); border-radius: var(--tn-r); background: var(--tn-tint); }
.tn-settings label { margin: 0; font-weight: 600; }
.tn-settings input[type=range] { display: inline-block; width: 160px; vertical-align: middle; }
.tn-settings .checkbox-inline { padding-top: 0; }
.tn-settings > .btn { margin-left: auto; }
.tn-upload { padding: 26px; border: 2px dashed var(--tn-primary-line); border-radius: var(--tn-r-lg); text-align: center; background: var(--tn-tint); }
.tn-upload .form-group { max-width: 460px; margin-left: auto; margin-right: auto; text-align: left; }
.tn-upload input[type=file] { margin: 0 auto; }
.tn-batch-progress { margin-top: 10px; }
.tn-scan-img { border: 1px solid var(--tn-line); border-radius: var(--tn-r-sm); }
.tn-absent span { display: inline-block; margin: 0 14px 6px 0; }

/* --- Thống kê */
.tn-prog { margin-bottom: 2px; height: 18px; }
.tn-prog .progress-bar { font-size: 11px; line-height: 18px; }
/* isolation + z-index -1: thanh nền nằm dưới chữ (phần tử định vị tuyệt đối vốn vẽ đè lên chữ thường) */
.tn-optbar { position: relative; isolation: isolate; display: inline-block; width: 70px; margin-right: 4px; padding: 0 4px; border: 1px solid var(--tn-line); border-radius: 4px; font-size: 12px; overflow: hidden; }
.tn-optbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tn-primary-soft); z-index: -1; }
.tn-optbar.tn-key { border-color: var(--tn-ok); font-weight: 700; }
.tn-optbar.tn-key i { background: #bbf7d0; }
.tn-top .list-group-item { display: flex; align-items: center; gap: 6px; }
.tn-top .badge { margin-left: auto; min-width: 32px; padding: 3px 8px; font-size: 13px; background: var(--tn-primary); }
.tn-statline { margin: -4px 0 16px; color: var(--tn-muted); }

/* --- Giao đề online */
.tn-assign .panel-body { display: flex; gap: 14px; }
.tn-assign-qr img { border: 1px solid var(--tn-line); border-radius: var(--tn-r-sm); background: #fff; }
.tn-assign-info { flex: 1; min-width: 0; }
.tn-assign-info h4 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.tn-assign-act { display: flex; flex-wrap: wrap; gap: 6px; }
.tn-link { margin: 8px 0; }
.tn-link-wide { flex: 1 1 320px; max-width: 560px; margin: 0; }

/* --- Lớp học: tài khoản học sinh, công bố điểm */
.tn-acc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--tn-primary-line); border-radius: var(--tn-r-lg); background: var(--tn-tint); }
.tn-acc-sum { flex: 1 1 260px; }
.tn-acc-sum i { color: var(--tn-primary); margin-right: 4px; }
.tn-acc-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.tn-acc-form label { margin: 0; font-weight: 600; font-size: 13px; }
.tn-acc-form .form-control { width: 110px; display: inline-block; }
.tn-pub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--tn-line); border-radius: var(--tn-r-lg); background: var(--tn-surface); }
.tn-pub-success { border-color: var(--tn-primary-line); background: var(--tn-tint); }
.tn-pub label { margin: 0; }
.tn-pub select { width: auto; }

/* Phiếu tài khoản (in, cắt rời) */
.tn-acc-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; max-width: 1000px; margin: 16px auto; padding: 0 12px; }
.tn-acc-slip { padding: 12px 14px; border: 1.5px dashed #8aa89a; border-radius: var(--tn-r); background: #fff; break-inside: avoid; page-break-inside: avoid; }
.tn-acc-slip-head { font-size: 12px; font-weight: 700; color: var(--tn-primary); text-transform: uppercase; letter-spacing: .03em; }
.tn-acc-slip-name { margin: 4px 0 6px; font-size: 16px; font-weight: 700; }
.tn-acc-slip-name span { display: block; font-size: 12px; font-weight: 400; color: var(--tn-muted); }
.tn-acc-slip table { width: 100%; margin-bottom: 6px; }
.tn-acc-slip td { padding: 3px 0; border-top: 1px solid var(--tn-line-2); }
.tn-acc-slip td:first-child { width: 120px; color: var(--tn-muted); }
.tn-acc-slip td.tn-mono b { font-family: Verdana, "DejaVu Sans", sans-serif; font-size: 17px; letter-spacing: 1.5px; }
.tn-acc-slip-foot { font-size: 11px; color: var(--tn-muted); }

/* --- Chia sẻ (lớp, ngân hàng đề, tài liệu) */
.tn-wrap ul.tn-share-list { list-style: none; padding: 0; margin: 0 0 12px; }
.tn-wrap ul.tn-share-list > li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--tn-line-2); }
.tn-share-list > li > i { width: 18px; color: var(--tn-accent); text-align: center; }
.tn-share-list > li > span { flex: 1; min-width: 0; }
.tn-share-list .btn-link { color: var(--tn-muted); }
.tn-share-list .btn-link:hover { color: var(--tn-bad); }
.tn-share-none { margin: 0 0 12px; color: var(--tn-muted); }
.tn-share-form { display: flex; gap: 6px; }
.tn-share-form .form-control { flex: 1; min-width: 0; }

/* --- Tài liệu ôn tập */
.tn-wrap a.tn-item-link, .tn-wrap a.tn-item-link:hover { color: var(--tn-ink); text-decoration: none; }
.tn-item-link:hover { border-color: var(--tn-primary-line); background: var(--tn-tint); }
.tn-item-link .tn-item-main b { color: var(--tn-primary-dark); }
.tn-mat-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tn-mat-file > i { font-size: 36px; color: var(--tn-accent); }
.tn-mat-file > div { flex: 1 1 180px; min-width: 0; }
.tn-mat-file b, .tn-mat-file span { display: block; overflow-wrap: anywhere; }
.tn-mat-text { white-space: normal; line-height: 1.65; overflow-wrap: anywhere; }
.tn-break { overflow-wrap: anywhere; }
.tn-kind { margin: 0 0 12px; padding: 0; border: 0; }
.tn-kind-legend { margin: 0 0 6px; padding: 0; border: 0; font-size: 14px; font-weight: 700; color: var(--tn-ink-2); }
.tn-kind label { display: inline-flex; align-items: center; gap: 5px; margin: 0 12px 4px 0; font-weight: 600; cursor: pointer; }
/* Chỉ hiện ô của loại đang chọn; trình duyệt chưa có :has() thì hiện cả ba ô */
@supports selector(:has(a)) {
    .tn-mat-form .tn-kind-link, .tn-mat-form .tn-kind-text { display: none; }
    .tn-mat-form:has(input[name=kind][value=link]:checked) .tn-kind-file, .tn-mat-form:has(input[name=kind][value=text]:checked) .tn-kind-file { display: none; }
    .tn-mat-form:has(input[name=kind][value=link]:checked) .tn-kind-link, .tn-mat-form:has(input[name=kind][value=text]:checked) .tn-kind-text { display: block; }
}
.tn-details > summary { cursor: pointer; list-style: none; }
.tn-details > summary::-webkit-details-marker { display: none; }
.tn-details > summary::after { content: "\f107"; font-family: FontAwesome; margin-left: auto; color: var(--tn-muted); }
.tn-details[open] > summary::after { content: "\f106"; }
.tn-doc-text { flex: 1 1 100%; margin-top: 0; }

/* --- Màn duyệt bài */
.tn-review-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.tn-review-bar .btn-primary .badge, .tn-seg > .btn-primary .badge { color: #fff; background: var(--tn-primary); }
.tn-review-bar select { width: auto; max-width: 260px; }
.tn-review-progress { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; }
.tn-review-progress .progress { width: 140px; margin: 0; height: 10px; }
.tn-wrap .panel > .tn-rv-nav { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
.tn-rv-pos { font-weight: 600; text-align: center; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-rv-img { position: relative; background: #f3f5f4; }
.tn-rv-img img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.tn-rv-img.tn-zoom { max-height: 80vh; overflow: auto; }
.tn-rv-img.tn-zoom img { width: 200%; max-width: none; cursor: zoom-out; }
.tn-rv-box { position: absolute; display: none; border: 3px solid var(--tn-hl); border-radius: 4px; box-shadow: 0 0 0 2000px rgba(0,0,0,.08); pointer-events: none; }
.tn-rv-noimg { display: none; padding: 40px 16px; text-align: center; color: var(--tn-muted); }
.tn-rv-reread { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tn-rv-reread label { margin: 0; font-weight: normal; display: flex; align-items: center; gap: 6px; }
.tn-rv-head { margin-bottom: 8px; }
.tn-rv-flags { color: var(--tn-warn); font-size: 13px; }
.tn-rv-score { display: flex; align-items: baseline; gap: 4px; padding-top: 22px; }
.tn-rv-big { font-size: 28px; font-weight: 800; color: var(--tn-primary); line-height: 1; }
.tn-rv-grid { display: flex; flex-wrap: wrap; gap: 4px; max-height: 60vh; overflow-y: auto; padding: 2px; margin-bottom: 10px; }
.tn-rv-q { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px 6px; border: 1px solid var(--tn-line); border-left: 3px solid var(--tn-line); border-radius: 4px; flex: 1 1 100%; }
.tn-rv-p1 { flex: 1 1 calc(50% - 4px); }
.tn-rv-q.tn-rv-right { border-left-color: var(--tn-ok); }
.tn-rv-q.tn-rv-wrong { border-left-color: var(--tn-bad); }
.tn-rv-q.tn-rv-flag { background: var(--tn-warn-soft); }
.tn-rv-q.cur { outline: 2px solid var(--tn-hl); outline-offset: 1px; }
.tn-rv-l { min-width: 38px; font-weight: 700; font-size: 12px; color: var(--tn-ink-2); }
.tn-rv-o { width: 28px; height: 28px; padding: 0; border: 1.5px solid var(--tn-faint); border-radius: 50%; background: #fff; font-size: 12px; font-weight: 700; color: var(--tn-ink-2); line-height: 1; }
.tn-rv-o.key { border-color: var(--tn-ok); box-shadow: 0 0 0 2px rgba(22,163,74,.25); }
.tn-rv-o.on { background: var(--tn-mark); border-color: var(--tn-mark); color: #fff; }
.tn-rv-s { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.tn-rv-s i { font-style: normal; color: var(--tn-muted); font-size: 12px; margin-right: 2px; }
.tn-rv-p3 { width: 90px; display: inline-block; }
.tn-rv-key { font-size: 12px; color: var(--tn-ok-ink); }
.tn-rv-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tn-rv-msg { margin-top: 8px; font-size: 13px; min-height: 18px; }
.tn-rv-keys { line-height: 1.6; }

/* --- Trang làm bài (học sinh) */
.tn-test { max-width: 860px; margin: 0 auto; padding: 0 10px 40px; font-size: 16px; color: var(--tn-ink); }
.tn-test-center { padding-top: 30px; }
.tn-test > .tn-back { margin-bottom: 8px; }
.tn-test .tn-card h2 { margin: 2px 0 6px; font-size: 22px; }
.tn-test-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 -10px 12px; background: var(--tn-surface); border-bottom: 1px solid var(--tn-line); box-shadow: 0 2px 6px rgba(16,40,30,.06); }
.tn-test-title { flex: 1; min-width: 0; line-height: 1.2; }
.tn-test-title b, .tn-test-title span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-test-title span { font-size: 13px; color: var(--tn-muted); }
.tn-timer { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tn-primary); }
.tn-timer.tn-hurry { color: var(--tn-bad); }
.tn-test-progress { border: 1px solid var(--tn-line); border-radius: 8px; background: var(--tn-surface); padding: 5px 9px; font-size: 13px; font-weight: 600; color: var(--tn-ink-2); white-space: nowrap; cursor: pointer; }
.tn-test-progress:hover { border-color: var(--tn-primary-line); background: var(--tn-tint); }
.tn-test-progress i { color: var(--tn-accent); }
.tn-palette { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 60vh; overflow-y: auto; padding: 12px 10px 6px; background: var(--tn-surface); border-bottom: 1px solid var(--tn-line); box-shadow: 0 10px 20px rgba(16,40,30,.14); }
.tn-palette[hidden] { display: none; }
.tn-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; margin-bottom: 8px; }
.tn-chip { height: 42px; padding: 0; border: 1.5px solid var(--tn-line); border-radius: 8px; background: var(--tn-surface); font-weight: 700; font-size: 14px; color: var(--tn-ink-2); }
.tn-chip-done { background: var(--tn-primary-soft); border-color: var(--tn-primary-line); color: var(--tn-primary-dark); }
.tn-parthead { font-size: 17px; font-weight: 700; margin: 18px 0 8px; color: var(--tn-primary-dark); }
.tn-test .tn-card { margin-bottom: 12px; }
.tn-tq.tn-answered { border-left: 4px solid var(--tn-accent); }
.tn-tq-no { font-weight: 700; color: var(--tn-primary); margin-bottom: 6px; }
.tn-tq-content p { margin: 0 0 6px; }
.tn-choice { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 8px 10px; border: 1px solid var(--tn-line); border-radius: var(--tn-r); cursor: pointer; font-weight: normal; transition: border-color .12s, background-color .12s; }
.tn-choice:hover { border-color: var(--tn-primary-line); background: var(--tn-tint); }
.tn-choice input { position: absolute; opacity: 0; pointer-events: none; }
.tn-letter { flex: 0 0 auto; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 2px solid var(--tn-faint); border-radius: 50%; font-weight: 700; color: var(--tn-ink-2); }
.tn-choice input:checked + .tn-letter { background: var(--tn-primary); border-color: var(--tn-primary); color: #fff; }
.tn-choice input:focus-visible + .tn-letter { box-shadow: var(--tn-focus); }
.tn-choice-html { padding-top: 6px; }
.tn-choice-html p { display: inline; margin: 0; }
.tn-p1-full .tn-choice { margin-bottom: 6px; }
.tn-p1-full .tn-choice:has(input:checked) { border-color: var(--tn-primary); background: var(--tn-primary-soft); }
.tn-p1-compact { display: flex; gap: 10px; }
.tn-p1-compact .tn-choice { border: 0; padding: 4px; }
.tn-p2 { width: 100%; }
.tn-p2 td { padding: 6px 4px; border-top: 1px solid var(--tn-line-2); vertical-align: middle; }
.tn-p2-c { width: 48px; text-align: center; }
.tn-ds { border: 0; padding: 0; justify-content: center; }
.tn-p3 { max-width: 220px; font-size: 20px; font-family: Consolas, monospace; letter-spacing: 2px; }
.tn-papercode select { display: inline-block; width: auto; margin-left: 8px; }

/* Kết quả bài làm (trang làm bài + cổng học sinh) */
.tn-result-score { font-size: 56px; font-weight: 800; line-height: 1.1; color: var(--tn-primary); }
.tn-result-score small { font-size: 20px; font-weight: 600; color: var(--tn-muted); }
.tn-result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tn-result-head h2 { margin: 0 0 4px; font-size: 20px; }
.tn-hs .tn-result-score { font-size: 48px; text-align: right; line-height: 1; }
.tn-hs .tn-result-score small { font-size: 18px; }
.tn-hs .tn-result-score .tn-small { margin-top: 4px; font-size: 13px; font-weight: 400; }
.tn-rrow { padding: 8px 10px; margin-bottom: 6px; border-left: 4px solid var(--tn-line); border-radius: var(--tn-r-sm); background: #fafcfb; }
.tn-rrow-success { border-left-color: var(--tn-ok); } .tn-rrow-danger { border-left-color: var(--tn-bad); } .tn-rrow-warning { border-left-color: #e0a100; }
.tn-rmark { display: inline-block; min-width: 28px; font-weight: 700; }
.tn-rrow-c { margin-top: 4px; color: var(--tn-ink-2); }
.tn-rrow-c p { margin: 0 0 4px; }
.tn-must-row > :last-child { order: -1; }

/* ===================================================================== 8. In ấn */
@media print {
    @page { size: A4 portrait; margin: 0; }
    html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    .tn-print-bar { display: none !important; }
    .tn-print { padding: 0; background: #fff; }
    .tn-page { margin: 0; box-shadow: none; page-break-after: always; break-after: page; }
    .tn-page:last-child { page-break-after: auto; break-after: auto; }
    .tn-acc-sheet { grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; margin: 8mm; padding: 0; }
    .tn-acc-slip { border-color: #555; }
}

/* ===================================================================== Điện thoại (360–430px là chính)
   Học sinh và giáo viên chấm bài chủ yếu dùng điện thoại. */
@media (max-width: 767px) {
    /* theme mobile_default không có lề trái/phải → lề cho cả khối nội dung module */
    .tn-wrap { padding-left: 8px; padding-right: 8px; }
    .tn-flash, .tn-portal { margin-left: 8px; margin-right: 8px; }

    .tn-page-head { align-items: stretch; }
    .tn-page-head h2 { font-size: 19px; }
    .tn-page-head h2 > i { width: 32px; height: 32px; font-size: 15px; }
    .tn-page-head h2 + .tn-page-sub { padding-left: 0; }
    .tn-page-actions { width: 100%; }
    .tn-page-actions > .btn { flex: 1 1 40%; }
    .tn-toolbar > div { width: 100%; }
    .tn-toolbar > div:last-child > .btn { flex: 1 1 40%; }
    .tn-toolbar .form-inline { max-width: none; }

    .tn-hero { padding: 18px; }
    .tn-hero h1 { font-size: 21px; }
    .tn-hero-actions { width: 100%; }
    .tn-hero-actions .btn { flex: 1 1 auto; }
    .tn-gate-hero h1 { font-size: 24px; }

    /* Ô nhập ≥ 16px: iOS không tự phóng to khi chạm; vùng chạm ≥ 40px */
    .tn-wrap .form-control, .tn-test .form-control, .tn-wrap .input-sm { font-size: 16px; height: auto; min-height: 40px; }
    .tn-wrap .btn-xs { padding: 5px 10px; font-size: 13px; }
    .tn-wrap .btn-sm { padding: 7px 12px; }

    /* Thanh cổng: các mục chia đều bề ngang, biểu tượng trên chữ — không mục nào bị khuất */
    .tn-portal-head { gap: 6px; padding: 10px 12px; }
    .tn-portal-name { font-size: 15px; }
    .tn-portal-out span { display: none; }
    .tn-portal-logo { width: 34px; height: 34px; font-size: 17px; }
    .tn-portal-who { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
    .tn-portal-switch { padding: 2px 8px; }
    .tn-portal-nav { gap: 0; padding: 0; overflow: visible; }
    .tn-portal-nav a, .tn-portal-nav a:link, .tn-portal-nav a:visited { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 9px 2px 7px; font-size: 11.5px; line-height: 1.2; text-align: center; white-space: normal; }
    .tn-portal-nav a i { font-size: 17px; }

    /* Thanh tab: một hàng cuộn ngang (JS tự cuộn tới mục đang chọn) */
    .tn-wrap .nav-pills, .tn-wrap .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .tn-wrap .nav-pills::-webkit-scrollbar, .tn-wrap .nav-tabs::-webkit-scrollbar { display: none; }
    .tn-wrap .nav-pills > li, .tn-wrap .nav-tabs > li { flex: 0 0 auto; }
    .tn-wrap .nav-pills > li > a, .tn-wrap .nav-tabs > li > a { padding: 8px 13px; white-space: nowrap; }

    .tn-assign .panel-body { flex-direction: column; }
    .tn-test-bar .btn { padding: 6px 10px; }
    .tn-acc-form { width: 100%; }
    .tn-acc-form .btn { flex: 1 1 100%; }
    .tn-pub select { flex: 1 1 60%; }
    .tn-settings > .btn { margin-left: 0; }
    .tn-review-progress { margin-left: 0; }
    .tn-rv-grid .tn-rv-p1 { flex-basis: 100%; }
    .tn-code-act { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .tn-wrap .btn, .tn-choice { transition: none; }
}