/* ==========================================================================
   SBAY UI FIXES — overlay module (consolidated 2026-05-05)
   Loaded via header-base-v1.php / header-base.php

   Cấu trúc:
     §1.  LEGACY PATCHES        — fix nhỏ lẻ giữ nguyên từ phiên bản cũ
     §2.  SBAY THEME            — palette + body + headings + links
     §3.  COMPONENTS            — buttons / forms / tables / alerts / labels / boxes
     §4.  CONTRAST ENFORCEMENT  — ép white/dark text trên nền tương ứng
     §5.  SIDEBAR & TOPBAR      — layout sidebar + topbar + responsive fix
     §6.  YELLOW ACCENTS        — viền vàng cho boxes/buttons/tables (theme accent)
     §7.  RESPONSIVE & PRINT    — media queries gọn

   Palette (slate/blue, professional minimal):
     --bg        #ffffff   body
     --surface   #ffffff   card/panel
     --content   #f8fafc   wrapper area
     --header    #ffffff   topbar
     --sidebar   #1e293b   sidebar dark
     --text      #1e293b   body text (slate-800)
     --text-2    #475569   secondary
     --muted     #64748b
     --heading   #0f172a   slate-900
     --primary   #2563eb   blue-600
     --primary-h #1d4ed8   blue-700 (hover)
     --success   #16a34a   green-600
     --danger    #dc2626   red-600
     --warning   #b45309   amber-600
     --info      #0891b2   cyan-600
     --border    #e2e8f0   slate-200
     --accent    #fbbf24   amber-400 (accent borders)
   ========================================================================== */


/* ==========================================================================
   §1. LEGACY PATCHES — small fixes, không liên quan màu sắc theme
   ========================================================================== */

/* 1.1 — Cho phép zoom trên mobile */
@-ms-viewport { width: device-width; }

/* 1.2 — Alert success màu semantic xanh lá (override AdminLTE forcing) */
p.alert.alert-success,
.alert-success {
    background-color: #dff0d8 !important;
    color: #3c763d !important;
    border-color: #d6e9c6 !important;
    background-image: none;
}
p.alert.alert-success a, .alert-success a { color: #2b542c; font-weight: 700; }

/* 1.3 — Tắt shake animation gây say sóng */
.shake-animation,
.shake-animation.alert {
    animation: none !important;
    -webkit-animation: none !important;
}

/* 1.4 — Footer link size */
footer.main-footer a {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* 1.5 — Z-index widget chat không đè nút */
.zalo-chat-widget,
#fb-customer-chat,
.fb-customerchat { z-index: 100 !important; }

/* 1.6 — Loading-system overlay */
#loading-system { cursor: default !important; }
#loading-system img { max-width: 80px; }

/* 1.7 — SDT ellipsis trong table admin-dstk */
span.sdtlienhe {
    max-width: 110px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle;
}
.tk-da-het-han {
    background: #f2dede !important;
    color: #a94442 !important;
}
.tk-da-het-han a, .tk-da-het-han .label { color: #a94442 !important; }

/* 1.8 — Mã đặt chỗ chính (.sbay-ma-dat-cho-0/-1)
        - Mặc định (chưa thanh toán): VÀNG amber, chữ nâu đậm
        - Đã thanh toán (data-status="1"): XANH LÁ đậm, chữ trắng */

/* Default — vàng (flat, no border) */
.sbay-ma-dat-cho.sbay-ma-dat-cho-0,
.sbay-ma-dat-cho.sbay-ma-dat-cho-1,
span.sbay-ma-dat-cho.sbay-ma-dat-cho-0,
span.sbay-ma-dat-cho.sbay-ma-dat-cho-1,
.sbay-ma-dat-cho.sbay-ma-dat-cho-0 *,
.sbay-ma-dat-cho.sbay-ma-dat-cho-1 * {
    background: #fbbf24 !important;
    color: #78350f !important;
    border: 0 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
.sbay-ma-dat-cho.sbay-ma-dat-cho-0:hover,
.sbay-ma-dat-cho.sbay-ma-dat-cho-1:hover {
    background: #f59e0b !important;
    color: #451a03 !important;
}

/* Đã xuất vé (data-status="1") — nền nâu vàng tối + chữ vàng sáng (flat, no border) */
.danh-sach-nap-quy tr[data-status="1"] .sbay-ma-dat-cho-0,
.danh-sach-nap-quy tr[data-status1="1"] .sbay-ma-dat-cho-1,
.danh-sach-nap-quy tr[data-status="1"] .sbay-ma-dat-cho-0 *,
.danh-sach-nap-quy tr[data-status1="1"] .sbay-ma-dat-cho-1 *,
tr[data-status="1"] .sbay-ma-dat-cho.sbay-ma-dat-cho-0,
tr[data-status1="1"] .sbay-ma-dat-cho.sbay-ma-dat-cho-1,
tr[data-status="1"] .sbay-ma-dat-cho.sbay-ma-dat-cho-0 *,
tr[data-status1="1"] .sbay-ma-dat-cho.sbay-ma-dat-cho-1 * {
    background: #78350f !important;
    color: #fde68a !important;
    border: 0 !important;
    text-shadow: none !important;
}
.danh-sach-nap-quy tr[data-status="1"] .sbay-ma-dat-cho-0:hover,
.danh-sach-nap-quy tr[data-status1="1"] .sbay-ma-dat-cho-1:hover {
    background: #92400e !important;
    color: #fef3c7 !important;
}

/* 1.9 — Section notification: giới hạn chiều cao */
.section-notification {
    max-height: 80px;
    overflow: hidden;
    margin: 0;
    position: relative;
}
.section-notification .alert {
    padding-right: 40px !important;
    margin-bottom: 8px;
    border-radius: 4px;
}
.section-notification .alert .close,
.section-notification .alert button.close {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 2;
    opacity: .8;
    line-height: 1;
    font-size: 18px;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
}
.section-notification .alert .close:hover { opacity: 1; }
.section-notification .alert h4 {
    margin: 0 0 2px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal !important;
}

/* 1.10 — Toast container (dùng bởi JS) */
#sbay-toast-host {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: calc(100% - 32px);
}
.sbay-toast {
    pointer-events: auto;
    min-width: 280px;
    max-width: 420px;
    padding: 12px 36px 12px 14px;
    border-radius: 6px;
    background: #323232;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    line-height: 1.45;
    position: relative;
    animation: sbayToastIn .22s ease-out;
    word-break: break-word;
}
.sbay-toast.is-success { background: #28a745; }
.sbay-toast.is-error   { background: #d9534f; }
.sbay-toast.is-warning { background: #ec971f; }
.sbay-toast.is-info    { background: #1b1293; }
.sbay-toast .sbay-toast-close {
    position: absolute;
    top: 6px; right: 8px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
}
.sbay-toast .sbay-toast-close:hover { opacity: 1; }
@keyframes sbayToastIn {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* 1.11 — Copy button overlay cho input readonly */
.sbay-copy-wrap {
    position: relative;
    display: block;
    margin-bottom: 10px;
}
.sbay-copy-wrap input.form-control { padding-right: 86px; }
.sbay-copy-btn {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    background: #d3d1f1;
    color: #fff;
    border: 0;
    padding: 0 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.sbay-copy-btn:hover { background: #150e74; }
.sbay-copy-btn.is-copied { background: #28a745; }

/* 1.12 — Pagination jump-to-page input */
.sbay-page-jump {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}
.sbay-page-jump input {
    width: 60px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 13px;
}

/* 1.13 — Date shortcut buttons */
.sbay-date-shortcuts {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0;
}
.sbay-date-shortcuts button {
    background: #f4f4f4;
    border: 1px solid #ddd;
    color: #333;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
}
.sbay-date-shortcuts button:hover { background: #1b1293; color: #fff; border-color: #1b1293; }

/* 1.14 — Topbar tài khoản: cắt khi quá dài */
.dropdown.user-menu .hidden-xs {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}


/* ==========================================================================
   §2. SBAY THEME — body, headings, links, typography
   ========================================================================== */

body {
    background-color: #ffffff;
    color: #1e293b;
}
body, p, span, label, li, dt, dd, small, em { color: #1e293b; }
strong, b { color: #0f172a; }
.text-muted, small.text-muted { color: #64748b; }

.wrapper, .content-wrapper, .content {
    background-color: #f8fafc;
    color: #1e293b;
}

h1, h2, h3, h4, h5, h6 {
    color: #0f172a;
    font-weight: 600;
}

a, a:visited {
    color: #2563eb;
    text-decoration: none;
}
a:hover, a:focus {
    color: #1d4ed8;
    text-decoration: underline;
}
a:not(.btn) { color: #2563eb; }
a:not(.btn):hover, a:not(.btn):focus { color: #1d4ed8; }

.text-success { color: #16a34a; }
.text-danger  { color: #dc2626; }
.text-warning { color: #b45309; }
.text-info    { color: #0891b2; }
.text-primary { color: #2563eb; }

/* Header (light, subtle border) — !important scope hẹp cho class .main-header */
.main-header,
.main-header .navbar {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.main-header .logo {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    font-weight: 700;
}
.main-header .navbar .nav > li > a { color: #475569 !important; }
.main-header .navbar .nav > li > a:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}


/* ==========================================================================
   §3. COMPONENTS — buttons / forms / tables / alerts / labels / boxes / modals
   ========================================================================== */

/* 3.1 — Buttons */
.btn {
    font-weight: 500;
    border-radius: 6px;
    box-shadow: none !important;
    transition: background-color .15s, border-color .15s;
}
.btn-default, .btn-default:focus {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}
.btn-default:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}
.btn-primary, .btn-primary:focus {
    background-color: #2563eb !important;
    border: 1px solid #2563eb !important;
    color: #ffffff !important;
}
.btn-primary:hover { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.btn-success, .btn-success:focus {
    background-color: #16a34a !important;
    border: 1px solid #16a34a !important;
    color: #ffffff !important;
}
.btn-success:hover { background-color: #15803d !important; border-color: #15803d !important; }
.btn-info, .btn-info:focus {
    background-color: #0891b2 !important;
    border: 1px solid #0891b2 !important;
    color: #ffffff !important;
}
.btn-info:hover { background-color: #0e7490 !important; border-color: #0e7490 !important; }
.btn-warning, .btn-warning:focus {
    background-color: #b45309 !important;
    border: 1px solid #b45309 !important;
    color: #ffffff !important;
}
.btn-warning:hover { background-color: #92400e !important; border-color: #92400e !important; color: #ffffff !important; }
.btn-danger, .btn-danger:focus {
    background-color: #f97316 !important;        /* orange-500 — nhạt hơn, dịu mắt */
    border: 1px solid #f97316 !important;
    color: #ffffff !important;
}
.btn-danger:hover { background-color: #ea580c !important; border-color: #ea580c !important; }

/* Admin xuất vé thủ công — pastel orange nhạt (dat-cho.php line 291) */
a.btn-danger[href*="id-da-xuat"],
a.btn-danger[href*="id-da-xuat"]:focus {
    background-color: #fed7aa !important;        /* orange-200 — pastel nhẹ */
    border: 1px solid #fb923c !important;        /* orange-400 viền */
    color: #9a3412 !important;                    /* orange-800 chữ đậm */
}
a.btn-danger[href*="id-da-xuat"]:hover {
    background-color: #fdba74 !important;        /* orange-300 hover */
    border-color: #f97316 !important;
    color: #7c2d12 !important;
}
.btn-link, .btn-link:focus {
    background-color: transparent !important;
    border: none !important;
    color: #2563eb !important;
    box-shadow: none !important;
}
.btn-link:hover { color: #1d4ed8 !important; text-decoration: underline; box-shadow: none !important; }

/* 3.2 — Forms / Inputs */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"],
textarea, select {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px;
    box-shadow: none !important;
}
input, textarea, select, .form-control { color: #1e293b !important; }
.form-control:focus,
input:focus, textarea:focus, select:focus {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251,191,36,.25) !important;
    outline: none;
}
.has-error .form-control,
.has-error input, .has-error textarea, .has-error select {
    border-color: #dc2626 !important;
}
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.18) !important; }
::placeholder { color: #94a3b8 !important; opacity: 1; }

/* 3.3 — Tables */
.table, table.dataTable {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-radius: 6px;
    overflow: hidden;
}
.table > thead > tr > th, table.dataTable thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .03em;
}
.table > tbody > tr > td, table.dataTable tbody td {
    border-top: 1px solid #f1f5f9;
    background-color: #ffffff;
}
.table-striped > tbody > tr:nth-of-type(odd) > td,
table.dataTable.stripe tbody tr.odd td {
    background-color: #f8fafc;
}
.table-hover > tbody > tr:hover > td {
    background-color: #eff6ff;
}

/* 3.4 — Alerts */
.alert {
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    border-left-width: 4px;
}
.alert-info {
    background-color: #ecfeff !important;
    color: #155e75 !important;
    border-color: #a5f3fc !important;
    border-left-color: #0891b2 !important;
}
.alert-warning {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border-color: #fde68a !important;
    border-left-color: #fbbf24 !important;
}
.alert-danger {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
    border-left-color: #dc2626 !important;
}
.alert-success { border-left-color: #16a34a !important; }
.alert-success, .alert-success * { color: #155724 !important; }
.alert-info, .alert-info *       { color: #155e75 !important; }
.alert-warning, .alert-warning * { color: #92400e !important; }
.alert-danger, .alert-danger *   { color: #991b1b !important; }
.alert-success a, .alert-success a *, .alert-success strong { color: #155724 !important; }
.alert-info a, .alert-info a *, .alert-info strong          { color: #155e75 !important; }
.alert-warning a, .alert-warning a *, .alert-warning strong { color: #92400e !important; }
.alert-danger a, .alert-danger a *, .alert-danger strong    { color: #991b1b !important; }

/* 3.5 — Labels & badges */
.label, .badge { font-weight: 600; border-radius: 4px; }
.label, .label *, .badge, .badge * { color: #ffffff !important; }
.label-success, .badge-success { background-color: #16a34a !important; color: #fff !important; }
.label-info, .badge-info       { background-color: #0891b2 !important; color: #fff !important; }
.label-warning, .badge-warning { background-color: #d97706 !important; color: #fff !important; }
.label-danger, .badge-danger   { background-color: #dc2626 !important; color: #fff !important; }
.label-primary, .badge-primary { background-color: #2563eb !important; color: #fff !important; }
.label-default, .badge-default { background-color: #64748b !important; color: #ffffff !important; }

/* 3.6 — Boxes / panels / cards */
.box, .box-body, .box-footer,
.panel, .panel-body, .panel-footer,
.card, .card-body, .card-footer,
.well,
.info-box, .small-box,
.nav-tabs-custom {
    background-color: #ffffff !important;
    color: #1e293b !important;
}
.box, .panel, .card, .well,
.info-box, .small-box,
.nav-tabs-custom {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
}
.box-header, .panel-heading, .card-header {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
}
.box-header .box-title, .panel-heading .panel-title { color: #0f172a !important; }

/* 3.7 — Modals & dropdowns */
.modal-content, .dropdown-menu {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(15,23,42,.10), 0 4px 10px rgba(15,23,42,.06);
}
.dropdown-menu > li > a { color: #1e293b !important; }
.dropdown-menu > li > a:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* 3.8 — Dividers & misc */
hr {
    border-top: 1px solid #fbbf24 !important;
    border-bottom: 0 !important;
    opacity: 0.6;
}

/* 3.9 — Code/edit area giữ màu mặc định */
.edit_area, .edit_area *,
pre, code, kbd, samp { color: initial; }

/* 3.10 — SweetAlert2 */
.swal2-popup { background-color: #ffffff !important; color: #1e293b !important; }
.swal2-title { color: #0f172a !important; }
.swal2-html-container { color: #1e293b !important; }


/* ==========================================================================
   §4. CONTRAST ENFORCEMENT — defensive: ép cặp tương phản đúng
   ========================================================================== */

/* 4.1 — Sidebar dark: text slate-200, link active trắng */
.main-sidebar, .sidebar { background-color: #1e293b !important; color: #cbd5e1 !important; }
.main-sidebar, .main-sidebar *,
.bg-dark, .bg-dark * { color: #e2e8f0 !important; }
.main-sidebar a, .main-sidebar a *,
.main-sidebar a:not(.btn), .main-sidebar a:not(.btn) *,
.sidebar a, .sidebar a *,
.sidebar a:not(.btn), .sidebar a:not(.btn) * {
    color: #cbd5e1 !important;
}
.main-sidebar a:hover, .main-sidebar a:hover *,
.main-sidebar a:focus, .main-sidebar a:focus *,
.sidebar a:hover, .sidebar a:hover *,
.sidebar a:focus, .sidebar a:focus * {
    color: #ffffff !important;
    background-color: transparent;
}
.main-sidebar li.active > a, .main-sidebar li.active > a *,
.sidebar li.active > a, .sidebar li.active > a * {
    color: #ffffff !important;
    background-color: #0f172a !important;
}

/* 4.2 — Sidebar inline color/background overrides */
.main-sidebar li[style*="background:red"],
.main-sidebar li[style*="background: red"],
.main-sidebar li[style*="background:#dc2626"],
.main-sidebar li[style*="background: #dc2626"],
.sidebar li[style*="background:red"],
.sidebar li[style*="background: red"],
.sidebar li[style*="background:#dc2626"],
.sidebar li[style*="background: #dc2626"] {
    background: #b91c1c !important;
}
.main-sidebar li[style*="background:red"] a,
.main-sidebar li[style*="background:red"] a *,
.main-sidebar li[style*="background: red"] a,
.main-sidebar li[style*="background: red"] a *,
.main-sidebar li[style*="background:#dc2626"] a,
.main-sidebar li[style*="background:#dc2626"] a *,
.main-sidebar li[style*="background: #dc2626"] a,
.main-sidebar li[style*="background: #dc2626"] a *,
.sidebar li[style*="background:red"] a,
.sidebar li[style*="background:red"] a *,
.sidebar li[style*="background: red"] a,
.sidebar li[style*="background: red"] a *,
.sidebar li[style*="background:#dc2626"] a,
.sidebar li[style*="background:#dc2626"] a *,
.sidebar li[style*="background: #dc2626"] a,
.sidebar li[style*="background: #dc2626"] a * {
    color: #ffffff !important;
    font-weight: 600;
}
.main-sidebar a[style*="color:red"],
.main-sidebar a[style*="color: red"],
.main-sidebar a[style*="color:#ffeb3b"],
.main-sidebar a[style*="color: #ffeb3b"],
.main-sidebar a[style*="color:#ffd400"],
.main-sidebar a[style*="color:yellow"],
.sidebar a[style*="color:red"],
.sidebar a[style*="color: red"],
.sidebar a[style*="color:#ffeb3b"],
.sidebar a[style*="color: #ffeb3b"] {
    color: #fbbf24 !important;
}

/* 4.3 — Badges trong sidebar dùng primary */
.main-sidebar .label,
.main-sidebar .badge,
.sidebar .label,
.sidebar .badge {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* 4.4 — Buttons colored: chữ trắng */
.btn-primary, .btn-primary *,
.btn-success, .btn-success *,
.btn-info, .btn-info *,
.btn-warning, .btn-warning *,
.btn-danger, .btn-danger *,
.bg-primary, .bg-primary *,
.bg-success, .bg-success *,
.bg-info, .bg-info *,
.bg-warning, .bg-warning *,
.bg-danger, .bg-danger * { color: #ffffff !important; }

/* 4.5 — link-as-button (a.btn-*) chữ trắng */
a.btn-primary, a.btn-primary *,
a.btn-success, a.btn-success *,
a.btn-info, a.btn-info *,
a.btn-warning, a.btn-warning *,
a.btn-danger, a.btn-danger * { color: #ffffff !important; }
a.btn-default, a.btn-default * { color: #1e293b !important; }
a.btn-link, a.btn-link * { color: #2563eb !important; }

/* 4.6 — Inline color trắng/vàng trên nền sáng → ép về dark */
[style*="color:#fff"]:not(.main-sidebar [style*="color:#fff"]):not(.btn[class*="btn-"]:not(.btn-default):not(.btn-link)):not(.bg-dark *):not(.bg-primary *):not(.bg-success *):not(.bg-danger *):not(.bg-info *):not(.bg-warning *),
[style*="color: #fff"]:not(.main-sidebar [style*="color: #fff"]):not(.bg-dark *):not(.bg-primary *):not(.bg-success *):not(.bg-danger *):not(.bg-info *):not(.bg-warning *),
[style*="color:white"]:not(.main-sidebar [style*="color:white"]),
[style*="color: white"],
.text-white:not(.main-sidebar .text-white):not(.btn[class*="btn-"]:not(.btn-default):not(.btn-link).text-white):not(.bg-dark .text-white):not(.bg-primary .text-white):not(.bg-success .text-white):not(.bg-danger .text-white):not(.bg-info .text-white):not(.bg-warning .text-white),
.text-light {
    color: #1e293b !important;
}
[style*="color:yellow"],
[style*="color: yellow"],
[style*="color:#ffd400"],
[style*="color: #ffd400"],
[style*="color:#ffeb3b"],
[style*="color: #ffeb3b"],
[style*="color:#fff176"],
[style*="color: #fff176"],
.text-yellow:not(.main-sidebar .text-yellow):not(.bg-dark .text-yellow) {
    color: #b45309 !important;
}

/* 4.7 — Style phẳng (flat) cho .sbay-ma-dat-cho — KHÔNG pill, KHÔNG shadow */
.sbay-ma-dat-cho {
    display: inline-block;
    padding: 4px 10px;
    border: 0;
    border-radius: 0;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color .15s;
}
a.sbay-ma-dat-cho,
a.sbay-ma-dat-cho:visited,
a.sbay-ma-dat-cho *,
span.sbay-ma-dat-cho,
span.sbay-ma-dat-cho * {
    color: #ffffff !important;
    text-decoration: none !important;
}
a.sbay-ma-dat-cho:hover,
a.sbay-ma-dat-cho:focus {
    text-decoration: none !important;
}

/* Nút Kiểm tra vé / Xuất vé — CYAN/TEAL (khác violet, khác blue) */
a.sbay-ma-dat-cho:not(.sbay-ma-dat-cho-0):not(.sbay-ma-dat-cho-1):not([style*="background"]),
a.sbay-ma-dat-cho:not(.sbay-ma-dat-cho-0):not(.sbay-ma-dat-cho-1):not([style*="background"]):visited {
    background: #0891b2 !important;        /* cyan-600 */
    color: #ffffff !important;
}
a.sbay-ma-dat-cho:not(.sbay-ma-dat-cho-0):not(.sbay-ma-dat-cho-1):not([style*="background"]):hover,
a.sbay-ma-dat-cho:not(.sbay-ma-dat-cho-0):not(.sbay-ma-dat-cho-1):not([style*="background"]):focus {
    background: #0e7490 !important;        /* cyan-700 đậm hơn khi hover */
    color: #ffffff !important;
}

/* Nút Mặt vé (inline `style="background: #dc2626"`) — orange nhạt cùng tông */
a.sbay-ma-dat-cho[style*="background: #dc2626"],
a.sbay-ma-dat-cho[style*="background:#dc2626"] {
    background: #f97316 !important;        /* orange-500 — cùng tông btn-danger */
    color: #ffffff !important;
}
a.sbay-ma-dat-cho[style*="background: #dc2626"]:hover,
a.sbay-ma-dat-cho[style*="background:#dc2626"]:hover {
    background: #ea580c !important;        /* orange-600 đậm hơn khi hover */
    color: #ffffff !important;
}


/* ==========================================================================
   §5. SIDEBAR & TOPBAR LAYOUT — fix vỡ giao diện responsive
   ========================================================================== */

/* 5.1 — User-panel: logo + info căn flexbox */
.main-sidebar .user-panel,
.sidebar .user-panel {
    padding: 12px 10px !important;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.main-sidebar .user-panel > .image,
.sidebar .user-panel > .image,
.main-sidebar .user-panel > .pull-left.image,
.sidebar .user-panel > .pull-left.image {
    float: none !important;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
}
.main-sidebar .user-panel .img-circle,
.sidebar .user-panel .img-circle {
    width: 45px !important;
    height: 45px !important;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.20);
}
.main-sidebar .user-panel > .info,
.sidebar .user-panel > .info,
.main-sidebar .user-panel > .pull-left.info,
.sidebar .user-panel > .pull-left.info {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    line-height: 1.3;
    overflow: hidden;
}
.main-sidebar .user-panel > .info > p,
.sidebar .user-panel > .info > p {
    margin: 0 0 2px 0;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main-sidebar .user-panel > .info > a,
.sidebar .user-panel > .info > a {
    font-size: 12px;
    color: #cbd5e1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* 5.2 — Sidebar search form (input + submit) */
.main-sidebar .sidebar-menu > li > form.form-inline,
.sidebar .sidebar-menu > li > form.form-inline {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 8px 10px;
    margin: 0;
    background: transparent;
    align-items: stretch;
}
.main-sidebar .sidebar-menu > li > form.form-inline input.form-control,
.sidebar .sidebar-menu > li > form.form-inline input.form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 4px 0 0 4px;
    border: 1px solid #d2d6de;
    background: #ffffff;
    color: #1e293b;
}
.main-sidebar .sidebar-menu > li > form.form-inline input.btn,
.sidebar .sidebar-menu > li > form.form-inline input.btn {
    flex: 0 0 auto;
    height: 32px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 0 4px 4px 0;
    margin-left: -1px;
    white-space: nowrap;
    line-height: 1;
}

/* 5.3 — Sidebar menu items: gọn padding + text ellipsis */
.main-sidebar .sidebar-menu > li > a,
.sidebar .sidebar-menu > li > a {
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #cbd5e1 !important;
    border-left: 3px solid transparent;
}
.main-sidebar .sidebar-menu > li > a:hover,
.main-sidebar .sidebar-menu > li.active > a,
.sidebar .sidebar-menu > li > a:hover,
.sidebar .sidebar-menu > li.active > a {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-left-color: #fbbf24 !important;
    padding-left: 11px !important;
}
.main-sidebar .sidebar-menu > li > a > i.fa,
.sidebar .sidebar-menu > li > a > i.fa {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    font-size: 14px;
}
.main-sidebar .sidebar-menu > li > a > span,
.sidebar .sidebar-menu > li > a > span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main-sidebar .sidebar-menu > li > a > .label.pull-right,
.sidebar .sidebar-menu > li > a > .label.pull-right {
    float: none !important;
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
}
.sidebar-menu .treeview-menu > li > a { color: #94a3b8 !important; }
.sidebar-menu .treeview-menu > li > a:hover { color: #ffffff !important; }

/* 5.4 — Sidebar section header (như "QUẢN LÝ ĐẠI LÝ") */
.sidebar-menu > li.header,
.skin-blue .sidebar-menu > li.header,
.skin-blue-light .sidebar-menu > li.header,
.main-sidebar .sidebar-menu > li.header,
.sidebar .sidebar-menu > li.header {
    padding: 10px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #fbbf24 !important;
    background: rgba(0,0,0,.15) !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* 5.5 — Topbar sidebar-toggle: 3 gạch đen mềm, TĨNH, không glow/wiggle
 * FIX 2026-05-07d: HTML đã đổi về <i class="fa fa-bars"> (sạch, không class flash).
 * CSS chỉ ép màu + size + tắt animation, KHÔNG dùng ::before custom (tránh đè icon).
 * Yêu cầu user: 3 gạch đen mềm mại, đứng yên, không phát sáng. */
.main-header .navbar .sidebar-toggle {
    position: relative;
    padding: 15px 14px;
    min-width: 50px;
    text-align: center;
    color: #1e293b !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent;
    animation: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.main-header .navbar .sidebar-toggle .fa,
.main-header .navbar .sidebar-toggle .fa-bars {
    color: #1e293b !important;
    font-size: 22px !important;
    line-height: 1 !important;
    animation: none !important;
    text-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}
.main-header .navbar .sidebar-toggle::before,
.main-header .navbar .sidebar-toggle::after,
body.sidebar-open .main-header .navbar .sidebar-toggle::before,
body.sidebar-open .main-header .navbar .sidebar-toggle::after,
.main-header .sidebar-toggle::before,
.main-header .sidebar-toggle::after,
.skin-blue-light .main-header .navbar .sidebar-toggle::before,
.skin-blue-light .main-header .navbar .sidebar-toggle::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    width: 0 !important;
    height: 0 !important;
}
.main-header .navbar .sidebar-toggle .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-size: 0 !important;
    left: auto !important;
    bottom: auto !important;
}

/* 5.6 — Topbar dropdown user-menu: scroll khi dài */
.main-header .navbar .user-menu .dropdown-menu {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    width: min(320px, calc(100vw - 20px));
    max-width: 100vw;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao {
    width: 100%;
    font-size: 12px;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao td {
    padding: 4px 6px;
    border-bottom: 1px solid #f1f5f9;
}

/* ==========================================================================
   5.7 — MAIN HEADER (modern, simple, AdminLTE-friendly)
   ========================================================================== */

/* Logo: flex căn giữa, ảnh + text màu brand đỏ */
.main-header .logo {
    display: flex !important;
    align-items: center;
    padding: 0 15px !important;
    text-decoration: none !important;
}
/* Mặc định: chỉ hiển thị logo-lg, ẩn logo-mini */
.main-header .logo .logo-mini { display: none !important; }
.main-header .logo .logo-lg {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
/* Khi sidebar collapsed: chỉ hiển thị logo-mini */
body.sidebar-collapse .main-header .logo .logo-lg { display: none !important; }
body.sidebar-collapse .main-header .logo .logo-mini {
    display: inline-flex !important;
    align-items: center;
    line-height: 1;
}
.main-header .logo img {
    height: 34px;
    width: 34px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}
.main-header .logo b {
    color: #dc2626 !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.main-header .logo:hover { background: #f8fafc !important; }

/* Sidebar toggle: hover bg nhẹ */
.main-header .navbar .sidebar-toggle:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* User-menu trigger: hover/open có bg */
.main-header .navbar .user-menu > a.dropdown-toggle:hover,
.main-header .navbar .user-menu.open > a.dropdown-toggle {
    background-color: #f1f5f9 !important;
}

/* User dropdown menu: card clean, không border vàng, table sạch sẽ */
.main-header .navbar .user-menu .dropdown-menu {
    width: 320px !important;
    max-width: calc(100vw - 16px);
    padding: 0 !important;
    margin-top: 4px !important;
    overflow: hidden;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06) !important;
    right: 0 !important;
    left: auto !important;
}

/* User-header section (chứa table funds) */
.main-header .navbar .user-menu .dropdown-menu .user-header {
    padding: 14px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    height: auto !important;
}

/* Table funds — clean white, slate text, blue numbers */
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao {
    width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 12.5px !important;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao tr {
    background: transparent !important;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao tr:nth-child(even) td {
    background: #f8fafc !important;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao tr:nth-child(odd) td {
    background: #ffffff !important;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao tr:hover td {
    background: #eff6ff !important;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao td {
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #475569 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao tr:last-child td {
    border-bottom: 0 !important;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao td:first-child {
    color: #64748b !important;
    font-weight: 500;
    width: 60%;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao td:last-child {
    text-align: right;
    color: #0f172a !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao .bi-tong-tien-napquy,
.main-header .navbar .user-menu .dropdown-menu .table-thong-ke-bao-cao .bi-tong-tien {
    color: #2563eb !important;
    font-weight: 700;
}

/* User-footer (buttons row) */
.main-header .navbar .user-menu .dropdown-menu .user-footer {
    padding: 12px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.main-header .navbar .user-menu .dropdown-menu .user-footer::before,
.main-header .navbar .user-menu .dropdown-menu .user-footer::after {
    display: none !important;
}
.main-header .navbar .user-menu .dropdown-menu .user-footer .pull-right,
.main-header .navbar .user-menu .dropdown-menu .user-footer .pull-left {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
.main-header .navbar .user-menu .dropdown-menu .user-footer .text-center {
    width: 100%;
    margin: 0 !important;
}
.main-header .navbar .user-menu .dropdown-menu .user-footer .btn {
    flex: 1 1 0 !important;
    min-width: 0;
    padding: 7px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border-width: 1px !important;
    border-color: transparent !important;
    white-space: nowrap;
    box-shadow: none !important;
}
.main-header .navbar .user-menu .dropdown-menu .user-footer .text-center .btn {
    flex: 1 1 100% !important;
}

/* Mobile (< 768px): ẩn logo header (giữ logo trong sidebar user-panel) */
@media (max-width: 767px) {
    .main-header .logo { display: none !important; }
    .sbay-thong-bao-man-hinh { display: none !important; }
    .main-header .navbar .user-menu > a.dropdown-toggle .hidden-xs { display: none !important; }

    /* User dropdown: gần full-width trên mobile */
    .main-header .navbar .user-menu .dropdown-menu {
        width: calc(100vw - 16px) !important;
        max-width: 360px !important;
        right: 8px !important;
        left: auto !important;
    }
    .main-header .navbar .user-menu .dropdown-menu .user-footer .btn {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
}


/* ==========================================================================
   §6. YELLOW ACCENTS — viền vàng cho boxes/buttons/tables (theme accent)
   ========================================================================== */

/* 6.1 — Boxes / panels / cards / wells / dropdowns */
.box, .panel, .card, .well,
.info-box, .small-box,
.nav-tabs-custom {
    border: 1px solid #fbbf24 !important;
    box-shadow: 0 1px 3px rgba(251,191,36,.12), 0 1px 2px rgba(15,23,42,.04) !important;
}
.modal-content,
.dropdown-menu {
    border: 1px solid #fbbf24 !important;
    box-shadow: 0 10px 25px rgba(15,23,42,.10), 0 0 0 1px rgba(251,191,36,.20) !important;
}

/* 6.2 — Box/panel header accent strip */
.box-header, .panel-heading, .card-header {
    border-bottom: 2px solid #fbbf24 !important;
}

/* 6.3 — Tables yellow border + header strip */
.table, table.dataTable {
    border: 1px solid #fbbf24 !important;
}
.table > thead > tr > th,
table.dataTable thead th {
    border-bottom: 2px solid #fbbf24 !important;
}

/* 6.4 — Buttons yellow border */
.btn,
.btn-default, .btn-default:focus,
.btn-primary, .btn-primary:focus,
.btn-success, .btn-success:focus,
.btn-info, .btn-info:focus,
.btn-warning, .btn-warning:focus,
.btn-danger, .btn-danger:focus,
a.btn, a.btn-default, a.btn-primary, a.btn-success,
a.btn-info, a.btn-warning, a.btn-danger,
button.btn {
    border: 2px solid #fbbf24 !important;
}
.btn:hover,
.btn-default:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
a.btn:hover, button.btn:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(251,191,36,.30) !important;
}
.btn-link, .btn-link:focus, .btn-link:hover {
    border: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   §7. RESPONSIVE & PRINT
   ========================================================================== */

/* 7.1 — Fluid base */
html { font-size: clamp(13px, 0.5vw + 12px, 16px); }
body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* 7.2 — Container fluid spacing */
.content-wrapper, .content { padding: clamp(8px, 1.5vw, 20px) !important; }
.box-body, .panel-body, .card-body { padding: clamp(10px, 1.5vw, 16px); }
.box-header, .panel-heading, .card-header { padding: clamp(8px, 1.5vw, 14px) clamp(10px, 1.5vw, 16px); }

/* 7.3 — Headings fluid */
h1 { font-size: clamp(1.4rem, 2.5vw, 2.2rem); line-height: 1.2; }
h2 { font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.25; }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.3; }
h4 { font-size: clamp(1rem,   1.3vw, 1.25rem); }
h5 { font-size: clamp(0.95rem, 1.1vw, 1.125rem); }
h6 { font-size: clamp(0.9rem,  1vw,   1rem); }

/* 7.4 — Buttons fluid */
.btn {
    font-size: clamp(12px, 1vw + 0.4rem, 15px);
    padding: clamp(5px, 0.8vw, 8px) clamp(10px, 1.5vw, 16px);
}
.btn-sm { font-size: clamp(11px, 0.8vw + 0.3rem, 13px); padding: 4px 10px; }
.btn-lg { font-size: clamp(14px, 1.2vw + 0.5rem, 18px); padding: 10px 20px; }

/* 7.5 — Tables overflow */
.table-responsive,
.box-body > .table,
.panel-body > .table,
.card-body > .table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 7.6 — Image fluid */
img, .img-fluid, .img-responsive { max-width: 100%; height: auto; }

/* 7.7 — Text break (CHỈ áp cho text content, KHÔNG áp cho pagination/button)
   Lý do: số trang lớn (17647) bị bẻ thành 17/64/7 trên 3 dòng nếu áp lên li, a */
p, span, label, td, th, h1, h2, h3, h4, h5, h6,
li:not(.pagination li):not(.pager li):not(.nav li):not(.dropdown-menu li):not(.sidebar-menu li) {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Pagination: số trang luôn nowrap, scroll ngang khi nhiều trang */
.pagination {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    padding: 4px 0;
}
.pagination > li,
.pagination > li > a,
.pagination > li > span,
.pagination > li > button {
    white-space: nowrap !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}
.pagination > li > a,
.pagination > li > span,
.pagination > li > button {
    min-width: 32px;
    text-align: center;
    box-sizing: border-box;
}

/* Pagination button (legacy dùng <button> thay <a>) — style đồng bộ */
.pagination > li > button {
    display: inline-block;
    padding: 6px 12px !important;
    height: auto !important;
    width: auto !important;
    line-height: 1.42857143;
    font-size: 13px;
    color: #475569 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0;
    cursor: pointer !important;
    transition: background-color .15s, color .15s;
}
.pagination > li:first-child > button { border-radius: 4px 0 0 4px; }
.pagination > li:last-child > button { border-radius: 0 4px 4px 0; }
.pagination > li > button:hover:not([disabled]) {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

/* ACTIVE state: trang hiện tại — blue rõ rệt, không bị cursor pointer
   Specificity tăng cao + nhiều selector để thắng legacy CSS */
ul.pagination > li.active > a,
ul.pagination > li.active > span,
ul.pagination > li.active > button,
ul.pagination > li.active > button:hover,
ul.pagination > li.active > button:focus,
ul.pagination > li.active > button:active,
ul.pagination li.active button,
.pagination .active > button,
.pagination .active button {
    background: #2563eb !important;
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
    cursor: default !important;
    z-index: 2;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(37,99,235,.30) !important;
    transform: scale(1.05);
}

/* Pull-right pagination: không float trên mobile, để scroll ngang work đúng */
@media (max-width: 767px) {
    .pagination.pull-right {
        float: none !important;
        display: block !important;
        text-align: center;
        margin-bottom: 12px;
    }
}

/* 7.8 — Menu Mobile/Desktop visibility */
@media (min-width: 768px) {
    .sidebar-menu li:has(> a[href*="-mobile/"]),
    .sidebar-menu li.nav-mobile-only,
    .sidebar-menu li.visible-xs-block { display: none !important; }
}
@media (max-width: 767px) {
    .sidebar-menu li.nav-pc-only,
    .sidebar-menu li.hidden-xs { display: none !important; }
}

/* 7.9 — Mobile (< 768px): sidebar slide-in + table responsive */
@media (max-width: 767px) {
    .main-sidebar {
        position: fixed !important;
        top: 50px;
        left: 0;
        bottom: 0;
        width: 240px;
        z-index: 1100;
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.sidebar-open .main-sidebar {
        transform: translateX(0);
        box-shadow: 2px 0 12px rgba(0,0,0,.3);
    }
    body.sidebar-open::before {
        content: "";
        position: fixed;
        top: 50px;
        left: 240px;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.4);
        z-index: 1099;
    }
    .content-wrapper, .main-footer { margin-left: 0 !important; }

    .main-header .logo {
        width: auto !important;
        min-width: 140px;
        font-size: 16px;
        padding: 0 10px;
    }
    .main-header .navbar { min-height: 45px; margin-left: 0 !important; }
    .main-header .navbar .nav > li > a { padding: 10px 8px; font-size: 13px; }
    .navbar-custom-menu { float: right; }
    .navbar-custom-menu .navbar-nav > li > a { padding: 10px 8px; }
    .user-menu .hidden-xs { display: none !important; }

    .form-control,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="date"], textarea, select {
        width: 100% !important;
        font-size: 16px !important;
        max-width: 100%;
    }
    .form-group { margin-bottom: 12px; }
    label { display: block; margin-bottom: 4px; }
    .form-inline .form-control,
    .form-inline input,
    .form-inline select { display: block; margin-bottom: 8px; }
    .input-group { width: 100%; }
    .btn { width: auto; min-width: 80px; }
    .btn-block { width: 100%; }
    .login-button-main .btn,
    .panel-body form .btn { margin: 4px 4px 4px 0; }

    .box, .panel, .card, .well, .info-box, .small-box {
        border-radius: 4px;
        margin-bottom: 10px;
    }
    .modal-dialog { margin: 8px; width: auto !important; }
    .modal-content { border-radius: 6px; }
    .modal-body { padding: 12px; }

    footer.main-footer {
        text-align: center;
        font-size: 12px;
        padding: 10px;
        position: static !important;
    }
    footer.main-footer a { font-size: 12px !important; }
    body { padding-bottom: 0 !important; }

    input[name="bis"], input[name="StartPoint"], input[name="EndPoint"],
    .danh-sach-nap-quy form .form-control,
    .danh-sach-nap-quy form select,
    .danh-sach-nap-quy form input[type="date"] {
        width: 100% !important;
        margin-bottom: 5px;
    }

    td .sbay-ma-dat-cho,
    td a.btn,
    td button.btn { display: inline-block; margin: 2px; font-size: 12px; }

    .zalo-chat-widget,
    .fb_dialog,
    #fb-customer-chat { bottom: 70px !important; }
}

/* 7.10 — Tablet (768-991px): sidebar collapse */
@media (max-width: 991px) {
    body.sidebar-mini .main-sidebar { width: 0; }
    .main-sidebar {
        z-index: 1050;
        transition: transform .25s;
    }
    body.sidebar-open .main-sidebar { transform: translateX(0); }
    .content-wrapper, .main-footer { margin-left: 0 !important; }

    .box-body, .panel-body, .card-body { overflow-x: auto; }
    table.table, table.dataTable {
        min-width: 0;
        font-size: clamp(11px, 1.4vw, 13px);
    }
    table.table th, table.table td,
    table.dataTable th, table.dataTable td {
        padding: 6px 8px !important;
        white-space: nowrap;
    }
    .col-md-3.info-box-wrap,
    .col-md-4.info-box-wrap,
    .col-lg-3, .col-lg-4 { margin-bottom: 10px; }

    footer.main-footer { position: static !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    body.sidebar-collapse .main-sidebar { transform: translateX(-230px); }
}

/* 7.11 — Sidebar form stack on very narrow widths */
@media (max-width: 380px) {
    .main-sidebar .sidebar-menu > li > form.form-inline,
    .sidebar .sidebar-menu > li > form.form-inline {
        flex-wrap: wrap;
        gap: 4px;
    }
    .main-sidebar .sidebar-menu > li > form.form-inline input.form-control,
    .sidebar .sidebar-menu > li > form.form-inline input.form-control,
    .main-sidebar .sidebar-menu > li > form.form-inline input.btn,
    .sidebar .sidebar-menu > li > form.form-inline input.btn {
        flex: 1 1 100%;
        border-radius: 4px;
        margin-left: 0;
    }
}

/* 7.12 — Pagination mobile */
@media (max-width: 480px) {
    .pagination > li > a, .pagination > li > span {
        padding: 4px 8px;
        font-size: 12px;
    }
    .pagination { font-size: 12px; }
    .main-header .logo .logo-lg { display: none; }
    .main-header .logo .logo-mini { display: inline; }
}

/* 7.13 — Touch-friendly tap targets */
@media (max-width: 767px) and (pointer: coarse) {
    .btn, a.btn, button.btn,
    .pagination > li > a,
    .nav > li > a,
    .sidebar-menu > li > a {
        min-height: 40px;
        min-width: 40px;
    }
    input[type="checkbox"], input[type="radio"] {
        width: 18px; height: 18px;
    }
}

/* 7.14 — Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 7.15 — Print friendly */
@media print {
    header.main-header,
    aside.main-sidebar,
    footer.main-footer,
    .main-sidebar, .main-header,
    .section-notification,
    .zalo-chat-widget,
    #fb-customer-chat,
    .fb_dialog,
    #sbay-toast-host,
    .box-action,
    .pagination,
    .posts_per_page { display: none !important; }
    .content-wrapper, .content { margin-left: 0 !important; padding: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: underline; }
    .box, .panel, .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}


/* ============================================================================
 * 8) SBAY DESIGN SYSTEM — siêu đẹp, siêu cân đối, thống nhất (PC + Tablet + Mobile)
 *    2026-05-07
 *
 *    Bộ nguyên tắc:
 *      - CÂN ĐỐI - KHOẢNG TRẮNG - THỐNG NHẤT - TỶ LỆ
 *      - Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128
 *      - Radius scale: 12 / 16 / 20 / 24 / 32
 *      - Min text: 16px
 *      - Headings clamp() responsive
 *      - 1 màu chính, 1 phụ, 1 nền, 1 text
 *      - Shadow nhẹ (không đậm)
 *      - Animation mềm (transform, opacity)
 *
 *    Cấm tuyệt đối:
 *      - Sửa cấu trúc HTML (chỉ CSS)
 *      - Hiển thị sai / cắt / ẩn số tiền — số phải đầy đủ, không truncate
 *      - Đè lên skin AdminLTE quá mạnh — giữ tương thích PC
 * ============================================================================ */

/* 8.0 — DESIGN TOKENS (single source of truth) */
:root {
    /* Spacing scale — chỉ dùng các giá trị này, KHÔNG random */
    --sbay-s-1:   4px;
    --sbay-s-2:   8px;
    --sbay-s-3:   12px;
    --sbay-s-4:   16px;
    --sbay-s-5:   24px;
    --sbay-s-6:   32px;
    --sbay-s-7:   48px;
    --sbay-s-8:   64px;
    --sbay-s-9:   96px;
    --sbay-s-10:  128px;

    /* Radius scale */
    --sbay-r-sm:  10px;
    --sbay-r-md:  12px;
    --sbay-r-lg:  16px;
    --sbay-r-xl:  20px;
    --sbay-r-2xl: 24px;
    --sbay-r-3xl: 32px;

    /* Color palette — Apple-like clean (giữ tương thích AdminLTE skin-blue-light) */
    --sbay-c-bg:        #f7f8fa;       /* nền site */
    --sbay-c-card:      #ffffff;       /* nền card */
    --sbay-c-fg:        #0f172a;       /* text chính */
    --sbay-c-fg-soft:   #334155;       /* text phụ */
    --sbay-c-muted:     #64748b;       /* text muted */
    --sbay-c-border:    #e5e7eb;       /* viền nhẹ */
    --sbay-c-divider:   #f1f5f9;       /* divider mềm */
    --sbay-c-primary:   #2563eb;       /* xanh chính */
    --sbay-c-primary-h: #1d4ed8;       /* xanh hover */
    --sbay-c-success:   #16a34a;
    --sbay-c-warning:   #f59e0b;
    --sbay-c-danger:    #dc2626;
    --sbay-c-info:      #0ea5e9;

    /* Shadow — soft only */
    --sbay-sh-sm:  0 1px 2px rgba(15, 23, 42, .05);
    --sbay-sh-md:  0 4px 12px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --sbay-sh-lg:  0 10px 28px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
    --sbay-sh-ring: 0 0 0 3px rgba(37, 99, 235, .18);

    /* Motion */
    --sbay-ease:   cubic-bezier(.2, .8, .2, 1);
    --sbay-dur-1:  .15s;
    --sbay-dur-2:  .25s;
    --sbay-dur-3:  .4s;

    /* Typography stack — Inter ưu tiên, fallback system */
    --sbay-font:   "Inter", "Poppins", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, "Helvetica Neue", Arial, "Cuprum",
                   "PingFang SC", "Microsoft YaHei", sans-serif;
    --sbay-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                      Consolas, "Liberation Mono", monospace;
}

/* 8.1 — TYPOGRAPHY GLOBAL — Inter + scale clamp() */
body,
.content,
.content-wrapper,
.content-header {
    font-family: var(--sbay-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.content,
.content p,
.content li,
.content label {
    color: var(--sbay-c-fg);
    line-height: 1.6;
}
/* Heading scale dùng clamp() — đẹp PC + co lại mobile, không cần media query */
.content-header > h1,
.content h1 {
    font-size: clamp(22px, 2.4vw + 8px, 32px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--sbay-c-fg);
}
.content h2 {
    font-size: clamp(20px, 1.8vw + 8px, 26px);
    line-height: 1.25;
    font-weight: 700;
}
.content h3,
.content .box-title,
.content .panel-title {
    font-size: clamp(17px, 1vw + 12px, 20px);
    line-height: 1.3;
    font-weight: 700;
}
.content h4 { font-size: 17px; line-height: 1.4; font-weight: 700; }
.content h5 { font-size: 16px; line-height: 1.45; font-weight: 700; }
.content p,
.content .help-block {
    font-size: 16px;
    line-height: 1.7;
}
.content small,
.content .small {
    font-size: 14px;
    color: var(--sbay-c-muted);
}

/* Inter font — load async qua link Google Fonts. Đặt vào <head> qua CSS @import
 * để không phải sửa header-base-v1.php. Display=swap = không block first paint. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* 8.2 — CONTAINER cân đối — width:min(1200px, 90%) */
.content > .container,
.content-wrapper > .container,
.row-menu-page > .container {
    width: min(1200px, 92%);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* 8.3 — BACKGROUND nhẹ — không đè skin AdminLTE quá mạnh */
.content-wrapper {
    background-color: var(--sbay-c-bg);
}

/* 8.4 — BOX / PANEL premium (toàn site, mọi viewport) */
.content .box,
.content .panel {
    background: var(--sbay-c-card);
    border: 1px solid var(--sbay-c-border);
    border-radius: var(--sbay-r-2xl);   /* 24px */
    box-shadow: var(--sbay-sh-md);
    overflow: hidden;
    transition: box-shadow var(--sbay-dur-2) var(--sbay-ease),
                transform var(--sbay-dur-2) var(--sbay-ease);
}
.content .box:hover,
.content .panel:hover {
    box-shadow: var(--sbay-sh-lg);
}
.content .box-header,
.content .panel-heading {
    padding: var(--sbay-s-4) var(--sbay-s-5);
    background: var(--sbay-c-card);
    border-bottom: 1px solid var(--sbay-c-divider);
}
.content .box-body,
.content .panel-body {
    padding: var(--sbay-s-5);
}
.content .box-footer,
.content .panel-footer {
    padding: var(--sbay-s-3) var(--sbay-s-5);
    background: var(--sbay-c-divider);
    border-top: 1px solid var(--sbay-c-border);
}
/* Variant accent — chỉ 3px border-top, không full-color background */
.content .box.box-primary { border-top: 3px solid var(--sbay-c-primary); }
.content .box.box-success { border-top: 3px solid var(--sbay-c-success); }
.content .box.box-warning { border-top: 3px solid var(--sbay-c-warning); }
.content .box.box-danger  { border-top: 3px solid var(--sbay-c-danger); }
.content .box.box-info    { border-top: 3px solid var(--sbay-c-info); }

/* 8.5 — BUTTON premium — radius 16px, transition mềm */
.content .btn,
.btn-primary, .btn-success, .btn-danger, .btn-warning,
.btn-info, .btn-default {
    border-radius: var(--sbay-r-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform var(--sbay-dur-1) var(--sbay-ease),
                box-shadow var(--sbay-dur-1) var(--sbay-ease),
                background-color var(--sbay-dur-1) var(--sbay-ease);
    box-shadow: var(--sbay-sh-sm);
}
.content .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sbay-sh-md);
}
.content .btn:active {
    transform: translateY(0);
    box-shadow: var(--sbay-sh-sm);
}
.content .btn-primary,
.btn-primary { background: var(--sbay-c-primary); border-color: var(--sbay-c-primary); }
.content .btn-primary:hover,
.btn-primary:hover { background: var(--sbay-c-primary-h); border-color: var(--sbay-c-primary-h); }
.content .btn-success { background: var(--sbay-c-success); border-color: var(--sbay-c-success); }
.content .btn-danger  { background: var(--sbay-c-danger);  border-color: var(--sbay-c-danger); }
.content .btn-warning { background: var(--sbay-c-warning); border-color: var(--sbay-c-warning); color: #1f2937; }
.content .btn-info    { background: var(--sbay-c-info);    border-color: var(--sbay-c-info); }
.content .btn-default {
    background: var(--sbay-c-card);
    border-color: var(--sbay-c-border);
    color: var(--sbay-c-fg);
}
.content .btn-xs, .content .btn-sm {
    border-radius: var(--sbay-r-sm);
}

/* 8.6 — FORM CONTROL premium */
.content .form-control,
.content input.form-control,
.content select.form-control,
.content textarea.form-control {
    border-radius: var(--sbay-r-md);
    border: 1px solid var(--sbay-c-border);
    box-shadow: none;
    transition: border-color var(--sbay-dur-1) var(--sbay-ease),
                box-shadow var(--sbay-dur-1) var(--sbay-ease);
    background: var(--sbay-c-card);
}
.content .form-control:focus {
    border-color: var(--sbay-c-primary);
    box-shadow: var(--sbay-sh-ring);
    outline: none;
}
.content .input-group-addon {
    border-radius: var(--sbay-r-md);
    background: var(--sbay-c-divider);
    border-color: var(--sbay-c-border);
}
.content .form-group { margin-bottom: var(--sbay-s-4); }
.content .form-group label {
    font-weight: 600;
    color: var(--sbay-c-fg);
    margin-bottom: var(--sbay-s-2);
}

/* 8.7 — TABLE polish — radius wrap + zebra mềm + tabular-nums cho cột số */
.content .table {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--sbay-c-card);
    border-radius: var(--sbay-r-lg);
    overflow: hidden;
}
.content .table > thead > tr > th {
    background: var(--sbay-c-divider);
    color: var(--sbay-c-fg);
    font-weight: 700;
    border-bottom: 1px solid var(--sbay-c-border);
    border-top: 0;
}
.content .table > tbody > tr > td {
    border-top: 1px solid var(--sbay-c-divider);
    vertical-align: middle;
}
.content .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: #fafbfc;
}
.content .table-hover > tbody > tr:hover > td {
    background: var(--sbay-c-divider);
}
/* Tabular-nums cho mọi cột số/tiền — bảo vệ hiển thị tiền */
.content .table .text-right,
.content .table td[align="right"],
.content .money,
.content .amount,
.content .so-tien,
.content .tongtien,
.content .danh-sach-nap-quy td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 8.8 — ALERT premium — pastel tone, radius lớn */
.content .alert,
.section-notification .alert {
    border-radius: var(--sbay-r-lg);
    border: 1px solid transparent;
    padding: var(--sbay-s-3) var(--sbay-s-4);
    box-shadow: var(--sbay-sh-sm);
}
.content .alert-success, .section-notification .alert-success { background: #ecfdf5; color: #14532d; border-color: #bbf7d0; }
.content .alert-info,    .section-notification .alert-info    { background: #eff6ff; color: #1e3a8a; border-color: #bfdbfe; }
.content .alert-warning, .section-notification .alert-warning { background: #fffbeb; color: #78350f; border-color: #fde68a; }
.content .alert-danger,  .section-notification .alert-danger  { background: #fef2f2; color: #7f1d1d; border-color: #fecaca; }

/* 8.9 — SECTION RHYTHM — section padding chuẩn theo viewport */
.content {
    padding-top: var(--sbay-s-4);
    padding-bottom: var(--sbay-s-7);   /* 48px breath đáy */
}
.content > .row,
.content-wrapper > .content > .row {
    margin-bottom: var(--sbay-s-5);
}
.content > .row:last-child {
    margin-bottom: 0;
}

/* 8.10 — LINK polish */
.content a:not(.btn):not(.label):not(.dropdown-toggle):not(.navbar-brand):not(.logo) {
    color: var(--sbay-c-primary);
    transition: color var(--sbay-dur-1) var(--sbay-ease);
}
.content a:not(.btn):not(.label):not(.dropdown-toggle):not(.navbar-brand):not(.logo):hover {
    color: var(--sbay-c-primary-h);
}

/* 8.11 — DROPDOWN polish (toàn site) */
.dropdown-menu {
    border-radius: var(--sbay-r-md);
    border: 1px solid var(--sbay-c-border);
    box-shadow: var(--sbay-sh-lg);
    padding: var(--sbay-s-1);
}
.dropdown-menu > li > a {
    border-radius: var(--sbay-r-sm);
    padding: 8px 12px;
    transition: background-color var(--sbay-dur-1) var(--sbay-ease);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--sbay-c-divider);
}

/* 8.12 — IMAGES bo góc nhẹ trong content (không áp logo / icon nhỏ) */
.content .box-body img:not(.img-circle):not(.no-radius):not(.logo-mini):not(.logo-lg),
.content .panel-body img:not(.img-circle):not(.no-radius):not(.logo-mini):not(.logo-lg) {
    border-radius: var(--sbay-r-sm);
    max-width: 100%;
    height: auto;
}

/* 8.13 — SCROLLBAR thin (PC only) — không ảnh hưởng touch device */
@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
        border: 2px solid var(--sbay-c-bg);
    }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
}

/* 8.14 — FOCUS-VISIBLE ring nhất quán a11y */
.content a:focus-visible,
.content .btn:focus-visible,
.content .form-control:focus-visible,
.content button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .55);
    outline-offset: 2px;
    border-radius: var(--sbay-r-sm);
}

/* 8.15 — SECTION SPACING bigger PC, smaller mobile */
@media (min-width: 992px) {
    .content {
        padding-top: var(--sbay-s-5);
        padding-bottom: var(--sbay-s-9);  /* 96px */
    }
    .content > .row { margin-bottom: var(--sbay-s-6); }   /* 32px */
}

/* 8.16 — REDUCED MOTION respect */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 8.17 — PRINT base */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .content .box, .content .panel { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ============================================================================
 * 8.18) PERF & SMOOTHNESS — siêu mượt (2026-05-07)
 *   Thay box-shadow animation bằng pseudo-element opacity để tránh paint storm.
 *   GPU-promote animated elements. Containment hints cho cards.
 *   Mục tiêu: 60fps mọi tương tác, không jank khi scroll/hover/animate.
 * ============================================================================ */

/* 8.18.1 — GPU layer cho mọi element có animation/transition
 * `translateZ(0)` ép browser tạo composite layer, tách khỏi paint chính. */
.content .btn,
.content .box,
.content .panel,
.main-sidebar,
.dropdown-menu {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 8.18.2 — Transition CHỈ dùng transform + opacity (cheap, GPU-only)
 * Override mọi transition cũ có dùng box-shadow / background-color đắt tiền. */
.content .btn {
    transition: transform var(--sbay-dur-1) var(--sbay-ease),
                opacity var(--sbay-dur-1) var(--sbay-ease);
}
.content .btn:hover { transform: translate3d(0, -2px, 0); }
.content .btn:active { transform: translate3d(0, 0, 0); }

/* Box hover shadow → dùng pseudo-element opacity thay box-shadow animation */
.content .box,
.content .panel {
    position: relative;
    transition: transform var(--sbay-dur-2) var(--sbay-ease);
    contain: layout style;
}
.content .box::after,
.content .panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(--sbay-sh-lg);
    opacity: 0;
    transition: opacity var(--sbay-dur-2) var(--sbay-ease);
    pointer-events: none;
    z-index: 0;
}
.content .box:hover::after,
.content .panel:hover::after { opacity: 1; }
.content .box > *,
.content .panel > * { position: relative; z-index: 1; }

/* 8.18.3 — Will-change ONLY cho animated targets (không spam toàn site) */
.main-sidebar { will-change: transform; }

/* 8.18.4 — Containment cho list lớn (table rows, grid cards) — paint isolation */
.content .table > tbody > tr {
    contain: layout style;
}
.content .grid > * {
    contain: layout style;
}

/* 8.18.5 — Smooth scroll toàn site */
html { scroll-behavior: smooth; }

/* 8.18.6 — Image rendering chất lượng + lazy paint */
.content img {
    image-rendering: auto;
    content-visibility: auto;       /* skip paint khi off-screen — Chrome/Edge */
    contain-intrinsic-size: auto 200px;
}

/* 8.18.7 — Touch action trên mobile (tránh delay 300ms tap) */
.content .btn,
.content a,
.content .form-control,
.main-header .sidebar-toggle {
    touch-action: manipulation;
}

/* 8.18.8 — Sidebar slide chỉ dùng transform (không animate left/width) */
@media (max-width: 767px) {
    .main-sidebar {
        transition: transform var(--sbay-dur-2) var(--sbay-ease);
    }
    body:not(.sidebar-open) .main-sidebar {
        transform: translate3d(-100%, 0, 0);
    }
    body.sidebar-open .main-sidebar {
        transform: translate3d(0, 0, 0);
    }
}

/* 8.18.9 — Reduce paint area khi scroll dài (sticky headers paint isolation) */
.wrapper > .main-header,
.content-header {
    contain: layout style;
}

/* 8.18.10 — Animation FPS cap — keyframes chỉ dùng transform/opacity (đã đảm bảo
 * cho logo + menu flash). Không animate width/height/top/left/box-shadow. */

/* 8.18.11 — Defer non-critical animations đến idle */
@media (prefers-reduced-motion: no-preference) {
    .content .box,
    .content .panel {
        animation-fill-mode: both;
    }
}