/* ==========================================================================
   HỆ THỐNG GIAO DIỆN
   Nền tảng: AdminLTE 3 + Bootstrap 4. Lớp này định nghĩa lại toàn bộ token
   màu, khoảng cách, bo góc và các thành phần chính để giao diện gọn gàng,
   nhiều khoảng thở, ít màu bão hoà. Sáng và tối là hai bảng màu được chọn
   riêng cho từng nền, không phải đảo ngược tự động.
   ========================================================================== */

:root {
    /* --- Nền và mực --- */
    --plane:        #f6f6f4;   /* nền trang */
    --surface:      #ffffff;   /* mặt thẻ */
    --surface-2:    #fbfbfa;   /* mặt chìm (đầu bảng, chân thẻ) */
    --ink:          #0b0b0b;   /* chữ chính */
    --ink-2:        #52514e;   /* chữ phụ */
    --ink-muted:    #898781;   /* nhãn, chú thích */
    --line:         #e6e5e0;   /* đường kẻ mảnh */
    --line-strong:  #d6d5ce;

    /* --- Màu nhấn (blue slot 1, đã kiểm định tương phản) --- */
    --accent:       #2a78d6;
    --accent-ink:   #1c5cab;   /* chữ trên nền nhạt */
    --accent-soft:  #eaf2fd;   /* nền nhạt của màu nhấn */
    --accent-ring:  rgba(42, 120, 214, .22);

    /* --- Màu trạng thái (cố định, không đổi theo theme) --- */
    --good:         #0ca30c;
    --good-ink:     #006300;
    --good-soft:    #e7f5e7;
    --warn:         #fab219;
    --warn-ink:     #7a5200;
    --warn-soft:    #fdf3e0;
    --serious:      #ec835a;
    --serious-ink:  #8f4520;
    --serious-soft: #fdefe8;
    --critical:     #d03b3b;
    --critical-ink: #a32626;
    --critical-soft:#fceaea;
    --neutral-soft: #eeedea;

    /* --- Hình khối --- */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 14px;
    --shadow-1: 0 1px 2px rgba(11,11,11,.05);
    --shadow-2: 0 2px 8px rgba(11,11,11,.06), 0 1px 2px rgba(11,11,11,.04);
    --shadow-3: 0 12px 32px -8px rgba(11,11,11,.18);
}

.dark-mode {
    --plane:        #0f0f0e;
    --surface:      #1a1a19;
    --surface-2:    #201f1e;
    --ink:          #ffffff;
    --ink-2:        #c3c2b7;
    --ink-muted:    #8f8e86;
    --line:         #2c2c2a;
    --line-strong:  #383835;

    --accent:       #3987e5;
    --accent-ink:   #9cc4f2;
    --accent-soft:  #17273a;
    --accent-ring:  rgba(57, 135, 229, .3);

    --good-ink:     #4fc24f;
    --good-soft:    #142414;
    --warn-ink:     #f0bf5c;
    --warn-soft:    #2a2211;
    --serious-ink:  #f0a883;
    --serious-soft: #2c1d15;
    --critical-ink: #ef8686;
    --critical-soft:#2b1515;
    --neutral-soft: #262623;
}

/* ==========================================================================
   Nền tảng
   ========================================================================== */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--ink);
    background-color: var(--plane);
    font-size: .9rem;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 650;
    letter-spacing: -.011em;
    color: var(--ink);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); text-decoration: none; }
hr { border-color: var(--line); }
code, .text-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.text-muted   { color: var(--ink-muted) !important; }
.text-secondary { color: var(--ink-2) !important; }
.text-primary { color: var(--accent) !important; }
.bg-primary   { background-color: var(--accent) !important; }

::selection { background: var(--accent-ring); }

/* Thanh cuộn mảnh, hợp tông */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Nút
   ========================================================================== */
.btn {
    border-radius: var(--r);
    font-weight: 550;
    font-size: .875rem;
    padding: .44rem .85rem;
    line-height: 1.45;
    border-width: 1px;
    transition: background-color .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--accent-ring); }
.btn i { font-size: .82em; }
.btn-sm { padding: .28rem .6rem; font-size: .8rem; border-radius: var(--r-sm); }
.btn-xs { padding: .12rem .45rem; font-size: .74rem; border-radius: var(--r-sm); font-weight: 500; }
.btn-lg { padding: .62rem 1.1rem; font-size: .95rem; border-radius: var(--r); }

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-1);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--accent-ink);
    border-color: var(--accent-ink);
    color: #fff;
}

/* Nút phụ: viền mảnh, nền mặt thẻ — không dùng màu bão hoà cho hành động phụ */
.btn-secondary, .btn-outline-secondary,
.btn-outline-primary, .btn-outline-dark, .btn-outline-info {
    background-color: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink-2);
}
.btn-secondary:hover, .btn-outline-secondary:hover,
.btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-info:hover,
.btn-secondary:focus, .btn-outline-secondary:focus,
.btn-outline-primary:focus, .btn-outline-dark:focus, .btn-outline-info:focus {
    background-color: var(--surface-2);
    border-color: var(--ink-muted);
    color: var(--ink);
}
.btn-outline-warning { background-color: var(--surface); border-color: var(--line-strong); color: var(--ink-2); }
.btn-outline-warning:hover { background-color: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink); }
.btn-outline-danger { background-color: var(--surface); border-color: var(--line-strong); color: var(--ink-2); }
.btn-outline-danger:hover, .btn-outline-danger:focus { background-color: var(--critical-soft); border-color: var(--critical); color: var(--critical-ink); }
.btn-outline-success { background-color: var(--surface); border-color: var(--line-strong); color: var(--ink-2); }
.btn-outline-success:hover { background-color: var(--good-soft); border-color: var(--good); color: var(--good-ink); }
.btn-danger { background-color: var(--critical); border-color: var(--critical); }
.btn-danger:hover { background-color: var(--critical-ink); border-color: var(--critical-ink); }
.btn-warning { background-color: var(--warn); border-color: var(--warn); color: #3d2900; }
.btn-link { color: var(--accent); font-weight: 500; }

/* Thanh công cụ: các nút rời rạc, khoảng cách đều, xuống dòng gọn */
.toolbar { display: flex; flex-wrap: wrap; gap: .4rem; }
.toolbar .btn { white-space: nowrap; }

/* ==========================================================================
   Ô nhập liệu
   ========================================================================== */
.form-control, .custom-select, .form-control-sm, .custom-select-sm {
    border-radius: var(--r);
    border: 1px solid var(--line-strong);
    background-color: var(--surface);
    color: var(--ink);
    padding: .44rem .7rem;
    height: auto;
    font-size: .875rem;
    box-shadow: none;
    transition: border-color .13s ease, box-shadow .13s ease;
}
.form-control-sm, .custom-select-sm { padding: .3rem .55rem; font-size: .82rem; border-radius: var(--r-sm); }
.form-control:focus, .custom-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    background-color: var(--surface);
    color: var(--ink);
}
.form-control::placeholder { color: var(--ink-muted); }
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); color: var(--ink-2); }
textarea.form-control { line-height: 1.55; }

label, .form-label {
    font-weight: 550;
    font-size: .8rem;
    color: var(--ink-2);
    margin-bottom: .3rem;
}
.form-text { font-size: .78rem; color: var(--ink-muted); }
.form-check-label { font-weight: 450; color: var(--ink-2); font-size: .85rem; }
.form-check-input { cursor: pointer; }

.input-group-text {
    background-color: var(--surface-2);
    border-color: var(--line-strong);
    color: var(--ink-muted);
    border-radius: var(--r);
}
.input-group > .form-control { border-radius: var(--r); }
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-prepend + .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ==========================================================================
   Thẻ / khối nội dung
   ========================================================================== */
.card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin-bottom: 1rem;
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--line);
    padding: .8rem 1.1rem;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}
.card-body { padding: 1.1rem; }
.card-title { font-size: .9rem; font-weight: 600; margin: 0; color: var(--ink); }
.card-footer { background-color: var(--surface-2); border-top: 1px solid var(--line); }
/* AdminLTE vẽ vạch màu dày ở đầu thẻ — thay bằng đường mảnh */
.card.card-outline { border-top: 1px solid var(--line); }
.card.card-primary:not(.card-outline) > .card-header { background-color: var(--accent); }
.card .card-tools .btn-tool { color: var(--ink-muted); }
.card .card-tools .btn-tool:hover { color: var(--ink); }

/* Tiêu đề khu vực */
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem; margin-bottom: 1.1rem;
}
.page-head h1 {
    font-size: 1.2rem; font-weight: 650; margin: 0;
    display: flex; align-items: center; gap: .55rem;
}
.page-head h1 i { color: var(--ink-muted); font-size: .95rem; }
.page-sub { color: var(--ink-muted); font-size: .82rem; margin: .2rem 0 0; }

/* ==========================================================================
   Thẻ số liệu (KPI)
   Nền trung tính + một chấm màu nhỏ mang danh tính, không tô kín khối màu.
   ========================================================================== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
.stat-tile {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: .8rem .9rem;
    box-shadow: var(--shadow-1);
    transition: border-color .13s ease, box-shadow .13s ease;
}
.stat-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.stat-tile .stat-label {
    display: flex; align-items: center; gap: .4rem;
    font-size: .76rem; font-weight: 550; color: var(--ink-2);
    text-transform: none; letter-spacing: 0; margin-bottom: .35rem;
}
.stat-tile .stat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-muted); }
.stat-tile .stat-value {
    font-size: 1.55rem; font-weight: 650; line-height: 1.15; color: var(--ink);
    letter-spacing: -.02em;
}
.stat-tile.is-total { background-color: var(--accent-soft); border-color: transparent; }
.stat-tile.is-total .stat-value { color: var(--accent-ink); }
.stat-tile.is-total .stat-label { color: var(--accent-ink); }

.dot-accent   { background: var(--accent) !important; }
.dot-good     { background: var(--good) !important; }
.dot-warn     { background: var(--warn) !important; }
.dot-serious  { background: var(--serious) !important; }
.dot-critical { background: var(--critical) !important; }
.dot-neutral  { background: var(--ink-muted) !important; }

/* Ô small-box của AdminLTE (trang tổng quan) — làm phẳng, bỏ màu tô kín */
.small-box {
    background-color: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin-bottom: .7rem;
    overflow: hidden;
}
.small-box > .inner { padding: .85rem .95rem .6rem; }
.small-box h3, .small-box h4 {
    font-size: 1.55rem; font-weight: 650; color: var(--ink);
    letter-spacing: -.02em; margin: 0 0 .1rem;
}
.small-box p { font-size: .78rem; color: var(--ink-2); margin: 0; font-weight: 500; }
.small-box .icon { display: none; }
.small-box .small-box-footer {
    background-color: transparent;
    border-top: 1px solid var(--line);
    color: var(--accent) !important;
    font-size: .76rem; font-weight: 550; padding: .45rem .95rem;
    text-align: left;
}
.small-box .small-box-footer:hover { background-color: var(--surface-2); color: var(--accent-ink) !important; }
/* Chấm màu nhận diện ở mép trái */
.small-box.bg-primary,   .small-box.bg-info,
.small-box.bg-success,   .small-box.bg-danger,
.small-box.bg-warning,   .small-box.bg-secondary { position: relative; }
.small-box[class*="bg-"]::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.small-box.bg-primary::before   { background: var(--accent); }
.small-box.bg-info::before      { background: var(--accent); }
.small-box.bg-success::before   { background: var(--good); }
.small-box.bg-warning::before   { background: var(--warn); }
.small-box.bg-danger::before    { background: var(--critical); }
.small-box.bg-secondary::before,
.small-box.bg-dark::before      { background: var(--ink-muted); }

/* ==========================================================================
   Nhãn trạng thái — viên thuốc nền nhạt, chữ đậm màu (không tô đặc)
   ========================================================================== */
.badge {
    font-weight: 550;
    font-size: .74rem;
    padding: .28em .6em;
    border-radius: 99px;
    letter-spacing: .005em;
}
.badge-primary   { background-color: var(--accent-soft);   color: var(--accent-ink); }
.badge-secondary { background-color: var(--neutral-soft);  color: var(--ink-2); }
.badge-success   { background-color: var(--good-soft);     color: var(--good-ink); }
.badge-info      { background-color: var(--accent-soft);   color: var(--accent-ink); }
.badge-warning   { background-color: var(--warn-soft);     color: var(--warn-ink); }
.badge-danger    { background-color: var(--critical-soft); color: var(--critical-ink); }
.badge-dark      { background-color: var(--neutral-soft);  color: var(--ink-2); }

/* ==========================================================================
   Bảng dữ liệu
   ========================================================================== */
.table { color: var(--ink); margin-bottom: 0; }
.table thead th {
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--line);
    border-top: none;
    color: var(--ink-muted);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .6rem .7rem;
    white-space: nowrap;
    vertical-align: middle;
}
.table td {
    border-top: 1px solid var(--line);
    padding: .55rem .7rem;
    vertical-align: middle;
    font-size: .855rem;
    color: var(--ink-2);
}
.table td:first-child, .table th:first-child { padding-left: 1rem; }
.table td:last-child,  .table th:last-child  { padding-right: 1rem; }
.table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
.table-hover tbody tr:hover { background-color: var(--surface-2); color: var(--ink); }
/* Cột số canh thẳng hàng */
.table td:first-child, .table .text-monospace, .cell-num { font-variant-numeric: tabular-nums; }
.table .btn-group .btn + .btn { margin-left: -1px; }
.table-responsive { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.card-body.table-responsive { padding: 0; }
.card-body.table-responsive > .dataTables_wrapper { padding: .9rem 0 .3rem; }

/* DataTables */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: .82rem; color: var(--ink-2); padding: 0 1rem; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    padding: .25rem .5rem;
    margin: 0 .3rem;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.dataTables_wrapper .dataTables_info { padding-top: .7rem; color: var(--ink-muted); }
.dataTables_wrapper .dataTables_paginate { padding-top: .55rem; }
.page-link {
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    border-radius: var(--r-sm);
    margin: 0 1px;
    font-size: .82rem;
    padding: .3rem .6rem;
}
.page-link:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-item.disabled .page-link { color: var(--line-strong); background: transparent; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { background-image: none; position: relative; padding-right: 1.3rem; cursor: pointer; }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
    font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .62rem; opacity: .35;
}
table.dataTable thead .sorting::after     { content: "\f0dc"; }
table.dataTable thead .sorting_asc::after { content: "\f0de"; opacity: .85; color: var(--accent); }
table.dataTable thead .sorting_desc::after{ content: "\f0dd"; opacity: .85; color: var(--accent); }
.dataTables_empty { color: var(--ink-muted); padding: 2.2rem 1rem !important; font-size: .86rem; }
.dataTables_processing {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r);
    box-shadow: var(--shadow-2);
    color: var(--ink-2);
    font-size: .82rem;
}

/* ==========================================================================
   Bố cục panel (AdminLTE)
   ========================================================================== */
.wrapper { background-color: var(--plane); }
.content-wrapper { background-color: var(--plane); }
.content.pt-3 { padding-top: 1.4rem !important; }

.main-header.navbar {
    background-color: var(--surface) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none;
    padding: .3rem 1rem;
    min-height: 56px;
}
.main-header .nav-link { color: var(--ink-2) !important; font-size: .86rem; font-weight: 500; }
.main-header .nav-link:hover { color: var(--ink) !important; }

.main-sidebar {
    background-color: #15161a !important;
    box-shadow: none !important;
    border-right: 1px solid rgba(255,255,255,.06);
}
.main-sidebar .brand-link {
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: .95rem 1rem;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: -.01em;
    font-size: .98rem;
}
.main-sidebar .brand-link i { color: var(--accent); }
.sidebar { padding: 0 .55rem; }
.user-panel { border-bottom: 1px solid rgba(255,255,255,.07); padding-left: .45rem; }
.user-panel .info a { color: #fff; font-weight: 550; font-size: .86rem; }
.user-panel .info small { color: rgba(255,255,255,.45); font-size: .74rem; }
.nav-sidebar .nav-link {
    color: rgba(255,255,255,.62) !important;
    border-radius: var(--r);
    padding: .52rem .7rem;
    margin-bottom: 2px;
    font-size: .86rem;
    font-weight: 500;
    transition: background-color .13s ease, color .13s ease;
}
.nav-sidebar .nav-link:hover { background-color: rgba(255,255,255,.06) !important; color: #fff !important; }
.nav-sidebar .nav-link.active {
    background-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: none;
}
.nav-sidebar .nav-link .nav-icon { width: 1.3rem; font-size: .88rem; opacity: .9; }
.nav-sidebar .nav-link.text-danger { color: #f09b9b !important; }
.nav-sidebar .nav-link.text-danger:hover { background-color: rgba(208,59,59,.18) !important; color: #ffb4b4 !important; }

.main-footer {
    background-color: transparent;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: .78rem;
    padding: .9rem 1rem;
}

/* Menu người dùng */
.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-3);
    background-color: var(--surface);
    padding: .3rem;
    font-size: .86rem;
}
.dropdown-item { border-radius: var(--r-sm); color: var(--ink-2); padding: .45rem .6rem; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--surface-2); color: var(--ink); }
.dropdown-item.text-danger:hover { background-color: var(--critical-soft); color: var(--critical-ink) !important; }
.dropdown-divider { border-color: var(--line); margin: .3rem 0; }

/* ==========================================================================
   Thông báo
   ========================================================================== */
.alert {
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: .85rem;
    padding: .7rem .9rem;
    box-shadow: var(--shadow-1);
}
.alert-success { background-color: var(--good-soft);     border-color: rgba(12,163,12,.28);  color: var(--good-ink); }
.alert-danger  { background-color: var(--critical-soft); border-color: rgba(208,59,59,.28);  color: var(--critical-ink); }
.alert-warning { background-color: var(--warn-soft);     border-color: rgba(250,178,25,.32); color: var(--warn-ink); }
.alert-info    { background-color: var(--accent-soft);   border-color: rgba(42,120,214,.25); color: var(--accent-ink); }
.alert .close { color: inherit; opacity: .5; text-shadow: none; }
.alert .close:hover { opacity: 1; }

/* ==========================================================================
   Hộp thoại
   ========================================================================== */
.modal-content {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    background-color: var(--surface);
}
.modal-header {
    border-bottom: 1px solid var(--line);
    padding: .9rem 1.15rem;
}
.modal-title { font-size: 1rem; font-weight: 620; }
.modal-body { padding: 1.15rem; }
.modal-footer {
    border-top: 1px solid var(--line);
    padding: .75rem 1.15rem;
    background-color: var(--surface-2);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.modal-header .close { color: var(--ink-muted); text-shadow: none; opacity: 1; font-weight: 400; }
.modal-header .close:hover { color: var(--ink); }
.modal-backdrop.show { opacity: .4; }

/* ==========================================================================
   Module dữ liệu (Thẻ / Tài khoản)
   ========================================================================== */
.module-filters { background-color: var(--surface); }
.module-filters .card-body { padding: .85rem 1.1rem 1rem; }
.filter-label {
    display: block; font-size: .72rem; font-weight: 600; color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem;
}
.check-grid {
    border: 1px solid var(--line); border-radius: var(--r);
    padding: .55rem .7rem; background-color: var(--surface-2);
}
.check-grid .form-check { margin-bottom: .15rem; }
.check-scroll { max-height: 132px; overflow: auto; }

.qr-thumb {
    width: 40px; height: 40px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: #fff; object-fit: cover;
}
.detail-value {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
    padding: .45rem .6rem; min-height: 38px; word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem;
    color: var(--ink);
}
.card-copy { cursor: pointer; border-bottom: 1px dashed transparent; }
.card-copy:hover { border-bottom-color: var(--ink-muted); }
.cell-trunc { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
#accountsTable td.cell-selected { box-shadow: inset 0 0 0 2px var(--accent-ring); background-color: var(--accent-soft) !important; }
.card-status-select { max-width: 108px; display: inline-block; }

/* Nút thao tác trong bảng: chỉ biểu tượng, chìm, hiện rõ khi rê chuột */
.table .btn-group .btn,
.table .btn-outline-primary, .table .btn-outline-danger,
.table .btn-outline-warning, .table .btn-outline-success,
.table .btn-outline-info, .table .btn-outline-secondary {
    border-color: transparent;
    background-color: transparent;
    color: var(--ink-muted);
    padding: .25rem .45rem;
}
.table tr:hover .btn-outline-primary, .table tr:hover .btn-outline-danger,
.table tr:hover .btn-outline-warning, .table tr:hover .btn-outline-success,
.table tr:hover .btn-outline-info, .table tr:hover .btn-outline-secondary { color: var(--ink-2); }
.table .btn-outline-primary:hover { background-color: var(--accent-soft); color: var(--accent-ink); }
.table .btn-outline-danger:hover  { background-color: var(--critical-soft); color: var(--critical-ink); }
.table .btn-outline-warning:hover { background-color: var(--warn-soft); color: var(--warn-ink); }
.table .btn-outline-success:hover { background-color: var(--good-soft); color: var(--good-ink); }
.table .btn-outline-info:hover    { background-color: var(--accent-soft); color: var(--accent-ink); }

/* Trạng thái rỗng */
.empty-state { text-align: center; padding: 2.6rem 1rem; color: var(--ink-muted); }
.empty-state i { font-size: 1.6rem; opacity: .35; display: block; margin-bottom: .6rem; }
.empty-state .empty-title { font-weight: 550; color: var(--ink-2); font-size: .9rem; }

/* ==========================================================================
   Trang đăng nhập / công khai
   ========================================================================== */
.auth-body {
    min-height: 100vh;
    background-color: var(--plane);
    background-image:
        radial-gradient(60rem 30rem at 15% -10%, rgba(42,120,214,.07), transparent 60%),
        radial-gradient(50rem 26rem at 100% 110%, rgba(42,120,214,.05), transparent 55%);
    color: var(--ink);
}
.auth-topbar { padding: 1.1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; }
.auth-topbar .brand { font-weight: 650; color: var(--ink); font-size: 1rem; display: inline-flex; align-items: center; }
.auth-topbar .brand i { color: var(--accent); margin-right: .45rem; }
.auth-wrap { min-height: calc(100vh - 130px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card {
    width: 100%; max-width: 420px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    background: var(--surface);
}
.auth-card-head {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    padding: 1.15rem 1.4rem;
    color: var(--ink);
}
.auth-card-head::after { display: none; }
.auth-badge {
    width: 38px; height: 38px; border-radius: var(--r);
    background: var(--accent-soft); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; margin-bottom: .55rem;
}
.auth-card-head .brand-name { font-weight: 650; font-size: 1.02rem; letter-spacing: -.015em; color: var(--ink); }
.auth-card-head .brand-tag { color: var(--ink-muted); font-size: .8rem; margin-top: .1rem; }
.auth-card .card-body { padding: 1.4rem 1.4rem 1.6rem; }
.auth-card h1.h4 { font-size: 1.05rem; }
.toggle-pw { color: var(--ink-muted); }
.btn-block { padding-top: .55rem; padding-bottom: .55rem; }

.public-body { background-color: var(--plane); color: var(--ink); }
.public-body .navbar { background-color: var(--surface) !important; border-bottom: 1px solid var(--line) !important; box-shadow: none; }
.navbar-brand { font-weight: 650; letter-spacing: -.015em; }
.hero {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2.4rem 2rem;
    box-shadow: var(--shadow-1);
}
.hero::after { display: none; }
.hero .hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--accent-soft); color: var(--accent-ink);
    border-radius: 99px; padding: .25rem .7rem; font-size: .78rem; font-weight: 550;
}
.feature-box {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 1.2rem; height: 100%;
    box-shadow: var(--shadow-1);
}
.feature-icon {
    width: 38px; height: 38px; border-radius: var(--r);
    background: var(--accent-soft); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: .7rem;
}
footer { color: var(--ink-muted); }

/* ==========================================================================
   Chế độ tối — chỉnh những chỗ AdminLTE/Bootstrap tô cứng
   ========================================================================== */
.dark-mode .content-wrapper,
.dark-mode .wrapper { background-color: var(--plane) !important; }
.dark-mode .main-header.navbar { background-color: var(--surface) !important; border-bottom-color: var(--line) !important; }
.dark-mode .card,
.dark-mode .modal-content,
.dark-mode .dropdown-menu { background-color: var(--surface); border-color: var(--line); }
.dark-mode .card-header, .dark-mode .modal-header { border-bottom-color: var(--line); }
.dark-mode .modal-footer { background-color: var(--surface-2); border-top-color: var(--line); }
.dark-mode .table { color: var(--ink-2); }
.dark-mode .table thead th { background-color: var(--surface-2); color: var(--ink-muted); border-bottom-color: var(--line); }
.dark-mode .table td { border-top-color: var(--line); }
.dark-mode .table-hover tbody tr:hover { background-color: var(--surface-2); color: var(--ink); }
.dark-mode .form-control, .dark-mode .custom-select {
    background-color: var(--surface-2); border-color: var(--line-strong); color: var(--ink);
}
.dark-mode .form-control:focus { background-color: var(--surface-2); border-color: var(--accent); }
.dark-mode .input-group-text { background-color: var(--surface-2); border-color: var(--line-strong); color: var(--ink-muted); }
.dark-mode .btn-secondary, .dark-mode .btn-outline-secondary,
.dark-mode .btn-outline-primary, .dark-mode .btn-outline-dark,
.dark-mode .btn-outline-info, .dark-mode .btn-outline-warning,
.dark-mode .btn-outline-danger, .dark-mode .btn-outline-success {
    background-color: var(--surface-2); border-color: var(--line-strong); color: var(--ink-2);
}
.dark-mode .small-box { background-color: var(--surface) !important; border-color: var(--line); }
.dark-mode .check-grid, .dark-mode .detail-value { background-color: var(--surface-2); border-color: var(--line); }
.dark-mode .dataTables_wrapper .dataTables_length select,
.dark-mode .dataTables_wrapper .dataTables_filter input { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.dark-mode .page-link { color: var(--ink-2); }
.dark-mode .page-link:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.dark-mode .close, .dark-mode .modal-header .close { color: var(--ink-2); text-shadow: none; }
.dark-mode .qr-thumb { background: var(--surface-2); border-color: var(--line); }
.dark-mode .auth-card-head { background: var(--surface-2); }
.dark-mode .main-footer { border-top-color: var(--line); }
.dark-mode .dataTables_processing { background: var(--surface) !important; border-color: var(--line) !important; }

/* Nút chuyển sáng/tối và chọn ngôn ngữ trên thanh trên cùng */
#themeToggle {
    width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.main-header .btn-outline-secondary, .main-header .dropdown-toggle.btn {
    border-color: var(--line-strong); color: var(--ink-2); background: var(--surface);
}

/* ==========================================================================
   Tinh chỉnh nhỏ
   ========================================================================== */
.border { border-color: var(--line) !important; }
.rounded { border-radius: var(--r) !important; }
.text-sm { font-size: .82rem; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--accent); border-color: var(--accent); }
.custom-switch .custom-control-label::before { background-color: var(--line-strong); border-color: var(--line-strong); }
.spinner-border-sm { width: .95rem; height: .95rem; border-width: .14em; }

@media (max-width: 767.98px) {
    .page-head { align-items: flex-start; flex-direction: column; }
    .stat-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .card-body { padding: .9rem; }
}

@media print {
    .main-sidebar, .main-header, .main-footer, .toolbar, .module-filters { display: none !important; }
    .content-wrapper { margin-left: 0 !important; }
}

/* Thẻ số liệu dạng liên kết */
a.stat-tile { display: block; color: inherit; }
a.stat-tile:hover { color: inherit; border-color: var(--accent); }

/* Chân trang đăng nhập */
.auth-wrap { flex-direction: column; }
.auth-foot { text-align: center; color: var(--ink-muted); font-size: .78rem; padding: 0 0 1.6rem; margin: 0; }

/* Bảng: giữ mỗi dòng trên một hàng, cắt bớt nội dung quá dài */
.table td, .table th { white-space: nowrap; }
.table td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* Nút thao tác trong bảng luôn thấy được, đậm hơn khi rê chuột */
.table .btn-outline-primary, .table .btn-outline-danger,
.table .btn-outline-warning, .table .btn-outline-success,
.table .btn-outline-info, .table .btn-outline-secondary {
    background-color: var(--surface-2);
    border-color: var(--line);
    color: var(--ink-2);
}
.dark-mode .table .btn-outline-primary, .dark-mode .table .btn-outline-danger,
.dark-mode .table .btn-outline-warning, .dark-mode .table .btn-outline-success,
.dark-mode .table .btn-outline-info, .dark-mode .table .btn-outline-secondary {
    background-color: var(--surface-2); border-color: var(--line); color: var(--ink-2);
}

/* Cột "Thao tác" luôn nhìn thấy khi bảng cuộn ngang */
.table th:last-child, .table td:last-child {
    position: sticky; right: 0; z-index: 2;
    background-color: var(--surface);
    box-shadow: -8px 0 8px -8px rgba(11,11,11,.16);
}
.table thead th:last-child { background-color: var(--surface-2); z-index: 3; }
.table-hover tbody tr:hover td:last-child { background-color: var(--surface-2); }

/* Ô chọn trạng thái ngay trong bảng — gọn, màu theo trạng thái */
.card-status-select {
    appearance: none; -webkit-appearance: none;
    border: 1px solid transparent; border-radius: 99px;
    padding: .18rem 1.35rem .18rem .6rem;
    font-size: .74rem; font-weight: 550; cursor: pointer;
    background-color: var(--neutral-soft); color: var(--ink-2);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 12px) 52%, calc(100% - 8px) 52%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    max-width: none;
}
.card-status-select:hover  { border-color: var(--line-strong); }
.card-status-select:focus  { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.card-status-select.st-success   { background-color: var(--good-soft);     color: var(--good-ink); }
.card-status-select.st-warning   { background-color: var(--warn-soft);     color: var(--warn-ink); }
.card-status-select.st-danger    { background-color: var(--critical-soft); color: var(--critical-ink); }
.card-status-select.st-primary   { background-color: var(--accent-soft);   color: var(--accent-ink); }
.card-status-select.st-secondary { background-color: var(--neutral-soft);  color: var(--ink-2); }
.card-status-select option { background: var(--surface); color: var(--ink); }

/* Ô QR gọn */
#cardsTable td:nth-child(9) { width: 56px; }

/* AdminLTE tô cứng màu ô nhập ở chế độ tối — ghi đè lại cho khớp bảng màu */
.dark-mode .form-control,
.dark-mode .custom-select,
.dark-mode textarea.form-control,
.dark-mode .input-group-text,
.dark-mode .dataTables_wrapper .dataTables_filter input,
.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: var(--surface-2) !important;
    border-color: var(--line-strong) !important;
    color: var(--ink) !important;
}
.dark-mode .form-control::placeholder { color: var(--ink-muted) !important; }
.dark-mode .form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}
.dark-mode .modal-content, .dark-mode .card { background-color: var(--surface) !important; }
.dark-mode .modal-footer { background-color: var(--surface-2) !important; }
.dark-mode .table thead th, .dark-mode .table th:last-child { background-color: var(--surface-2) !important; }
.dark-mode .table td:last-child { background-color: var(--surface) !important; }
.dark-mode .table-hover tbody tr:hover td:last-child { background-color: var(--surface-2) !important; }

/* ==========================================================================
   Hộp chọn nhiều (multi-select) — bấm mở danh sách, tick từng mục
   ========================================================================== */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.ms { position: relative; display: inline-block; }
.ms-wide .ms-panel { min-width: 288px; }

.ms-toggle {
    display: inline-flex; align-items: baseline; gap: .5rem;
    min-width: 220px; max-width: 340px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    padding: .4rem .75rem;
    font-size: .855rem; color: var(--ink);
    cursor: pointer; text-align: left;
    transition: border-color .13s ease, box-shadow .13s ease;
}
.ms-toggle:hover { border-color: var(--ink-muted); }
.ms.is-open .ms-toggle { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ms-toggle .ms-label {
    color: var(--ink-muted); font-size: .74rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; flex: none;
}
.ms-toggle .ms-text {
    flex: 1 1 auto; font-weight: 550;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-caret {
    flex: none; width: 0; height: 0; align-self: center;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--ink-muted);
    transition: transform .15s ease;
}
.ms.is-open .ms-caret { transform: rotate(180deg); }

.ms-panel {
    display: none; position: absolute; z-index: 1040; top: calc(100% + 4px); left: 0;
    min-width: 240px; max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}
.ms.is-open .ms-panel { display: block; }
.ms-search { padding: .55rem .55rem .35rem; border-bottom: 1px solid var(--line); }
.ms-head {
    display: flex; gap: .3rem; padding: .45rem .55rem;
    border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.ms-list { max-height: 264px; overflow-y: auto; padding: .3rem; }
.ms-list-tall { max-height: 300px; }
.ms-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .38rem .5rem; border-radius: var(--r-sm);
    cursor: pointer; margin: 0; font-weight: 450; font-size: .855rem;
    color: var(--ink-2);
}
.ms-item:hover { background: var(--surface-2); color: var(--ink); }
.ms-item input[type="checkbox"] { margin: 0; flex: none; cursor: pointer; width: 15px; height: 15px; accent-color: var(--accent); }
.ms-item .ms-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-muted); }
.ms-item .ms-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-item .ms-count {
    flex: none; font-size: .74rem; font-variant-numeric: tabular-nums;
    color: var(--ink-muted); background: var(--neutral-soft);
    border-radius: 99px; padding: .05rem .4rem;
}
.ms-item.is-hidden { display: none; }
.ms-empty { padding: 1rem .6rem; text-align: center; color: var(--ink-muted); font-size: .82rem; }
.ms-foot {
    border-top: 1px solid var(--line); background: var(--surface-2);
    padding: .4rem .55rem; font-size: .76rem; color: var(--ink-muted);
}

.dark-mode .ms-toggle { background: var(--surface-2); border-color: var(--line-strong); }
.dark-mode .ms-panel { background: var(--surface); border-color: var(--line); }
.dark-mode .ms-head, .dark-mode .ms-foot { background: var(--surface-2); }

@media (max-width: 575.98px) {
    .ms, .ms-toggle { width: 100%; max-width: none; }
    .ms-panel { width: 100%; }
}

/* Hàng bộ lọc gọn, không chiếm chỗ của bảng */
.module-filters .card-body.py-2 { padding-top: .6rem !important; padding-bottom: .6rem !important; }

/* ==========================================================================
   Lưới chức năng ở trang chính của panel
   ========================================================================== */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: .8rem; }
.mod-card {
    display: flex; align-items: flex-start; gap: .8rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 1rem;
    box-shadow: var(--shadow-1); color: inherit;
    transition: border-color .13s ease, box-shadow .13s ease, transform .13s ease;
}
.mod-card:hover {
    color: inherit; border-color: var(--accent);
    box-shadow: var(--shadow-2); transform: translateY(-1px);
}
.mod-icon {
    flex: none; width: 42px; height: 42px; border-radius: var(--r);
    background: var(--accent-soft); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.mod-body { flex: 1 1 auto; min-width: 0; }
.mod-name { display: block; font-weight: 620; font-size: .95rem; color: var(--ink); margin-bottom: .15rem; }
.mod-desc { display: block; font-size: .8rem; color: var(--ink-muted); line-height: 1.45; }
.mod-stat {
    flex: none; align-self: center; font-size: .9rem; font-weight: 650;
    font-variant-numeric: tabular-nums; color: var(--ink-2);
    background: var(--neutral-soft); border-radius: 99px; padding: .12rem .55rem;
}

/* ===== Toast thông báo (góc phải trên, tự biến mất) ===== */
#app-toast-area {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
    width: max-content;
    pointer-events: none;
}
.app-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r, 10px);
    background: var(--surface, #fff);
    color: var(--ink, #0b0b0b);
    box-shadow: var(--shadow-3, 0 12px 32px -8px rgba(0,0,0,.25));
    border-left: 4px solid var(--accent, #2a78d6);
    font-size: .9rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}
.app-toast.show { opacity: 1; transform: none; }
.app-toast-success { border-left-color: var(--good, #0ca30c); }
.app-toast-danger  { border-left-color: var(--critical, #d03b3b); }
.app-toast-warning { border-left-color: var(--warn, #fab219); }
.app-toast-info    { border-left-color: var(--accent, #2a78d6); }
.app-toast-msg { flex: 1; min-width: 0; word-break: break-word; }
.app-toast-x {
    background: transparent;
    border: 0;
    color: var(--ink-muted, #898781);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.app-toast-x:hover { color: var(--ink, #0b0b0b); }

/* ==========================================================================
   THEME "CREATEDOMAIN" — tông tím gradient đồng bộ toàn site
   Phủ lên AdminLTE: đổi màu nhấn sang tím (#667eea → #764ba2), gradient
   sidebar trái + thanh trên, nút chính, biểu tượng; thêm bộ lớp thành phần
   (.panel/.tab-nav/.field/.settings/.btn.success…) cho các trang kiểu
   createdomain. Sáng và tối đều dùng chung dải gradient.
   ========================================================================== */
:root {
    --grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --grad-soft: linear-gradient(135deg, #7c8ef0 0%, #8a5fb8 100%);
    --accent:       #764ba2;
    --accent-ink:   #5b3a86;
    --accent-soft:  #efe9fb;
    --accent-ring:  rgba(118, 75, 162, .26);
}
.dark-mode {
    --accent:       #9a7bd8;
    --accent-ink:   #c3aef0;
    --accent-soft:  #241b38;
    --accent-ring:  rgba(154, 123, 216, .34);
}

/* ---- Nút chính: gradient tím ---- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-image: var(--grad);
    background-color: #764ba2;
    border: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(118, 75, 162, .28);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-image: var(--grad);
    filter: brightness(1.07);
    border: none;
    color: #fff;
}

/* ---- Sidebar trái: gradient tím dọc ---- */
.main-sidebar {
    background: linear-gradient(195deg, #5b3f92 0%, #43306e 55%, #35265a 100%) !important;
    border-right: none;
}
.main-sidebar .brand-link {
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: #fff !important;
}
.main-sidebar .brand-link i { color: #fff; opacity: .95; }
.user-panel { border-bottom: 1px solid rgba(255,255,255,.12); }
.user-panel .info a { color: #fff; }
.user-panel .info small { color: rgba(255,255,255,.55); }
.nav-sidebar .nav-link { color: rgba(255,255,255,.72) !important; }
.nav-sidebar .nav-link:hover { background-color: rgba(255,255,255,.12) !important; color: #fff !important; }
.nav-sidebar .nav-link.active {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #fff;
}
.nav-sidebar .nav-link.text-danger { color: #ffc2c2 !important; }
.nav-sidebar .nav-link.text-danger:hover { background-color: rgba(255,80,80,.22) !important; color: #fff !important; }

/* ---- Thanh trên: gradient tím ngang, chữ trắng ---- */
.main-header.navbar,
.dark-mode .main-header.navbar {
    background: var(--grad) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 10px rgba(118, 75, 162, .22);
}
.main-header .nav-link,
.main-header .nav-link:hover { color: #fff !important; }
.main-header #themeToggle,
.main-header .btn-outline-secondary,
.main-header .dropdown-toggle.btn {
    border-color: rgba(255,255,255,.5) !important;
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
}
.main-header #themeToggle:hover,
.main-header .btn-outline-secondary:hover { background: rgba(255,255,255,.24) !important; }
.main-header .navbar-nav .nav-link i { color: #fff; }

/* ---- Biểu tượng module & KPI: nền gradient ---- */
.mod-icon, .feature-icon, .auth-badge {
    background: var(--grad) !important;
    color: #fff !important;
}
.mod-card:hover { border-color: #764ba2; }
.stat-tile.is-total { background: var(--accent-soft); }

/* ---- Tiêu đề trang: dải nhấn gradient ở mép trái ---- */
.page-head h1 { position: relative; padding-left: .7rem; }
.page-head h1::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 1.1em; border-radius: 4px; background: var(--grad);
}
.page-head h1 i { color: var(--accent); }

/* ==========================================================================
   Bộ lớp thành phần kiểu createdomain (dùng cho trang panel / tool)
   ========================================================================== */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin-bottom: 1rem;
    overflow: hidden;
}
.panel-head {
    background: var(--grad);
    color: #fff;
    padding: 1.1rem 1.3rem;
}
.panel-head h2 { color: #fff; font-size: 1.05rem; margin: 0; }
.panel-head .sub { color: rgba(255,255,255,.85); font-size: .82rem; margin-top: .2rem; }

/* Tabs */
.tab-nav {
    display: flex; flex-wrap: wrap; gap: 2px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    padding: .4rem .5rem 0;
}
.tab-btn {
    border: none; background: transparent;
    padding: .6rem 1rem; border-radius: var(--r) var(--r) 0 0;
    font-weight: 550; font-size: .86rem; color: var(--ink-2);
    cursor: pointer; transition: background .13s, color .13s;
}
.tab-btn:hover { background: var(--surface); color: var(--ink); }
.tab-btn.active { background: var(--surface); color: var(--accent-ink); box-shadow: inset 0 -2px 0 #764ba2; }
.tab-content { display: none; padding: 1.2rem 1.3rem; }
.tab-content.active { display: block; }

/* Lưới & field */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field > label { font-weight: 600; font-size: .82rem; color: var(--ink-2); margin: 0; }
.field textarea, .field input[type="text"], .field input[type="number"] {
    width: 100%; padding: .55rem .7rem;
    border: 1px solid var(--line-strong); border-radius: var(--r);
    background: var(--surface); color: var(--ink); font: inherit; font-size: .875rem;
    outline: none; resize: vertical; transition: border-color .13s, box-shadow .13s;
}
.field textarea { min-height: 200px; line-height: 1.5; }
.field textarea:focus, .field input:focus {
    border-color: #764ba2; box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Khối cài đặt */
.settings {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r); padding: 1rem; margin: 1rem 0;
}
.settings-title { font-weight: 650; font-size: .9rem; color: var(--ink); margin-bottom: .8rem; }
.settings-row { display: grid; gap: .8rem; }
.settings-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.settings-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.settings-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.setting-item { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.setting-item label { margin: 0; font-size: .82rem; color: var(--ink-2); font-weight: 500; }
.setting-item input[type="number"], .setting-item input[type="text"], .setting-item select {
    padding: .35rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink); font: inherit; font-size: .82rem; min-width: 0; flex: 1;
}
.setting-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: #764ba2; flex: none; }
.setting-item input:focus, .setting-item select:focus { border-color: #764ba2; outline: none; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .3rem; }
.hint {
    font-size: .8rem; color: var(--ink-muted); line-height: 1.6;
    background: var(--accent-soft); border-radius: var(--r-sm);
    padding: .6rem .8rem; margin-top: .8rem;
}
.hint code { background: var(--surface); padding: .05rem .35rem; border-radius: 4px; color: var(--accent-ink); }
.status { font-size: .82rem; margin-top: .6rem; min-height: 1.2em; color: var(--ink-muted); }
.status.success { color: var(--good-ink); }
.status.error   { color: var(--critical-ink); }
.status.warning { color: var(--warn-ink); }

/* Nút kiểu createdomain: .btn.success / .btn.secondary */
.btn.success {
    background-image: var(--grad); border: none; color: #fff;
    box-shadow: 0 4px 12px rgba(118,75,162,.28);
}
.btn.success:hover { filter: brightness(1.07); color: #fff; }
.btn.secondary {
    background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2);
}
.btn.secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-muted); }

@media (max-width: 767.98px) {
    .grid-2, .grid-3,
    .settings-row.cols-2, .settings-row.cols-3, .settings-row.cols-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hộp thoại AppModal (thay alert/confirm/prompt của trình duyệt)
   Tự chứa (không phụ thuộc Bootstrap) — dùng được cả trang chia sẻ công khai.
   ========================================================================== */
.app-modal-overlay {
    position: fixed; inset: 0; z-index: 20000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 14, 34, .5);
    padding: 20px; opacity: 0; transition: opacity .18s ease;
}
.app-modal-overlay.show { opacity: 1; }
.app-modal {
    width: 100%; max-width: 440px;
    background: var(--surface, #fff);
    color: var(--ink, #0b0b0b);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20, 14, 34, .38);
    overflow: hidden;
    transform: translateY(8px) scale(.98);
    transition: transform .18s ease;
}
.app-modal-overlay.show .app-modal { transform: none; }
.app-modal-head {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff; padding: 14px 20px;
}
.app-modal-title { margin: 0; font-size: 1.02rem; font-weight: 650; color: #fff; }
.app-modal-body { padding: 18px 20px; }
.app-modal-msg { margin: 0; font-size: .92rem; line-height: 1.55; white-space: pre-line; color: var(--ink-2, #52514e); }
.app-modal-input {
    width: 100%; margin-top: 14px; padding: 10px 12px;
    border: 1px solid var(--line-strong, #d6d5ce); border-radius: 10px;
    background: var(--surface, #fff); color: var(--ink, #0b0b0b);
    font-size: .92rem; font-family: inherit; outline: none;
    transition: border-color .13s, box-shadow .13s;
}
.app-modal-input:focus { border-color: #764ba2; box-shadow: 0 0 0 3px rgba(118,75,162,.22); }
.app-modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 4px 20px 20px;
}
.app-modal-btn {
    padding: 9px 18px; border-radius: 10px; font-size: .9rem; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; font-family: inherit;
    transition: filter .13s, background-color .13s, border-color .13s, color .13s;
}
.app-modal-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff; box-shadow: 0 4px 12px rgba(118,75,162,.3);
}
.app-modal-btn-primary:hover { filter: brightness(1.07); }
.app-modal-btn-ghost {
    background: var(--surface-2, #f2f2ef); color: var(--ink-2, #52514e);
    border-color: var(--line-strong, #d6d5ce);
}
.app-modal-btn-ghost:hover { background: var(--neutral-soft, #eee); color: var(--ink, #0b0b0b); }
.dark-mode .app-modal { background: var(--surface, #1a1a19); }
.dark-mode .app-modal-btn-ghost { background: var(--surface-2, #201f1e); }

/* Tabs nav-pills (vd: module Tiện ích) — tab đang chọn theo tông tím */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--grad) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(118,75,162,.28);
}
.nav-pills .nav-link { color: var(--ink-2); }