/* staffs.ttr.group — lớp giao diện chung (26/09/2026). Nạp sau style.css trong share/head.blade.php. */

/* ---------- Modal ---------- */
.modal-content { border: 0; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, .18); overflow: hidden; }
.modal-header { padding: 18px 22px; border-bottom: 1px solid #f1f3f5; align-items: flex-start; gap: 12px; }
.modal-header .modal-title { font-size: 17px; font-weight: 700; letter-spacing: normal; margin: 0; }
.modal-header .btn-close { margin: 0 0 0 auto; padding: 8px; border-radius: 8px; opacity: .55; box-shadow: none; }
.modal-header .btn-close:hover { opacity: .9; background-color: #f1f3f5; }
.modal-body { padding: 20px 22px; }
.modal-footer { padding: 14px 22px; border-top: 1px solid #f1f3f5; background: #fafbfc; gap: 8px; }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .45; }
.ui-modal { overflow: visible; }   /* để dropdown gợi ý tràn ra ngoài modal */
.ui-modal .modal-header { align-items: center; border-radius: 14px 14px 0 0; }
.ui-modal .modal-footer { border-radius: 0 0 14px 14px; }
.ui-modal-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: #eef4ff; color: #2a78d6; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.ui-modal-sub { font-size: 12.5px; color: #6c757d; margin-top: 2px; }
.ui-modal .form-label { font-size: 13px; font-weight: 600; color: #344054; margin-bottom: 6px; }
.ui-modal .form-control, .ui-modal .form-select { border-radius: 8px; border-color: #dfe3e8; min-height: 42px; }
.ui-modal .form-control:focus, .ui-modal .form-select:focus { border-color: #2a78d6; box-shadow: 0 0 0 3px rgba(42, 120, 214, .15); }
.ui-modal .btn { min-height: 40px; border-radius: 8px; padding-left: 16px; padding-right: 16px; font-weight: 600; }

/* Segmented radio (Giới tính…) */
.ui-seg { display: inline-flex; background: #f1f3f5; border-radius: 10px; padding: 3px; gap: 2px; }
.ui-seg label { margin: 0; padding: 7px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #495057; user-select: none; }
.ui-seg label.on { background: #fff; color: #111827; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.ui-seg input { display: none; }

/* Ô nhập có icon + gợi ý (địa chỉ Google Places) */
.ui-input-icon { position: relative; }
.ui-input-icon > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #98a2b3; font-size: 18px; pointer-events: none; }
.ui-input-icon > .form-control { padding-left: 38px; }
.ui-suggest { position: absolute; left: 12px; right: 12px; top: 100%; margin-top: 4px; z-index: 20; background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); overflow: hidden; }
.ui-suggest button { display: flex; gap: 10px; align-items: flex-start; width: 100%; border: 0; background: none; text-align: left; padding: 9px 12px; font-size: 14px; }
.ui-suggest button i { color: #98a2b3; font-size: 18px; margin-top: 1px; }
.ui-suggest button b { display: block; font-weight: 600; color: #111827; }
.ui-suggest button small { display: block; color: #6c757d; }
.ui-suggest button:hover, .ui-suggest button.active { background: #f5f8ff; }
.ui-suggest-foot { font-size: 11px; color: #98a2b3; text-align: right; padding: 4px 10px 6px; border-top: 1px solid #f1f3f5; }

/* Độ mạnh mật khẩu */
.ui-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ui-strength span { height: 4px; border-radius: 2px; background: #e9ecef; }
.ui-strength span.on:nth-child(1) { background: #eb6834; }
.ui-strength span.on:nth-child(2) { background: #eda100; }
.ui-strength span.on:nth-child(3), .ui-strength span.on:nth-child(4) { background: #1baf7a; }

/* Nút đứng cạnh input-group / form-control: cao bằng ô nhập (trước đây nút thấp hơn). */
.ui-row-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ui-row-controls .btn { min-height: calc(1.5em + 1rem + 2px); }

/* ===== Khung trang: header · sidebar · footer (26/09/2026) — tone logo TTR: vàng · xanh · xám ===== */
:root {
    --tt-yellow: #f5b301; --tt-yellow-600: #d99a00; --tt-yellow-50: #fff7db;
    --tt-blue: #1d6fc2; --tt-blue-700: #175a9e; --tt-blue-50: #eaf2fb;
    --tt-gray-950: #1b232c; --tt-gray-900: #232d37; --tt-gray-700: #3b4753; --tt-gray-500: #6b7785;
    --tt-gray-400: #98a2ae; --tt-gray-200: #e3e7ec; --tt-gray-100: #eef1f4; --tt-gray-50: #f6f7f9;
}
body { background: var(--tt-gray-50); }

/* Header */
html body .header.tt-header {
    background: #fff !important; border-bottom: 1px solid var(--tt-gray-200); box-shadow: 0 1px 2px rgba(27, 35, 44, .04);
    display: flex; align-items: center; padding-right: 16px;
}
html body .header.tt-header::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 5;
    background: linear-gradient(90deg, var(--tt-yellow) 0 33%, var(--tt-blue) 33% 72%, var(--tt-gray-400) 72%);
}
html body .tt-header .header-left { background: #fff !important; flex: 0 0 230px; display: flex; align-items: center; justify-content: flex-start; padding: 0 22px; border-right: 1px solid var(--tt-gray-100); }
html body .tt-header .header-left .logo { line-height: normal; display: flex; align-items: center; }
html body .tt-header .header-left .logo img { height: 34px; width: auto; }
.tt-title { flex: 1 1 auto; min-width: 0; padding-left: 24px; line-height: 1.2; }
.tt-title-main { font-size: 18px; font-weight: 700; color: var(--tt-gray-950); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-title-sub { font-size: 12px; color: var(--tt-gray-500); letter-spacing: .02em; }
html body .tt-header .user-menu { float: none; margin: 0 0 0 auto; display: flex; align-items: center; }
html body .tt-header .user-menu.nav > li > a.tt-user { color: var(--tt-gray-900) !important; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 5px; height: 46px !important; min-height: 0 !important; line-height: 1.2; border-radius: 999px; border: 1px solid var(--tt-gray-200); background: #fff; }
html body .tt-header .user-menu.nav > li > a.tt-user:hover, html body .tt-header .user-menu.nav > li.show > a.tt-user { background: var(--tt-gray-50); border-color: var(--tt-gray-400); }
.tt-header .tt-user::after { display: none !important; }
.tt-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--tt-yellow); }
.tt-user-text { display: flex; flex-direction: column; text-align: left; }
.tt-user-name { font-size: 14px; font-weight: 600; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-user-role { font-size: 11px; color: var(--tt-blue); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tt-caret { color: var(--tt-gray-500); font-size: 14px; }
.tt-menu { min-width: 230px; padding: 6px; border: 1px solid var(--tt-gray-200); border-radius: 12px; box-shadow: 0 12px 32px rgba(27, 35, 44, .12); margin-top: 8px !important; }
.tt-menu-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--tt-gray-100); margin-bottom: 4px; max-width: 260px; }
.tt-menu .dropdown-item { border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tt-gray-900); }
.tt-menu .dropdown-item i { font-size: 18px; color: var(--tt-gray-500); }
.tt-menu .dropdown-item:hover { background: var(--tt-yellow-50); }
.tt-menu .dropdown-item.text-danger, .tt-menu .dropdown-item.text-danger i { color: #c0392b !important; }
.tt-menu .dropdown-item.text-danger:hover { background: #fdecea; }
html body .tt-header .mobile_btn, html body .tt-header .mobile-user-menu > a { color: var(--tt-gray-900) !important; }
.tt-header .mobile-user-menu .dropdown-toggle::after { display: none; }
@media (max-width: 991px) {
    html body .tt-header .header-left { position: absolute; left: 50%; transform: translateX(-50%); width: auto; flex: none; border-right: 0; z-index: 0; }
    .tt-title, html body .tt-header .user-menu { display: none !important; }
    html body .tt-header .mobile_btn { position: absolute; left: 0; top: 0; line-height: 60px; padding: 0 20px; z-index: 2; }
    html body .tt-header .mobile-user-menu { position: absolute; right: 0; top: 0; z-index: 2; }
}

/* Sidebar: nền xám đậm, mục đang mở viền vàng */
html body .sidebar { background: var(--tt-gray-900) !important; border-right: 0; }
html body .sidebar .sidebar-menu { padding: 14px 0 8px; }
html body .sidebar .sidebar-menu ul.sidebar-vertical > li { margin: 2px 12px; }
html body .sidebar .sidebar-menu ul.sidebar-vertical > li > a {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; position: relative;
    color: #c5cdd6 !important; font-size: 14.5px; font-weight: 500; background: transparent;
}
html body .sidebar .sidebar-menu ul.sidebar-vertical > li > a i { font-size: 20px; width: 22px; margin: 0; color: var(--tt-gray-400); }
html body .sidebar .sidebar-menu ul.sidebar-vertical > li > a span { margin: 0; }
html body .sidebar .sidebar-menu ul.sidebar-vertical > li > a:hover { background: rgba(255, 255, 255, .06); color: #fff !important; }
html body .sidebar .sidebar-menu ul.sidebar-vertical > li > a:hover i { color: #fff; }
html body .sidebar .sidebar-menu ul.sidebar-vertical > li.active > a { background: rgba(245, 179, 1, .12); color: #fff !important; }
html body .sidebar .sidebar-menu ul.sidebar-vertical > li.active > a i { color: var(--tt-yellow); }
html body .sidebar .sidebar-menu ul.sidebar-vertical > li.active > a::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tt-yellow); }
html body .sidebar .sidebar-menu ul.sidebar-vertical > li.menu-title { margin: 18px 12px 6px; padding: 0 14px; }
html body .sidebar .sidebar-menu ul.sidebar-vertical > li.menu-title span { color: var(--tt-gray-500) !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
html body .sidebar-bottom { border-top: 1px solid rgba(255, 255, 255, .07); padding: 12px; }
html body .sidebar-bottom a { color: #c5cdd6; border-radius: 10px; padding: 10px 14px; font-size: 14.5px; }
html body .sidebar-bottom a i { color: var(--tt-gray-400); }
html body .sidebar-bottom a:hover { background: rgba(192, 57, 43, .16); color: #fff; }
html body .sidebar-bottom a:hover i { color: #ff8a7a; }

/* Nội dung + footer luôn nằm đáy */
html body .page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
html body .page-wrapper > .content { flex: 1 0 auto; padding-top: 24px; }
.tt-footer {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px;
    padding: 14px 30px; background: #fff; border-top: 1px solid var(--tt-gray-200); color: var(--tt-gray-500); font-size: 13px;
}
.tt-footer strong { color: var(--tt-gray-900); font-weight: 600; }
.tt-dots { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: middle; }
.tt-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--tt-yellow); }
.tt-dots i:nth-child(2) { background: var(--tt-blue); }
.tt-dots i:nth-child(3) { background: var(--tt-gray-400); }
.tt-footer-links { display: flex; gap: 18px; }
.tt-footer-links a { color: var(--tt-gray-500); }
.tt-footer-links a:hover { color: var(--tt-blue); }
@media (max-width: 575px) { .tt-footer { padding: 12px 16px; justify-content: center; text-align: center; } }

/* Nút chính theo tone xanh (thay tím/cam của template) */
html body .btn-primary { background: var(--tt-blue) !important; border-color: var(--tt-blue) !important; color: #fff !important; }
html body .btn-primary:hover, html body .btn-primary:focus { background: var(--tt-blue-700) !important; border-color: var(--tt-blue-700) !important; }
html body .btn-outline-primary { color: var(--tt-blue) !important; border-color: #b9d3ee !important; background: #fff; }
html body .btn-outline-primary:hover { background: var(--tt-blue-50) !important; color: var(--tt-blue-700) !important; }
.settings-icon { display: none !important; }
html body .tt-header .user-menu, html body .tt-header .user-menu > li { height: 60px; display: flex; align-items: center; }

/* Nút: chữ + icon luôn canh giữa theo chiều dọc (template để line-height lệch -> chữ "nhảy lên"). */
.btn:not(.btn-close) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.25; }
.btn > .la, .btn > .las, .btn > .fa, .btn > .fa-solid { font-size: 1.15em; line-height: 1; margin: 0; }
.btn.w-100, .btn.d-block { display: flex; }
html body .btn-light { color: #1b232c; }
html body .btn-light:disabled, html body .btn-light.disabled { color: #98a2ae; }
/* Segmented cao bằng ô nhập khi đứng trong form (Giới tính…) */
.ui-seg.ui-seg-fill { display: flex; min-height: 44px; padding: 4px; }
.ui-seg.ui-seg-fill label { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.ui-modal .modal-header { justify-content: flex-start; }
/* Nút đóng modal: template ghi đè nền của .btn-close -> dấu X biến mất. Vẽ lại bằng icon. */
.modal-header .btn-close { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; background: none !important; opacity: .6; position: relative; border-radius: 8px; }
.modal-header .btn-close::before { content: "\00d7"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; color: #1b232c; }
.modal-header .btn-close:hover { opacity: 1; background-color: #eef1f4 !important; }
.modal-header .btn-close > span { display: none; }

/* ===================== DARK MODE (27/09/2026) =====================
   Bật bằng <html data-theme="dark"> (share/i18n-theme.blade.php: localStorage theme = auto|light|dark,
   auto theo prefers-color-scheme). Chỉ đổi màu nền / chữ / viền; bố cục giữ nguyên. */
html[data-theme="dark"] {
    color-scheme: dark;
    --dk-bg: #232a33; --dk-surface: #2b333e; --dk-surface-2: #323b47; --dk-surface-3: #3a4450;
    --dk-line: #3d4854; --dk-line-soft: #36404b; --dk-ink: #e9edf1; --dk-ink-2: #c9d1da; --dk-muted: #9ba7b4;
    --dk-chrome: #283039;
    --dk-blue: #5aa2ec; --dk-yellow: #f5b301;
}
html[data-theme="dark"] body, html[data-theme="dark"] .main-wrapper, html[data-theme="dark"] .page-wrapper { background: var(--dk-bg) !important; color: var(--dk-ink); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .fw-semibold, html[data-theme="dark"] b, html[data-theme="dark"] strong, html[data-theme="dark"] dd { color: var(--dk-ink); }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .form-text, html[data-theme="dark"] small.text-muted, html[data-theme="dark"] dt { color: var(--dk-muted) !important; }
html[data-theme="dark"] .text-dark { color: var(--dk-ink) !important; }
html[data-theme="dark"] .card .card-title, html[data-theme="dark"] .card-title { color: var(--dk-ink) !important; }
html[data-theme="dark"] a { color: var(--dk-blue); }
html[data-theme="dark"] hr, html[data-theme="dark"] .dropdown-divider { border-color: var(--dk-line); opacity: 1; }

/* Khung */
html[data-theme="dark"] body .header.tt-header, html[data-theme="dark"] body .tt-header .header-left { background: var(--dk-chrome) !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="dark"] body .header.tt-header { box-shadow: 0 1px 0 rgba(0, 0, 0, .18) !important; }
html[data-theme="dark"] .tt-title-main { color: var(--dk-ink); }
html[data-theme="dark"] .tt-title-sub { color: var(--dk-muted); }
html[data-theme="dark"] body .tt-header .user-menu.nav > li > a.tt-user { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; color: var(--dk-ink) !important; }
html[data-theme="dark"] .tt-avatar { box-shadow: 0 0 0 2px var(--dk-chrome), 0 0 0 3px var(--dk-yellow); }
html[data-theme="dark"] .tt-user-role { color: var(--dk-blue); }
html[data-theme="dark"] body .tt-header .mobile_btn, html[data-theme="dark"] body .tt-header .mobile-user-menu > a { color: var(--dk-ink) !important; }
html[data-theme="dark"] body .sidebar { background: var(--dk-chrome) !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="dark"] .tt-footer { background: var(--dk-bg); border-color: transparent; color: var(--dk-muted); }
html[data-theme="dark"] .tt-footer strong { color: var(--dk-ink); }
html[data-theme="dark"] .tt-footer-links a { color: var(--dk-muted); }

/* Menu Ngôn ngữ / Giao diện trong dropdown tài khoản */
.tt-pref { padding: 6px 12px; }
.tt-pref-label { font-size: 12px; font-weight: 600; color: #6b7785; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.tt-pref-label i { font-size: 16px; }
.tt-seg { display: flex; background: #eef1f4; border-radius: 9px; padding: 3px; gap: 2px; }
.tt-seg button { flex: 1 1 0; border: 0; background: transparent; border-radius: 7px; padding: 5px 8px; font-size: 12.5px; font-weight: 600; color: #3b4753; display: flex; align-items: center; justify-content: center; gap: 4px; }
.tt-seg button i { font-size: 16px; }
.tt-seg button.on { background: #fff; color: #1b232c; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
html[data-theme="dark"] .tt-pref-label { color: var(--dk-muted); }
html[data-theme="dark"] .tt-seg { background: var(--dk-bg); }
html[data-theme="dark"] .tt-seg button { color: var(--dk-ink-2); }
html[data-theme="dark"] .tt-seg button.on { background: var(--dk-surface-3); color: #fff; }

/* Nhãn TEST / LIVE cạnh "Chế độ xem" (Super Admin) */
.tt-viewflag { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; border-radius: 20px; padding: 1px 8px; }
.tt-viewflag.is-test { background: rgba(255, 171, 0, .16); color: #b26a00; border: 1px solid rgba(255, 171, 0, .45); }
.tt-viewflag.is-live { background: rgba(24, 188, 106, .12); color: #0f7a44; border: 1px solid rgba(24, 188, 106, .4); }
html[data-theme="dark"] .tt-viewflag.is-test { background: rgba(255, 190, 60, .14); color: #ffc76b; border-color: rgba(255, 190, 60, .4); }
html[data-theme="dark"] .tt-viewflag.is-live { background: rgba(64, 200, 130, .14); color: #6fdca4; border-color: rgba(64, 200, 130, .4); }

/* Thành phần chung */
html[data-theme="dark"] .card, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .card-header { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; color: var(--dk-ink); }
html[data-theme="dark"] .table { color: var(--dk-ink); --bs-table-color: var(--dk-ink); --bs-table-bg: transparent; --bs-table-striped-bg: var(--dk-surface-2); --bs-table-hover-bg: var(--dk-surface-2); border-color: var(--dk-line); }
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-color: var(--dk-line-soft); color: inherit; }
html[data-theme="dark"] .table thead th { color: var(--dk-muted) !important; }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .input-group-text, html[data-theme="dark"] textarea {
    background-color: var(--dk-bg) !important; border-color: var(--dk-line) !important; color: var(--dk-ink) !important; }
html[data-theme="dark"] .form-control::placeholder { color: #7d8996 !important; }
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-select:disabled { background-color: var(--dk-surface-2) !important; color: var(--dk-muted) !important; }
html[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c3ccd6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
html[data-theme="dark"] .form-label, html[data-theme="dark"] .ui-modal .form-label, html[data-theme="dark"] label { color: var(--dk-ink-2); }
html[data-theme="dark"] .modal-content { background: var(--dk-surface); color: var(--dk-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--dk-line) !important; }
html[data-theme="dark"] .modal-footer { background: var(--dk-surface-2); }
html[data-theme="dark"] .modal-header .btn-close::before { color: var(--dk-ink); }
html[data-theme="dark"] .modal-header .btn-close:hover { background-color: var(--dk-surface-3) !important; }
html[data-theme="dark"] .modal-backdrop.show { opacity: .7; }
html[data-theme="dark"] .ui-modal-icon { background: rgba(90, 162, 236, .15); color: var(--dk-blue); }
html[data-theme="dark"] .ui-modal-sub { color: var(--dk-muted); }
html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .tt-menu { background: var(--dk-surface-2) !important; border-color: var(--dk-line) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .dropdown-item, html[data-theme="dark"] .tt-menu .dropdown-item { color: var(--dk-ink) !important; }
html[data-theme="dark"] .dropdown-item i { color: var(--dk-muted); }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus, html[data-theme="dark"] .tt-menu .dropdown-item:hover { background: var(--dk-surface-3) !important; }
html[data-theme="dark"] .dropdown-item.text-danger, html[data-theme="dark"] .dropdown-item.text-danger i { color: #ff8a7a !important; }
html[data-theme="dark"] .tt-menu-head { border-color: var(--dk-line); }
html[data-theme="dark"] body .btn-light { background: var(--dk-surface-2) !important; border-color: var(--dk-line) !important; color: var(--dk-ink) !important; }
html[data-theme="dark"] body .btn-light:hover { background: var(--dk-surface-3) !important; }
html[data-theme="dark"] body .btn-light.border { border-color: var(--dk-line) !important; }
html[data-theme="dark"] body .btn-outline-primary { background: transparent !important; border-color: #2f5f93 !important; color: var(--dk-blue) !important; }
html[data-theme="dark"] body .btn-outline-primary:hover { background: rgba(90, 162, 236, .12) !important; }
html[data-theme="dark"] body .btn-outline-secondary { color: var(--dk-ink-2) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] body .btn-outline-danger { color: #ff8a7a !important; border-color: #6b2c25 !important; }
html[data-theme="dark"] .alert-info, html[data-theme="dark"] .alert-primary { background: #12303f; border-color: #1f4a5f; color: #9dd6ee; }
html[data-theme="dark"] .alert-success { background: #12301f; border-color: #1d4d31; color: #8fe0b0; }
html[data-theme="dark"] .alert-warning { background: #33290c; border-color: #54430f; color: #f3d27a; }
html[data-theme="dark"] .alert-danger { background: #3a1714; border-color: #5c211b; color: #ffb4a8; }
html[data-theme="dark"] .alert-light { background: var(--dk-surface-2); border-color: var(--dk-line) !important; color: var(--dk-ink-2); }
html[data-theme="dark"] .badge.bg-light { background: var(--dk-surface-3) !important; }
html[data-theme="dark"] .border { border-color: var(--dk-line) !important; }
html[data-theme="dark"] .ui-seg { background: var(--dk-bg); }
html[data-theme="dark"] .ui-seg label { color: var(--dk-ink-2); }
html[data-theme="dark"] .ui-seg label.on { background: var(--dk-surface-3); color: #fff; }
html[data-theme="dark"] .ui-suggest { background: var(--dk-surface-2); border-color: var(--dk-line); }
html[data-theme="dark"] .ui-suggest button { color: var(--dk-ink); }
html[data-theme="dark"] .ui-suggest button b { color: var(--dk-ink); }
html[data-theme="dark"] .ui-suggest button small { color: var(--dk-muted); }
html[data-theme="dark"] .ui-suggest button:hover, html[data-theme="dark"] .ui-suggest button.active { background: var(--dk-surface-3); }
html[data-theme="dark"] .ui-suggest-foot { border-color: var(--dk-line); }
html[data-theme="dark"] .ui-strength span { background: var(--dk-line); }
html[data-theme="dark"] .tt-toast { background: var(--dk-surface-2); border-color: var(--dk-line); color: var(--dk-ink); box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .tt-toast-msg { color: var(--dk-ink-2); }
html[data-theme="dark"] .tt-toast-x:hover { background: var(--dk-surface-3); color: #fff; }

/* Nhãn / pill nhạt -> nền tối trong suốt */
html[data-theme="dark"] .ma-pill, html[data-theme="dark"] .vh-pill, html[data-theme="dark"] .vl-pill, html[data-theme="dark"] .emp-hanet.none,
html[data-theme="dark"] .dep-count.zero, html[data-theme="dark"] .rl-no, html[data-theme="dark"] .emp-tabs button span { background: var(--dk-surface-3) !important; color: var(--dk-ink-2) !important; }
html[data-theme="dark"] .ma-ok, html[data-theme="dark"] .emp-hanet, html[data-theme="dark"] .emp-official, html[data-theme="dark"] .vh-ok { background: rgba(27, 175, 122, .16) !important; color: #6ee0b0 !important; }
html[data-theme="dark"] .ma-warn, html[data-theme="dark"] .emp-role.mgmt, html[data-theme="dark"] .ma-role-management, html[data-theme="dark"] .ma-tag.appendix, html[data-theme="dark"] .emp-hint { background: rgba(245, 179, 1, .14) !important; color: #f3d27a !important; }
html[data-theme="dark"] .ma-role-admin, html[data-theme="dark"] .emp-role, html[data-theme="dark"] .emp-hanet.bad, html[data-theme="dark"] .ma-tag.exp { background: rgba(214, 69, 50, .18) !important; color: #ffab9e !important; }
html[data-theme="dark"] .ma-role-support_admin, html[data-theme="dark"] .emp-role.sub, html[data-theme="dark"] .ma-tag, html[data-theme="dark"] .dep-count { background: rgba(90, 162, 236, .16) !important; color: #9cc8f5 !important; }

/* Hồ sơ */
html[data-theme="dark"] .ma-row, html[data-theme="dark"] .ma-form-sec { border-color: var(--dk-line-soft); }
html[data-theme="dark"] .ma-form-sec { color: var(--dk-muted); }
html[data-theme="dark"] .ma-avatar { box-shadow: 0 0 0 3px var(--dk-surface), 0 0 0 5px var(--dk-yellow); }
html[data-theme="dark"] .ma-empty, html[data-theme="dark"] .ma-drop { background: var(--dk-surface-2); border-color: var(--dk-line); color: var(--dk-muted); }
html[data-theme="dark"] .ma-drop.has { background: rgba(27, 175, 122, .1); }
html[data-theme="dark"] .ma-ct tr.sub td:first-child::before { border-color: var(--dk-line); }
html[data-theme="dark"] .ma-rules-icon, html[data-theme="dark"] .rl-icon { background: rgba(245, 179, 1, .14); }
html[data-theme="dark"] .ma-crumb { color: var(--dk-muted); }

/* Nhân viên / phòng ban / quy chế */
html[data-theme="dark"] .emp-tabs, html[data-theme="dark"] .vl-tabs { background: var(--dk-bg) !important; }
html[data-theme="dark"] .emp-tabs button, html[data-theme="dark"] .vl-tabs .btn, html[data-theme="dark"] .vl-tabs button { color: var(--dk-ink-2); }
html[data-theme="dark"] .emp-tabs button.on, html[data-theme="dark"] .vl-tabs .on, html[data-theme="dark"] .vl-tabs .active { background: var(--dk-surface-3) !important; color: #fff !important; }
html[data-theme="dark"] .emp-tabs button.on span { background: rgba(245, 179, 1, .18) !important; color: #f3d27a !important; }
html[data-theme="dark"] .emp-search-x:hover, html[data-theme="dark"] .dep-search-x:hover, html[data-theme="dark"] .rl-x:hover, html[data-theme="dark"] .emp-pw-btn:hover { background: var(--dk-surface-3); color: #fff; }
html[data-theme="dark"] .emp-avatar { background-color: var(--dk-surface-2); border-color: var(--dk-line); }
html[data-theme="dark"] .emp-section, html[data-theme="dark"] .emp-create .card-footer { border-color: var(--dk-line-soft); }
html[data-theme="dark"] .emp-create .card-footer { background: var(--dk-surface-2) !important; }
html[data-theme="dark"] .emp-create .form-label { color: var(--dk-ink-2); }
html[data-theme="dark"] .emp-step-ico { background: var(--dk-surface-3); }
html[data-theme="dark"] .emp-effects i { color: #ff8a7a; }
html[data-theme="dark"] .hn-row { border-color: var(--dk-line); }
html[data-theme="dark"] .hn-row.resigned { background: rgba(214, 69, 50, .1); border-color: #5c211b; }
html[data-theme="dark"] .dep-badge { background: rgba(245, 179, 1, .14); color: #f3d27a; }
html[data-theme="dark"] .dep-table tr:nth-child(3n+2) .dep-badge { background: rgba(90, 162, 236, .16); color: #9cc8f5; }
html[data-theme="dark"] .dep-table tr:nth-child(3n) .dep-badge { background: var(--dk-surface-3); color: var(--dk-ink-2); }
html[data-theme="dark"] .dep-switch span { background: #3a4552; }
html[data-theme="dark"] .rl-sec-head { background: var(--dk-surface-2); border-color: var(--dk-line); color: var(--dk-ink); }
html[data-theme="dark"] .rl-item, html[data-theme="dark"] .rl-add-item { border-color: var(--dk-line-soft); }
html[data-theme="dark"] .rl-add-item { background: var(--dk-surface-2); }
html[data-theme="dark"] .rl-content { color: var(--dk-ink); }
html[data-theme="dark"] .rl-desc { color: var(--dk-ink-2); }
html[data-theme="dark"] .rl-penalty { background: rgba(245, 179, 1, .1); color: #f3d27a; }
html[data-theme="dark"] .rl-note { color: var(--dk-muted); }

/* Lịch sử VPN / History tổng */
html[data-theme="dark"] .vh-kpi, html[data-theme="dark"] .vh-warn-card { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .vh-warn-expl, html[data-theme="dark"] .vl-expl { background: var(--dk-surface-2) !important; color: var(--dk-ink-2); }
html[data-theme="dark"] .vh-top-bar { background: var(--dk-surface-3) !important; }
html[data-theme="dark"] .vh-tip { background: #11161c; }
html[data-theme="dark"] .vl-table tr.vl-banned td { background: rgba(235, 104, 52, .1) !important; }

/* Trang quản trị VPN (biến màu riêng .vpnx) */
html[data-theme="dark"] .vpnx { --ink: #e6ebf0; --muted: #8d99a6; --line: #2a3542; --soft: #1c2530; }
html[data-theme="dark"] .vpnx .vx-card, html[data-theme="dark"] .vpnx .vx-kpi, html[data-theme="dark"] .vpnx .vx-srv,
html[data-theme="dark"] .vpnx .vx-btn, html[data-theme="dark"] .vpnx .vx-chip { background: var(--dk-surface) !important; color: var(--dk-ink); }
html[data-theme="dark"] .vpnx .vx-bar, html[data-theme="dark"] .vpnx .vx-tbar { background: var(--dk-surface-3) !important; }
html[data-theme="dark"] .vpnx .vx-add { border-color: var(--dk-line) !important; }
html[data-theme="dark"] .table, html[data-theme="dark"] .table tr, html[data-theme="dark"] .table td, html[data-theme="dark"] .table th,
html[data-theme="dark"] .table thead, html[data-theme="dark"] .table tbody, html[data-theme="dark"] .table-responsive { background-color: transparent !important; color: var(--dk-ink); border-color: var(--dk-line-soft) !important; }
html[data-theme="dark"] .table tbody tr:hover td { background-color: rgba(255, 255, 255, .025) !important; }
html[data-theme="dark"] .table td.text-muted, html[data-theme="dark"] .table .text-muted { color: var(--dk-muted) !important; }
/* Logo có chữ đen -> đặt trên nền trắng bo góc khi tối */
html[data-theme="dark"] body .tt-header .header-left .logo { background: #fff; border-radius: 10px; padding: 4px 10px; }
html[data-theme="dark"] body .tt-header .header-left .logo img { height: 30px; }
html[data-theme="dark"] body .tt-header .header-left .logo { height: 40px; padding: 0 10px; display: flex; align-items: center; align-self: center; }
html[data-theme="dark"] body .tt-header .header-left .logo img { height: 26px !important; max-height: 26px; width: auto; }
html[data-theme="dark"] .dep-switch.on span { background: #1baf7a; }
html[data-theme="dark"] .dep-switch.on { color: #6ee0b0; }
html[data-theme="dark"] body .tt-header .header-left .logo { display: flex !important; line-height: 1 !important; }
html body .tt-header .header-left .logo { display: flex !important; line-height: 1 !important; }
/* Cờ ngôn ngữ trong menu tài khoản */
.tt-seg .tt-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: 0 0 auto; }
html[data-theme="dark"] .tt-seg .tt-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.tt-menu { min-width: 270px; }
.tt-seg button { white-space: nowrap; flex: 1 1 auto; padding: 6px 8px; }

/* Trang VPN (admin + History): nút, ô nhập, tab, tiêu đề bảng cùng một cỡ */
.vpn-ui .btn, .vpn-ui .btn-sm, .vpn-ui .form-control, .vpn-ui .form-control-sm, .vpn-ui .form-select, .vpn-ui .form-select-sm { height: 34px; font-size: 14px; line-height: 1.2; border-radius: 8px; }
.vpn-ui .btn, .vpn-ui .btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; font-weight: 500; white-space: nowrap; }
.vpn-ui .form-control, .vpn-ui .form-control-sm, .vpn-ui .form-select, .vpn-ui .form-select-sm { padding: 0 12px; }
.vpn-ui .form-select, .vpn-ui .form-select-sm { padding-right: 32px; }
.vpn-ui .nav-tabs { gap: 4px; margin-bottom: 18px !important; }
.vpn-ui .nav-tabs .nav-link { font-size: 14px; font-weight: 500; padding: 9px 14px; display: inline-flex; align-items: center; gap: 6px; }
.vpn-ui .nav-tabs .nav-link .badge { margin: 0 !important; font-size: 11px; padding: 3px 7px; }
.vpn-ui .table th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #6b7785; white-space: nowrap; padding: 10px 12px; }
.vpn-ui .table td { padding: 10px 12px; vertical-align: middle; }
.vpn-ui .table td .btn { height: 30px; padding: 0 10px; }
.vpn-ui .table td .form-control, .vpn-ui .table td .form-control-sm { height: 32px; }
.vpn-ui h6 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.vpn-ui .vp-sec + .vp-sec { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--bs-border-color, #e3e7ec); }
.vpn-ui .vp-hint { font-size: 13px; color: #6b7785; margin: 0 0 12px; max-width: 760px; }
html[data-theme="dark"] .vpn-ui .table th, html[data-theme="dark"] .vpn-ui .vp-hint { color: var(--dk-muted); }
html[data-theme="dark"] .vpn-ui .vp-sec + .vp-sec { border-top-color: var(--dk-line); }
.vpn-ui h6.vp-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.vpn-ui .vp-sec h6:not(.vp-title) { color: #4b5563; }
html[data-theme="dark"] .vpn-ui .vp-sec h6:not(.vp-title) { color: var(--dk-ink-2); }

/* Tab trang VPN: kiểu gạch chân (sáng + tối), không dùng nền trắng của Bootstrap */
.vpn-ui .nav-tabs { border-bottom: 1px solid var(--bs-border-color, #e3e7ec); gap: 2px; }
.vpn-ui .nav-tabs .nav-link { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; color: #6b7785; }
.vpn-ui .nav-tabs .nav-link:hover { color: #1d6fc2; background: rgba(29, 111, 194, .06); border-bottom-color: transparent; }
.vpn-ui .nav-tabs .nav-link.active { color: #1d6fc2; background: transparent; border-bottom-color: #1d6fc2; font-weight: 600; }
.vpn-ui .nav-tabs .nav-link .badge { background: #e8eef5 !important; color: #3d5a78 !important; }
.vpn-ui .nav-tabs .nav-link.active .badge { background: #1d6fc2 !important; color: #fff !important; }
html[data-theme="dark"] .vpn-ui .nav-tabs { border-bottom-color: var(--dk-line); }
html[data-theme="dark"] .vpn-ui .nav-tabs .nav-link { color: var(--dk-muted); background: transparent; }
html[data-theme="dark"] .vpn-ui .nav-tabs .nav-link:hover { color: var(--dk-ink); background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .vpn-ui .nav-tabs .nav-link.active { color: var(--dk-blue); background: transparent; border-bottom-color: var(--dk-blue); }
html[data-theme="dark"] .vpn-ui .nav-tabs .nav-link .badge { background: var(--dk-surface-3) !important; color: var(--dk-ink-2) !important; }
html[data-theme="dark"] .vpn-ui .nav-tabs .nav-link.active .badge { background: var(--dk-blue) !important; color: #10202f !important; }

/* Cột Ping trang VPN: xanh < 60ms, vàng < 150ms, đỏ còn lại */
.vpn-ui .vp-ping { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.vpn-ui .vp-ping.good { color: #15803d; } .vpn-ui .vp-ping.mid { color: #b45309; } .vpn-ui .vp-ping.bad { color: #b91c1c; } .vpn-ui .vp-ping.none { color: #98a2ae; font-weight: 400; }
html[data-theme="dark"] .vpn-ui .vp-ping.good { color: #4ade80; } html[data-theme="dark"] .vpn-ui .vp-ping.mid { color: #fbbf24; } html[data-theme="dark"] .vpn-ui .vp-ping.bad { color: #f87171; }
/* Uptime/Load/CPU/RAM máy chủ VPN: cùng thang màu với cột Ping */
.vpn-ui .vp-lv { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.vpn-ui .vp-lv .vp-sub { font-size: 11px; font-weight: 400; color: #98a2ae; }
.vpn-ui .vp-lv.good { color: #15803d; } .vpn-ui .vp-lv.mid { color: #b45309; } .vpn-ui .vp-lv.bad { color: #b91c1c; } .vpn-ui .vp-lv.none { color: inherit; font-weight: 400; }
html[data-theme="dark"] .vpn-ui .vp-lv.good { color: #4ade80; } html[data-theme="dark"] .vpn-ui .vp-lv.mid { color: #fbbf24; } html[data-theme="dark"] .vpn-ui .vp-lv.bad { color: #f87171; }

/* Pill cảnh báo hợp đồng hết hạn: luật .ma-pill chung dùng !important nên phải đặt lại với độ ưu tiên cao hơn (thêm .ma-pill vào bộ chọn) */
html[data-theme="dark"] .ma-pill.ma-bad { background: rgba(248, 113, 113, .16) !important; color: #f87171 !important; }

/* Tiêu đề trang (.page-title) trên nền tối: theme gốc để màu xám đậm nên gần như chìm */
html[data-theme="dark"] .page-header .page-title, html[data-theme="dark"] .page-wrapper .content .page-header .page-title { color: var(--dk-ink) !important; }
html[data-theme="dark"] .page-header .breadcrumb, html[data-theme="dark"] .page-header .breadcrumb-item, html[data-theme="dark"] .page-header .breadcrumb-item.active { color: var(--dk-muted) !important; }

/* Thanh tab gộp trang VPN (share/vpn-tabs.blade.php) */
.vt-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e6e9ef; margin-bottom: 18px; }
.vt-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: #6b7785; font-weight: 600; font-size: 14px; text-decoration: none; }
.vt-tabs a:hover { color: #1f2937; }
.vt-tabs a.on { color: #2a78d6; border-bottom-color: #2a78d6; }
.vt-tabs a i { font-size: 17px; }
.vt-tabs .vt-badge { font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 999px; background: #fff4d6; color: #92620a; }
html[data-theme="dark"] .vt-tabs { border-color: var(--dk-line); }
html[data-theme="dark"] .vt-tabs a { color: var(--dk-muted); }
html[data-theme="dark"] .vt-tabs a:hover { color: var(--dk-ink); }
html[data-theme="dark"] .vt-tabs a.on { color: #5aa2ec; border-bottom-color: #5aa2ec; }
html[data-theme="dark"] .vt-tabs .vt-badge { background: rgba(251, 191, 36, .16); color: #fbbf24; }

/* 3 thẻ số liệu VPN (Lịch sử VPN của tôi + tab History admin) */
.vs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vs-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #e6e9ef; border-radius: 12px; background: #fff; }
.vs-card b { display: block; font-size: 20px; line-height: 1.15; }
.vs-card span { font-size: 12.5px; color: #6b7785; }
.vs-ico { flex: 0 0 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.vs-ico.c1 { background: #eaf2fb; color: #2a78d6; }
.vs-ico.c2 { background: #e3f5ec; color: #17754b; }
.vs-ico.c3 { background: #fff4d6; color: #92620a; }
@media (max-width: 575px) { .vs-cards { grid-template-columns: 1fr; } }
html[data-theme="dark"] .vs-card { background: var(--dk-surface-2); border-color: var(--dk-line); }
html[data-theme="dark"] .vs-card span { color: var(--dk-muted); }
html[data-theme="dark"] .vs-ico.c1 { background: rgba(90, 162, 236, .16); color: #9cc8f5; }
html[data-theme="dark"] .vs-ico.c2 { background: rgba(74, 222, 128, .14); color: #4ade80; }
html[data-theme="dark"] .vs-ico.c3 { background: rgba(251, 191, 36, .16); color: #fbbf24; }

/* Usage history (share/vpn-usage.blade.php) */
.vu-bar-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.vu-emp { display: flex; align-items: center; gap: 6px; min-width: 300px; }
.vu-emp .la { font-size: 18px; color: #6b7785; }
.vu-q { max-width: 220px; }
.vu-who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.vu-table th { font-size: 12px; color: #6b7785; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.vu-row { cursor: pointer; }
.vu-row:hover > td { background: #f7f9fc; }
.vu-row.open > td { background: #eef5fd; }
.vu-ico { color: #8a96a3; margin-right: 6px; }
.vu-table { table-layout: fixed; width: 100%; }
.vu-table td { overflow-wrap: anywhere; }
.vu-meter { display: inline-block; vertical-align: middle; width: 170px; height: 8px; background: #eef1f4; border-radius: 8px; overflow: hidden; margin-right: 8px; }
.vu-meter i { display: block; height: 100%; background: linear-gradient(90deg, #4f97e6, #2a78d6); border-radius: 8px; }
.vu-num { display: inline-block; min-width: 70px; font-variant-numeric: tabular-nums; font-weight: 600; }
.vu-hosts > td { background: #fafbfd; padding: 8px 12px 10px 34px !important; }
.vu-host, .vu-chip { display: inline-flex; align-items: center; gap: 5px; margin: 2px 6px 2px 0; padding: 2px 9px; border-radius: 999px; background: #eef1f4; font-size: 12px; word-break: break-all; }
.vu-host em, .vu-chip em { font-style: normal; color: #6b7785; }
.vu-table td.vu-chips, .table-responsive .vu-table td.vu-chips { white-space: normal !important; line-height: 1.9; }
.vu-chips .vu-chip { max-width: 100%; word-break: break-all; }
.vu-chip { background: #eaf2fb; color: #175a9e; font-weight: 600; }
.vu-chip em { font-weight: 400; }
.vu-side { border: 1px solid #e6e9ef; border-radius: 12px; padding: 12px 14px; }
.vu-side-h { font-weight: 700; margin-bottom: 8px; }
.vu-side-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px dashed #eef1f4; font-size: 13px; }
html[data-theme="dark"] .vu-row:hover > td { background: var(--dk-surface-2); }
html[data-theme="dark"] .vu-row.open > td, html[data-theme="dark"] .vu-hosts > td { background: var(--dk-surface-3); }
html[data-theme="dark"] .vu-meter, html[data-theme="dark"] .vu-host { background: var(--dk-surface-3); }
html[data-theme="dark"] .vu-chip { background: rgba(90, 162, 236, .16); color: #9cc8f5; }
html[data-theme="dark"] .vu-side { border-color: var(--dk-line); }
html[data-theme="dark"] .vu-side-row { border-color: var(--dk-line); }
html[data-theme="dark"] .vu-ico, html[data-theme="dark"] .vu-host em, html[data-theme="dark"] .vu-chip em, html[data-theme="dark"] .vu-table th, html[data-theme="dark"] .vu-emp .la { color: var(--dk-muted); }

/* Giữ chỗ thanh cuộn: đổi tab làm trang dài/ngắn đi không còn làm cả trang giật ngang */
html { scrollbar-gutter: stable; }

/* Network access tổng (share/vpn-network.blade.php) */
.nw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.nw-stat { background: #fff; border: 1px solid #e6e9ef; border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; text-align: left; width: 100%; }
.nw-stat:hover { border-color: #c9d3e0; }
.nw-stat.on { border-color: #2a78d6; box-shadow: 0 0 0 3px rgba(42, 120, 214, .12); }
.nw-stat b { display: block; font-size: 22px; line-height: 1.15; }
.nw-stat span { font-size: 12.5px; color: #6b7785; }
.nw-stat .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.nw-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.nw-pill.open { background: #fff4d6; color: #92620a; }
.nw-pill.explained { background: #eaf2fb; color: #175a9e; }
.nw-pill.confirmed { background: #fde8e8; color: #b42318; }
.nw-pill.dismissed { background: #e3f5ec; color: #17754b; }
.nw-lock { font-size: 11px; font-weight: 700; color: #b42318; background: #fde8e8; border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.nw-exp { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #475467; }
.nw-locked { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-locked .chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #f3c7c7; background: #fff6f6; border-radius: 10px; padding: 6px 8px 6px 12px; font-size: 13px; }
#nwModal .modal-footer { flex-wrap: nowrap; gap: 8px; }
#nwModal .modal-footer > * { margin: 0; white-space: nowrap; }
.nw-detail dt { font-size: 12px; color: #6b7785; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.nw-detail dd { margin-bottom: 12px; word-break: break-word; }
.nw-detail .box { background: #f6f7f9; border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; }
html[data-theme="dark"] .nw-stat { background: var(--dk-surface); border-color: var(--dk-line); }
html[data-theme="dark"] .nw-stat span, html[data-theme="dark"] .nw-detail dt { color: var(--dk-muted); }
html[data-theme="dark"] .nw-exp { color: var(--dk-ink-2); }
html[data-theme="dark"] .nw-detail .box { background: var(--dk-surface-2); }
html[data-theme="dark"] .nw-locked .chip { background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .3); }
html[data-theme="dark"] .nw-pill.open { background: rgba(251, 191, 36, .16); color: #fbbf24; }
html[data-theme="dark"] .nw-pill.explained { background: rgba(90, 162, 236, .16); color: #9cc8f5; }
html[data-theme="dark"] .nw-pill.confirmed, html[data-theme="dark"] .nw-lock { background: rgba(248, 113, 113, .16); color: #f87171; }
html[data-theme="dark"] .nw-pill.dismissed { background: rgba(74, 222, 128, .14); color: #4ade80; }

/* Trang VPN admin: thanh tab một hàng cố định (tràn thì cuộn ngang), vùng nội dung có chiều cao tối thiểu để đổi tab không giật */
.vpn-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.vpn-tabs .nav-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.vpn-tabs .nav-link .la { font-size: 16px; }
.vpn-panes { min-height: 480px; }

/* Trang Phân quyền (permission/configs.blade.php) */
.rp-table th, .rp-table td { vertical-align: middle; }
.rp-table .rp-group td { background: #f6f8fb; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; color: #6b7785; }
.rp .ma-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef1f5; color: #475467; white-space: nowrap; }
.rp .rp-role-admin { background: #fde8e8; color: #b42318; }
.rp .rp-role-support_admin { background: #eaf2fb; color: #175a9e; }
.rp .rp-role-hrm_admin { background: #e6f6ee; color: #0f7a4a; }
.emp-role.hrm { background: #e6f6ee; color: #0f7a4a; }
.rp .rp-role-management { background: #fff4d6; color: #92620a; }
.rp-yes { color: #16a34a; font-size: 20px; }
.rp-implied { color: #86c9a0; font-size: 20px; }
.rp-all { color: #98a2b3; font-size: 18px; }
.rp-table thead th { border-bottom-width: 1px; }
.rp-table .rp-sub th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7785; font-weight: 600; padding-top: 4px; padding-bottom: 6px; }
.rp-table .rp-left { border-left: 1px solid #eaecf0; }
.rp-table .rp-rolehead { border-left: 1px solid #eaecf0; }
html[data-theme="dark"] .rp-implied { color: #3d7a57; }
html[data-theme="dark"] .rp-table .rp-left, html[data-theme="dark"] .rp-table .rp-rolehead { border-left-color: var(--dk-line); }
.rp-part { color: #d97706; font-size: 20px; }
.rp-no { color: #c3cad3; }
html[data-theme="dark"] .rp-table .rp-group td { background: rgba(255, 255, 255, .04); color: var(--dk-muted); }
html[data-theme="dark"] .rp .ma-pill { background: var(--dk-surface-3); color: var(--dk-text); }
html[data-theme="dark"] .rp .rp-role-admin { background: rgba(248, 113, 113, .16); color: #fca5a5; }
html[data-theme="dark"] .rp .rp-role-support_admin { background: rgba(90, 162, 236, .16); color: #9cc8f5; }
html[data-theme="dark"] .rp .rp-role-hrm_admin, html[data-theme="dark"] .ma-role-hrm_admin, html[data-theme="dark"] .emp-role.hrm { background: rgba(52, 211, 153, .16); color: #6ee7b7; }
html[data-theme="dark"] .rp .rp-role-management { background: rgba(251, 191, 36, .16); color: #fbbf24; }
html[data-theme="dark"] .rp-no { color: #4b5563; }
.vn .ui-seg label .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.vn .nw-n { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .06); font-size: 11.5px; font-weight: 700; text-align: center; }
html[data-theme="dark"] .vn .nw-n { background: rgba(255, 255, 255, .1); }
.rp-lock { color: #98a2b3; margin-left: 4px; }
/* Công tắc trong bảng phân quyền */
.rp-sw { position: relative; display: inline-block; width: 38px; height: 22px; margin: 0; cursor: pointer; vertical-align: middle; }
.rp-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.rp-sw span { position: absolute; inset: 0; border-radius: 999px; background: #d0d5dd; transition: background .15s; }
.rp-sw span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.rp-sw input:checked + span { background: #16a34a; }
.rp-sw input:checked + span::after { transform: translateX(16px); }
.rp-sw input:focus-visible + span { outline: 2px solid #2a78d6; outline-offset: 2px; }
.rp-sw.busy { opacity: .5; pointer-events: none; }
html[data-theme="dark"] .rp-sw span { background: #475467; }
html[data-theme="dark"] .rp-sw input:checked + span { background: #22c55e; }

/* ---------- Bo góc đồng bộ cho ô nhập và nút (20/10/2026) ----------
   Chuẩn 8px. Nhân đôi tên class để thắng `.form-control-sm.form-control { border-radius: 0 }` của theme;
   input-group / btn-group vẫn giữ góc vuông ở mép nối vì luật của Bootstrap có độ ưu tiên cao hơn. */
.form-control.form-control, .form-select.form-select, .btn.btn:not(.bor-rad-50):not(.reset-layout) { border-radius: 8px; }
.btn-sm.btn-sm:not(.bor-rad-50), .btn-lg.btn-lg:not(.bor-rad-50), .form-control-sm.form-control-sm, .form-select-sm.form-select-sm { border-radius: 8px; }
/* Nhóm nút ghép / input-group: bo 8px hai đầu ngoài cùng, giữ góc vuông ở chỗ nối.
   Nhóm kiểu radio có <input.btn-check> ẩn đứng trước nên nút đầu là `.btn-check:first-child + .btn`.
   Độ ưu tiên phải cao hơn luật chung ở trên (nó có :not()). Nhóm bọc `.bor-rad-50.overflow-hidden` của theme
   tự cắt góc ở ô bao ngoài nên nút bên trong để vuông hết. */
.btn-group:not(.x) > .btn.btn:not(.x):not(.y), .input-group:not(.x) > .form-control.form-control:not(.x), .input-group:not(.x) > .btn.btn:not(.x):not(.y) { border-radius: 0; }
.btn-group:not(.bor-rad-50) > .btn.btn:first-child:not(.x), .btn-group:not(.bor-rad-50) > .btn-check:first-child + .btn.btn:not(.x),
.input-group:not(.x) > .form-control.form-control:first-child:not(.x), .input-group:not(.x) > .btn.btn:first-child:not(.x) { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.btn-group:not(.bor-rad-50) > .btn.btn:last-child:not(.x), .input-group:not(.x) > .form-control.form-control:last-child:not(.x), .input-group:not(.x) > .btn.btn:last-child:not(.x) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* ---------- Bảng vừa khít màn hình (20/10/2026) ----------
   Chiều cao khung do public/assets/js/staffs-fit.js đặt (max-height); ở đây chỉ lo cuộn và hàng tiêu đề cố định. */
.page-wrapper .table-responsive, .page-wrapper .wc-scroll { overflow: auto; overscroll-behavior: contain; }
.page-wrapper .table-responsive > .table > thead > tr > th { position: sticky; top: 0; z-index: 3; background: var(--tt-th-bg, #fff); box-shadow: inset 0 -1px 0 #e5e7eb; }
html[data-theme="dark"] .page-wrapper .table-responsive > .table > thead > tr > th { --tt-th-bg: var(--dk-surface, #1b1f27); box-shadow: inset 0 -1px 0 var(--dk-line-soft, #2a2f3a); }
/* Tiêu đề cố định phải có nền đặc: quy tắc ".table th { background: transparent !important }" ở trên làm hàng cuộn lên chồng chữ vào tiêu đề */
.page-wrapper .table-responsive > .table > thead > tr > th { background-color: var(--tt-th-bg, #fff) !important; top: -3px; box-shadow: inset 0 -1px 0 #e5e7eb; }