/* ==========================================================================
   SSO - giao diện quản trị
   Bootstrap 4 + Select2 + Tempus Dominus
   Màu thương hiệu: rgb(21, 36, 69)
   ========================================================================== */

:root {
    /* Lay theo mau chu dao cua template (tgd-config.js dat vao :root luc chay),
       doi mau trong tgd-config.local.js la ca hai phan cung doi theo. */
    --brand: var(--tgd-primary, #152445);
    --brand-600: #1d3160;
    --brand-400: #2c4a86;
    --brand-soft: #eef1f7;
    --accent: #2563eb;
    --ok: #0f9d58;
    --warn: #f0a020;
    --danger: #d93b3b;

    --ink: #1f2733;
    --ink-soft: #5b6675;
    /* #667085: ~5:1 trên nền trắng, ~4.8:1 trên --surface-alt (bản cũ #8a93a2 chỉ ~3.1:1, dưới chuẩn AA) */
    --ink-faint: #667085;

    --line: #e4e9f2;
    --line-soft: #eef1f6;
    --line-strong: #d7dee9; /* viền ô nhập, nút viền */
    --surface: #ffffff;
    --surface-alt: #f7f9fc; /* đầu bảng, ô phụ */
    --canvas: #f4f6fa;

    /* Trạng thái: nền nhạt + chữ đậm đạt 4.5:1; luôn đi kèm chữ hoặc biểu tượng, không dùng màu đơn thuần */
    --ok-soft: #e6f6ed;    --ok-ink: #0a7a44;
    --warn-soft: #fdf5e6;  --warn-ink: #8a5a00;
    --danger-soft: #fdecec; --danger-ink: #b32626;

    /* Tiêu đề Be Vietnam Pro (cùng font template quản trị nạp), nội dung font hệ thống:
       cặp "Vietnamese Friendly" của UI/UX Pro Max - xem docs/ui-ux-design-system.md */
    --font-heading: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-ui: "Segoe UI", system-ui, -apple-system, "Noto Sans", "Helvetica Neue", Arial, sans-serif;

    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(21, 36, 69, .06), 0 1px 3px rgba(21, 36, 69, .04);
    --shadow: 0 2px 6px rgba(21, 36, 69, .07), 0 8px 24px rgba(21, 36, 69, .06);
}

/* ---------- base ---------- */

html { font-size: 93.75%; } /* = 15px khi trình duyệt để cỡ chữ mặc định, nhưng vẫn theo cài đặt cỡ chữ của người dùng */

body {
    font-family: var(--font-ui);
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.sso-page-title, .auth-title, .card-header, .form-section > h6 {
    font-family: var(--font-heading);
}

/* Liên kết "Bỏ qua tới nội dung chính": ẩn tới khi nhận focus bằng phím Tab */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 2000;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

/* Viền focus rõ khi dùng bàn phím (ít nhất 3:1 so với nền), không hiện khi bấm chuột */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
}
.custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
}

/* Thanh nút Lưu bám đáy (.form-actions) không được che ô đang focus khi Tab xuống cuối trang */
html:has(.form-actions) { scroll-padding-bottom: 5rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

a { color: var(--accent); }
a:hover { color: #1749b3; }

code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .84em;
    color: var(--brand-600);
    background: var(--brand-soft);
    padding: .12em .4em;
    border-radius: 5px;
}

/* Utility màu của Bootstrap (#007bff cố định) theo màu thương hiệu; Bootstrap khai bằng !important nên phải đè bằng !important */
.text-primary { color: var(--brand-400) !important; }

/* BS4 không có các utility này - bổ sung để view gọn hơn */
.fw-semibold { font-weight: 600; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }
.d-grid { display: grid; }
.cursor-pointer { cursor: pointer; }
.text-xs { font-size: .8rem; } /* 12px: cỡ nhỏ nhất cho chữ cần đọc */

/* ---------- form controls ---------- */

.form-label,
label.form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: .35rem;
}

.form-control,
.custom-select {
    height: calc(1.5em + 1rem + 2px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
    padding: .5rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control { height: auto; }

.form-control:focus,
.custom-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px rgba(44, 74, 134, .15);
}

.form-control::placeholder { color: #b4bcc9; }
.form-control-sm, .custom-select-sm { height: calc(1.5em + .6rem + 2px); border-radius: 6px; }

.form-control.is-invalid, .input-validation-error {
    border-color: var(--danger);
}
/* Ô nhập sai nằm trong input-group (ô mật khẩu + nút con mắt): nút bên cạnh cũng viền đỏ cho liền khung */
.input-group > .input-validation-error + .input-group-append > .btn,
.input-group > .input-validation-error + .input-group-append > .input-group-text {
    border-color: var(--danger);
}

.input-group-text {
    background: var(--surface-alt);
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    border-radius: var(--radius-sm);
}
.input-group-text .bi { font-size: 1rem; }

.input-group > .input-group-prepend > .input-group-text { border-right: 0; }
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn { border-left: 0; }

textarea.lines {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .85rem;
    line-height: 1.6;
}

.form-text.help {
    font-size: .8rem;
    color: var(--ink-faint);
    margin-top: .3rem;
}

/* hide the empty spans ASP.NET renders for valid fields */
.validation-summary-valid { display: none; }
.field-validation-valid { display: none; }
.field-validation-error, .text-danger { color: var(--danger) !important; }

/* ---------- switches & checkboxes ---------- */

.custom-control-label { cursor: pointer; font-size: .9rem; }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand);
    border-color: var(--brand);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(44, 74, 134, .15);
}
.custom-switch { padding-left: 2.4rem; }
.custom-switch .custom-control-label::before { left: -2.4rem; width: 1.9rem; height: 1.05rem; border-radius: .6rem; }
.custom-switch .custom-control-label::after { top: calc(.25rem + 2px); left: calc(-2.4rem + 2px); width: calc(1.05rem - 4px); height: calc(1.05rem - 4px); border-radius: .6rem; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(.85rem); }

.switch-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: .6rem 0;
    border-bottom: 1px dashed var(--line-soft);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row .switch-text { padding-right: 1rem; }
.switch-row .switch-text .help { display: block; }

/* ---------- buttons ---------- */

.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding: .5rem .95rem;
    transition: all .15s ease;
}
.btn-sm { padding: .3rem .6rem; border-radius: 6px; font-size: .82rem; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(44, 74, 134, .2); }

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--brand-600);
    border-color: var(--brand-600);
}

.btn-outline-primary { color: var(--brand); border-color: #c3ccdd; }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active {
    background: var(--brand); border-color: var(--brand); color: #fff;
}

.btn-outline-secondary { color: var(--ink-soft); border-color: var(--line-strong); }
.btn-outline-secondary:hover { background: #f1f4f9; color: var(--ink); border-color: #c3ccdd; }

.btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.btn-group-actions { display: inline-flex; gap: .3rem; }
.btn-group-actions form { display: inline; margin: 0; }

/* ---------- cards & sections ---------- */

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
    padding: .85rem 1.15rem;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}
.card-body { padding: 1.15rem; }

.form-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.form-section > h6 {
    font-weight: 600;
    font-size: .95rem;
    color: var(--brand);
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: .65rem;
    margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.form-section > h6 .bi { color: var(--brand-400); }

/* ---------- badges ---------- */

.badge {
    font-weight: 500;
    padding: .35em .6em;
    border-radius: 6px;
    font-size: .75rem;
}
.badge-soft {
    background: var(--brand-soft);
    color: var(--brand-600);
    border: 1px solid #dde3ee;
    font-family: ui-monospace, Consolas, monospace;
}
.badge-ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge-off { background: #eef0f4; color: var(--ink-faint); }
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge-danger { background: var(--danger-soft); color: var(--danger-ink); }

/* ---------- tables ---------- */

.table { color: var(--ink); margin-bottom: 0; }
.table thead th {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
    border-top: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: .7rem .9rem;
    white-space: nowrap;
}
.table td { padding: .7rem .9rem; vertical-align: middle; border-top: 1px solid var(--line-soft); }
.table-hover tbody tr:hover { background: #f8fafd; }
.table-card { border-radius: var(--radius); overflow: hidden; }
.table .empty-row td { padding: 3rem 1rem; text-align: center; color: var(--ink-faint); }

/* ---------- alerts ---------- */

.alert {
    border: 0;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    padding: .75rem 1rem;
}
.alert-success { background: var(--ok-soft); color: var(--ok-ink); border-left-color: var(--ok); }
.alert-danger  { background: var(--danger-soft); color: var(--danger-ink); border-left-color: var(--danger); }
.alert-warning { background: var(--warn-soft); color: var(--warn-ink); border-left-color: var(--warn); }
.alert-info    { background: var(--brand-soft); color: var(--brand-600); border-left-color: var(--brand-400); }

/* ---------- tabs ---------- */

.nav-tabs {
    border-bottom: 1px solid var(--line);
    gap: .15rem;
}
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    font-weight: 500;
    padding: .65rem 1rem;
    border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--brand); background: transparent; }
.nav-tabs .nav-link.active {
    color: var(--brand);
    background: transparent;
    border-bottom-color: var(--brand);
    font-weight: 600;
}

/* ==========================================================================
   Khung nội dung bên trong template giao diện (.tgd-content)
   Phần vỏ trang quản trị (thanh trên cùng, cột menu) do tgd-template.css lo.
   ========================================================================== */

.sso-page { padding: 1.35rem 1.5rem 2rem; }

.sso-page-head { margin-bottom: 1.1rem; }
.sso-page-title {
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}
.sso-page-sub { font-size: .84rem; color: var(--ink-soft); margin-top: .2rem; }

/* Breadcrumb trang quản trị, dựng trong _AdminLayout từ menu đang mở */
.sso-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-2);
    padding: 0;
    font-size: .8rem;
    color: var(--ink-faint);
}
.sso-breadcrumb li + li::before { content: "\203A"; margin-right: var(--space-2); color: var(--ink-faint); }
.sso-breadcrumb a { color: var(--ink-soft); }
.sso-breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .7rem .3rem .35rem;
    border-radius: 30px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: .86rem;
}
.user-chip:hover { background: #f7f9fc; color: var(--ink); text-decoration: none; }
.avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 600;
}

.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: .35rem;
}
.dropdown-item { border-radius: 6px; padding: .5rem .7rem; font-size: .88rem; }
.dropdown-item:active { background: var(--brand); }
.dropdown-header { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }

/* sticky action bar at the bottom of long forms */
.form-actions {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--line);
    padding: .75rem 1rem;
    margin: 1rem -1.5rem -2rem;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    z-index: 900;
}

/* ---------- stat cards ---------- */

.stat-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem;
    height: 100%;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.stat-icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
/* min-height giữ cho các con số thẳng hàng khi nhãn dài phải xuống dòng */
.stat-label { font-size: .78rem; color: var(--ink-faint); display: block; min-height: 2.1em; line-height: 1.25; }
.stat-value { font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.15; }

/* ==========================================================================
   Select2 - khớp với Bootstrap 4
   ========================================================================== */

.select2-container--bootstrap4 .select2-selection {
    border: 1px solid #d7dee9 !important;
    border-radius: var(--radius-sm) !important;
    min-height: calc(1.5em + 1rem + 2px);
}
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--brand-400) !important;
    box-shadow: 0 0 0 3px rgba(44, 74, 134, .15);
}
/* Theme đệm .75rem trên dưới trong khi __rendered đã cao bằng cả ô -> chữ bị tụt xuống. Bỏ đệm. */
.select2-container--bootstrap4 .select2-selection--single { height: calc(1.5em + 1rem + 2px) !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* Select2 4.1 vẽ nút xóa (×) bằng <button> float:right, position:static nên top:50% không có tác dụng và dấu ×
   dính sát mép trên. Định vị tuyệt đối, căn giữa theo chiều dọc, đứng ngay bên trái mũi tên. */
.select2-container--bootstrap4 .select2-selection--single { position: relative; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
    float: none;
    margin: 0;
    padding: 0 .3rem;
    border: 0;
    background: transparent;
    line-height: 1;
    font-size: 1.15rem;
    color: var(--ink-faint);
    cursor: pointer;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear:hover { color: var(--danger); }
/* chừa chỗ cho × và mũi tên để chữ dài không bị đè */
.select2-container--bootstrap4 .select2-selection--single.select2-selection--clearable .select2-selection__rendered { padding-right: 3rem; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 1rem); padding-left: .75rem; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { height: calc(1.5em + 1rem) !important; }

/* Select2 4.1 đưa ô tìm kiếm ra ngoài <ul> khiến theme Bootstrap 4 (viết cho 4.0)
   xếp chúng thành hai dòng. Dùng flex để danh sách tag và ô nhập nằm chung một hàng. */
.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: calc(1.5em + 1rem + 2px);
    padding: .2rem .4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem;
}
/* <ul> chứa các tag là một khối riêng: khi tag gần kín dòng, ô tìm (tối thiểu 6rem) bị đẩy xuống thành cả một
   dòng trống bên dưới. display: contents cho các tag và ô tìm cùng chảy trong một hàng flex của khung. */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    display: contents;
    padding: 0;
    margin: 0;
    list-style: none;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline {
    float: none;
    display: inline-flex;
    /* Không gõ thì ô tìm co về 0 và lấp chỗ còn lại của dòng cuối: không bao giờ tạo một dòng trống dưới các tag.
       Chưa có tag nào thì nó giãn hết khung nên vẫn thấy chữ gợi ý. */
    flex: 1 1 0;
    min-width: 0;
}
/* Đang gõ thì cần tối thiểu 3rem; dòng cuối không đủ chỗ thì ô gõ mới xuống dòng */
.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple .select2-search--inline,
.select2-container--bootstrap4.select2-container--open .select2-selection--multiple .select2-search--inline {
    flex-basis: 3rem;
    min-width: 3rem;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
    margin: 0;
    width: 100% !important;
    min-width: 0 !important;   /* theme đặt bề rộng tối thiểu nên ô gõ tràn ra ngoài khung ở màn hẹp */
    max-width: 100%;
    min-height: 1.6rem;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    float: none;
    margin: 0;
    background: var(--brand-soft);
    border: 1px solid #dae1ee;
    color: var(--brand-600);
    border-radius: 6px;
    padding: .12rem .45rem;
    font-size: .84rem;
    font-family: ui-monospace, Consolas, monospace;
    display: inline-flex;
    align-items: center;
    /* tag dài (Redirect URI...) không tràn ra ngoài khung: cắt bằng "…", rê chuột xem đủ (Select2 gắn sẵn title) */
    max-width: 100%;
    min-width: 0;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__display {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Select2 4.1 dựng nút xóa tag bằng <button>, cần bỏ khung mặc định của trình duyệt */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    background: transparent;
    border: 0;
    padding: 0;
    margin-right: .35rem;
    color: var(--brand-400);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--danger);
}

.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] { background: var(--brand) !important; }
.select2-container--bootstrap4 .select2-results__option--highlighted .s2-name,
.select2-container--bootstrap4 .select2-results__option--highlighted .s2-desc { color: #fff; }
.select2-container--bootstrap4 .select2-dropdown {
    border-color: var(--brand-400);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
/* Select2 mặc định giới hạn danh sách ở 200px. Với option hai dòng (tên + mô tả) thì
   chỉ thấy được 3-4 mục và mục cuối bị cắt ngang, nhìn như hỏng. Nới ra cho thoáng. */
.select2-container--bootstrap4 .select2-results > .select2-results__options {
    max-height: 340px;
    overscroll-behavior: contain;
}
.select2-container--bootstrap4 .select2-results > .select2-results__options::-webkit-scrollbar { width: 8px; }
.select2-container--bootstrap4 .select2-results > .select2-results__options::-webkit-scrollbar-track { background: #f2f4f8; }
.select2-container--bootstrap4 .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background: #c3ccdd; border-radius: 4px;
}

.select2-container--bootstrap4 .select2-results__option { padding: .45rem .7rem; font-size: .88rem; }
.select2-container--bootstrap4 .select2-results__group {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-faint); padding: .5rem .7rem .25rem;
}
.select2-result-line { display: flex; flex-direction: column; }
.select2-result-line .s2-name { font-family: ui-monospace, Consolas, monospace; font-size: .86rem; color: var(--ink); }
.select2-result-line .s2-desc { font-size: .76rem; color: var(--ink-faint); }
.select2-container { width: 100% !important; }

/* ==========================================================================
   Tempus Dominus datetimepicker
   ========================================================================== */

/* Lịch dùng class .table của Bootstrap nên dính kiểu bảng dữ liệu của trang quản trị (.table td đệm .7rem .9rem,
   tiêu đề in hoa có nền): ô ngày phình to, khung 14rem mặc định chỉ còn chứa 5 cột (mất T7, CN và nút tháng sau).
   Trả về kiểu gọn và nới khung vừa đủ 7 cột. */
.bootstrap-datetimepicker-widget.dropdown-menu {
    width: 17.5rem;
    padding: .5rem;
    font-size: .86rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}
@media (min-width: 576px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 30rem; }
}
.bootstrap-datetimepicker-widget .table { margin: 0; color: var(--ink); }
.bootstrap-datetimepicker-widget .table thead th,
.bootstrap-datetimepicker-widget .table td {
    padding: 0;
    border: 0;
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
    font-size: inherit;
    border-radius: 6px;
}
/* dòng tháng / năm và hai mũi tên */
.bootstrap-datetimepicker-widget .table thead th { color: var(--ink); font-weight: 600; height: 2.2rem; line-height: 2.2rem; }
.bootstrap-datetimepicker-widget .table thead th.picker-switch { text-transform: capitalize; }   /* "tháng 9 2026" -> "Tháng 9 2026" */
.bootstrap-datetimepicker-widget .table thead th.prev,
.bootstrap-datetimepicker-widget .table thead th.next { width: 2.2rem; color: var(--ink-soft); }
/* tên thứ trong tuần */
.bootstrap-datetimepicker-widget .table thead th.dow { color: var(--ink-faint); font-size: .72rem; font-weight: 600; height: 1.8rem; line-height: 1.8rem; cursor: default; }
/* ô ngày */
.bootstrap-datetimepicker-widget .table td.day { width: 14.28%; height: 2.2rem; line-height: 2.2rem; }
.bootstrap-datetimepicker-widget .table td.old,
.bootstrap-datetimepicker-widget .table td.new { color: #aab2bf; }
/* lưới tháng / năm / thập kỷ / giờ / phút: 4 ô mỗi hàng, co theo khung thay vì cố định 54px */
.bootstrap-datetimepicker-widget table td span {
    width: 23%;
    height: 2.6rem;
    line-height: 2.6rem;
    margin: 2px 1%;
    border-radius: 6px;
}
/* ô chứa lưới tháng / năm / giờ / phút: bỏ chiều cao 54px mặc định của thư viện để các hàng không giãn */
.bootstrap-datetimepicker-widget .datepicker-months table td,
.bootstrap-datetimepicker-widget .datepicker-years table td,
.bootstrap-datetimepicker-widget .datepicker-decades table td,
.bootstrap-datetimepicker-widget .timepicker-hours table td,
.bootstrap-datetimepicker-widget .timepicker-minutes table td { height: auto; line-height: normal; }
/* phần chọn giờ */
.bootstrap-datetimepicker-widget .timepicker-picker .table td { height: 2.4rem; line-height: 2.4rem; }
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.bootstrap-datetimepicker-widget .timepicker-picker .btn { color: var(--brand-400); padding: .25rem .5rem; }
.bootstrap-datetimepicker-widget .timepicker-picker .separator { color: var(--ink-faint); font-weight: 600; }
.bootstrap-datetimepicker-widget.timepicker-sbs .timepicker { border-left: 1px solid var(--line-soft); }
/* rê chuột, ngày đang chọn, hôm nay */
.bootstrap-datetimepicker-widget .table td.day:hover,
.bootstrap-datetimepicker-widget .table td.hour:hover,
.bootstrap-datetimepicker-widget .table td.minute:hover,
.bootstrap-datetimepicker-widget .table td span:hover,
.bootstrap-datetimepicker-widget .table thead tr:first-child th:not(.disabled):hover { background: #eef2f8; }
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td span.active {
    background: var(--brand) !important;
    color: #fff;
    text-shadow: none;
}
.bootstrap-datetimepicker-widget table td.today::before { border-bottom-color: var(--brand); }
/* thanh nút dưới cùng (Hôm nay / Xóa / Đóng) */
.bootstrap-datetimepicker-widget .picker-switch { border-top: 1px solid var(--line-soft); }
.bootstrap-datetimepicker-widget .picker-switch td span { border-radius: 6px; color: var(--brand-400); }
.bootstrap-datetimepicker-widget .picker-switch td span:hover { background: #eef2f8; }

/* ==========================================================================
   Trang người dùng cuối (đăng nhập / consent)
   ========================================================================== */

.public-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--canvas);
}
.public-shell main { flex: 1; }

.navbar-brand-sso { display: flex; align-items: center; gap: .55rem; font-weight: 600; }

/* Thanh điều hướng trang người dùng: theo màu chủ đạo ở menu Nhận diện (bản cũ cố định gradient navy) */
.auth-hero {
    background: linear-gradient(100deg, var(--brand) 0%, var(--brand-600) 100%);
    color: #fff;
}
.navbar-brand-sso img { max-height: 32px; width: auto; background: #fff; border-radius: 6px; padding: 2px 4px; }
.public-shell footer { color: var(--ink-soft); }

/* Biểu tượng ứng dụng trên trang Cấp quyền khi client không khai logo */
.consent-mark {
    width: 52px; height: 52px;
    margin: 0 auto var(--space-3);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    background: var(--brand-soft);
    color: var(--brand);
}

/* Trạng thái rỗng dùng chung: biểu tượng + một câu giải thích (+ nút hành động nếu có) */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.empty-state > .bi { display: block; font-size: 2.5rem; color: var(--ink-faint); margin-bottom: var(--space-2); }

/* ==========================================================================
   Màn đăng nhập / đăng xuất (layout _LayoutAuth, không có thanh điều hướng)
   ========================================================================== */

.auth-page {
    --auth-bg: #e7e4f0;
    --auth-accent: #0288d1;
    --auth-accent-dark: #0277b5;
    /* nền nút + chữ liên kết: màu nhấn đậm vừa đủ cho 4.5:1 (BrandingCss tính theo màu đã cấu hình) */
    --auth-accent-strong: #027bbd;
    --auth-accent-strong-hover: #02679f;

    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--auth-bg);
}

.auth-shell {
    min-height: 100vh;
    min-height: 100dvh; /* thanh địa chỉ trên điện thoại không che mất đáy thẻ */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* Nền trang đăng nhập bằng ảnh: ảnh và lớp phủ do _BrandingVars.cshtml đặt theo nhận diện.
   Thẻ đăng nhập đổ bóng đậm hơn để tách khỏi ảnh. */
.auth-page-image .auth-box {
    box-shadow: 0 2px 8px rgba(8, 12, 20, .18), 0 18px 48px rgba(8, 12, 20, .28);
}
.auth-page-image .auth-footer { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

/* ---- cột thẻ phụ trên trang đăng nhập (ngày giờ, thời tiết, tin tức) ----
   Màn hình rộng: cả cột neo ở góc trên bên trái (xem @media bên dưới).
   Màn hình hẹp: cột nằm trong dòng chảy, ngay phía trên ô đăng nhập, để không đè lên nội dung. */
.auth-side {
    width: 100%;
    max-width: 452px;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.auth-infocard,
.auth-newscard {
    padding: .9rem 1.1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);
}
.auth-page-image .auth-infocard,
.auth-page-image .auth-newscard {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .26);
    box-shadow: 0 2px 8px rgba(8, 12, 20, .2);
}
.auth-newscard[hidden] { display: none; }

.aic-clock {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    color: #1f2733;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.aic-date { font-size: .82rem; color: var(--ink-soft); margin-top: .15rem; }
.auth-page-image .aic-clock { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.auth-page-image .aic-date { color: rgba(255, 255, 255, .9); }

/* đường kẻ ngăn giữa phần giờ và phần thời tiết */
.aic-weather {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(16, 24, 40, .1);
}
.auth-page-image .aic-weather { border-top-color: rgba(255, 255, 255, .25); }
.aic-weather[hidden] { display: none; }

.aic-now { display: flex; align-items: center; gap: .65rem; }
.aic-icon { font-size: 2.1rem; color: var(--auth-accent); line-height: 1; }
.auth-page-image .aic-icon { color: #fff; }

.aic-temp {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1f2733;
    font-variant-numeric: tabular-nums;
}
.aic-desc { font-size: .8rem; color: var(--ink-soft); }
.auth-page-image .aic-temp { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.auth-page-image .aic-desc { color: rgba(255, 255, 255, .9); }

.aic-place { font-size: .78rem; color: var(--ink-soft); margin-top: .45rem; }
.aic-place[hidden] { display: none; }
.auth-page-image .aic-place { color: rgba(255, 255, 255, .9); }

.aic-details {
    list-style: none;
    margin: .55rem 0 0;
    padding: 0;
    font-size: .78rem;
    color: var(--ink-soft);
    line-height: 1.75;
}
.aic-details li[hidden] { display: none; }
.aic-details i { width: 1.05em; text-align: center; margin-right: .25rem; opacity: .85; }
.aic-sep { margin: 0 .3rem; opacity: .5; }
.auth-page-image .aic-details { color: rgba(255, 255, 255, .9); }

/* ---- thẻ tin mới nhất ---- */
.anc-head {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink-soft);
    margin-bottom: .1rem;
}
.anc-head i { margin-right: .3rem; opacity: .85; }
.auth-page-image .anc-head { color: rgba(255, 255, 255, .92); }

.anc-list { list-style: none; margin: 0; padding: 0; }

.anc-item {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    padding: .5rem 0;
    border-top: 1px solid rgba(16, 24, 40, .1);
    color: #1f2733;
    text-decoration: none;
}
.anc-list li:first-child .anc-item { border-top: 0; }
.anc-item:hover { text-decoration: none; }
.anc-item:hover .anc-title { color: var(--auth-accent); }
.auth-page-image .anc-item { border-top-color: rgba(255, 255, 255, .22); color: #fff; }
.auth-page-image .anc-item:hover .anc-title { color: #fff; text-decoration: underline; }

.anc-thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    background: rgba(16, 24, 40, .06);
}

.anc-text { display: block; min-width: 0; }
.anc-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .8rem;
    line-height: 1.35;
}
.anc-time { display: block; font-size: .75rem; color: var(--ink-soft); margin-top: .12rem; }
.auth-page-image .anc-time { color: rgba(255, 255, 255, .8); }

/* Từ màn hình rộng trở lên mới neo góc trên bên trái: hẹp hơn thì cột dễ đè lên ô đăng nhập.
   Giới hạn chiều cao theo màn hình và cho cuộn, phòng khi chọn hiện nhiều tin. */
@media (min-width: 1100px) {
    .auth-side {
        position: fixed;
        top: 1.5rem;
        left: 1.5rem;
        width: 260px;
        max-width: none;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        margin-top: 0;
        z-index: 5;
        scrollbar-width: thin;
    }
    .auth-side::-webkit-scrollbar { width: 6px; }
    .auth-side::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .22); border-radius: 3px; }
}

.auth-box {
    width: 100%;
    max-width: 452px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .08);
    padding: 2.5rem 2.5rem 2.75rem;
}

.auth-logo { text-align: center; margin-bottom: 1.35rem; }
.auth-logo img { max-height: 88px; max-width: 100%; }

.auth-title {
    font-size: 1.45rem;
    font-weight: 700;
    text-align: center;
    color: #1f2733;
    margin: 0 0 1.6rem;
}
.auth-subtitle {
    text-align: center;
    font-size: .87rem;
    color: var(--ink-soft);
    margin: -1.15rem 0 1.5rem;
}

.auth-page .form-label {
    font-size: .87rem;
    font-weight: 400;
    color: #3f4854;
    margin-bottom: .4rem;
}
/* 44px: vùng chạm tối thiểu trên điện thoại; 1rem chữ để iOS không tự phóng to khi chạm vào ô */
.auth-page .form-control { height: 2.95rem; font-size: 1rem; border-radius: 6px; }
.auth-page .form-control:focus {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px rgba(2, 136, 209, .16);
    /* theo màu nhấn đã cấu hình; trình duyệt cũ không hiểu color-mix thì giữ dòng trên */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 22%, transparent);
}
.auth-page .input-group-append .btn {
    min-width: 2.95rem;
    border-color: #d7dee9;
    color: var(--ink-faint);
    background: #fff;
}
.auth-page .input-group-append .btn:hover { color: var(--ink); background: #f7f9fc; }

.auth-page .custom-control-label { font-size: .87rem; color: #3f4854; }
.auth-page .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--auth-accent);
    border-color: var(--auth-accent);
}

/* Chữ liên kết và nút dùng --auth-accent-strong: màu nhấn mặc định #0288d1 chỉ ~3.9:1, dưới mức 4.5:1 */
.auth-link { font-size: .87rem; color: var(--auth-accent-strong); }
.auth-link:hover { color: var(--auth-accent-strong-hover); text-decoration: underline; }

/* Viền focus chỉ hiện khi dùng bàn phím, không hiện khi bấm chuột */
.auth-page a:focus-visible,
.auth-page .btn:focus-visible,
.auth-page .auth-provider:focus-visible {
    outline: 2px solid var(--auth-accent-strong);
    outline-offset: 2px;
}

/* Đang gửi form (site.js gắn .is-loading): không bấm lại được, nút giữ nguyên kích thước */
.is-loading { pointer-events: none; cursor: progress; opacity: .85; }

.auth-submit {
    background: var(--auth-accent-strong);
    border-color: var(--auth-accent-strong);
    font-weight: 600;
    padding: .65rem 1rem;
    border-radius: 6px;
}
.auth-submit:hover, .auth-submit:focus,
.auth-submit:not(:disabled):not(.disabled):active {
    background: var(--auth-accent-strong-hover);
    border-color: var(--auth-accent-strong-hover);
}
.auth-submit:focus {
    box-shadow: 0 0 0 3px rgba(2, 136, 209, .3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 35%, transparent);
}

/* ---------- vạch ngăn "Đăng nhập bằng" ---------- */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.9rem 0 1.25rem;
    color: var(--ink-soft);
    font-size: .9rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dce0e8;
}

.auth-providers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.auth-provider {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e4e8ef;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
    padding: 0;
}
.auth-provider:hover {
    box-shadow: 0 3px 10px rgba(16, 24, 40, .14);
    transform: translateY(-1px);
}
.auth-provider:focus { outline: none; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }

/* Nhà cung cấp quản trị viên chưa bật: vẫn hiện để người dùng biết hệ thống có hỗ trợ,
   nhưng để mờ, xám và không bấm được. Xem Views/Account/Login.cshtml. */
.auth-provider-off,
.auth-provider:disabled {
    cursor: not-allowed;
    opacity: .4;
    filter: grayscale(100%);
    box-shadow: none;
    background: #f7f8fa;
}
.auth-provider-off:hover,
.auth-provider:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ô nhập mã OTP: to, cách chữ, căn giữa (thêm .auth-page để thắng cỡ chữ 1rem của .auth-page .form-control) */
.auth-page .auth-otp {
    text-align: center;
    font-size: 1.7rem;
    letter-spacing: .55em;
    font-weight: 600;
    height: auto !important;
    padding: .55rem .75rem .55rem 1.3rem;
}

/* khung xem thử mẫu email trong trang quản trị */
.doc-preview {
    width: 100%;
    height: 520px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.auth-footer {
    margin-top: 1.5rem;
    font-size: .8rem;
    color: var(--ink-soft);
    text-align: center;
}

/* Trạng thái cho các màn đăng xuất / lỗi dùng chung layout này */
.auth-icon {
    width: 60px; height: 60px;
    margin: 0 auto 1.15rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}
.auth-icon-ok { background: var(--ok-soft); color: var(--ok-ink); }
.auth-icon-warn { background: var(--warn-soft); color: var(--warn-ink); }
.auth-icon-danger { background: var(--danger-soft); color: var(--danger-ink); }
.auth-text { text-align: center; font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.5rem; }
.auth-countdown { font-weight: 600; }
.auth-countdown #container { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
    .auth-box { padding: 1.75rem 1.35rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-provider:hover { transform: none; }
}

.client-logo { max-height: 64px; }

.endpoint-list .list-group-item {
    border-color: var(--line-soft);
    padding: .7rem 1.1rem;
    font-size: .84rem;
}
.endpoint-list .list-group-item .ep-name { color: var(--ink-faint); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }

.scope-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    margin-bottom: .5rem;
    background: var(--surface);
}
.scope-item.emphasized { border-color: #f3d9a8; background: #fffaf0; }

/* ==========================================================================
   Trang tài liệu tích hợp
   ========================================================================== */

.doc-card {
    display: flex;
    gap: .9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.doc-card:hover {
    text-decoration: none;
    border-color: var(--brand-400);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.doc-card-icon {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.doc-card-title { display: block; font-weight: 600; color: var(--ink); }
.doc-card-desc { display: block; font-size: .8rem; color: var(--ink-faint); margin-top: .2rem; line-height: 1.5; }

.doc-steps { padding-left: 1.15rem; margin: 0; color: var(--ink-soft); font-size: .88rem; }
.doc-steps li { margin-bottom: .5rem; line-height: 1.6; }
.doc-steps li:last-child { margin-bottom: 0; }

.doc-faq { margin: 0; font-size: .88rem; }
.doc-faq dt {
    font-weight: 600;
    color: var(--ink);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .85rem;
    margin-top: .9rem;
}
.doc-faq dt:first-child { margin-top: 0; }
.doc-faq dd { color: var(--ink-soft); margin: .3rem 0 0; line-height: 1.6; }

.doc-scope-group {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-faint);
    font-weight: 600;
    margin-bottom: .45rem;
}
.doc-scope {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px dashed var(--line-soft);
    font-size: .84rem;
}
.doc-scope:last-child { border-bottom: 0; }
.doc-scope .help { margin: 0; }

.doc-provider-status {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fafbfd;
}
.doc-provider-status svg { flex-shrink: 0; }

/* Danh sách endpoint xếp dọc: nhãn nhỏ phía trên, địa chỉ chiếm trọn bề ngang phía dưới */
.doc-endpoints { margin: 0; }
.doc-endpoints dt {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-faint);
    font-weight: 600;
    margin-top: .75rem;
}
.doc-endpoints dt:first-child { margin-top: 0; }
.doc-endpoints dd {
    margin: .2rem 0 0;
    font-size: .82rem;
    overflow-wrap: anywhere;
}
.doc-endpoints dd code { display: inline-block; padding: .2em .5em; }

/* ---------- khối mã ví dụ ---------- */

.doc-sample {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.15rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
}
.doc-sample-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}
.doc-sample-title { font-weight: 600; color: var(--ink); font-size: .95rem; }
.doc-sample-note { font-size: .83rem; color: var(--ink-faint); line-height: 1.6; margin: 0 0 .75rem; }

.doc-code {
    background: #16203a;
    color: #dfe6f5;
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
    margin: 0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .82rem;
    line-height: 1.65;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}
.doc-code code { background: none; color: inherit; padding: 0; font-size: inherit; }
.doc-code::-webkit-scrollbar { height: 8px; }
.doc-code::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
.doc-code::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 4px; }

/* ==========================================================================
   Thanh lọc danh sách (form GET), dùng chung cho các trang danh sách
   ========================================================================== */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: .9rem 1rem 1rem;
    margin-bottom: .75rem;
}
.filter-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 320px;
}
.filter-field > label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-faint);
    margin-bottom: .3rem;
}
.filter-search { flex: 2 1 300px; max-width: 460px; }
.filter-input { position: relative; }
.filter-input > .bi-search {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    pointer-events: none;
}
.filter-input > .form-control { padding-left: 2.35rem; padding-right: 2.3rem; }
.filter-clear {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--ink-faint);
    padding: .25rem .45rem;
    min-width: 24px; min-height: 24px;
    border-radius: 6px;
    line-height: 1;
}
.filter-clear:hover { color: var(--danger); background: var(--danger-soft); }
.filter-actions { display: flex; align-items: flex-end; gap: .5rem; }
.filter-extra { display: flex; align-items: flex-end; margin-left: auto; }

.filter-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .84rem;
    color: var(--ink-faint);
    margin: 0 .2rem .75rem;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--brand-soft);
    color: var(--brand-600);
    border: 1px solid #dde3ee;
    border-radius: 20px;
    padding: .18rem .35rem .18rem .7rem;
    font-size: .78rem;
    margin: 0 .35rem .25rem 0;
}
.filter-chip .chip-label { color: var(--ink-faint); }
.filter-chip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    color: var(--brand-400);
    text-decoration: none;
    position: relative;
}
/* vùng bấm 24x24 (WCAG 2.2) mà không làm chip to ra */
.filter-chip a::after { content: ""; position: absolute; inset: -3px; }
.filter-chip a:hover { background: var(--brand); color: #fff; }

@media (max-width: 767.98px) {
    .filter-field, .filter-search { max-width: none; flex-basis: 100%; }
    .filter-extra { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   SweetAlert2 - hộp thoại xác nhận và toast thông báo
   Dùng thay confirm()/alert() vì chỉ thị sandbox trong Content-Security-Policy
   chặn hộp thoại gốc của trình duyệt.
   ========================================================================== */

.swal2-popup {
    border-radius: var(--radius);
    font-family: inherit;
    padding: 1.5rem 1.5rem 1.25rem;
}
.swal2-title {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0;
}
.swal2-html-container {
    font-size: .92rem;
    color: var(--ink-soft);
    margin: .6rem 0 0;
    line-height: 1.55;
}
.swal2-icon { margin: .3rem auto .9rem; width: 3.2em; height: 3.2em; }
.swal2-icon .swal2-icon-content { font-size: 2.4em; }

/* buttonsStyling: false nên nút dùng thẳng class .btn của Bootstrap */
.sso-swal-actions { margin-top: 1.35rem; gap: 0; }
.swal2-actions .btn { min-width: 6.5rem; }

/* ---------- toast ---------- */

.swal2-container.swal2-top-end { padding: 1rem; }

.sso-toast {
    border: 1px solid var(--line);
    border-left: 4px solid var(--ink-faint);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: .85rem 1rem;
}
.sso-toast .swal2-title {
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.45;
    margin: 0;
}
.sso-toast .swal2-timer-progress-bar { background: rgba(21, 36, 69, .25); }
.sso-toast-success { border-left-color: var(--ok); }
.sso-toast-error { border-left-color: var(--danger); }
.sso-toast-info { border-left-color: var(--brand-400); }

/* Toast phải nổi trên thanh trên cùng và cột menu của template */
.swal2-container { z-index: 2000; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
    .sso-page { padding: 1rem; }
    .form-actions { margin-left: -1rem; margin-right: -1rem; }
}

@media (max-width: 575.98px) {
    .stat-value { font-size: 1.25rem; }
}

/* ==========================================================================
   Trang Nhận diện hệ thống (Admin > NhanDien): ô chọn màu và khung xem trước
   ========================================================================== */

.brand-logo-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.brand-logo-box {
    flex: 0 0 190px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: repeating-conic-gradient(#f6f8fb 0% 25%, #fff 0% 50%) 50% / 16px 16px;
    padding: .75rem;
}
.brand-logo-box img { max-width: 100%; max-height: 96px; }
.brand-logo-fields { flex: 1 1 280px; min-width: 240px; }

/* Ô xem ảnh nền trang đăng nhập: ảnh ngang nên cắt theo khung thay vì thu nhỏ toàn bộ */
.brand-bg-box { flex: 0 0 210px; }
.brand-bg-box img { width: 100%; height: 106px; max-height: none; object-fit: cover; border-radius: 4px; }
.brand-bg-box img[hidden] { display: none; }

/* Xem trước thẻ ngày giờ và thời tiết trong trang Nhận diện.
   Thẻ thật neo góc trên bên trái, nên bản xem trước cũng để lệch trái và hẹp. */
.bpl-infocard {
    width: 62%;
    background: rgba(255, 255, 255, .92);
    border-radius: 6px;
    padding: .45rem .6rem;
    margin-bottom: .6rem;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .08);
}
.bpl-infocard[hidden] { display: none; }
.bpl-ic-clock { font-weight: 700; font-size: .95rem; color: var(--ink); line-height: 1.1; }
.bpl-ic-date { font-size: .62rem; color: var(--ink-faint); }
.bpl-ic-wx {
    font-size: .7rem;
    color: var(--ink-faint);
    margin-top: .3rem;
    padding-top: .3rem;
    border-top: 1px solid rgba(16, 24, 40, .1);
}
.bpl-ic-wx i { font-size: .95rem; vertical-align: -1px; margin-right: .15rem; }
.bpl-ic-more { font-size: .62rem; color: var(--ink-faint); line-height: 1.5; margin-top: .15rem; }

/* Xem trước thẻ tin tức, cùng cột với thẻ ngày giờ */
.bpl-newscard {
    width: 62%;
    background: rgba(255, 255, 255, .92);
    border-radius: 6px;
    padding: .45rem .6rem .55rem;
    margin-bottom: .6rem;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .08);
}
.bpl-newscard[hidden] { display: none; }
.bpl-nc-head { font-size: .62rem; font-weight: 600; color: var(--ink-faint); margin-bottom: .35rem; }
.bpl-nc-head i { margin-right: .15rem; }
.bpl-nc-line { height: 7px; border-radius: 3px; background: rgba(16, 24, 40, .12); margin-top: .28rem; }
.bpl-nc-line.short { width: 68%; }

/* ô chọn màu của trình duyệt, bỏ viền mặc định cho khớp input-group của Bootstrap */
.color-field .color-dot {
    width: 42px;
    height: calc(1.5em + 1rem + 2px);
    padding: 3px;
    border: 1px solid #d7dee9;
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: #fff;
    cursor: pointer;
}
.color-field .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; font-family: ui-monospace, Consolas, monospace; }

.brand-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: .35rem; }
.brand-swatch { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--ink-faint); }
.brand-swatch i { width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .08); display: inline-block; }

.brand-preview-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: .35rem; }

.brand-prev-header {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-sm);
    color: #fff;
    overflow: hidden;
}
.brand-prev-header .bph-logo {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 6px; flex: 0 0 auto;
}
.brand-prev-header .bph-logo img { max-width: 32px; max-height: 32px; }
.brand-prev-header .bph-logo img[hidden] { display: none; }
.bph-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.bph-top { font-size: .58rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.bph-main { font-size: .95rem; font-weight: 700; }
.bph-main b { font-weight: 700; }
.bph-sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .28); margin: 0 .2rem; }
.bph-unit { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bph-unitName { font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.bph-appName { font-size: .66rem; opacity: .9; text-transform: uppercase; }

.brand-prev-login { border-radius: var(--radius-sm); padding: 1.1rem; }
.bpl-card { background: #fff; border-radius: 8px; padding: 1rem; box-shadow: 0 6px 18px rgba(16, 24, 40, .1); }
.bpl-logo { text-align: center; margin-bottom: .6rem; min-height: 28px; }
.bpl-logo img { max-height: 34px; max-width: 70%; }
.bpl-logo img[hidden] { display: none; }
.bpl-unit { font-weight: 700; font-size: .84rem; color: var(--ink); }
.bpl-unit[hidden] { display: none; }
.bpl-title { text-align: center; font-weight: 700; font-size: .9rem; margin-bottom: .7rem; }
.bpl-input { height: 26px; border: 1px solid var(--line); border-radius: 5px; margin-bottom: .45rem; background: #fbfcfe; }
.bpl-btn { text-align: center; color: #fff; border-radius: 5px; padding: .35rem; font-size: .8rem; font-weight: 600; margin-top: .6rem; }
.bpl-note { text-align: center; font-size: .66rem; color: var(--ink-faint); margin-top: .5rem; min-height: .8rem; }

.brand-prev-bits { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bpb-btn { color: #fff; border-radius: var(--radius-sm); padding: .35rem .8rem; font-size: .8rem; font-weight: 500; }
.bpb-badge { border-radius: 20px; padding: .15rem .6rem; font-size: .72rem; font-weight: 600; }
.bpb-link { font-size: .82rem; }

/* Trang đăng nhập: tên đơn vị thay cho logo khi chưa khai logo */
.auth-unit {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1.35rem;
}

/* Bảng tham số API và danh sách kiểm tra trong trang tài liệu đồng bộ người dùng */
.doc-params td:first-child { white-space: nowrap; }
.doc-params code { font-size: .8rem; }
.doc-check { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.doc-check-item { display: flex; align-items: flex-start; gap: .6rem; }
.doc-check-item > i { font-size: 1.1rem; line-height: 1.3; }

/* ==========================================================================
   Thanh phân trang dùng chung (_Pager.cshtml và wwwroot/js/phan-trang.js)
   ========================================================================== */

.sso-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-top: .75rem;
    font-size: .8rem;
    color: var(--ink-faint);
}
.qt-pane-foot .sso-pager, .modal .sso-pager { margin-top: 0; width: 100%; }
.sso-pager-info { font-variant-numeric: tabular-nums; }
.sso-pager-info strong { color: var(--ink-soft); font-weight: 600; }
.sso-pager-size { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.sso-pager-size label { margin: 0; white-space: nowrap; }
.sso-pager-size .custom-select { width: auto; height: calc(1.5em + .5rem + 2px); padding-top: .15rem; padding-bottom: .15rem; font-size: .8rem; }
.sso-pager .pagination { margin: 0 0 0 auto; }
.sso-pager .page-link { min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.sso-pager .page-item.active .page-link { background: var(--brand); border-color: var(--brand); }
/* Màn hẹp (390px): tối đa 11 nút trang (‹ 1 … 4 5 6 7 8 … 20 ›) dài hơn bề ngang, cho xuống dòng thay vì tràn ngang */
@media (max-width: 575.98px) { .sso-pager .pagination { margin-left: 0; flex-wrap: wrap; row-gap: .25rem; } }