/* ==========================================================================
   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;
    --ink-faint: #8a93a2;

    --line: #e4e9f2;
    --line-soft: #eef1f6;
    --surface: #ffffff;
    --canvas: #f4f6fa;

    --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: 15px; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

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;
}

/* 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: .78rem; }

/* ---------- 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 #d7dee9;
    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);
}

.input-group-text {
    background: #f7f9fc;
    border: 1px solid #d7dee9;
    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: .78rem;
    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: #d7dee9; }
.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: .74rem;
}
.badge-soft {
    background: var(--brand-soft);
    color: var(--brand-600);
    border: 1px solid #dde3ee;
    font-family: ui-monospace, Consolas, monospace;
}
.badge-ok { background: rgba(15, 157, 88, .12); color: #0a7a44; }
.badge-off { background: #eef0f4; color: var(--ink-faint); }
.badge-warn { background: rgba(240, 160, 32, .15); color: #9a6400; }
.badge-danger { background: rgba(217, 59, 59, .12); color: #b32626; }

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

.table { color: var(--ink); margin-bottom: 0; }
.table thead th {
    background: #f7f9fc;
    border-bottom: 1px solid var(--line);
    border-top: 0;
    font-size: .74rem;
    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: #e9f7ef; color: #0a7a44; border-left-color: var(--ok); }
.alert-danger  { background: #fdecec; color: #b32626; border-left-color: var(--danger); }
.alert-warning { background: #fdf5e6; color: #8a5a00; 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-faint); margin-top: .2rem; }

.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: .72rem; 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-container--bootstrap4 .select2-selection--single .select2-selection__clear { top: 50%; transform: translateY(-50%); margin-top: 0; }
.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;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    width: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline {
    float: none;
    display: inline-flex;
    flex: 1 1 6rem;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
    margin: 0;
    width: 100% !important;
    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;
}
/* 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: .72rem; 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
   ========================================================================== */

.bootstrap-datetimepicker-widget {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    padding: .35rem;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td span.active {
    background: var(--brand) !important;
    text-shadow: none;
}
.bootstrap-datetimepicker-widget table td.today::before { border-bottom-color: var(--brand); }
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td { border-radius: 6px; }
.bootstrap-datetimepicker-widget .picker-switch td span { border-radius: 6px; }

/* ==========================================================================
   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; }

.auth-hero {
    background: linear-gradient(160deg, #1b2d55 0%, var(--brand) 60%, #101c36 100%);
    color: #fff;
}

/* ==========================================================================
   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;

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

.auth-shell {
    min-height: 100vh;
    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-bottom: 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-faint); 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-faint); }
.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-faint); 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: .76rem;
    color: var(--ink-faint);
    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: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink-faint);
    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: .76rem;
    line-height: 1.35;
}
.anc-time { display: block; font-size: .67rem; color: var(--ink-faint); 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-bottom: 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: #fff;
    border-radius: 10px;
    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-faint);
    margin: -1.15rem 0 1.5rem;
}

.auth-page .form-label {
    font-size: .87rem;
    font-weight: 400;
    color: #3f4854;
    margin-bottom: .4rem;
}
.auth-page .form-control { height: calc(1.5em + 1.1rem + 2px); border-radius: 6px; }
.auth-page .form-control:focus {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px rgba(2, 136, 209, .16);
}
.auth-page .input-group-append .btn {
    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);
}

.auth-link { font-size: .87rem; color: var(--auth-accent); }
.auth-link:hover { color: var(--auth-accent-dark); text-decoration: underline; }

.auth-submit {
    background: var(--auth-accent);
    border-color: var(--auth-accent);
    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-dark);
    border-color: var(--auth-accent-dark);
}
.auth-submit:focus { box-shadow: 0 0 0 3px rgba(2, 136, 209, .3); }

/* ---------- 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: #9aa3b2;
    font-size: 1rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dce0e8;
}

.auth-providers {
    display: flex;
    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 0 0 3px rgba(2, 136, 209, .25); }

/* 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 */
.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: .78rem;
    color: #8b90a0;
    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: #e6f6ed; color: #0a7a44; }
.auth-icon-warn { background: #fdf5e6; color: #8a5a00; }
.auth-icon-danger { background: #fdecec; color: #b32626; }
.auth-text { text-align: center; font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.5rem; }

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

.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: .74rem; 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: .72rem;
    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: .72rem;
    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: .72rem;
    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;
    border-radius: 6px;
    line-height: 1;
}
.filter-clear:hover { color: var(--danger); background: #fdecec; }
.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;
}
.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: .74rem; 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; }