/* Hallmark · genre: modern-minimal · macrostructure: shared layer (chrome + components) · design-system: design.md · designed-as-app */
/* =============================================================================
   APP v3 — lop giao dien chung cho MOI trang khach (nap trong header.php, SAU
   smm-enhanced.css). Rollback = bo 1 dong <link> trong header.php.
   - Khung (topbar, sidebar, thanh menu duoi mobile, footer): selector tran.
   - Thanh phan trong trang: duoi goc  .page-content:not(.obx)  -> trang /order
     (co .obx) KHONG bi anh huong, order-v3.css van tu lo trang do.
   - Modal nam ngoai .page-content nen duoc scope rieng bang  .modal .
   - Chi doi giao dien: khong dat display cho bat ky id nao JS bat/tat.
   - Token dung chung ten --obx-* voi order-v3.css (cung gia tri, xem design.md).
   ========================================================================== */

/* ---- JetBrains Mono (tu host, OFL: public/fonts/jetbrains-mono/OFL.txt) ---- */
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/jetbrains-mono/jetbrains-mono-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/jetbrains-mono/jetbrains-mono-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- TOKENS (giong het order-v3.css; tuong phan da do, xem design.md) ------ */
:root {
  --obx-paper:       oklch(98.5% 0.004 250);
  --obx-surface:     oklch(99.6% 0.002 250);
  --obx-sunken:      oklch(96.6% 0.006 252);
  --obx-ink:         oklch(24% 0.02 258);
  --obx-ink-2:       oklch(34% 0.018 257);
  --obx-muted:       oklch(49% 0.016 257);
  --obx-rule:        oklch(90% 0.008 255);
  --obx-rule-2:      oklch(80% 0.012 256);
  --obx-accent:      oklch(53% 0.21 258);
  --obx-accent-hover:oklch(47% 0.19 258);
  --obx-accent-ink:  var(--obx-accent);
  --obx-accent-tint: oklch(95.5% 0.025 258);
  --obx-on-accent:   oklch(99.6% 0.002 250);
  --obx-focus:       var(--obx-accent);
  --obx-ok:          oklch(44% 0.1 155);
  --obx-ok-tint:     oklch(95.5% 0.035 155);
  --obx-warn:        oklch(47% 0.1 65);
  --obx-warn-tint:   oklch(95.5% 0.04 80);
  --obx-crit:        oklch(49% 0.17 27);
  --obx-crit-tint:   oklch(96% 0.022 25);
  --obx-graphite:    oklch(22% 0.016 260);
  --obx-g-text:      oklch(94% 0.006 255);
  --obx-g-muted:     oklch(73% 0.014 257);
  --obx-g-rule:      oklch(33% 0.016 260);
  --obx-g-accent:    oklch(76% 0.13 258);
  --obx-shadow-pop:  0 8px 24px oklch(24% 0.02 258 / 0.10), 0 1px 2px oklch(24% 0.02 258 / 0.06);
  --obx-font:        var(--smm-font, "Inter", system-ui, sans-serif);
  --obx-mono:        "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --obx-text-xs: 12px; --obx-text-sm: 13px; --obx-text-base: 14px;
  --obx-text-md: 16px; --obx-text-lg: 20px; --obx-text-xl: 24px; --obx-text-micro: 11px;
  --obx-s0: 2px;  --obx-s1: 4px;  --obx-s2: 8px;  --obx-s3: 12px; --obx-s4: 16px;
  --obx-s5: 20px; --obx-s6: 24px; --obx-s8: 32px; --obx-s10: 40px;
  --obx-r-control: 6px; --obx-r-panel: 10px; --obx-touch: 44px; --obx-control-h: 40px;
  --obx-ease: cubic-bezier(0.16, 1, 0.3, 1); --obx-dur: 160ms;
  /* sidebar toi (giu mau thuong hieu do admin dat; chi chinh trang thai) */
  --obx-nav-text:    oklch(86% 0.012 257);
  --obx-nav-muted:   oklch(72% 0.016 257);
  --obx-nav-hover:   oklch(100% 0 0 / 0.06);
  --obx-nav-active:  oklch(100% 0 0 / 0.10);
  --obx-nav-bar:     oklch(76% 0.13 258);
}
[data-bs-theme="dark"] {
  --obx-paper:       oklch(18% 0.012 260);
  --obx-surface:     oklch(21% 0.014 260);
  --obx-sunken:      oklch(16% 0.012 260);
  --obx-ink:         oklch(95% 0.006 255);
  --obx-ink-2:       oklch(86% 0.01 255);
  --obx-muted:       oklch(72% 0.014 257);
  --obx-rule:        oklch(30% 0.014 258);
  --obx-rule-2:      oklch(40% 0.016 258);
  --obx-accent-ink:  oklch(76% 0.13 258);
  --obx-accent-tint: oklch(28% 0.06 258);
  --obx-focus:       oklch(76% 0.13 258);
  --obx-ok:          oklch(80% 0.13 155);
  --obx-ok-tint:     oklch(27% 0.04 155);
  --obx-warn:        oklch(82% 0.11 75);
  --obx-warn-tint:   oklch(28% 0.04 75);
  --obx-crit:        oklch(78% 0.12 25);
  --obx-crit-tint:   oklch(28% 0.05 25);
  --obx-graphite:    oklch(13% 0.012 260);
  --obx-g-rule:      oklch(28% 0.014 260);
  --obx-shadow-pop:  0 8px 24px oklch(5% 0.01 260 / 0.5);
}

/* ---- NEN + CHU ------------------------------------------------------------ */
body { background: var(--obx-paper) !important; color: var(--obx-ink-2); }
.main-content, .page-content:not(.obx) { background: var(--obx-paper); }
.page-content:not(.obx) { font-size: var(--obx-text-base); letter-spacing: 0; }
.page-content:not(.obx) .text-muted { color: var(--obx-muted) !important; }
.page-content:not(.obx) h1, .page-content:not(.obx) h2, .page-content:not(.obx) h3,
.page-content:not(.obx) h4, .page-content:not(.obx) h5, .page-content:not(.obx) h6 { color: var(--obx-ink); font-style: normal; }
.page-content:not(.obx) a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) { color: var(--obx-accent-ink); }
/* So lieu: tien, ma, so luong -> mono, chu so thang hang */
.page-content:not(.obx) .font-monospace, .page-content:not(.obx) code, .page-content:not(.obx) kbd {
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums;
}
.page-content:not(.obx) code { color: var(--obx-ink); background: var(--obx-sunken); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }

/* ---- VONG FOCUS -----------------------------------------------------------
   Thang rule vendor `a,button{outline:0!important}` (app.min.css). Hien ngay. */
body a:focus-visible, body button:focus-visible, body summary:focus-visible,
body [tabindex]:focus-visible, body .btn:focus-visible, body .nav-link:focus-visible,
body .page-link:focus-visible, body .select2-selection:focus-visible {
  outline: 2px solid var(--obx-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
body .form-control:focus-visible, body .form-select:focus-visible, body .form-check-input:focus-visible {
  outline: 2px solid var(--obx-focus) !important;
  outline-offset: 1px !important;
  border-color: var(--obx-accent) !important;
  box-shadow: none !important;
}
body .app-menu a:focus-visible, body .mobile-bottom-nav a:focus-visible { outline-color: var(--obx-nav-bar) !important; outline-offset: -2px !important; }

/* ---- TOPBAR --------------------------------------------------------------- */
#page-topbar {
  background: var(--obx-surface) !important;
  border-bottom: 1px solid var(--obx-rule) !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#page-topbar .btn-topbar, #page-topbar .light-dark-mode { border-radius: var(--obx-r-control) !important; color: var(--obx-ink-2) !important; transform: none !important; }
#page-topbar .btn-topbar:hover, #page-topbar .light-dark-mode:hover { background: var(--obx-sunken) !important; }
#page-header-user-dropdown { background: transparent !important; border-left: 1px solid var(--obx-rule); border-radius: 0 !important; }
#page-header-user-dropdown:hover { background: var(--obx-sunken) !important; }
#page-topbar .user-name-text { color: var(--obx-ink) !important; font-weight: 600 !important; font-size: var(--obx-text-sm) !important; }
#page-topbar .user-name-sub-text { color: var(--obx-muted) !important; font-size: var(--obx-text-xs) !important; letter-spacing: 0.04em; opacity: 1 !important; }

/* ---- SIDEBAR (nen toi thuong hieu giu nguyen) ----------------------------- */
.app-menu.navbar-menu { border-right: 0 !important; box-shadow: none !important; }
.app-menu .navbar-brand-box { border-bottom: 1px solid oklch(100% 0 0 / 0.08) !important; }
.app-menu .menu-title, .app-menu .menu-title span {
  color: var(--obx-nav-muted) !important; opacity: 1 !important;
  font-size: var(--obx-text-micro) !important; font-weight: 600 !important; letter-spacing: 0.1em !important;
}
.app-menu .navbar-nav .nav-link.menu-link {
  color: var(--obx-nav-text) !important;
  font-size: var(--obx-text-base) !important; font-weight: 500 !important;
  border-radius: var(--obx-r-control) !important;
  min-height: var(--obx-touch);
  box-shadow: none !important;
  transition: background-color var(--obx-dur) var(--obx-ease), color var(--obx-dur) var(--obx-ease) !important;
}
.app-menu .navbar-nav .nav-link.menu-link:hover { background: var(--obx-nav-hover) !important; color: oklch(98% 0.004 255) !important; }
.app-menu .navbar-nav .nav-link.menu-link.active,
.app-menu .navbar-nav .nav-link.menu-link[aria-expanded="true"] {
  background: var(--obx-nav-active) !important;
  color: oklch(99% 0.003 255) !important;
  font-weight: 600 !important;
  box-shadow: inset 2px 0 0 var(--obx-nav-bar) !important;
}
.app-menu .icon-sidebar {
  background: oklch(100% 0 0 / 0.06) !important;
  border: 1px solid oklch(100% 0 0 / 0.08) !important;
  border-radius: var(--obx-r-control) !important;
}
.app-menu .nav-link.menu-link:hover .icon-sidebar,
.app-menu .nav-link.menu-link.active .icon-sidebar { background: oklch(100% 0 0 / 0.10) !important; border-color: oklch(100% 0 0 / 0.14) !important; }
.app-menu .nav-sm .nav-link { color: var(--obx-nav-muted) !important; font-size: var(--obx-text-sm) !important; min-height: 36px; display: flex; align-items: center; }
.app-menu .nav-sm .nav-link:hover, .app-menu .nav-sm .nav-link.active { color: oklch(98% 0.004 255) !important; }
.app-menu .nav-sm .nav-link.active::before { background: var(--obx-nav-bar) !important; }

/* ---- TIEU DE TRANG (page-title-box cua Velzon) ----------------------------- */
.page-content:not(.obx) .page-title-box {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--obx-rule) !important;
}
.page-content:not(.obx) .page-title-box h4,
.page-content:not(.obx) .page-title-box .mb-sm-0 {
  font-size: var(--obx-text-xl) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2;
  color: var(--obx-ink) !important;
}
.page-content:not(.obx) .page-title-box .breadcrumb-item,
.page-content:not(.obx) .page-title-box .breadcrumb-item a,
.page-content:not(.obx) .page-title-box .breadcrumb-item + .breadcrumb-item::before { color: var(--obx-muted) !important; font-size: var(--obx-text-sm) !important; font-weight: 400 !important; opacity: 1 !important; }
.page-content:not(.obx) .page-title-box .breadcrumb-item a:hover { color: var(--obx-ink) !important; }

/* ---- PANEL (card) ---------------------------------------------------------- */
.page-content:not(.obx) .card {
  background: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-panel) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
.page-content:not(.obx) .card:hover { box-shadow: none !important; transform: none !important; }
/* the trong the: bo khung, de duong ke phan nhom */
.page-content:not(.obx) .card .card { border-radius: var(--obx-r-control) !important; background: var(--obx-surface) !important; }
.page-content:not(.obx) .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--obx-rule) !important;
  color: var(--obx-ink) !important;
  font-size: var(--obx-text-md) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.page-content:not(.obx) .card-title, .page-content:not(.obx) .card-header h4, .page-content:not(.obx) .card-header h5, .page-content:not(.obx) .card-header h6 {
  font-size: var(--obx-text-md) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--obx-ink) !important;
}
/* Header to mau + chu trang (bg-primary bg-soft... o 12 trang nap tien/affiliate):
   ve header thuong. Mot mau nhan duy nhat; khoanh khac toi danh cho "hoa don". */
.page-content:not(.obx) .card-header[class*="bg-"] { background: transparent !important; }
.page-content:not(.obx) .card-header[class*="bg-"] .text-white,
.page-content:not(.obx) .card-header.text-white { color: var(--obx-ink) !important; }
.page-content:not(.obx) .card-header[class*="bg-"] p.text-white,
.page-content:not(.obx) .card-header[class*="bg-"] .text-white-50 { color: var(--obx-muted) !important; font-size: var(--obx-text-sm) !important; }
/* Chu trang tung dua vao nen mau cua the -> nen the gio la be mat sang. Giu nguyen khi
   chinh phan tu hoac to tien co lop bg-* (o mau that su). */
.page-content:not(.obx) .card .text-white:not([class*="bg-"]):not([class*="bg-"] .text-white):not(.btn) { color: var(--obx-ink) !important; }
.page-content:not(.obx) .card .text-white-50:not([class*="bg-"] .text-white-50) { color: var(--obx-muted) !important; }
/* Khong viet hoa bang CSS (design.md · Type rules) */
.page-content:not(.obx) .text-uppercase, .modal .text-uppercase { text-transform: none !important; letter-spacing: 0 !important; }
.page-content:not(.obx) .card-footer { background: transparent !important; border-top: 1px solid var(--obx-rule) !important; }
.page-content:not(.obx) .border-dashed, .page-content:not(.obx) .border-bottom-dashed { border-style: solid !important; border-color: var(--obx-rule) !important; }

/* ---- NUT ----------------------------------------------------------------- */
.page-content:not(.obx) .btn, .modal .btn {
  border-radius: var(--obx-r-control) !important;
  font-family: var(--obx-font) !important;
  font-size: var(--obx-text-base) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color var(--obx-dur) var(--obx-ease), border-color var(--obx-dur) var(--obx-ease), color var(--obx-dur) var(--obx-ease) !important;
}
.page-content:not(.obx) .btn:not(.btn-sm):not(.btn-icon):not(.btn-link),
.modal .btn:not(.btn-sm):not(.btn-icon):not(.btn-link):not(.btn-close) { min-height: var(--obx-control-h); }
.page-content:not(.obx) .btn:active, .modal .btn:active { transform: translateY(1px) !important; }
.page-content:not(.obx) .btn:disabled, .page-content:not(.obx) .btn.disabled,
.modal .btn:disabled, .modal .btn.disabled { opacity: 1 !important; background: var(--obx-sunken) !important; border-color: var(--obx-rule) !important; color: var(--obx-muted) !important; }
.page-content:not(.obx) .btn .waves-ripple, .modal .btn .waves-ripple { display: none !important; }
/* Chinh: nen accent dac */
.page-content:not(.obx) .btn-primary, .modal .btn-primary {
  background: var(--obx-accent) !important;
  border: 1px solid var(--obx-accent) !important;
  color: var(--obx-on-accent) !important;
}
.page-content:not(.obx) .btn-primary:hover, .modal .btn-primary:hover { background: var(--obx-accent-hover) !important; border-color: var(--obx-accent-hover) !important; }
/* Phu: nen be mat + vien manh */
.page-content:not(.obx) :is(.btn-light, .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-ghost-primary, .btn-ghost-secondary, .btn-soft-primary, .btn-soft-secondary, .btn-soft-dark, .btn-white),
.modal :is(.btn-light, .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-ghost-primary, .btn-ghost-secondary, .btn-soft-primary, .btn-soft-secondary, .btn-soft-dark, .btn-white) {
  background: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule-2) !important;
  color: var(--obx-ink) !important;
}
.page-content:not(.obx) :is(.btn-light, .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-ghost-primary, .btn-ghost-secondary, .btn-soft-primary, .btn-soft-secondary, .btn-soft-dark, .btn-white):hover,
.modal :is(.btn-light, .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-ghost-primary, .btn-ghost-secondary, .btn-soft-primary, .btn-soft-secondary, .btn-soft-dark, .btn-white):hover {
  background: var(--obx-sunken) !important; border-color: var(--obx-rule-2) !important; color: var(--obx-ink) !important;
}
/* Tich cuc (copy, xac nhan) */
.page-content:not(.obx) :is(.btn-success, .btn-outline-success, .btn-soft-success),
.modal :is(.btn-success, .btn-outline-success, .btn-soft-success) {
  background: var(--obx-ok-tint) !important; border: 1px solid color-mix(in oklch, var(--obx-ok) 30%, transparent) !important; color: var(--obx-ok) !important;
}
.page-content:not(.obx) :is(.btn-success, .btn-outline-success, .btn-soft-success):hover,
.modal :is(.btn-success, .btn-outline-success, .btn-soft-success):hover { border-color: var(--obx-ok) !important; }
/* Pha huy: khong bao gio la nut do dac */
.page-content:not(.obx) :is(.btn-danger, .btn-outline-danger, .btn-soft-danger),
.modal :is(.btn-danger, .btn-outline-danger, .btn-soft-danger) {
  background: var(--obx-crit-tint) !important; border: 1px solid color-mix(in oklch, var(--obx-crit) 30%, transparent) !important; color: var(--obx-crit) !important;
}
.page-content:not(.obx) :is(.btn-danger, .btn-outline-danger, .btn-soft-danger):hover,
.modal :is(.btn-danger, .btn-outline-danger, .btn-soft-danger):hover { border-color: var(--obx-crit) !important; }
.page-content:not(.obx) :is(.btn-warning, .btn-outline-warning, .btn-soft-warning),
.modal :is(.btn-warning, .btn-outline-warning, .btn-soft-warning) {
  background: var(--obx-warn-tint) !important; border: 1px solid color-mix(in oklch, var(--obx-warn) 30%, transparent) !important; color: var(--obx-warn) !important;
}
.page-content:not(.obx) :is(.btn-info, .btn-outline-info, .btn-soft-info),
.modal :is(.btn-info, .btn-outline-info, .btn-soft-info) {
  background: var(--obx-accent-tint) !important; border: 1px solid color-mix(in oklch, var(--obx-accent) 25%, transparent) !important; color: var(--obx-accent-ink) !important;
}
.page-content:not(.obx) .btn-dark, .modal .btn-dark { background: var(--obx-graphite) !important; border: 1px solid var(--obx-graphite) !important; color: var(--obx-g-text) !important; }
.page-content:not(.obx) .btn-link { color: var(--obx-accent-ink) !important; background: none !important; border: 0 !important; }

/* ---- FORM ----------------------------------------------------------------- */
.page-content:not(.obx) .form-label, .modal .form-label {
  color: var(--obx-ink) !important;
  font-size: var(--obx-text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.page-content:not(.obx) :is(.form-control, .form-select), .modal :is(.form-control, .form-select) {
  background-color: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule-2) !important;
  border-radius: var(--obx-r-control) !important;
  color: var(--obx-ink) !important;
  font-size: var(--obx-text-base) !important;
  box-shadow: none !important;
}
.page-content:not(.obx) :is(input.form-control, .form-select):not(.form-control-sm):not(.form-select-sm),
.modal :is(input.form-control, .form-select):not(.form-control-sm):not(.form-select-sm) { min-height: var(--obx-control-h); }
.page-content:not(.obx) .form-control::placeholder, .modal .form-control::placeholder { color: var(--obx-muted) !important; opacity: 1; }
.page-content:not(.obx) :is(.form-control, .form-select):hover, .modal :is(.form-control, .form-select):hover { border-color: var(--obx-muted) !important; }
.page-content:not(.obx) :is(.form-control, .form-select):focus, .modal :is(.form-control, .form-select):focus { border-color: var(--obx-accent) !important; box-shadow: 0 0 0 1px var(--obx-accent) !important; }
/* readonly cua o chon ngay (flatpickr) van la o nhap binh thuong -> khong to xam */
.page-content:not(.obx) :is(.form-control, .form-select):disabled, .page-content:not(.obx) .form-control[readonly]:not(.flatpickr-input):not([data-provider]):not([name="time"]):not(.flatpickr-input + input),
.modal :is(.form-control, .form-select):disabled, .modal .form-control[readonly]:not(.flatpickr-input):not([data-provider]):not([name="time"]):not(.flatpickr-input + input) { background-color: var(--obx-sunken) !important; color: var(--obx-ink-2) !important; }
.page-content:not(.obx) .input-group-text, .modal .input-group-text {
  background: var(--obx-sunken) !important; border: 1px solid var(--obx-rule-2) !important; color: var(--obx-muted) !important; border-radius: var(--obx-r-control) !important;
}
/* Cac o tim kiem co icon ben trai (.search-box) cua Velzon */
.page-content:not(.obx) .search-box .search-icon { color: var(--obx-muted) !important; }
.page-content:not(.obx) .form-check-input:checked { background-color: var(--obx-accent) !important; border-color: var(--obx-accent) !important; }
.page-content:not(.obx) .form-text, .page-content:not(.obx) small.text-muted { color: var(--obx-muted) !important; font-size: var(--obx-text-xs) !important; }
.page-content:not(.obx) .text-danger:not(.btn) { color: var(--obx-crit) !important; }
.page-content:not(.obx) .text-success:not(.btn) { color: var(--obx-ok) !important; }
.page-content:not(.obx) .text-warning:not(.btn) { color: var(--obx-warn) !important; }
.page-content:not(.obx) .text-primary:not(.btn), .page-content:not(.obx) .text-info:not(.btn) { color: var(--obx-accent-ink) !important; }
/* select2 (Velzon) ngoai /order */
.page-content:not(.obx) .select2-container--default .select2-selection--single,
.page-content:not(.obx) .select2-container--default .select2-selection--multiple {
  background: var(--obx-surface) !important; border: 1px solid var(--obx-rule-2) !important; border-radius: var(--obx-r-control) !important; min-height: var(--obx-control-h); box-shadow: none !important;
}

/* ---- BANG ----------------------------------------------------------------- */
.page-content:not(.obx) .table, .modal .table {
  --vz-table-bg: transparent;
  --vz-table-color: var(--obx-ink-2);
  --vz-table-border-color: var(--obx-rule);
  --vz-table-striped-bg: transparent;
  --vz-table-striped-color: var(--obx-ink-2);
  --vz-table-hover-bg: var(--obx-sunken);
  --vz-table-hover-color: var(--obx-ink);
  --vz-table-active-bg: var(--obx-accent-tint);
  font-size: var(--obx-text-sm) !important;
  color: var(--obx-ink-2);
}
.page-content:not(.obx) .table > thead, .page-content:not(.obx) .table > thead.table-dark,
.page-content:not(.obx) .table > thead.table-light, .modal .table > thead {
  --vz-table-bg: var(--obx-sunken);
  --vz-table-color: var(--obx-ink-2);
  --vz-table-border-color: var(--obx-rule);
}
.page-content:not(.obx) .table > thead th, .modal .table > thead th {
  background: var(--obx-sunken) !important;
  color: var(--obx-ink-2) !important;
  font-family: var(--obx-font) !important;
  font-size: var(--obx-text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border-color: var(--obx-rule) !important;
  border-bottom: 1px solid var(--obx-rule-2) !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.page-content:not(.obx) .table > thead th i, .modal .table > thead th i { color: var(--obx-muted) !important; }
.page-content:not(.obx) .table > tbody > tr > td, .modal .table > tbody > tr > td {
  border-color: var(--obx-rule) !important;
  color: var(--obx-ink-2);
  background: transparent !important;
  box-shadow: none !important;
}
.page-content:not(.obx) .table-hover > tbody > tr:hover > td, .modal .table-hover > tbody > tr:hover > td { background: var(--obx-sunken) !important; color: var(--obx-ink) !important; }
.page-content:not(.obx) .table-bordered > :not(caption) > * > * { border-color: var(--obx-rule) !important; }
/* bang nam sat mep the (.table-card) giu vien tron cua panel */
.page-content:not(.obx) .table-card { border-radius: 0 0 var(--obx-r-panel) var(--obx-r-panel); }
.page-content:not(.obx) .table-responsive { scrollbar-width: thin; }

/* ---- BADGE TRANG THAI (mot bang anh xa cho moi trang; design.md) ---------- */
.page-content:not(.obx) .badge, .modal .badge {
  border-radius: var(--obx-r-control) !important;
  font-family: var(--obx-font) !important;
  font-size: var(--obx-text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 3px 8px !important;
  box-shadow: none !important;
  line-height: 1.4;
}
.page-content:not(.obx) .badge:is(.bg-success, .bg-success-subtle, .badge-soft-success, .text-bg-success),
.modal .badge:is(.bg-success, .bg-success-subtle, .badge-soft-success, .text-bg-success) {
  background: var(--obx-ok-tint) !important; color: var(--obx-ok) !important; border: 1px solid color-mix(in oklch, var(--obx-ok) 28%, transparent) !important;
}
.page-content:not(.obx) .badge:is(.bg-warning, .bg-warning-subtle, .badge-soft-warning, .text-bg-warning),
.modal .badge:is(.bg-warning, .bg-warning-subtle, .badge-soft-warning, .text-bg-warning) {
  background: var(--obx-warn-tint) !important; color: var(--obx-warn) !important; border: 1px solid color-mix(in oklch, var(--obx-warn) 28%, transparent) !important;
}
.page-content:not(.obx) .badge:is(.bg-danger, .bg-danger-subtle, .badge-soft-danger, .text-bg-danger),
.modal .badge:is(.bg-danger, .bg-danger-subtle, .badge-soft-danger, .text-bg-danger) {
  background: var(--obx-crit-tint) !important; color: var(--obx-crit) !important; border: 1px solid color-mix(in oklch, var(--obx-crit) 28%, transparent) !important;
}
.page-content:not(.obx) .badge:is(.bg-info, .bg-info-subtle, .badge-soft-info, .bg-primary, .bg-primary-subtle, .badge-soft-primary, .text-bg-info, .text-bg-primary),
.modal .badge:is(.bg-info, .bg-info-subtle, .badge-soft-info, .bg-primary, .bg-primary-subtle, .badge-soft-primary, .text-bg-info, .text-bg-primary) {
  background: var(--obx-accent-tint) !important; color: var(--obx-accent-ink) !important; border: 1px solid color-mix(in oklch, var(--obx-accent) 24%, transparent) !important;
}
.page-content:not(.obx) .badge:is(.bg-secondary, .bg-secondary-subtle, .badge-soft-secondary, .bg-light, .bg-dark, .bg-dark-subtle, .text-bg-secondary, .text-bg-light, .text-bg-dark),
.modal .badge:is(.bg-secondary, .bg-secondary-subtle, .badge-soft-secondary, .bg-light, .bg-dark, .bg-dark-subtle, .text-bg-secondary, .text-bg-light, .text-bg-dark) {
  background: var(--obx-sunken) !important; color: var(--obx-ink-2) !important; border: 1px solid var(--obx-rule-2) !important;
}

/* ---- THONG BAO (alert) ----------------------------------------------------- */
.page-content:not(.obx) .alert, .modal .alert {
  border-radius: var(--obx-r-panel) !important;
  border: 1px solid var(--obx-rule) !important;
  background: var(--obx-sunken) !important;
  color: var(--obx-ink-2) !important;
  font-size: var(--obx-text-base) !important;
  box-shadow: none !important;
}
.page-content:not(.obx) .alert:is(.alert-primary, .alert-info), .modal .alert:is(.alert-primary, .alert-info) { background: var(--obx-accent-tint) !important; border-color: color-mix(in oklch, var(--obx-accent) 22%, transparent) !important; }
.page-content:not(.obx) .alert-success, .modal .alert-success { background: var(--obx-ok-tint) !important; border-color: color-mix(in oklch, var(--obx-ok) 25%, transparent) !important; }
.page-content:not(.obx) .alert-warning, .modal .alert-warning { background: var(--obx-warn-tint) !important; border-color: color-mix(in oklch, var(--obx-warn) 25%, transparent) !important; }
.page-content:not(.obx) .alert-danger, .modal .alert-danger { background: var(--obx-crit-tint) !important; border-color: color-mix(in oklch, var(--obx-crit) 25%, transparent) !important; }
.page-content:not(.obx) .alert :is(.alert-heading, strong, b), .modal .alert :is(.alert-heading, strong, b) { color: var(--obx-ink) !important; }

/* ---- TAB / PILL ------------------------------------------------------------ */
.page-content:not(.obx) .nav-tabs, .page-content:not(.obx) .nav-tabs-custom { border-bottom: 1px solid var(--obx-rule) !important; }
.page-content:not(.obx) :is(.nav-tabs, .nav-tabs-custom) .nav-link {
  color: var(--obx-muted) !important; font-weight: 500 !important; font-size: var(--obx-text-base) !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; min-height: var(--obx-touch);
  box-shadow: inset 0 -2px 0 transparent !important;
}
.page-content:not(.obx) :is(.nav-tabs, .nav-tabs-custom) .nav-link:hover { color: var(--obx-ink) !important; }
.page-content:not(.obx) :is(.nav-tabs, .nav-tabs-custom) .nav-link.active { color: var(--obx-ink) !important; box-shadow: inset 0 -2px 0 var(--obx-accent) !important; }
.page-content:not(.obx) :is(.nav-tabs, .nav-tabs-custom) .nav-link::after { display: none !important; }
.page-content:not(.obx) .nav-pills .nav-link { border-radius: var(--obx-r-control) !important; color: var(--obx-ink-2) !important; font-weight: 500 !important; }
.page-content:not(.obx) .nav-pills .nav-link.active { background: var(--obx-accent-tint) !important; color: var(--obx-accent-ink) !important; box-shadow: none !important; }

/* ---- PHAN TRANG ------------------------------------------------------------ */
.page-content:not(.obx) .pagination .page-link {
  border-radius: var(--obx-r-control) !important; border: 1px solid var(--obx-rule) !important;
  color: var(--obx-ink-2) !important; background: var(--obx-surface) !important;
  min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--obx-mono); font-size: var(--obx-text-sm) !important; box-shadow: none !important; margin: 0 2px;
}
.page-content:not(.obx) .pagination .page-link:hover { background: var(--obx-sunken) !important; }
.page-content:not(.obx) .pagination .page-item.active .page-link { background: var(--obx-accent) !important; border-color: var(--obx-accent) !important; color: var(--obx-on-accent) !important; }
.page-content:not(.obx) .pagination .page-item.disabled .page-link { color: var(--obx-muted) !important; background: var(--obx-sunken) !important; }

/* ---- DROPDOWN + MODAL ------------------------------------------------------ */
.dropdown-menu { animation: none !important; border: 1px solid var(--obx-rule) !important; border-radius: var(--obx-r-panel) !important; box-shadow: var(--obx-shadow-pop) !important; background: var(--obx-surface) !important; }
.dropdown-item { border-radius: var(--obx-r-control) !important; color: var(--obx-ink-2) !important; font-size: var(--obx-text-base) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--obx-sunken) !important; color: var(--obx-ink) !important; }
.dropdown-item:hover i { color: inherit !important; }
.modal-content { border: 1px solid var(--obx-rule) !important; border-radius: var(--obx-r-panel) !important; box-shadow: var(--obx-shadow-pop) !important; background: var(--obx-surface) !important; }
.modal-header { border-bottom: 1px solid var(--obx-rule) !important; background: transparent !important; }
.modal-header .modal-title, .modal-title { color: var(--obx-ink) !important; font-size: var(--obx-text-md) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
.modal-footer { border-top: 1px solid var(--obx-rule) !important; }
.modal-backdrop.show { opacity: 0.45 !important; }

/* ---- TRANG RONG (no results) ------------------------------------------------ */
.page-content:not(.obx) .noresult h5, .page-content:not(.obx) .noresult h6 { color: var(--obx-ink) !important; font-weight: 600 !important; }

/* ---- THANH MENU DUOI (mobile) --------------------------------------------- */
.mobile-bottom-nav {
  background: var(--obx-surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-top: 1px solid var(--obx-rule) !important;
}
.mobile-bottom-nav .nav-item a { color: var(--obx-muted) !important; border-radius: var(--obx-r-control) !important; min-height: var(--obx-touch); transition: color var(--obx-dur) var(--obx-ease) !important; }
.mobile-bottom-nav .nav-item a:hover, .mobile-bottom-nav .nav-item.active a { color: var(--obx-accent-ink) !important; }
.mobile-bottom-nav .nav-item.active a::before { background: var(--obx-accent) !important; border-radius: 0 0 2px 2px !important; }
.mobile-bottom-nav .nav-item.active .nav-icon { background: var(--obx-accent-tint) !important; }
.mobile-bottom-nav .nav-text { font-size: var(--obx-text-micro) !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.mobile-bottom-nav .nav-item-center .nav-text { color: var(--obx-ink-2) !important; }
.mobile-bottom-nav .nav-icon-center {
  background: var(--obx-accent) !important;
  border-radius: var(--obx-r-panel) !important;
  box-shadow: none !important;
  border: 3px solid var(--obx-surface) !important;
  transform: none !important;
}
.mobile-bottom-nav .nav-item-center:hover .nav-icon-center { background: var(--obx-accent-hover) !important; box-shadow: none !important; transform: none !important; }

/* ---- FOOTER + NUT LEN DAU TRANG ------------------------------------------- */
.footer { background: transparent !important; border-top: 1px solid var(--obx-rule) !important; color: var(--obx-muted) !important; font-size: var(--obx-text-sm) !important; }
#back-to-top {
  /* nut phu (khong dung than chi: moi trang chi mot khoanh khac toi) */
  background: var(--obx-surface) !important; border: 1px solid var(--obx-rule-2) !important; color: var(--obx-ink) !important;
  border-radius: var(--obx-r-control) !important; box-shadow: var(--obx-shadow-pop) !important; transition: background-color var(--obx-dur) var(--obx-ease) !important;
}
#back-to-top:hover { background: var(--obx-sunken) !important; animation: none !important; } /* vendor: nhun 1.5s vo han */
/* Vendor dat bottom:100px -> che nut cuoi trang tren trang ngan. Mobile giu cho thanh menu duoi. */
@media (min-width: 992px) { #back-to-top { bottom: 24px !important; right: 24px !important; } }

/* ---- GIAM CHUYEN DONG ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---- O MAT KHAU: nut hien/an la tien ich, khong phai lien ket -> mau muted ---- */
.page-content:not(.obx) .btn-link.password-addon, .page-content:not(.obx) .password-addon { color: var(--obx-muted) !important; }

/* ---- BANG SAT MEP PANEL: card-body dem 20px, Velzon .table-card chi keo -16px -> ho 4px ---- */
.page-content:not(.obx) .card-body > .table-card, .page-content:not(.obx) .card-body > div > .table-card { margin-left: -20px !important; margin-right: -20px !important; }
.page-content:not(.obx) .table-card > .table { margin-bottom: 0 !important; }

/* ---- VUNG CHAM 44px tren man <= 768px (design.md) ---- */
@media (max-width: 768px) {
  .page-content:not(.obx) :is(.btn:not(.btn-link):not(.btn-close), .form-control:not(textarea), .form-select),
  .modal :is(.btn:not(.btn-link):not(.btn-close), .form-control:not(textarea), .form-select) { min-height: var(--obx-touch); }
  .page-content:not(.obx) .pagination .page-link { min-width: var(--obx-touch); min-height: var(--obx-touch); }
}

/* ---- KHONG HIEU UNG XUAT HIEN (design.md · Motion). smm-enhanced.css chay smmFadeUp tren
   .container-fluid; transform con lai lam position:fixed ben trong (thanh chon don /orders)
   bi tinh theo container thay vi man hinh. ---- */
.page-content:not(.obx) > .container-fluid { animation: none !important; transform: none !important; opacity: 1 !important; }

/* ===================== TRANG: a-ledger (scope body[data-page]) ===================== */
/* Hallmark · design-system: design.md · designed-as-app · group: a-ledger */
/* =============================================================================
   NHOM A — trang danh sach (Ledger) + ticket-detail (Split Studio).
   Chi doi giao dien. Khong dat display cho id/class ma JS bat/tat
   (#bulkActionToolbar dung class .show; #orderIdField dung .show()/.hide();
   .service-name-full/.service-name-short, .btn-spinner/.btn-text dung d-none).
   ========================================================================== */

/* Hallmark · genre: modern-minimal · macrostructure: Ledger · design-system: design.md · designed-as-app · page: orders */
/* Hallmark · genre: modern-minimal · macrostructure: Ledger · design-system: design.md · designed-as-app · page: transactions */
/* Hallmark · genre: modern-minimal · macrostructure: Ledger · design-system: design.md · designed-as-app · page: logs */
/* Hallmark · genre: modern-minimal · macrostructure: Ledger · design-system: design.md · designed-as-app · page: support-tickets */
/* Hallmark · genre: modern-minimal · macrostructure: Ledger · design-system: design.md · designed-as-app · page: service-updates */

/* ---- LEDGER: phan dung chung cho 5 trang danh sach ------------------------- */

/* Bo hieu ung "fade up" cua smm-enhanced.css (design.md: khong co entrance
   animation). No con de lai transform tren .container-fluid, bien container
   thanh khung chua cua moi phan tu position:fixed ben trong (vd thanh chon
   nhieu don o /orders). */
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"], [data-page="ticket-detail"]) .page-content > .container-fluid {
  animation: none !important;
  transform: none !important;
}

/* Panel chua bang: tieu de gon, khong khoang trong thua */
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-header {
  padding: 14px 20px !important;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-header .card-title i {
  color: var(--obx-muted) !important;
  font-size: var(--obx-text-md);
}

/* Dai loc (filter strip): mot dai gon o dau bang, cung mat voi panel */
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle {
  background: var(--obx-surface) !important;
  border-width: 0 0 1px 0 !important;
  border-style: solid !important;
  border-color: var(--obx-rule) !important;
  padding: 16px 20px !important;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle form .row.g-3 {
  --vz-gutter-x: 8px;
  --vz-gutter-y: 8px;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle form .row.mt-3 {
  margin-top: 12px !important;
  row-gap: 8px;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle form .row.mt-3 .form-label,
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle form .form-label.mb-0 {
  color: var(--obx-muted) !important;
  white-space: nowrap;
}
/* >= 768px: cac o loc chay thanh mot dai luoi deu nhau, nut chiem 2 o */
@media (min-width: 768px) {
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle form .row.g-3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin: 0 !important;
  }
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle form .row.g-3 > * {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle form .row.g-3 > :has(.btn),
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle form .row.g-3 > :has(select[name="limit"]) {
    grid-column: span 2;
  }
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle form .row.g-3 > :has(.btn) > .d-flex {
    gap: 8px !important;
  }
}

/* Bang = ca trang: mat do vua, chu so mono, canh le theo panel */
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > :not(caption) > * > * {
  padding: 10px 12px;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > :not(caption) > * > :first-child { padding-left: 20px; }
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > :not(caption) > * > :last-child { padding-right: 20px; }
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > thead th {
  letter-spacing: 0 !important;
  vertical-align: middle;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > tbody > tr > td {
  color: var(--obx-ink-2);
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > tbody > tr:last-child > td {
  border-bottom-width: 0 !important;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table-responsive {
  overscroll-behavior-x: contain;
}

/* Trang rong: khong minh hoa dong (design.md: app pages khong enrichment) */
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table lord-icon {
  display: none !important;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table td > .text-center.p-3 {
  padding: 40px 16px !important;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table td > .text-center.p-3 h5 {
  margin: 0 0 4px !important;
  font-size: var(--obx-text-md) !important;
  font-weight: 600 !important;
  color: var(--obx-ink) !important;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table td > .text-center.p-3 p {
  font-size: var(--obx-text-base);
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > tbody > tr:has(> td[colspan]):hover > td {
  background: transparent !important;
}

/* Phan trang: canh giua, cach bang mot nhip */
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .pagination {
  margin-top: 16px;
  margin-bottom: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}

/* Hang so lieu (orders, support-tickets): 4 o -> MOT dai hairline, khong the noi.
   Cot .col-lg-3 dau tien..thu 4 cua hang; icon trung tinh, so mono. */
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(-n+4):has(.avatar-sm) {
  flex: 0 0 auto;
  width: calc((100% - var(--vz-gutter-x, 24px)) / 4);
  padding: 0 !important;
  margin: 0 0 24px 0;
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:first-child:has(.avatar-sm) {
  margin-left: calc(var(--vz-gutter-x, 24px) * 0.5);
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(-n+4):has(.avatar-sm) > .card {
  height: 100%;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left-width: 0 !important;
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(1):has(.avatar-sm) > .card {
  border-left-width: 1px !important;
  border-radius: var(--obx-r-panel) 0 0 var(--obx-r-panel) !important;
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(4):has(.avatar-sm) > .card {
  border-radius: 0 var(--obx-r-panel) var(--obx-r-panel) 0 !important;
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .col-lg-3 > .card > .card-body:has(> .avatar-sm) {
  padding: 16px 20px !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .col-lg-3 .avatar-sm {
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto;
  order: 2;
  margin-left: auto;
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .col-lg-3 .avatar-sm .avatar-title {
  background: transparent !important;
  border: 0 !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--obx-muted) !important;
  font-size: 18px !important;
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .col-lg-3 .avatar-sm :is(i, svg) {
  color: var(--obx-muted) !important;
  fill: none !important;
  width: 18px;
  height: 18px;
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .col-lg-3 .card-body .flex-grow-1 {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  min-width: 0;
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .col-lg-3 .card-body h5.fs-15 {
  margin: 0 !important;
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-xl) !important;
  font-weight: 600 !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--obx-ink) !important;
}
body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .col-lg-3 .card-body p.text-muted {
  font-size: var(--obx-text-sm) !important;
  font-weight: 500;
  color: var(--obx-muted) !important;
}
/* < 992px: dai 2 x 2, van la mot khoi hairline */
@media (max-width: 991.98px) {
  body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(-n+4):has(.avatar-sm) {
    width: calc((100% - var(--vz-gutter-x, 24px)) / 2);
    margin-bottom: 0;
  }
  body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(3):has(.avatar-sm) {
    margin-left: calc(var(--vz-gutter-x, 24px) * 0.5);
  }
  body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(n+3):nth-child(-n+4):has(.avatar-sm) {
    margin-bottom: 24px;
  }
  body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(n+3):nth-child(-n+4):has(.avatar-sm) > .card {
    border-top-width: 0 !important;
  }
  body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(1):has(.avatar-sm) > .card { border-radius: var(--obx-r-panel) 0 0 0 !important; }
  body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(2):has(.avatar-sm) > .card { border-radius: 0 var(--obx-r-panel) 0 0 !important; }
  body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(3):has(.avatar-sm) > .card { border-left-width: 1px !important; border-radius: 0 0 0 var(--obx-r-panel) !important; }
  body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .row > .col-lg-3:nth-child(4):has(.avatar-sm) > .card { border-radius: 0 0 var(--obx-r-panel) 0 !important; }
  body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .col-lg-3 > .card > .card-body:has(> .avatar-sm) { padding: 12px 14px !important; }
  body:is([data-page="orders"], [data-page="support-tickets"]) .page-content .col-lg-3 .card-body h5.fs-15 { font-size: var(--obx-text-lg) !important; }
}

/* Cham (<= 768px): moi dich cham >= 44px */
@media (max-width: 768px) {
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"], [data-page="ticket-detail"]) .page-content .btn {
    min-height: var(--obx-touch) !important;
    min-width: var(--obx-touch);
  }
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"], [data-page="ticket-detail"]) .page-content :is(input.form-control, .form-select) {
    min-height: var(--obx-touch) !important;
  }
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .pagination .page-link {
    min-width: var(--obx-touch) !important;
    min-height: var(--obx-touch) !important;
  }
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-header {
    padding: 12px 16px !important;
  }
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle {
    padding: 12px 16px !important;
  }
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > :not(caption) > * > :first-child { padding-left: 16px; }
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > :not(caption) > * > :last-child { padding-right: 16px; }
}

/* ===========================================================================
   Hallmark · genre: modern-minimal · macrostructure: Ledger · design-system: design.md · designed-as-app · page: orders
   Graphite moment: thanh chon nhieu don (#bulkActionToolbar).
   ========================================================================= */
body[data-page="orders"] .page-content .table > thead th i { display: none !important; } /* icon trang tri trong tieu de cot */
body[data-page="orders"] .page-content .table > thead th:nth-child(4) { text-align: left !important; }
body[data-page="orders"] .page-content .table > thead th:is(:nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11)) { text-align: right !important; }
body[data-page="orders"] .page-content .table > thead th:is(:first-child, :nth-child(7), :last-child) { text-align: center !important; }

/* Ma don: o copy -> chu mono doc duoc (inline style dat 10px) */
body[data-page="orders"] .page-content .table .copy-trans-id {
  width: 124px !important;
  min-width: 124px;
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-sm) !important;
  font-weight: 600 !important;
  color: var(--obx-ink) !important;
  background-color: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule) !important;
  min-height: 32px !important;
  height: 32px;
  padding: 4px 8px !important;
  transform: none !important;
  transition: background-color var(--obx-dur) var(--obx-ease), border-color var(--obx-dur) var(--obx-ease) !important;
}
body[data-page="orders"] .page-content .table .copy-trans-id:hover {
  background-color: var(--obx-accent-tint) !important;
  border-color: color-mix(in oklch, var(--obx-accent) 30%, transparent) !important;
  transform: none !important;
}
/* Lien ket: o copy gon, cat chu */
body[data-page="orders"] .page-content .table .copy-link {
  width: 220px;
  min-height: 32px !important;
  height: 32px;
  padding: 4px 8px !important;
  font-size: var(--obx-text-sm) !important;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* Thoi gian dat / cap nhat: badge xam -> chu mono thuong */
body[data-page="orders"] .page-content .table td > .badge.bg-light {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-xs) !important;
  font-weight: 400 !important;
  color: var(--obx-ink-2) !important;
}
/* Dich vu: "ID: 123" la nhan mono trung tinh, ten dich vu doc duoc */
body[data-page="orders"] .page-content .table td > .badge.border-secondary {
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule-2) !important;
  color: var(--obx-ink-2) !important;
  font-family: var(--obx-mono) !important;
  font-weight: 500 !important;
}
body[data-page="orders"] .page-content .table .service-name-short { color: var(--obx-ink); }
body[data-page="orders"] .page-content .table .service-name-short:hover { color: var(--obx-accent-ink) !important; }
body[data-page="orders"] .page-content .table .service-name-full {
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule);
  border-radius: var(--obx-r-control) !important;
  color: var(--obx-ink);
  white-space: normal;
  min-width: 260px;
  max-width: 420px;
  padding: 6px 28px 6px 8px !important;
}
body[data-page="orders"] .page-content .table .service-name-full .close-full-name { color: var(--obx-muted) !important; }
/* Thanh toan + 3 cot so luong: mono, canh phai, khong to mau cau vong */
body[data-page="orders"] .page-content .table > tbody > tr > td:is(:nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11)) {
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  color: var(--obx-ink-2) !important;
}
body[data-page="orders"] .page-content .table > tbody > tr > td:nth-child(8) { color: var(--obx-ink) !important; font-weight: 600; }
body[data-page="orders"] .page-content .table > tbody > tr > td:nth-child(7) small { color: var(--obx-muted); font-size: var(--obx-text-xs); }
body[data-page="orders"] .page-content .table > tbody > tr > td:last-child { white-space: nowrap; }
body[data-page="orders"] .page-content .table > tbody > tr > td:last-child .btn + .btn,
body[data-page="orders"] .page-content .table > tbody > tr > td:last-child .btn + span,
body[data-page="orders"] .page-content .table > tbody > tr > td:last-child span + .btn { margin-left: 4px; }
/* Hang dang chon */
body[data-page="orders"] .page-content .table > tbody > tr.row-selected > td { background: var(--obx-accent-tint) !important; }

/* O chon: hop 18px ve bang CSS, vung bam 44px (cham) */
body[data-page="orders"] .page-content .order-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: var(--obx-touch) !important;
  height: var(--obx-touch) !important;
  margin: -13px !important;
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: middle;
  cursor: pointer;
  animation: none !important;
}
body[data-page="orders"] .page-content .order-checkbox::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 1.5px solid var(--obx-rule-2);
  border-radius: 4px;
  background: var(--obx-surface);
  transition: background-color var(--obx-dur) var(--obx-ease), border-color var(--obx-dur) var(--obx-ease);
}
body[data-page="orders"] .page-content .order-checkbox:hover::before { border-color: var(--obx-muted); }
body[data-page="orders"] .page-content .order-checkbox:is(:checked, :indeterminate)::before {
  background: var(--obx-accent);
  border-color: var(--obx-accent);
}
body[data-page="orders"] .page-content .order-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 10px;
  border: solid var(--obx-on-accent);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}
body[data-page="orders"] .page-content .order-checkbox:indeterminate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--obx-on-accent);
  transform: translate(-50%, -50%);
}
body[data-page="orders"] .page-content .order-checkbox:focus-visible {
  outline: 2px solid var(--obx-focus) !important;
  outline-offset: -9px !important;
}

/* Tong tien da thanh toan: dong tong ket hairline cua so cai, so mono */
body[data-page="orders"] .page-content .card-body .mt-1 > .bg-soft-info {
  background: transparent !important;
  border-top: 1px solid var(--obx-rule);
  border-radius: 0 !important;
  margin: 16px -16px -16px;
  padding: 14px 20px !important;
}
body[data-page="orders"] .page-content .card-body .mt-1 > .bg-soft-info .text-muted { font-size: var(--obx-text-sm); }
body[data-page="orders"] .page-content .card-body .mt-1 > .bg-soft-info .fw-bold {
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-md) !important;
  font-weight: 700 !important;
  color: var(--obx-ink) !important;
}
/* Thong bao admin (HTML tu admin) + nhac don len lich: chi to lai nen */
body[data-page="orders"] .page-content .card.overflow-hidden > .card-body.bg-info-subtle { background: var(--obx-accent-tint) !important; }
body[data-page="orders"] .page-content .alert.alert-label-icon .label-icon { background: transparent !important; color: var(--obx-warn) !important; }
body[data-page="orders"] .page-content .alert.label-arrow .label-icon::after { border-left-color: transparent !important; }

/* Graphite: thanh chon nhieu don. JS chi bat/tat class .show; o day chi
   doi cach .show duoc ve (vi tri + hien/an), khong dung display. */
body[data-page="orders"] .page-content .bulk-action-toolbar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 24px !important;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100vw - 32px);
  z-index: 1050;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 8px 8px 16px !important;
  background: var(--obx-graphite) !important;
  color: var(--obx-g-text) !important;
  border: 1px solid var(--obx-g-rule);
  border-radius: var(--obx-r-panel) !important;
  box-shadow: var(--obx-shadow-pop) !important;
  transition: none !important;
}
body[data-page="orders"] .page-content .bulk-action-toolbar:not(.show) {
  transform: translateY(calc(100% + 160px)) !important;
  visibility: hidden;
}
body[data-page="orders"] .page-content .bulk-action-toolbar.show {
  transform: none !important;
  visibility: visible;
}
body[data-page="orders"] .page-content .bulk-action-toolbar .badge {
  background: transparent !important;
  border: 0 !important;
  padding: 0 8px 0 0 !important;
  margin-right: 4px;
  color: var(--obx-g-muted) !important;
  font-size: var(--obx-text-sm) !important;
  font-weight: 500 !important;
  white-space: nowrap;
}
body[data-page="orders"] .page-content .bulk-action-toolbar .badge i { color: var(--obx-g-muted); }
body[data-page="orders"] .page-content .bulk-action-toolbar #selectedCount {
  font-family: var(--obx-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--obx-text-base);
  color: var(--obx-g-text);
}
body[data-page="orders"] .page-content .bulk-action-toolbar .btn {
  min-height: 36px !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: 1px solid var(--obx-g-rule) !important;
  color: var(--obx-g-text) !important;
  font-size: var(--obx-text-sm) !important;
  transform: none !important;
}
body[data-page="orders"] .page-content .bulk-action-toolbar .btn:hover {
  background: oklch(100% 0 0 / 0.08) !important;
  border-color: oklch(100% 0 0 / 0.28) !important;
}
body[data-page="orders"] .page-content .bulk-action-toolbar .btn:active { transform: translateY(1px) !important; }
body[data-page="orders"] .page-content .bulk-action-toolbar .btn i { color: var(--obx-g-muted); margin-right: 4px; }
body[data-page="orders"] .page-content .bulk-action-toolbar .btn-deselect { border-color: transparent !important; color: var(--obx-g-muted) !important; }
body[data-page="orders"] .page-content .bulk-action-toolbar .btn-deselect:hover { color: var(--obx-g-text) !important; }
body[data-page="orders"] .bulk-action-toolbar .btn:focus-visible { outline-color: var(--obx-g-accent) !important; }
@media (max-width: 768px) {
  /* nam tren thanh menu duoi (~96px) va nut chon ngon ngu noi (GTranslate, toi ~135px) */
  body[data-page="orders"] .page-content .bulk-action-toolbar {
    bottom: calc(144px + env(safe-area-inset-bottom)) !important;
    flex-wrap: wrap !important;
    padding: 10px !important;
    max-width: calc(100vw - 24px);
    width: calc(100vw - 24px);
  }
  body[data-page="orders"] .page-content .bulk-action-toolbar .badge { flex: 1 0 100%; padding: 0 0 2px 4px !important; }
  body[data-page="orders"] .page-content .bulk-action-toolbar .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--obx-touch) !important;
    padding: 4px 6px !important;
    white-space: normal !important;
    line-height: 1.2;
  }
  body[data-page="orders"] .page-content .bulk-action-toolbar .btn i { margin-right: 2px; }
  body[data-page="orders"] .page-content .table .copy-trans-id,
  body[data-page="orders"] .page-content .table .copy-link { min-height: var(--obx-touch) !important; height: var(--obx-touch); }
}

/* Modal cua trang orders (ngoai .page-content) */
body[data-page="orders"] :is(#cancelOrderModal, #refillOrderModal) lord-icon { display: none !important; }
body[data-page="orders"] :is(#cancelOrderModal, #refillOrderModal) .modal-body .mt-4 { margin-top: 0 !important; padding-top: 0 !important; }
body[data-page="orders"] :is(#cancelOrderModal, #refillOrderModal) .modal-body h4 { font-size: var(--obx-text-lg) !important; font-weight: 600 !important; color: var(--obx-ink) !important; }
body[data-page="orders"] #complaintModal .modal-header.bg-info-subtle { background: transparent !important; }
body[data-page="orders"] #commentModal #commentContent { font-family: var(--obx-mono); font-size: var(--obx-text-sm) !important; }
body[data-page="orders"] #commentModal .btn-danger { background: var(--obx-surface) !important; border-color: var(--obx-rule-2) !important; color: var(--obx-ink) !important; }

/* ===========================================================================
   Hallmark · genre: modern-minimal · macrostructure: Ledger · design-system: design.md · designed-as-app · page: transactions
   Graphite moment: none.
   ========================================================================= */
body[data-page="transactions"] .page-content .table > :is(thead, tbody) > tr > :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4)) {
  text-align: right !important;
}
body[data-page="transactions"] .page-content .table > tbody > tr > td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
}
body[data-page="transactions"] .page-content .table > tbody > tr > td :is(b, strong) { font-weight: 600; }
body[data-page="transactions"] .page-content .table > tbody > tr > td:nth-child(4) b { color: var(--obx-ink) !important; }
body[data-page="transactions"] .page-content .table > tbody > tr > td:nth-child(5) {
  white-space: normal;
  min-width: 280px;
}
body[data-page="transactions"] .page-content .table > tbody > tr > td:nth-child(5) small { font-size: var(--obx-text-sm); color: var(--obx-ink-2); }

/* ===========================================================================
   Hallmark · genre: modern-minimal · macrostructure: Ledger · design-system: design.md · designed-as-app · page: logs
   Graphite moment: none.
   ========================================================================= */
body[data-page="logs"] .page-content .table > tbody > tr > td:is(:nth-child(1), :nth-child(3)) {
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-xs);
}
body[data-page="logs"] .page-content .table > tbody > tr > td:nth-child(2) {
  color: var(--obx-ink);
  white-space: normal;
  min-width: 220px;
}

/* ===========================================================================
   Hallmark · genre: modern-minimal · macrostructure: Ledger · design-system: design.md · designed-as-app · page: support-tickets
   Graphite moment: none.
   ========================================================================= */
/* Hanh dong chinh cua trang: nut accent dac (do khong bao gio la CTA chinh) */
body[data-page="support-tickets"] .page-content .card-header .btn-danger[data-bs-target="#addTicketModal"] {
  background: var(--obx-accent) !important;
  border: 1px solid var(--obx-accent) !important;
  color: var(--obx-on-accent) !important;
}
body[data-page="support-tickets"] .page-content .card-header .btn-danger[data-bs-target="#addTicketModal"]:hover {
  background: var(--obx-accent-hover) !important;
  border-color: var(--obx-accent-hover) !important;
}
body[data-page="support-tickets"] .page-content .card-header > .d-flex { flex-wrap: wrap; gap: 8px 12px; }
body[data-page="support-tickets"] .page-content .table > tbody > tr > td:is(:nth-child(1), :nth-child(3), :nth-child(6), :nth-child(7)) {
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-xs);
}
body[data-page="support-tickets"] .page-content .table > tbody > tr > td:nth-child(1) strong { font-weight: 600; color: var(--obx-ink); }
body[data-page="support-tickets"] .page-content .table > tbody > tr > td:nth-child(2) a { color: var(--obx-ink) !important; font-weight: 500; }
body[data-page="support-tickets"] .page-content .table > tbody > tr > td:nth-child(2) a:hover { color: var(--obx-accent-ink) !important; text-decoration: underline; text-underline-offset: 2px; }
/* "Xem" tren moi hang: nut phu, khong rai accent khap bang */
body[data-page="support-tickets"] .page-content .table .btn-primary.btn-sm {
  background: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule-2) !important;
  color: var(--obx-ink) !important;
}
body[data-page="support-tickets"] .page-content .table .btn-primary.btn-sm:hover { background: var(--obx-sunken) !important; }
/* Modal tao ticket */
body[data-page="support-tickets"] #addTicketModal .modal-header.bg-info-subtle { background: transparent !important; }
body[data-page="support-tickets"] #addTicketModal .modal-footer .btn-danger {
  background: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule-2) !important;
  color: var(--obx-ink) !important;
}
body[data-page="support-tickets"] #addTicketModal .modal-footer .btn-danger:hover { background: var(--obx-sunken) !important; }

/* ===========================================================================
   Hallmark · genre: modern-minimal · macrostructure: Ledger · design-system: design.md · designed-as-app · page: service-updates
   Graphite moment: none.
   ========================================================================= */
/* Banner gradient xanh -> mot dong dan nhap tinh (shared layer da xoa nen
   gradient nhung chu trang con lai -> chu trang tren nen trang). */
body[data-page="service-updates"] .page-content .card[style*="gradient"] {
  background: transparent !important;
  border: 0 !important;
  margin-bottom: 16px;
}
body[data-page="service-updates"] .page-content .card[style*="gradient"] > .card-body {
  padding: 0 !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
body[data-page="service-updates"] .page-content .card[style*="gradient"] i {
  color: var(--obx-muted) !important;
  font-size: 20px !important;
  line-height: 1.3;
}
body[data-page="service-updates"] .page-content .card[style*="gradient"] h5 {
  color: var(--obx-ink) !important;
  font-size: var(--obx-text-md) !important;
  font-weight: 600 !important;
}
body[data-page="service-updates"] .page-content .card[style*="gradient"] p {
  color: var(--obx-muted) !important;
  font-size: var(--obx-text-base);
  max-width: 72ch;
}
/* Bang gia: ten dich vu xuong dong, gia mono canh phai */
body[data-page="service-updates"] .page-content .table > tbody > tr > td:nth-child(2) {
  white-space: normal;
  min-width: 260px;
  color: var(--obx-ink);
  line-height: 1.45;
}
body[data-page="service-updates"] .page-content .table > :is(thead, tbody) > tr > :is(th, td):nth-child(3) {
  text-align: right !important;
}
body[data-page="service-updates"] .page-content .table > tbody > tr > td:is(:nth-child(1), :nth-child(3), :nth-child(5)),
body[data-page="service-updates"] .page-content .table > tbody > tr > td:nth-child(4) b {
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
}
body[data-page="service-updates"] .page-content .table > tbody > tr > td:is(:nth-child(1), :nth-child(5)) { font-size: var(--obx-text-xs); }
body[data-page="service-updates"] .page-content .table > tbody > tr > td:nth-child(3) b { color: var(--obx-ink); font-weight: 600; }
body[data-page="service-updates"] .page-content .table > tbody > tr > td:nth-child(4) { color: var(--obx-muted); }
body[data-page="service-updates"] .page-content .table > tbody > tr > td:nth-child(4) b { color: var(--obx-ink-2); font-weight: 500; }
body[data-page="service-updates"] .page-content .card > .card-body.bg-light-subtle form .row.g-3 > :has(select[name="limit"]) > .d-flex { justify-content: flex-end; }
@media (max-width: 767.98px) {
  body[data-page="service-updates"] .page-content .table > tbody > tr > td:nth-child(2) { min-width: 220px; }
}

/* ===========================================================================
   Hallmark · genre: modern-minimal · macrostructure: Split Studio · design-system: design.md · designed-as-app · page: ticket-detail
   Trai: cuoc hoi thoai (lam viec). Phai: thong tin ticket (tham chieu).
   Graphite moment: none.
   ========================================================================= */
body[data-page="ticket-detail"] .page-content .card > .card-header {
  padding: 14px 20px !important;
  border-top: 0 !important;
}
body[data-page="ticket-detail"] .page-content .card-header .card-title { color: var(--obx-ink) !important; }
body[data-page="ticket-detail"] .page-content .card-header .card-title i { color: var(--obx-muted) !important; font-size: var(--obx-text-md) !important; }

/* Khung hoi thoai: cao theo noi dung (toi da 500px nhu cu) */
body[data-page="ticket-detail"] .page-content .chat-conversation {
  height: auto !important;
  min-height: 280px;
  padding: 20px !important;
}
body[data-page="ticket-detail"] .page-content .chat-conversation .chat-conversation-list > li { margin-bottom: 16px; }
body[data-page="ticket-detail"] .page-content .chat-list small.text-muted {
  font-family: var(--obx-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-xs) !important;
}
body[data-page="ticket-detail"] .page-content .chat-list h6,
body[data-page="ticket-detail"] .page-content .chat-list h6:is(.text-primary, .text-success) {
  color: var(--obx-ink) !important;
  font-size: var(--obx-text-sm) !important;
  font-weight: 600 !important;
}
/* Bong khach: accent tint; bong admin: be mat chim + hairline */
body[data-page="ticket-detail"] .page-content .chat-list.right .bg-primary-subtle {
  background: var(--obx-accent-tint) !important;
  border: 1px solid color-mix(in oklch, var(--obx-accent) 18%, transparent);
  border-radius: var(--obx-r-panel) !important;
  color: var(--obx-ink);
  text-align: left !important;
  margin-left: auto;
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px !important;
}
body[data-page="ticket-detail"] .page-content .chat-list.left .bg-success-subtle {
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule);
  border-radius: var(--obx-r-panel) !important;
  color: var(--obx-ink);
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px !important;
}
body[data-page="ticket-detail"] .page-content .chat-list p { font-size: var(--obx-text-base); line-height: 1.55; overflow-wrap: anywhere; }
body[data-page="ticket-detail"] .page-content .chat-list .avatar-title.bg-success-subtle {
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule-2);
  color: var(--obx-ink-2) !important;
}
body[data-page="ticket-detail"] .page-content :is(.new-message, .waiting-response-card .alert) { animation: none !important; }
/* Trang thai cho phan hoi: bo vong xung dong (motion: silent) */
body[data-page="ticket-detail"] .page-content .pulse-animation,
body[data-page="ticket-detail"] .page-content .pulse-animation::before {
  animation: none !important;
  border-color: transparent !important;
}
body[data-page="ticket-detail"] .page-content .waiting-response-card .avatar-xl { width: 56px; height: 56px; }
body[data-page="ticket-detail"] .page-content .waiting-response-card .avatar-title { background: var(--obx-sunken) !important; }

/* Khung tra loi */
body[data-page="ticket-detail"] .page-content .card-footer.border-top-dashed {
  border-top: 1px solid var(--obx-rule) !important;
  padding: 16px 20px !important;
}
body[data-page="ticket-detail"] .page-content #replyMessage { min-height: var(--obx-touch); resize: vertical; }
body[data-page="ticket-detail"] .page-content #replyMessage.bg-success-subtle {
  background-color: var(--obx-ok-tint) !important;
  border-color: var(--obx-ok) !important;
}
/* Gui = CTA chinh -> accent dac (khong de graphite: btn-dark) */
body[data-page="ticket-detail"] .page-content .reply-ticket-form .btn-dark {
  background: var(--obx-accent) !important;
  border: 1px solid var(--obx-accent) !important;
  color: var(--obx-on-accent) !important;
  min-width: var(--obx-touch);
  min-height: var(--obx-touch) !important;
}
body[data-page="ticket-detail"] .page-content .reply-ticket-form .btn-dark:hover {
  background: var(--obx-accent-hover) !important;
  border-color: var(--obx-accent-hover) !important;
}
body[data-page="ticket-detail"] .page-content .reply-ticket-form small,
body[data-page="ticket-detail"] .page-content .reply-ticket-form .text-success { color: var(--obx-muted) !important; font-size: var(--obx-text-xs) !important; }
body[data-page="ticket-detail"] .page-content .reply-ticket-form kbd {
  background: var(--obx-surface) !important;
  color: var(--obx-ink) !important;
  border: 1px solid var(--obx-rule-2) !important;
  border-bottom-width: 2px !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  font-family: var(--obx-mono) !important;
  font-size: var(--obx-text-xs) !important;
  font-weight: 500 !important;
  padding: 1px 6px !important;
}

/* Cot phai: thong tin ticket */
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body h6.text-muted {
  font-size: var(--obx-text-sm) !important;
  font-weight: 500 !important;
  color: var(--obx-muted) !important;
  margin-bottom: 4px !important;
}
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body > .mb-3,
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body > .mb-0 {
  padding-bottom: 12px;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--obx-rule);
}
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body > :last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0 !important; }
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body h5 { font-size: var(--obx-text-md) !important; font-weight: 600 !important; color: var(--obx-ink) !important; }
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body p.mb-0 {
  font-family: var(--obx-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-sm);
  color: var(--obx-ink-2);
}
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body p.mb-0 small { font-family: var(--obx-font); }
/* Nhan trong the thong tin (tru trang thai): trung tinh, ma = mono */
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body > .mb-3 .badge,
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body .badge.bg-dark {
  background: var(--obx-sunken) !important;
  color: var(--obx-ink-2) !important;
  border: 1px solid var(--obx-rule-2) !important;
  white-space: normal;
  text-align: left;
}
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body .badge.bg-dark,
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body > .mb-3 .badge.bg-success-subtle {
  font-family: var(--obx-mono) !important;
}
body[data-page="ticket-detail"] .page-content .col-lg-4 .card-body > .mb-3 .badge i { color: var(--obx-muted); }
/* The tai khoan: 2 so lieu -> hai o hairline, so mono */
body[data-page="ticket-detail"] .page-content .col-lg-4 .row.g-2 .rounded {
  background: transparent !important;
  border: 1px solid var(--obx-rule);
  border-radius: var(--obx-r-control) !important;
}
body[data-page="ticket-detail"] .page-content .col-lg-4 .row.g-2 .fs-14 {
  font-family: var(--obx-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-md) !important;
  font-weight: 700 !important;
  color: var(--obx-ink) !important;
}
body[data-page="ticket-detail"] .page-content .col-lg-4 small.text-muted { font-size: var(--obx-text-xs) !important; }
body[data-page="ticket-detail"] .page-content .col-lg-4 .btn-sm { min-height: var(--obx-control-h); display: inline-flex; align-items: center; justify-content: center; }

/* ---- LEDGER: sua sau vong 1 ------------------------------------------------ */
/* Bang sat mep panel (card-body 20px, .table-card cua Velzon chi bu 16px) */
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body:not(.bg-light-subtle):has(.table-card) {
  padding: 20px !important;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body .table-card {
  margin: -20px -20px 0 !important;
}
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table-bordered > :not(caption) > * > :first-child { border-left-width: 0 !important; }
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table-bordered > :not(caption) > * > :last-child { border-right-width: 0 !important; }
@media (max-width: 768px) {
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body:not(.bg-light-subtle):has(.table-card) { padding: 16px !important; }
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body .table-card { margin: -16px -16px 0 !important; }
}
/* O chon ngay (flatpickr altInput): la o nhap binh thuong, khong to xam nhu readonly */
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"]) .page-content input.flatpickr-input[type="hidden"] + input.form-control.form-control.form-control[readonly]:not([name]) {
  background-color: var(--obx-surface) !important;
  color: var(--obx-ink) !important;
  cursor: pointer;
}
/* Hang trong (colspan): chu thuong, canh giua, va o mobile giu trong khung nhin */
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > tbody > tr > td[colspan] {
  font-family: var(--obx-font) !important;
  font-size: var(--obx-text-base) !important;
  text-align: center !important;
  white-space: normal;
  min-width: 0;
}
@media (max-width: 991.98px) {
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table td[colspan] > .text-center.p-3 {
    position: sticky;
    left: 0;
    width: calc(100vw - 58px);
    max-width: 100%;
  }
}
/* Chu "khong co" trong o so lieu: van la chu, khong mono */
body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .table > tbody > tr > td > span.text-muted {
  font-family: var(--obx-font) !important;
  font-size: var(--obx-text-sm);
}
@media (min-width: 768px) {
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content .card > .card-body.bg-light-subtle form .row.g-3 {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* ticket-detail: bong chat khong tran khung hep */
body[data-page="ticket-detail"] .page-content .chat-list .conversation-list .flex-grow-1 { min-width: 0; }
body[data-page="ticket-detail"] .page-content .chat-list .conversation-list .d-flex.align-items-center.mb-1 { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 575.98px) {
  body[data-page="ticket-detail"] .page-content .chat-conversation { padding: 16px 12px !important; }
  body[data-page="ticket-detail"] .page-content .chat-conversation .conversation-list { max-width: 100% !important; }
}
body[data-page="ticket-detail"] .page-content .card > .card-header[class*="bg-"] {
  border-width: 0 0 1px 0 !important;
  border-style: solid !important;
  border-color: var(--obx-rule) !important;
}

/* ===================== TRANG: b-catalog-account (scope body[data-page]) ===================== */
/* Hallmark · design-system: design.md · designed-as-app · group: b-catalog-account */

/* =============================================================================
   Hallmark · genre: modern-minimal · macrostructure: Ledger (rank strip + price table) · design-system: design.md · designed-as-app · page: services
   - Rank cards -> mot hang so sanh duong ke manh (khong the noi, khong gradient,
     khong vong trang tri). Hang hien tai: vach accent tren + ten accent.
   - Bang gia: gia/ID mono, cot ten duoc xuong dong de cac cot gia khong bi day ra ngoai.
   - Thang <style> noi tuyen cua trang (price-highlight, rank-card hover/pulse,
     maintenance-badge) bang !important.
   - Graphite moment: khong co (nut len dau trang la chrome chung).
   ========================================================================== */
body[data-page="services"] .page-content .col-xl-12.mb-5 { margin-bottom: var(--obx-s6) !important; }

/* --- The cap bac (chu site yeu cau 2026-10-19: dang the rieng co huy hieu, xem design.md
   "Per-page allowances"). Huy hieu: assets/img/v2/rank-tier-{0..3}.svg. ------------------ */
body[data-page="services"] .page-content .rank-card-wrapper { height: 100%; }
body[data-page="services"] .page-content .rank-card {
  background: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-panel) !important;
  box-shadow: none !important;
  animation: none !important; transform: none !important; transition: border-color var(--obx-dur) var(--obx-ease) !important;
  cursor: default !important; margin: 0 !important; height: 100%;
}
body[data-page="services"] .page-content .rank-card:hover { box-shadow: none !important; transform: none !important; border-color: var(--obx-rule-2) !important; }
body[data-page="services"] .page-content .rank-card.active-rank,
body[data-page="services"] .page-content .rank-card.active-rank:hover { border-color: var(--obx-accent) !important; box-shadow: 0 0 0 1px var(--obx-accent) !important; }
/* vong tron SVG trang tri cu */
body[data-page="services"] .page-content .rank-card > .position-absolute.opacity-10 { display: none !important; }
body[data-page="services"] .page-content .rank-card .card-body {
  display: flex; flex-direction: column; height: 100%;
  text-align: center !important;
  padding: var(--obx-s6) var(--obx-s5) var(--obx-s5) !important;
}
body[data-page="services"] .page-content .rank-card .rank-badge { width: 96px; height: 96px; flex: 0 0 auto; }
body[data-page="services"] .page-content .rank-card .rank-badge img { display: block; width: 96px; height: 96px; }
body[data-page="services"] .page-content .rank-card .card-title {
  font-size: var(--obx-text-md) !important; font-weight: 600 !important;
  color: var(--obx-ink) !important; margin: 0 0 var(--obx-s1) !important;
}
body[data-page="services"] .page-content .rank-card .card-title.text-info { color: var(--obx-accent-ink) !important; }
body[data-page="services"] .page-content .rank-card .card-body > p.text-muted {
  font-size: var(--obx-text-sm) !important; letter-spacing: 0 !important; margin-bottom: var(--obx-s4) !important;
}
/* chip "Hien tai": goc tren phai; chuoi nguon VIET HOA -> viet thuong + chu dau hoa bang CSS */
body[data-page="services"] .page-content .rank-card > .position-absolute.m-3 { margin: var(--obx-s3) var(--obx-s3) 0 0 !important; }
body[data-page="services"] .page-content .rank-card > .position-absolute .badge {
  display: inline-flex !important; align-items: center; gap: 2px;
  background: var(--obx-accent) !important; color: var(--obx-on-accent) !important; border: 0 !important;
  border-radius: var(--obx-r-control) !important;
  font-size: var(--obx-text-xs) !important; font-weight: 600 !important; letter-spacing: 0 !important;
  text-transform: lowercase !important; padding: 3px 8px !important;
}
body[data-page="services"] .page-content .rank-card > .position-absolute .badge i { margin-right: 2px !important; }
body[data-page="services"] .page-content .rank-card .rank-chip-text { display: inline-block; }
body[data-page="services"] .page-content .rank-card .rank-chip-text::first-letter { text-transform: uppercase; }
/* Quyen loi: o nen nhat, icon trong o accent-tint */
body[data-page="services"] .page-content .rank-card .benefits-list { display: flex; flex-direction: column; gap: var(--obx-s2); flex: 1 1 auto; }
body[data-page="services"] .page-content .rank-card .benefit-item {
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-control) !important;
  padding: var(--obx-s2) var(--obx-s3) !important;
  margin: 0 !important;
  align-items: center !important;
}
body[data-page="services"] .page-content .rank-card .benefit-icon {
  width: 32px !important; height: 32px !important; flex: 0 0 32px;
  background: var(--obx-accent-tint) !important;
  border-radius: var(--obx-r-control) !important;
  margin-right: var(--obx-s3) !important;
}
/* :not(#_) = them do uu tien cap id: icon trong HTML admin co .text-white, rule chung doi no thanh mau muc */
body[data-page="services"] .page-content .rank-card .benefit-icon i:not(#_) { color: var(--obx-accent-ink) !important; font-size: 16px !important; }
body[data-page="services"] .page-content .rank-card .benefit-item .fw-medium {
  color: var(--obx-ink) !important; font-size: var(--obx-text-sm) !important; font-weight: 500 !important; line-height: 1.4;
}
body[data-page="services"] .page-content .rank-card .benefit-item small { font-size: var(--obx-text-xs) !important; line-height: 1.4; }
body[data-page="services"] .page-content .rank-card .benefit-item small.fw-semibold {
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-sm) !important; font-weight: 600 !important; color: var(--obx-ink) !important;
}
/* Mo ta cap bac do admin nhap (ranks.detail, HTML): giu nguyen, chi chinh chu */
body[data-page="services"] .page-content .rank-card .benefits-list > :not(.benefit-item):not(.progress-container) { font-size: var(--obx-text-sm); color: var(--obx-ink-2); }
body[data-page="services"] .page-content .rank-card .benefits-list img { max-width: 100%; height: auto; }
/* Day the: "Con thieu ..." = thanh xam (chua dat), "Da dat dieu kien" = thanh xanh la */
body[data-page="services"] .page-content .rank-card .progress-container { margin-top: auto; padding-top: var(--obx-s2); }
body[data-page="services"] .page-content .rank-card .progress-container .alert {
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule-2) !important;
  border-radius: var(--obx-r-control) !important;
  padding: var(--obx-s2) var(--obx-s3) !important;
  min-height: 40px;
}
body[data-page="services"] .page-content .rank-card .progress-container .alert .justify-content-between { justify-content: center !important; flex-wrap: wrap; gap: 2px var(--obx-s2); }
body[data-page="services"] .page-content .rank-card .progress-container .alert-warning :is(i, small) { color: var(--obx-ink-2) !important; }
body[data-page="services"] .page-content .rank-card .progress-container .alert small { font-size: var(--obx-text-sm) !important; white-space: nowrap; }
body[data-page="services"] .page-content .rank-card .progress-container .alert small.fw-bold {
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums; font-weight: 700 !important; color: var(--obx-ink) !important;
}
body[data-page="services"] .page-content .rank-card .progress-container .alert-success {
  background: var(--obx-ok-tint) !important; border-color: color-mix(in oklch, var(--obx-ok) 25%, transparent) !important;
}
body[data-page="services"] .page-content .rank-card .progress-container .alert-success .d-flex { justify-content: center; }
body[data-page="services"] .page-content .rank-card .progress {
  background: var(--obx-rule) !important; border-radius: 2px !important; box-shadow: none !important; height: 4px !important;
}
body[data-page="services"] .page-content .rank-card .progress-bar { background: var(--obx-accent) !important; background-image: none !important; }

/* --- Thanh loc (Ledger: dai loc gon tren dau bang) ----------------------- */
body[data-page="services"] .page-content .card > .card-body.bg-light-subtle {
  background: var(--obx-surface) !important;
  border-width: 0 0 1px 0 !important;
  border-style: solid !important;
  border-color: var(--obx-rule) !important;
  border-radius: var(--obx-r-panel) var(--obx-r-panel) 0 0;
  padding: var(--obx-s4) var(--obx-s5) !important;
}
body[data-page="services"] .page-content .card > .card-body.bg-light-subtle .btn-light { min-width: var(--obx-control-h); }

/* --- Bang gia ----------------------------------------------------------- */
/* Cot ten duoc xuong dong -> cot gia + thao tac luon nam trong khung o 1366 */
body[data-page="services"] .page-content .table > tbody > tr > td:first-child { white-space: normal; min-width: 340px; }
/* tieu de cot gia/thoi gian duoc xuong dong -> nhuong cho cho cot ten */
body[data-page="services"] .page-content .table > thead th:is(.text-end, .text-center) { white-space: normal !important; min-width: 84px; line-height: 1.35; vertical-align: bottom; }
body[data-page="services"] .page-content .table > :is(thead, tbody) > tr > :is(th, td):not(:first-child) { padding-left: 10px; padding-right: 10px; }
body[data-page="services"] .page-content .table > tbody > tr > td:first-child h6 { line-height: 1.55; font-size: var(--obx-text-sm) !important; color: var(--obx-ink) !important; }
body[data-page="services"] .page-content .table > tbody > tr > td:first-child .badge { white-space: nowrap; vertical-align: 1px; }
/* ID: so lieu mono, nhan trung tinh (khong phai trang thai) */
body[data-page="services"] .page-content .table td h6 > .badge.bg-primary:first-child {
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 500 !important;
  background: var(--obx-sunken) !important;
  color: var(--obx-ink-2) !important;
  border: 1px solid var(--obx-rule-2) !important;
}
/* Nhan tinh nang (bao hanh / ho tro huy / len cham): vien manh, khong phai trang thai loi */
body[data-page="services"] .page-content .table td .badge.border {
  background: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule-2) !important;
  color: var(--obx-ink-2) !important;
  font-weight: 500 !important;
}
body[data-page="services"] .page-content .table td .badge.border.border-success {
  background: var(--obx-ok-tint) !important;
  border-color: color-mix(in oklch, var(--obx-ok) 28%, transparent) !important;
  color: var(--obx-ok) !important;
}
body[data-page="services"] .page-content .table td .badge.border i { color: inherit !important; }
/* Bao tri: crit tint phang, khong nhap nhay, khong vach trai */
body[data-page="services"] .page-content .maintenance-badge {
  background: var(--obx-crit-tint) !important;
  color: var(--obx-crit) !important;
  border: 1px solid color-mix(in oklch, var(--obx-crit) 28%, transparent) !important;
  animation: none !important;
  box-shadow: none !important;
  border-radius: var(--obx-r-control) !important;
  font-size: var(--obx-text-xs) !important;
  padding: 3px 8px !important;
}
body[data-page="services"] .page-content .maintenance-badge i { color: inherit !important; }
body[data-page="services"] .page-content .table > tbody > tr.maintenance-row { border-left: 0 !important; background: transparent !important; }
body[data-page="services"] .page-content .table > tbody > tr.maintenance-row > td { background: color-mix(in oklch, var(--obx-crit-tint) 70%, transparent) !important; }
/* Gia: mono, so thang hang */
body[data-page="services"] .page-content .table > tbody > tr > td.text-end,
body[data-page="services"] .page-content .table > tbody > tr > td.text-end span {
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
  color: var(--obx-ink);
  white-space: nowrap;
}
/* Cot gia cua hang hien tai: nen accent tint phang (bo gradient, bong, nhac len, vuong mien) */
body[data-page="services"] .page-content .price-highlight {
  background: var(--obx-accent-tint) !important;
  color: var(--obx-accent-ink) !important;
  border: 1px solid color-mix(in oklch, var(--obx-accent) 25%, transparent) !important;
  border-radius: var(--obx-r-control) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
}
body[data-page="services"] .page-content .price-highlight:hover { transform: none !important; box-shadow: none !important; background: var(--obx-accent-tint) !important; }
body[data-page="services"] .page-content .price-highlight::before,
body[data-page="services"] .page-content .price-highlight::after { content: none !important; display: none !important; }
/* Nut bao tri bi khoa: theo nut disabled chung (bo gradient cua trang) */
body[data-page="services"] .page-content .btn-secondary[disabled] { background: var(--obx-sunken) !important; background-image: none !important; color: var(--obx-muted) !important; border-color: var(--obx-rule) !important; }
body[data-page="services"] .page-content .table .btn-sm { white-space: nowrap; }
/* pagination nam sat bang */
body[data-page="services"] .page-content .table-card + * { margin-top: var(--obx-s4); }

@media (max-width: 767.98px) {
  body[data-page="services"] .page-content .rank-card .card-body { padding: var(--obx-s4) !important; }
  body[data-page="services"] .page-content .table > tbody > tr > td:first-child { min-width: 220px; }
  body[data-page="services"] .page-content .table .btn-sm,
  body[data-page="services"] .page-content .card > .card-body.bg-light-subtle .btn,
  body[data-page="services"] .page-content .pagination .page-link { min-height: var(--obx-touch) !important; min-width: var(--obx-touch); display: inline-flex; align-items: center; justify-content: center; }
  body[data-page="services"] .page-content .select2-container--default .select2-selection--single,
  body[data-page="services"] .page-content .card > .card-body.bg-light-subtle .form-control { min-height: var(--obx-touch) !important; }
}

/* =============================================================================
   Hallmark · genre: modern-minimal · macrostructure: Split Studio, narrow · design-system: design.md · designed-as-app · page: profile
   - Bo anh nen trang tri (profile-wid-bg, anh bep) chi bang CSS; bo margin am
     keo the len de vao vi tri.
   - >=1200px: form (tab) ben trai, the tham chieu tai khoan ben phai; khung
     toi da 1120px. Duoi 1200px: mot cot, form truoc.
   - Nut gui chinh (btn-dark) -> CTA accent dac theo design.md.
   - Graphite moment: khong co (nut len dau trang la chrome chung).
   ========================================================================== */
body[data-page="profile"] .page-content { padding-bottom: 140px; } /* nut len dau trang (fixed, bottom:100px) khong de len nut Cap nhat */
body[data-page="profile"] .page-content .profile-setting-img {
  height: 0 !important;
  overflow: hidden;
  background-image: none !important;
}
body[data-page="profile"] .page-content .profile-wid-bg { visibility: hidden; }
body[data-page="profile"] .page-content .profile-wid-bg::before { background: none !important; }
body[data-page="profile"] .page-content .position-relative.mx-n4.mt-n4 { margin-top: 0 !important; }
body[data-page="profile"] .page-content > .container-fluid { max-width: 1120px; margin-left: 0; }
body[data-page="profile"] .page-content > .container-fluid > .row > [class*="col-xxl-"] { margin-top: 0 !important; margin-bottom: var(--obx-s4) !important; }
/* form truoc */
body[data-page="profile"] .page-content > .container-fluid > .row > .col-xxl-7 { order: 1; }
body[data-page="profile"] .page-content > .container-fluid > .row > .col-xxl-5 { order: 2; }
@media (min-width: 1200px) {
  body[data-page="profile"] .page-content > .container-fluid > .row > .col-xxl-7 { flex: 0 0 auto; width: 62%; }
  body[data-page="profile"] .page-content > .container-fluid > .row > .col-xxl-5 { flex: 0 0 auto; width: 38%; }
  /* the tham chieu hep: avatar tren, danh sach so du duoi */
  body[data-page="profile"] .page-content .col-xxl-5 .d-sm-block > .row > [class*="col-sm-"] { width: 100%; }
  body[data-page="profile"] .page-content .col-xxl-5 .d-sm-block > .row > .col-sm-4 { text-align: left !important; margin-bottom: var(--obx-s3) !important; }
}
/* hash (#personalDetails...) cuon toi tab: chua cho topbar + thanh tab */
body[data-page="profile"] .page-content .tab-pane { scroll-margin-top: 150px; }

/* --- The tham chieu tai khoan (block-info-user) --------------------------- */
body[data-page="profile"] .page-content .col-xxl-5 .card { margin-bottom: 0 !important; }
body[data-page="profile"] .page-content .col-xxl-5 .list-group-item { background: transparent !important; border-color: var(--obx-rule) !important; }
body[data-page="profile"] .page-content .col-xxl-5 .list-group-item > span.fw-medium {
  font-family: var(--obx-mono) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  color: var(--obx-ink);
}
body[data-page="profile"] .page-content .col-xxl-5 .list-group-item > span.fw-medium.text-info {
  font-family: var(--obx-font) !important;
}
body[data-page="profile"] .page-content .col-xxl-5 h5.fs-17 { font-size: var(--obx-text-md) !important; font-weight: 600 !important; color: var(--obx-ink) !important; }
body[data-page="profile"] .page-content .col-xxl-5 .progress { background: var(--obx-sunken) !important; box-shadow: none !important; border-radius: 4px !important; }
body[data-page="profile"] .page-content .col-xxl-5 .progress-bar { background: var(--obx-ok) !important; background-image: none !important; }
body[data-page="profile"] .page-content .col-xxl-5 .progress-info .badge.bg-light { font-weight: 500 !important; }
body[data-page="profile"] .page-content .col-xxl-5 .fst-italic { font-style: normal !important; }

/* --- Tabs + form -------------------------------------------------------- */
body[data-page="profile"] .page-content .nav-tabs-custom .nav-link { display: inline-flex; align-items: center; gap: var(--obx-s2); }
body[data-page="profile"] .page-content .nav-tabs-custom .nav-link i { color: inherit; font-size: 14px; }
/* man hep: 3 tab chia deu mot hang (chu xuong dong trong tab) -> khong tab nao bi an */
@media (max-width: 575.98px) {
  body[data-page="profile"] .page-content .nav-tabs-custom { flex-wrap: nowrap; }
  body[data-page="profile"] .page-content .nav-tabs-custom > .nav-item { flex: 1 1 0; min-width: 0; }
  body[data-page="profile"] .page-content .nav-tabs-custom .nav-link {
    width: 100%; height: 100%; justify-content: center; text-align: center;
    white-space: normal; line-height: 1.25; gap: 4px;
    padding: 8px 6px !important; font-size: var(--obx-text-sm) !important;
  }
}
/* CTA chinh cua tung tab: accent dac (khong phai graphite) */
body[data-page="profile"] .page-content :is(#updateProfileBtn, #changePasswordBtn, #btnChangeSecurity) {
  background: var(--obx-accent) !important;
  border: 1px solid var(--obx-accent) !important;
  color: var(--obx-on-accent) !important;
}
body[data-page="profile"] .page-content :is(#updateProfileBtn, #changePasswordBtn, #btnChangeSecurity):hover { background: var(--obx-accent-hover) !important; border-color: var(--obx-accent-hover) !important; }
body[data-page="profile"] .page-content :is(#updateProfileBtn, #changePasswordBtn, #btnChangeSecurity):disabled { background: var(--obx-sunken) !important; border-color: var(--obx-rule) !important; color: var(--obx-muted) !important; }
/* Doi mat khau: 3 o xep doc trong cot form hep (de doc, placeholder khong bi cat) */
@media (min-width: 992px) {
  body[data-page="profile"] .page-content #changePassword form .col-lg-4 { width: 100%; max-width: 480px; }
}
body[data-page="profile"] .page-content #changePassword form .row.g-2 { --vz-gutter-y: 12px; }
/* Phien hoat dong */
body[data-page="profile"] .page-content #changePassword .border-bottom { border-color: var(--obx-rule) !important; }
body[data-page="profile"] .page-content #changePassword .avatar-title {
  background: var(--obx-sunken) !important;
  color: var(--obx-ink-2) !important;
  border: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-control) !important;
  box-shadow: none !important;
}
body[data-page="profile"] .page-content #changePassword .avatar-sm { width: 40px; height: 40px; }
body[data-page="profile"] .page-content #changePassword h6 { color: var(--obx-ink) !important; font-size: var(--obx-text-base) !important; font-weight: 600 !important; margin-bottom: 2px; }
body[data-page="profile"] .page-content #changePassword p.text-muted { font-size: var(--obx-text-sm) !important; }
/* Bao mat: danh sach cai dat, moi dong mot duong ke */
body[data-page="profile"] .page-content #security h5.card-title { text-decoration: none !important; }
body[data-page="profile"] .page-content #security ul.list-unstyled > li {
  margin: 0 !important;
  padding: var(--obx-s3) 0 !important;
  border-top: 1px solid var(--obx-rule);
  gap: var(--obx-s4);
  align-items: center;
}
body[data-page="profile"] .page-content #security ul.list-unstyled > li:last-child { border-bottom: 1px solid var(--obx-rule); }
body[data-page="profile"] .page-content #security li .form-check-label { color: var(--obx-ink) !important; font-weight: 500 !important; font-size: var(--obx-text-base) !important; }
body[data-page="profile"] .page-content #security li p.text-muted { margin: 2px 0 0 !important; font-size: var(--obx-text-sm) !important; }
body[data-page="profile"] .page-content #security .form-switch .form-check-input { width: 2.5em; height: 1.35em; cursor: pointer; }

@media (max-width: 768px) {
  body[data-page="profile"] .page-content #security li .btn-sm,
  body[data-page="profile"] .page-content .col-xxl-5 .btn-sm,
  body[data-page="profile"] .page-content .col-xxl-7 .btn { min-height: var(--obx-touch) !important; display: inline-flex; align-items: center; justify-content: center; }
  body[data-page="profile"] .page-content #security ul.list-unstyled > li { flex-wrap: wrap; }
  body[data-page="profile"] .page-content #security ul.list-unstyled > li > .flex-grow-1 { flex: 1 1 190px; }
  body[data-page="profile"] .page-content .tab-pane { scroll-margin-top: 190px; }
  body[data-page="profile"] .page-content #security .form-switch { min-height: var(--obx-touch); display: flex; align-items: center; }
  body[data-page="profile"] .page-content #security .form-switch .form-check-input { width: 44px; height: 24px; }
  body[data-page="profile"] .page-content #changePassword .float-end a,
  body[data-page="profile"] .page-content #changePassword .d-flex > div:last-child > a { display: inline-flex; align-items: center; min-height: var(--obx-touch); }
}

/* ===================== TRANG: c-money (scope body[data-page]) ===================== */
/* Hallmark · design-system: design.md · designed-as-app · group: c-money */
/* =============================================================================
   NHOM C — trang tien: recharge-bank, recharge-crypto, affiliates, affiliate-withdraw.
   Chi doi giao dien. KHONG dat display cho phan tu JS bat/tat:
   .btn-text/.btn-spinner (d-none), .conversion-box (border-primary/border-dashed),
   #received_amount, #vnd_amount, #countdown-*, .payment-info-container (thay html),
   .invalid-feedback/#*Feedback (.show/.hide), .is-invalid, #btnWithdraw (thay html).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   PHAN CHUNG 4 TRANG
   Hallmark · genre: modern-minimal · macrostructure: Split Studio · design-system: design.md · designed-as-app · page: recharge-bank, recharge-crypto, affiliates, affiliate-withdraw
   -------------------------------------------------------------------------- */

/* ---- Bo cuc Split Studio: form trai (7) · ngu canh phai (5), tu 992px -------
   Dung grid tren .row co ca .col-xl-7 (trang hoa don chuyen khoan khong khop -> giu nguyen).
   Trinh duyet khong co :has() -> giu bo cuc flex goc cua Bootstrap. */
@media (min-width: 992px) {
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .container-fluid > .row:has(> .col-xl-7) {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--obx-s6);
    align-items: start;
    margin-left: 0;
    margin-right: 0;
  }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .container-fluid > .row:has(> .col-xl-7) > * {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
    grid-column: 2;
  }
  /* nap tien: form chiem cot trai 2 hang; bang thuong + luu y xep cot phai */
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .container-fluid > .row:has(> .col-xl-7) > .col-xl-7 { grid-column: 1; grid-row: 1 / span 2; }
  /* affiliate: cot dau tien la cong cu (link / form rut) */
  body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .container-fluid > .row:has(> .col-xl-7) > :first-child { grid-column: 1; grid-row: 1 / span 2; }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .container-fluid > .row:has(> .col-xl-7) > :last-child { grid-column: 1 / -1; grid-row: auto; }
}
/* Duoi 992px: mot cot, form truoc (design.md) */
@media (max-width: 991.98px) {
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .container-fluid > .row:has(> .col-xl-7) > .col-xl-12:not(:last-child) { order: 1; }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .container-fluid > .row:has(> .col-xl-7) > .col-xl-5 { order: 2; }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .container-fluid > .row:has(> .col-xl-7) > :last-child { order: 3; }
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .container-fluid > .row > .col-xl-12.mb-3 { margin-bottom: 0 !important; }

/* ---- Tieu de panel: bo o icon mau (trang tri), giu tieu de + phu de ------- */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-header img.icon-card { display: none; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-header .flex-grow-1.ms-3 { margin-left: 0 !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-header[class*="bg-"] {
  padding: var(--obx-s4) var(--obx-s5) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-header[class*="bg-"] p.text-white {
  font-weight: 400 !important;
  margin-top: var(--obx-s0) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-header .card-title > i { color: var(--obx-muted) !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-body { padding: var(--obx-s5); }

/* ---- Huong dan (alert phu) — goi y yen lang, icon xam --------------------- */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"]) .page-content .alert.alert-secondary {
  padding: var(--obx-s3) var(--obx-s4) !important;
  margin-bottom: var(--obx-s5) !important;
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-control) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"]) .page-content .alert.alert-secondary > .d-flex { align-items: flex-start !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"]) .page-content .alert.alert-secondary > .d-flex > i {
  font-size: var(--obx-text-lg) !important; line-height: 1.2; color: var(--obx-muted) !important; margin-right: var(--obx-s3) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"]) .page-content .alert.alert-secondary .alert-heading {
  font-size: var(--obx-text-sm) !important; font-weight: 600 !important; color: var(--obx-ink) !important; margin-bottom: var(--obx-s0) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"]) .page-content .alert.alert-secondary p { font-size: var(--obx-text-sm) !important; color: var(--obx-ink-2) !important; line-height: 1.5; }

/* ---- Form: nhan, o nhap, so tien la so lieu (mono) ------------------------- */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliate-withdraw"]) .page-content .input-group-text { min-width: 44px; justify-content: center; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliate-withdraw"]) .page-content #amount {
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums; font-size: var(--obx-text-md) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliate-withdraw"]) .page-content #amount::placeholder { font-family: var(--obx-font); font-size: var(--obx-text-base); }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliate-withdraw"]) .page-content .input-group-lg > :is(.form-control, .form-select, .input-group-text) { min-height: var(--obx-touch); }
/* dau * bat buoc: muted, khong do */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliate-withdraw"]) .page-content .form-label > .text-danger { color: var(--obx-muted) !important; }
/* gia tri trong dong goi y (toi thieu, ty gia): so lieu, khong to do/xanh */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .form-text :is(.text-danger, .text-primary) {
  color: var(--obx-ink) !important; font-family: var(--obx-mono); font-variant-numeric: tabular-nums; font-weight: 500 !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .form-text { color: var(--obx-muted) !important; font-size: var(--obx-text-xs) !important; }

/* ---- O "so tien thuc nhan uoc tinh" -----------------------------------------
   JS doi .border-primary <-> .border-dashed theo ket qua -> chi doi mau vien. */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .alert.conversion-box {
  padding: var(--obx-s3) var(--obx-s4) !important;
  margin-bottom: var(--obx-s5) !important;
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-control) !important;
  transition: border-color var(--obx-dur) var(--obx-ease), background-color var(--obx-dur) var(--obx-ease) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .alert.conversion-box.border-primary {
  background: var(--obx-surface) !important;
  border-color: var(--obx-accent) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .conversion-box i.ri-exchange-dollar-line { font-size: var(--obx-text-lg) !important; color: var(--obx-muted) !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .conversion-box h5 {
  font-size: var(--obx-text-sm) !important; font-weight: 500 !important; color: var(--obx-ink-2) !important; margin-bottom: var(--obx-s0) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content :is(#received_amount, #vnd_amount) {
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-lg) !important; font-weight: 700 !important; color: var(--obx-ink) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content :is(#received_amount, #vnd_amount) small { font-family: var(--obx-font); font-size: var(--obx-text-sm); font-weight: 400; color: var(--obx-muted); }

/* ---- CTA chinh: giong "Dat hang" o /order (52px, 16px/600) ---------------- */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliate-withdraw"]) .page-content :is(.create-invoice-btn, #btnWithdraw) {
  min-height: 52px;
  font-size: var(--obx-text-md) !important;
  font-weight: 600 !important;
}

/* ---- Noi dung admin nhap (HTML tu do) — style phong thu, khong viet lai ----
   bank_notice (recharge-bank, cot phai) · crypto_note (.notice-content) · affiliate_note */
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body,
body[data-page="recharge-crypto"] .page-content .notice-content,
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted {
  font-size: var(--obx-text-base);
  line-height: 1.6;
  color: var(--obx-ink-2);
  overflow-wrap: anywhere;
}
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body :is(ul, ol),
body[data-page="recharge-crypto"] .page-content .notice-content :is(ul, ol),
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted :is(ul, ol) { padding-left: 1.25em; margin-bottom: var(--obx-s3); }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body li + li,
body[data-page="recharge-crypto"] .page-content .notice-content li + li,
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted li + li { margin-top: var(--obx-s2); }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body :is(p, li),
body[data-page="recharge-crypto"] .page-content .notice-content :is(p, li),
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted :is(p, li) { color: var(--obx-ink-2) !important; }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body p,
body[data-page="recharge-crypto"] .page-content .notice-content p,
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted p { margin: 0 0 var(--obx-s3); }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body :is(div, p, ul, ol) + :is(div, p, ul, ol),
body[data-page="recharge-crypto"] .page-content .notice-content :is(div, p, ul, ol) + :is(div, p, ul, ol),
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted :is(div, p, ul, ol) + :is(div, p, ul, ol) { margin-top: var(--obx-s3); }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body :is(p, ul, ol, div):last-child,
body[data-page="recharge-crypto"] .page-content .notice-content :is(p, ul, ol, div):last-child,
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted :is(p, ul, ol, div):last-child { margin-bottom: 0; }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body :is(strong, b),
body[data-page="recharge-crypto"] .page-content .notice-content :is(strong, b),
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted :is(strong, b) { color: var(--obx-ink) !important; font-weight: 600; }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body :is(h1, h2, h3, h4, h5, h6),
body[data-page="recharge-crypto"] .page-content .notice-content :is(h1, h2, h3, h4, h5, h6),
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted :is(h1, h2, h3, h4, h5, h6) { font-size: var(--obx-text-md) !important; font-weight: 600 !important; }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body :is(img, iframe, video),
body[data-page="recharge-crypto"] .page-content .notice-content :is(img, iframe, video),
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted :is(img, iframe, video) { max-width: 100%; height: auto; }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body table,
body[data-page="recharge-crypto"] .page-content .notice-content table,
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted table { display: block; max-width: 100%; overflow-x: auto; }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body [style*="color"],
body[data-page="recharge-crypto"] .page-content .notice-content [style*="color"],
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted [style*="color"] { color: inherit !important; }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body [style*="background"],
body[data-page="recharge-crypto"] .page-content .notice-content [style*="background"],
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted [style*="background"] { background: transparent !important; }
body[data-page="recharge-bank"] .page-content .col-xl-5 > .card > .card-body [style*="font-size"],
body[data-page="recharge-crypto"] .page-content .notice-content [style*="font-size"],
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted [style*="font-size"] { font-size: inherit !important; }

/* ---- Lich su: dai loc gon + bang (Ledger) ---------------------------------- */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-body.bg-light-subtle {
  background: var(--obx-surface) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--obx-rule) !important;
  padding: var(--obx-s4) var(--obx-s5) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-body.bg-light-subtle .row.mt-3 { margin-top: var(--obx-s3) !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-body.bg-light-subtle .form-label { color: var(--obx-ink-2) !important; white-space: nowrap; }
/* Bang sat mep panel: card-body dem 20px nhung .table-card chi keo -16px -> lech 4px */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-body .table-card {
  margin: calc(-1 * var(--obx-s5)) calc(-1 * var(--obx-s5)) 0 !important;
  border-radius: 0;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .table-card > .table { margin-bottom: 0; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .table-card > .table > :is(thead, tbody) > tr > :is(th, td):first-child { padding-left: var(--obx-s5); }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .table-card > .table > :is(thead, tbody) > tr > :is(th, td):last-child { padding-right: var(--obx-s5); }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .table-card > .table > tbody > tr:last-child > td { border-bottom: 0 !important; }
/* trang rong: lord-icon dong lap -> nho lai, chu ro */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .table-card lord-icon { width: 48px !important; height: 48px !important; opacity: 0.7; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .table-card td[colspan] h5 { font-size: var(--obx-text-base) !important; font-weight: 600 !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .table-card td[colspan] p { font-size: var(--obx-text-sm); }
/* Mobile: bang cuon ngang -> giu thong bao "khong co ket qua" trong khung nhin */
@media (max-width: 767.98px) {
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .table-card td[colspan] > .text-center {
    position: sticky; left: 0; max-width: calc(100vw - 34px);
  }
}
/* Dai tong cong duoi bang: mot hang ke manh, so lieu mono mau muc */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"]) .page-content .bg-soft-info.rounded-3 {
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule);
  border-radius: var(--obx-r-control) !important;
  padding: var(--obx-s3) var(--obx-s4) !important;
  margin-top: var(--obx-s4);
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"]) .page-content .bg-soft-info.rounded-3 > .d-flex { flex-wrap: wrap; gap: var(--obx-s2) var(--obx-s6); }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"]) .page-content .bg-soft-info.rounded-3 .text-muted { font-size: var(--obx-text-sm); margin-right: var(--obx-s2) !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"]) .page-content .bg-soft-info.rounded-3 .fw-bold {
  font-family: var(--obx-mono); font-variant-numeric: tabular-nums; font-size: var(--obx-text-md) !important; font-weight: 700 !important; color: var(--obx-ink) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .pagination { flex-wrap: wrap; }

/* ---- Cham (≤768px): moi muc bam ≥ 44px ------------------------------------- */
@media (max-width: 768px) {
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .btn:not(.btn-link) { min-height: var(--obx-touch) !important; min-width: var(--obx-touch); }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content :is(.form-control, .form-select, .input-group-text) { min-height: var(--obx-touch) !important; }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .pagination .page-link { min-width: var(--obx-touch); min-height: var(--obx-touch); }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-body { padding: var(--obx-s4); }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-body .table-card { margin: calc(-1 * var(--obx-s4)) calc(-1 * var(--obx-s4)) 0 !important; }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .table-card > .table > :is(thead, tbody) > tr > :is(th, td):first-child { padding-left: var(--obx-s4); }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-header[class*="bg-"] { padding: var(--obx-s3) var(--obx-s4) !important; }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"], [data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .card-body.bg-light-subtle { padding: var(--obx-s3) var(--obx-s4) !important; }
}


/* -----------------------------------------------------------------------------
   Hallmark · genre: modern-minimal · macrostructure: Split Studio · design-system: design.md · designed-as-app · page: recharge-bank
   Khoanh khac graphite: "bien lai chuyen khoan" (trang hoa don ?trans_id=...).
   -------------------------------------------------------------------------- */

/* ---- Bang thuong nap (block-promotion.php) — dung chung voi recharge-crypto ---- */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card-header.bg-soft-primary {
  background: transparent !important;
  padding: var(--obx-s4) var(--obx-s5) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card-header.bg-soft-primary .avatar-sm { width: auto; height: auto; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card-header.bg-soft-primary .flex-shrink-0.me-3 { margin-right: var(--obx-s2) !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card-header.bg-soft-primary .avatar-title {
  background: transparent !important; color: var(--obx-muted) !important; border-radius: 0 !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card-header.bg-soft-primary .avatar-title i { font-size: var(--obx-text-lg) !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card:has(.promotion-row) .table > thead th {
  padding-top: var(--obx-s2) !important; padding-bottom: var(--obx-s2) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card:has(.promotion-row) .table > thead th:first-child,
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row > td:first-child { padding-left: var(--obx-s5) !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card:has(.promotion-row) .table > thead th:last-child,
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row > td:last-child { padding-right: var(--obx-s5) !important; }
@media (max-width: 575.98px) {
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card:has(.promotion-row) .table > thead th { white-space: normal; vertical-align: bottom; }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card:has(.promotion-row) .table > thead th:first-child,
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row > td:first-child { padding-left: var(--obx-s4) !important; }
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card:has(.promotion-row) .table > thead th:last-child,
  body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row > td:last-child { padding-right: var(--obx-s4) !important; }
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row { transition: background-color var(--obx-dur) var(--obx-ease) !important; border-bottom: 1px solid var(--obx-rule) !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row:hover { background: var(--obx-sunken) !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row > td { padding-top: var(--obx-s2) !important; padding-bottom: var(--obx-s2) !important; vertical-align: middle; }
/* o icon tron trang tri truoc moi muc -> bo; so tien la so lieu */
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row > td:first-child span.bg-soft-primary { display: none; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row > td:first-child .fw-medium {
  font-family: var(--obx-mono); font-variant-numeric: tabular-nums; font-size: var(--obx-text-base) !important; font-weight: 500 !important; color: var(--obx-ink);
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row .badge {
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums; font-size: var(--obx-text-sm) !important; padding: 2px 8px !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .promotion-row .badge i { font-size: var(--obx-text-xs); }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card:has(.promotion-row) .p-2.bg-light.border-top {
  background: transparent !important; border-top: 1px solid var(--obx-rule) !important; padding: var(--obx-s3) var(--obx-s5) !important;
}
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card:has(.promotion-row) .p-2.bg-light.border-top > .d-flex { justify-content: flex-start !important; align-items: flex-start !important; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card:has(.promotion-row) .p-2.bg-light.border-top i { color: var(--obx-muted) !important; margin-top: 2px; }
body:is([data-page="recharge-bank"], [data-page="recharge-crypto"]) .page-content .card:has(.promotion-row) .p-2.bg-light.border-top .text-muted { font-size: var(--obx-text-xs) !important; }

/* ---- Bang lich su nap ngan hang: ma, so tien, thoi gian -> mono ------------- */
body[data-page="recharge-bank"] .page-content #invoice-list-data > tr > td:is(:nth-child(1), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)):not([colspan]) {
  font-family: var(--obx-mono); font-variant-numeric: tabular-nums; font-size: var(--obx-text-sm);
}
body[data-page="recharge-bank"] .page-content #invoice-list-data > tr > td:is(:nth-child(4), :nth-child(5)):not([colspan]) { color: var(--obx-ink); font-weight: 500; }

/* ---- Trang hoa don (?trans_id=) ----------------------------------------------
   Khung ngoai giu panel; 2 the con (bien lai + QR) bo khung de khong the-trong-the. */
body[data-page="recharge-bank"] .page-content .payment-info-container > .alert-info { margin-bottom: var(--obx-s5) !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container > .alert > i,
body[data-page="recharge-bank"] .page-content .payment-info-container > .alert > .d-flex > i { font-size: var(--obx-text-lg) !important; color: var(--obx-muted) !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container .card {
  border: 0 !important; box-shadow: none !important;
}
/* Bien lai graphite — khoanh khac toi duy nhat cua trang */
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card {
  background: var(--obx-graphite) !important;
  color: var(--obx-g-text) !important;
  border-radius: var(--obx-r-panel) !important;
  margin-bottom: var(--obx-s4) !important;
}
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card > .card-header {
  padding: var(--obx-s5) var(--obx-s6) var(--obx-s3) !important;
  border-bottom: 1px solid var(--obx-g-rule) !important;
}
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card > .card-header .flex-shrink-0 { display: none; }
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .card-title { color: var(--obx-g-text) !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .text-muted { color: var(--obx-g-muted) !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .card-header .fw-bold {
  font-family: var(--obx-mono); font-weight: 600 !important; color: var(--obx-g-text) !important;
}
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card > .card-body { padding: var(--obx-s3) var(--obx-s6) var(--obx-s5) !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table {
  --vz-table-color: var(--obx-g-text); --vz-table-bg: transparent; color: var(--obx-g-text) !important; margin-bottom: var(--obx-s3) !important;
}
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table > tbody > tr > :is(th, td) {
  padding: var(--obx-s3) 0 !important;
  border-bottom: 1px dashed var(--obx-g-rule) !important;
  background: transparent !important;
  vertical-align: middle;
}
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table > tbody > tr:last-child > :is(th, td) { border-bottom: 0 !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table th {
  color: var(--obx-g-muted) !important; font-size: var(--obx-text-sm) !important; font-weight: 400 !important; padding-right: var(--obx-s4) !important; white-space: nowrap;
}
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table td { color: var(--obx-g-text) !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table .fw-medium { color: var(--obx-g-text) !important; font-weight: 600 !important; }
/* So tien: con so lon nhat cua trang, mau nhan tren nen toi */
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table .badge {
  background: transparent !important; border: 0 !important; padding: 0 !important;
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-xl) !important; font-weight: 700 !important; letter-spacing: -0.01em !important;
  color: var(--obx-g-accent) !important; line-height: 1.2;
}
/* So TK, chu TK, noi dung CK: mono, chu sang, khong nen code xam */
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table code {
  background: transparent !important; padding: 0 !important; color: var(--obx-g-text) !important;
  font-size: var(--obx-text-md) !important; font-weight: 600; overflow-wrap: break-word; white-space: normal;
}
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table tr:last-child code { color: var(--obx-g-accent) !important; font-weight: 700; }
/* Nut sao chep tren nen toi: vien manh, chu sang */
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table .btn {
  background: transparent !important; border: 1px solid var(--obx-g-rule) !important; color: var(--obx-g-text) !important;
  min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table .btn:hover { border-color: var(--obx-g-muted) !important; background: oklch(100% 0 0 / 0.06) !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table .btn:focus-visible { outline-color: var(--obx-g-accent) !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table td > .d-flex { gap: var(--obx-s3); justify-content: space-between; }
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .card-body > p.small { font-size: var(--obx-text-xs) !important; line-height: 1.5; }
/* "Tao hoa don moi" la hanh dong tao, khong phai pha huy -> nut phu */
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .d-grid > .btn-soft-danger {
  background: var(--obx-surface) !important; border: 1px solid var(--obx-rule-2) !important; color: var(--obx-ink) !important;
}
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .d-grid > .btn-soft-danger:hover { background: var(--obx-sunken) !important; }
/* Cot QR: khong khung, can giua, dong ho dem nguoc dang so lieu */
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-5 > .card { background: transparent !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-5 > .card > .card-body { padding: var(--obx-s2) var(--obx-s4) !important; }
body[data-page="recharge-bank"] .page-content .payment-info-container #qrCodeImage {
  border: 1px solid var(--obx-rule); border-radius: var(--obx-r-control); padding: var(--obx-s2); background: oklch(100% 0 0);
}
body[data-page="recharge-bank"] .page-content .payment-info-container .countdown-container {
  background: var(--obx-warn-tint) !important;
  border: 1px solid color-mix(in oklch, var(--obx-warn) 25%, transparent);
  border-radius: var(--obx-r-control) !important;
  padding: var(--obx-s2) var(--obx-s4) !important;
}
body[data-page="recharge-bank"] .page-content .payment-info-container :is(.countdown-value, .countdown-separator) {
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums; color: var(--obx-warn) !important; font-size: var(--obx-text-xl) !important;
}
body[data-page="recharge-bank"] .page-content .payment-info-container .countdown-label {
  color: var(--obx-warn) !important; font-size: var(--obx-text-xs) !important; text-transform: none !important; letter-spacing: 0 !important;
}
body[data-page="recharge-bank"] .page-content .payment-info-container > .alert-warning { margin-top: var(--obx-s5) !important; }
@media (max-width: 768px) {
  body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card > .card-header { padding: var(--obx-s4) var(--obx-s4) var(--obx-s3) !important; }
  body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card > .card-body { padding: var(--obx-s2) var(--obx-s4) var(--obx-s4) !important; }
  body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table th { width: auto !important; font-size: var(--obx-text-xs) !important; }
  body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table .btn { min-width: var(--obx-touch); min-height: var(--obx-touch); }
}
/* Dien thoai: nhan tren, gia tri duoi -> so tai khoan khong bi bẻ dong */
@media (max-width: 575.98px) {
  body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px dashed var(--obx-g-rule); }
  body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table > tbody > tr:last-child { border-bottom: 0; }
  body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table > tbody > tr > th { width: auto !important; padding: var(--obx-s3) 0 0 !important; border-bottom: 0 !important; }
  body[data-page="recharge-bank"] .page-content .payment-info-container .col-lg-7 > .card .table > tbody > tr > td { padding: var(--obx-s1) 0 var(--obx-s3) !important; border-bottom: 0 !important; }
}


/* -----------------------------------------------------------------------------
   Hallmark · genre: modern-minimal · macrostructure: Split Studio · design-system: design.md · designed-as-app · page: recharge-crypto
   Khong co khoanh khac graphite (hoa don crypto nam o recharge-crypto-new).
   -------------------------------------------------------------------------- */
/* logo USDT: dau hieu tai san, thu nho, can trai voi form */
body[data-page="recharge-crypto"] .page-content .crypto-logo-container { padding: 0 !important; margin-bottom: var(--obx-s4) !important; text-align: left !important; }
body[data-page="recharge-crypto"] .page-content .crypto-logo-container .crypto-logo { width: 112px; transform: none !important; transition: none !important; }
body[data-page="recharge-crypto"] .page-content .input-group-text.text-primary { color: var(--obx-ink-2) !important; }
body[data-page="recharge-crypto"] .page-content .input-group-text.text-primary.fw-medium { font-family: var(--obx-mono); font-size: var(--obx-text-sm) !important; font-weight: 600 !important; }
body[data-page="recharge-crypto"] .page-content .form-text.fs-12 { font-size: var(--obx-text-xs) !important; }
/* the "Luu y" ben phai: icon canh bao + 2 dong cam ket -> icon xam, khong o tron */
body[data-page="recharge-crypto"] .page-content .col-xl-5 .card-header .card-title > i.text-warning { color: var(--obx-warn) !important; }
body[data-page="recharge-crypto"] .page-content .card-support { margin-top: var(--obx-s5) !important; padding-top: var(--obx-s2); border-top: 1px solid var(--obx-rule); }
body[data-page="recharge-crypto"] .page-content .card-support .avatar-xs { width: 20px; height: 20px; margin-right: var(--obx-s3) !important; }
body[data-page="recharge-crypto"] .page-content .card-support .avatar-title { background: transparent !important; color: var(--obx-muted) !important; border-radius: 0 !important; font-size: var(--obx-text-lg); }
body[data-page="recharge-crypto"] .page-content .card-support .d-flex { align-items: flex-start !important; }
body[data-page="recharge-crypto"] .page-content .card-support h5 { font-size: var(--obx-text-sm) !important; font-weight: 600 !important; color: var(--obx-ink) !important; }
body[data-page="recharge-crypto"] .page-content .card-support p { font-size: var(--obx-text-xs) !important; }
/* Bang lich su crypto */
body[data-page="recharge-crypto"] .page-content #invoice-list-data > tr > td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6)):not([colspan]) {
  font-family: var(--obx-mono); font-variant-numeric: tabular-nums; font-size: var(--obx-text-sm);
}
body[data-page="recharge-crypto"] .page-content #invoice-list-data > tr > td:nth-child(2) .text-success { color: var(--obx-muted) !important; }
/* <b style="color:red"> trong cot thuc nhan -> mau muc */
body[data-page="recharge-crypto"] .page-content #invoice-list-data > tr > td:nth-child(3) b { color: var(--obx-ink) !important; font-weight: 600; }
/* nut "Thanh toan" o moi dong: nut phu (accent chi danh cho CTA chinh) */
body[data-page="recharge-crypto"] .page-content #invoice-list-data .btn-primary {
  background: var(--obx-surface) !important; border: 1px solid var(--obx-rule-2) !important; color: var(--obx-ink) !important;
}
body[data-page="recharge-crypto"] .page-content #invoice-list-data .btn-primary:hover { background: var(--obx-sunken) !important; }


/* -----------------------------------------------------------------------------
   Hallmark · genre: modern-minimal · macrostructure: Split Studio · design-system: design.md · designed-as-app · page: affiliates
   Khoanh khac graphite: o "hoa hong kha dung" (con so trong tam + tien do + Rut tien).
   -------------------------------------------------------------------------- */
body[data-page="affiliates"] .page-content #urlRef {
  font-family: var(--obx-mono) !important; font-size: var(--obx-text-sm) !important; color: var(--obx-ink) !important; min-height: var(--obx-touch);
}
body[data-page="affiliates"] .page-content .copy-btn { min-height: var(--obx-touch); transform: none !important; }
/* Chia se: vong tron don sac co vien, khong mau thuong hieu, khong nhac len */
body[data-page="affiliates"] .page-content .text-center.social-share { text-align: left !important; margin-bottom: var(--obx-s5) !important; }
body[data-page="affiliates"] .page-content .text-center.social-share > p {
  font-size: var(--obx-text-sm) !important; font-weight: 500; color: var(--obx-ink) !important; margin-bottom: var(--obx-s2) !important;
}
body[data-page="affiliates"] .page-content .social-share a {
  width: var(--obx-touch) !important; height: var(--obx-touch) !important;
  margin: 0 var(--obx-s2) 0 0 !important;
  background: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule-2);
  color: var(--obx-ink-2) !important;
  transform: none !important;
  transition: background-color var(--obx-dur) var(--obx-ease), border-color var(--obx-dur) var(--obx-ease), color var(--obx-dur) var(--obx-ease) !important;
}
body[data-page="affiliates"] .page-content .social-share a i { color: inherit !important; font-size: var(--obx-text-lg) !important; }
body[data-page="affiliates"] .page-content .social-share a:hover { background: var(--obx-sunken) !important; border-color: var(--obx-muted); color: var(--obx-ink) !important; }
body[data-page="affiliates"] .page-content .social-share a:active { transform: translateY(1px) !important; }
/* Luu y quan trong (admin nhap) */
body[data-page="affiliates"] .page-content .alert-light-subtle {
  margin-bottom: 0 !important; padding: var(--obx-s3) var(--obx-s4) !important; border-radius: var(--obx-r-control) !important;
}
body[data-page="affiliates"] .page-content .alert-light-subtle > .d-flex > .flex-shrink-0 { font-size: var(--obx-text-lg) !important; line-height: 1.2; color: var(--obx-muted) !important; }
body[data-page="affiliates"] .page-content .alert-light-subtle > .d-flex > .ms-3 { margin-left: var(--obx-s3) !important; }
body[data-page="affiliates"] .page-content .alert-light-subtle h5 { font-size: var(--obx-text-sm) !important; font-weight: 600 !important; margin-bottom: var(--obx-s0) !important; }
body[data-page="affiliates"] .page-content .alert-light-subtle .text-muted { font-size: var(--obx-text-sm) !important; color: var(--obx-ink-2) !important; }

/* ---- O hoa hong kha dung (graphite) — dung chung voi affiliate-withdraw ---- */
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .row > :not(:first-child) > .card > .card-body > .text-center.mb-4:first-child {
  background: var(--obx-graphite);
  color: var(--obx-g-text);
  border-radius: var(--obx-r-panel);
  padding: var(--obx-s5) var(--obx-s6) !important;
  margin-bottom: var(--obx-s5) !important;
  text-align: left !important;
}
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .row > :not(:first-child) > .card > .card-body > .text-center.mb-4:first-child :is(h3, .display-6) {
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums;
  font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.1;
  color: var(--obx-g-text) !important; margin-bottom: 0 !important;
}
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .row > :not(:first-child) > .card > .card-body > .text-center.mb-4:first-child p.text-muted {
  color: var(--obx-g-muted) !important; font-size: var(--obx-text-sm) !important; margin: var(--obx-s1) 0 0 !important;
}
body[data-page="affiliates"] .page-content .col-xl-5 > .card > .card-body > .text-center.mb-4:first-child > .mb-4 { margin-bottom: var(--obx-s5) !important; }
body[data-page="affiliates"] .page-content .col-xl-5 > .card > .card-body > .text-center.mb-4:first-child > .mb-4 > .d-inline-block { display: block !important; }
body[data-page="affiliates"] .page-content .progress-wrap { margin-bottom: var(--obx-s4) !important; padding-top: var(--obx-s4); border-top: 1px dashed var(--obx-g-rule); }
body[data-page="affiliates"] .page-content .progress-wrap .text-muted { color: var(--obx-g-muted) !important; }
body[data-page="affiliates"] .page-content .progress-wrap span.fw-medium,
body[data-page="affiliates"] .page-content .progress-wrap > .d-flex.mt-1 > span {
  font-family: var(--obx-mono); font-variant-numeric: tabular-nums;
}
body[data-page="affiliates"] .page-content .progress-wrap span.fw-medium { color: var(--obx-g-text) !important; }
body[data-page="affiliates"] .page-content .progress-wrap .progress { background: var(--obx-g-rule) !important; height: 6px !important; border-radius: 3px; }
body[data-page="affiliates"] .page-content .progress-wrap .progress-bar { background: var(--obx-g-accent) !important; border-radius: 3px; }
body[data-page="affiliates"] .page-content .col-xl-5 > .card > .card-body > .text-center.mb-4:first-child > .btn-primary { margin-top: 0 !important; }
body[data-page="affiliates"] .page-content .col-xl-5 > .card > .card-body > .text-center.mb-4:first-child > .btn-primary:focus-visible { outline-color: var(--obx-g-accent) !important; }
body[data-page="affiliates"] .page-content .col-xl-5 > .card > .card-body > .text-center.mb-4:first-child > .mt-2.text-muted {
  color: var(--obx-g-muted) !important; font-size: var(--obx-text-xs) !important; margin-top: var(--obx-s3) !important;
}
body[data-page="affiliates"] .page-content .col-xl-5 > .card > .card-body > .text-center.mb-4:first-child > .mt-2.text-muted .text-danger {
  color: var(--obx-g-text) !important; font-family: var(--obx-mono); font-variant-numeric: tabular-nums; font-weight: 600 !important;
}

/* ---- 4 chi so: mot luoi 2x2 ke manh, khong the noi, so lieu mono mau muc ---- */
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .affiliate-stats { margin-bottom: 0 !important; }
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .affiliate-stats > .row {
  --vz-gutter-x: 0; --vz-gutter-y: 0; --bs-gutter-x: 0; --bs-gutter-y: 0;
  margin: 0 !important;
  border: 1px solid var(--obx-rule);
  border-radius: var(--obx-r-control);
  overflow: hidden;
}
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .affiliate-stats > .row > [class*="col-"] {
  width: 50% !important; flex: 0 0 50% !important; max-width: 50%;
  padding: 0 !important; margin: 0 !important;
}
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .affiliate-stats > .row > [class*="col-"]:nth-child(odd) { border-right: 1px solid var(--obx-rule); }
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .affiliate-stats > .row > [class*="col-"]:nth-child(n+3) { border-top: 1px solid var(--obx-rule); }
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .affiliate-stats .border.rounded {
  border: 0 !important; border-radius: 0 !important; height: 100%;
  padding: var(--obx-s3) var(--obx-s4) !important; text-align: left !important;
}
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .affiliate-stats h3, body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .affiliate-stats h3[class*="text-"] {
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-lg) !important; font-weight: 700 !important; color: var(--obx-ink) !important;
  margin-bottom: var(--obx-s0) !important;
}
body:is([data-page="affiliates"], [data-page="affiliate-withdraw"]) .page-content .affiliate-stats p { font-size: var(--obx-text-xs) !important; line-height: 1.4; }

/* ---- Bang thanh vien da gioi thieu ---- */
body[data-page="affiliates"] .page-content #invoice-list-data > tr > td:is(:nth-child(2), :nth-child(3)):not([colspan]) { font-family: var(--obx-mono); font-variant-numeric: tabular-nums; font-size: var(--obx-text-sm); }
body[data-page="affiliates"] .page-content #invoice-list-data > tr > td:nth-child(3) .text-success { color: var(--obx-ink) !important; font-weight: 600 !important; }


/* -----------------------------------------------------------------------------
   Hallmark · genre: modern-minimal · macrostructure: Split Studio · design-system: design.md · designed-as-app · page: affiliate-withdraw
   Khoanh khac graphite: o "hoa hong kha dung" o cot ngu canh.
   -------------------------------------------------------------------------- */
body[data-page="affiliate-withdraw"] .page-content #withdrawForm .form-group { margin-bottom: var(--obx-s4) !important; }
/* dong "Toi thieu - Toi da" dang <i> nghieng -> chu thuong, muted, so lieu ro */
body[data-page="affiliate-withdraw"] .page-content #withdrawForm .form-group > p.mb-0 { font-size: var(--obx-text-xs); color: var(--obx-muted); margin-top: var(--obx-s1); }
body[data-page="affiliate-withdraw"] .page-content #withdrawForm .form-group > p.mb-0 > i { font-style: normal; font-variant-numeric: tabular-nums; }
body[data-page="affiliate-withdraw"] .page-content #withdrawForm .input-group-text:last-child,
body[data-page="affiliate-withdraw"] .page-content #withdrawForm .input-group > div.input-group-text { font-family: var(--obx-mono); font-size: var(--obx-text-sm) !important; color: var(--obx-ink-2) !important; }
body[data-page="affiliate-withdraw"] .page-content #withdrawForm :is(#stk) { font-family: var(--obx-mono) !important; }
body[data-page="affiliate-withdraw"] .page-content #withdrawForm #stk::placeholder { font-family: var(--obx-font); }
body[data-page="affiliate-withdraw"] .page-content #withdrawForm .invalid-feedback { color: var(--obx-crit) !important; font-size: var(--obx-text-xs) !important; }
body[data-page="affiliate-withdraw"] .page-content #withdrawForm :is(.form-control, .form-select).is-invalid { border-color: var(--obx-crit) !important; }
body[data-page="affiliate-withdraw"] .page-content #withdrawForm > .mt-4 { margin-top: var(--obx-s5) !important; }
/* the "lien ket gioi thieu" (the-trong-the, o icon) -> nhom ke manh */
body[data-page="affiliate-withdraw"] .page-content .col-xl-7 .card .card.bg-light {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--obx-rule) !important; border-radius: 0 !important; margin: 0 !important;
}
body[data-page="affiliate-withdraw"] .page-content .col-xl-7 .card .card.bg-light > .card-body { padding: var(--obx-s5) 0 0 !important; }
body[data-page="affiliate-withdraw"] .page-content .col-xl-7 .card .card.bg-light .avatar-sm { display: none; }
body[data-page="affiliate-withdraw"] .page-content .col-xl-7 .card .card.bg-light .flex-grow-1.ms-3 { margin-left: 0 !important; }
body[data-page="affiliate-withdraw"] .page-content .col-xl-7 .card .card.bg-light p.fw-medium { font-size: var(--obx-text-sm); color: var(--obx-ink) !important; margin-bottom: var(--obx-s2) !important; }
body[data-page="affiliate-withdraw"] .page-content #refLink { font-family: var(--obx-mono) !important; font-size: var(--obx-text-sm) !important; color: var(--obx-ink) !important; }
body[data-page="affiliate-withdraw"] .page-content .col-xl-7 .card .card.bg-light .btn.copy { min-width: var(--obx-touch); }
body[data-page="affiliate-withdraw"] .page-content .col-xl-7 > .card > .card-body > .mt-4:last-child { margin-top: var(--obx-s5) !important; }
/* Bang lich su rut */
body[data-page="affiliate-withdraw"] .page-content #invoice-list-data > tr > td:is(:nth-child(1), :nth-child(2), :nth-child(3)):not([colspan]) { font-family: var(--obx-mono); font-variant-numeric: tabular-nums; font-size: var(--obx-text-sm); }
body[data-page="affiliate-withdraw"] .page-content #invoice-list-data > tr > td:nth-child(3) b { color: var(--obx-ink); font-weight: 600; }
body[data-page="affiliate-withdraw"] .page-content #invoice-list-data > tr > td:nth-child(6) small { font-size: var(--obx-text-xs); color: var(--obx-muted); }

/* ===================== TRANG: d-auth (scope body[data-page]) ===================== */
/* Hallmark · design-system: design.md · designed-as-app · group: d-auth */
/* Hallmark · genre: modern-minimal · macrostructure: single focused panel · design-system: design.md · designed-as-app · page: login */
/* Hallmark · genre: modern-minimal · macrostructure: single focused panel · design-system: design.md · designed-as-app · page: register */
/* Hallmark · genre: modern-minimal · macrostructure: single focused panel · design-system: design.md · designed-as-app · page: forgot-password */
/* Hallmark · genre: modern-minimal · macrostructure: single focused panel · design-system: design.md · designed-as-app · page: verify_2fa */
/* Hallmark · genre: modern-minimal · macrostructure: single focused panel · design-system: design.md · designed-as-app · page: verify_otp */
/* Hallmark · genre: modern-minimal · macrostructure: single focused panel · design-system: design.md · designed-as-app · page: reset-password */
/* =============================================================================
   AUTH — one 420px panel on paper, wordmark above it, nothing else.
   Graphite moment: none (a sign-in form has no "receipt").
   Scope: every rule starts with  :is(<6 auth roots>)  =
     body[data-page=<action>] .page-content   (login, register, forgot-password,
                                               verify_2fa, verify_otp)
     body[data-page="reset-password"] > .auth-page-wrapper   (reset-password: it does not
       include sidebar.php, so it has no data-page and no .page-content; it is the
       only client view whose .auth-page-wrapper is a direct child of <body>).
   JS-toggled elements on these pages (display never set here):
     #register-password-strength-wrapper (.d-none), .invalid-feedback,
     button text/spinner swaps, input[type] swap by password-addon.init.js.
   ========================================================================== */

/* ---- Decoration out: photo hero, particles canvas, wave shape -------------- */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-one-bg-position { display: none !important; }
/* animated lordicon (external CDN, decorative) */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  lord-icon { display: none !important; }

/* ---- Frame ------------------------------------------------------------------ */
body[data-page="reset-password"] > .auth-page-wrapper { background: var(--obx-paper); min-height: 100vh; color: var(--obx-ink-2); font-family: var(--obx-font); }
body:is([data-page="login"], [data-page="register"], [data-page="forgot-password"], [data-page="verify_2fa"], [data-page="verify_otp"]) .page-content .auth-page-wrapper,
body[data-page="reset-password"] > .auth-page-wrapper { padding-top: var(--obx-s10) !important; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-page-content { padding-bottom: var(--obx-s10) !important; }

/* both rows (wordmark + panel) share one 420px column so they align left */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-page-content .container > .row {
  --vz-gutter-x: 0; --bs-gutter-x: 0;
  max-width: 420px; margin-left: auto !important; margin-right: auto !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-page-content .container > .row > [class*="col-"] { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ---- Wordmark (fixes the 49px overflow at 375: the 100px-tall logo img was 400px wide) */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-page-content .container > .row:first-child .text-center {
  text-align: left !important; margin: 0 0 var(--obx-s6) !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-logo { display: inline-flex !important; align-items: center; min-height: var(--obx-touch); border-radius: var(--obx-r-control); }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-logo img { height: 32px !important; width: auto !important; max-width: 100% !important; display: block; }
/* reset-password prints the site title under its logo */
body[data-page="reset-password"] > .auth-page-wrapper .auth-page-content .container > .row:first-child p {
  color: var(--obx-ink-2) !important; font-size: var(--obx-text-sm) !important; font-weight: 500 !important; margin: var(--obx-s2) 0 0 !important;
}

/* ---- Panel ------------------------------------------------------------------- */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-page-content .card {
  margin: 0 !important;
  background: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-panel) !important;
  box-shadow: none !important;
  color: var(--obx-ink-2);
  font-size: var(--obx-text-base);
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-page-content .card-body { padding: var(--obx-s8) !important; }

/* panel head: left-aligned, page-title rhythm */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body > .text-center:first-child { text-align: left !important; margin: 0 0 var(--obx-s6) !important; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body > .text-center:first-child h5 {
  color: var(--obx-ink) !important;
  font-family: var(--obx-font) !important;
  font-size: var(--obx-text-xl) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body > .text-center:first-child p {
  color: var(--obx-muted) !important; font-size: var(--obx-text-base) !important; line-height: 1.5; margin: var(--obx-s1) 0 0 !important;
}

/* instruction notes (forgot: alert-warning, verify: alert-info) are guidance,
   not a status -> neutral hairline note */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body > .alert {
  text-align: left !important;
  margin: 0 0 var(--obx-s5) !important;
  padding: var(--obx-s3) var(--obx-s4) !important;
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-control) !important;
  color: var(--obx-ink-2) !important;
  font-size: var(--obx-text-sm) !important;
  line-height: 1.5;
}
/* login demo notice stays a warning (it is one) */
:is(body[data-page="login"] .page-content) form .alert { font-size: var(--obx-text-sm) !important; border-radius: var(--obx-r-control) !important; }

/* form wrapper (.p-2 .mt-4 / .p-2) adds nothing */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body > .p-2 { padding: 0 !important; margin: 0 !important; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body form :is(.mb-3, .mb-4) { margin-bottom: var(--obx-s4) !important; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body form .auth-pass-inputgroup.mb-3 { margin-bottom: 0 !important; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body form :is(.mt-4, .text-center.mt-4) { margin-top: var(--obx-s6) !important; }

/* ---- Fields ------------------------------------------------------------------ */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body .form-label {
  display: inline-block; margin-bottom: var(--obx-s2) !important;
  color: var(--obx-ink) !important; font-size: var(--obx-text-sm) !important; font-weight: 500 !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body .form-control {
  min-height: var(--obx-control-h) !important;
  background-color: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule-2) !important;
  border-radius: var(--obx-r-control) !important;
  color: var(--obx-ink) !important;
  font-family: var(--obx-font) !important;
  font-size: var(--obx-text-base) !important;
  box-shadow: none !important;
  transition: border-color var(--obx-dur) var(--obx-ease) !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body .form-control::placeholder { color: var(--obx-muted) !important; opacity: 1; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body .form-control:focus { border-color: var(--obx-accent) !important; box-shadow: 0 0 0 1px var(--obx-accent) !important; }
/* OTP / 2FA codes are figures */
:is(body[data-page="verify_2fa"] .page-content, body[data-page="verify_otp"] .page-content) #code:not(:placeholder-shown) {
  font-family: var(--obx-mono) !important; font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}

/* show/hide password: muted glyph, full-height 44px hit area inside the field */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-pass-inputgroup .password-addon {
  width: var(--obx-touch) !important; height: 100% !important; min-height: 0 !important;
  padding: 0 !important; display: inline-flex; align-items: center; justify-content: center;
  color: var(--obx-muted) !important; background: transparent !important; border: 0 !important;
  border-radius: 0 var(--obx-r-control) var(--obx-r-control) 0 !important;
  font-size: var(--obx-text-md) !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-pass-inputgroup .password-addon:hover { color: var(--obx-ink) !important; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .auth-pass-inputgroup .password-input { padding-right: var(--obx-touch) !important; }

/* login: "forgot password?" sits on the label line */
body[data-page="login"] .page-content .card-body .float-end a {
  color: var(--obx-muted) !important; font-size: var(--obx-text-sm) !important; text-decoration: none;
  transition: color var(--obx-dur) var(--obx-ease);
}
body[data-page="login"] .page-content .card-body .float-end a:hover { color: var(--obx-accent-ink) !important; text-decoration: underline; }

/* register: strength meter (bar colour classes swapped by JS) */
body[data-page="register"] .page-content #register-password-strength-wrapper { margin-top: var(--obx-s2) !important; }
body[data-page="register"] .page-content #register-password-strength-wrapper .progress {
  height: 4px !important; background: var(--obx-sunken) !important; border-radius: 2px !important; box-shadow: none !important;
}
body[data-page="register"] .page-content #register-password-strength-bar { transition: width var(--obx-dur) var(--obx-ease), background-color var(--obx-dur) var(--obx-ease) !important; background-image: none !important; }
body[data-page="register"] .page-content #register-password-strength-bar.bg-danger { background-color: var(--obx-crit) !important; }
body[data-page="register"] .page-content #register-password-strength-bar.bg-warning { background-color: var(--obx-warn) !important; }
body[data-page="register"] .page-content #register-password-strength-bar.bg-primary { background-color: var(--obx-accent) !important; }
body[data-page="register"] .page-content #register-password-strength-bar.bg-success { background-color: var(--obx-ok) !important; }
body[data-page="register"] .page-content #register-password-strength-text { display: block; margin-top: var(--obx-s1); color: var(--obx-muted) !important; font-size: var(--obx-text-xs) !important; }
:is(body[data-page="register"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper) .invalid-feedback { color: var(--obx-crit) !important; font-size: var(--obx-text-xs) !important; }

/* reset-password: requirement list = inner group, hairline divider (no card-in-card) */
body[data-page="reset-password"] > .auth-page-wrapper #password-contain {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--obx-rule) !important;
  border-radius: 0 !important; padding: var(--obx-s4) 0 0 !important; margin-top: var(--obx-s5) !important;
}
body[data-page="reset-password"] > .auth-page-wrapper #password-contain h5 { color: var(--obx-ink) !important; font-size: var(--obx-text-sm) !important; font-weight: 600 !important; margin-bottom: var(--obx-s2) !important; }
body[data-page="reset-password"] > .auth-page-wrapper #password-contain p { color: var(--obx-ink-2) !important; font-size: var(--obx-text-sm) !important; }
body[data-page="reset-password"] > .auth-page-wrapper #password-contain p b { color: var(--obx-ink) !important; font-weight: 600 !important; }
body[data-page="reset-password"] > .auth-page-wrapper #password-contain p.invalid::before { color: var(--obx-muted) !important; }
body[data-page="reset-password"] > .auth-page-wrapper #password-contain p.valid::before { color: var(--obx-ok) !important; }
body[data-page="reset-password"] > .auth-page-wrapper .form-text { color: var(--obx-muted) !important; font-size: var(--obx-text-xs) !important; margin-top: var(--obx-s1) !important; }

/* ---- CTA: every auth submit is the panel's one primary action ---------------- */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body :is(#btnLoginPage, #btnRegister, #btnForgotPassword, #btnsubmit, #btnChangePassword) {
  min-height: var(--obx-control-h) !important;
  border-radius: var(--obx-r-control) !important;
  font-family: var(--obx-font) !important; font-size: var(--obx-text-base) !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  background-image: none !important; box-shadow: none !important; transform: none !important;
  transition: background-color var(--obx-dur) var(--obx-ease), border-color var(--obx-dur) var(--obx-ease) !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body :is(#btnLoginPage, #btnRegister, #btnForgotPassword, #btnsubmit, #btnChangePassword):not(:disabled) {
  background-color: var(--obx-accent) !important; border: 1px solid var(--obx-accent) !important; color: var(--obx-on-accent) !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body :is(#btnLoginPage, #btnRegister, #btnForgotPassword, #btnsubmit, #btnChangePassword):not(:disabled):hover {
  background-color: var(--obx-accent-hover) !important; border-color: var(--obx-accent-hover) !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body :is(#btnLoginPage, #btnRegister, #btnForgotPassword, #btnsubmit, #btnChangePassword):active { transform: translateY(1px) !important; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card-body :is(#btnLoginPage, #btnRegister, #btnForgotPassword, #btnsubmit, #btnChangePassword):disabled {
  background-color: var(--obx-sunken) !important; border: 1px solid var(--obx-rule) !important; color: var(--obx-muted) !important; opacity: 1 !important;
}

/* Google sign-in (when enabled): secondary voice — red is never a primary CTA */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content)
  .card-body .signin-other-title { position: relative; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content)
  .card-body .signin-other-title::after { border-top: 1px solid var(--obx-rule) !important; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content)
  .card-body .signin-other-title .title {
  background: var(--obx-surface) !important; color: var(--obx-muted) !important;
  font-size: var(--obx-text-sm) !important; font-weight: 500 !important; margin-bottom: var(--obx-s4) !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content)
  .card-body a.btn-danger {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: var(--obx-control-h) !important;
  background: var(--obx-surface) !important; border: 1px solid var(--obx-rule-2) !important; color: var(--obx-ink) !important;
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important;
}
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content)
  .card-body a.btn-danger:hover { background: var(--obx-sunken) !important; }

/* ---- Below the panel: switch-flow line ---------------------------------------- */
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card + .mt-4.text-center { margin-top: var(--obx-s5) !important; text-align: left !important; padding: 0; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card + .mt-4.text-center p { color: var(--obx-muted) !important; font-size: var(--obx-text-base) !important; }
:is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
    body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
    body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
  .card + .mt-4.text-center a {
  color: var(--obx-accent-ink) !important; font-weight: 600 !important;
  text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* reset-password footer (outside .page-content, no shared layer) */
body[data-page="reset-password"] > .auth-page-wrapper .footer {
  position: static !important; left: 0 !important; background: transparent !important;
  border-top: 1px solid var(--obx-rule) !important; color: var(--obx-muted) !important; font-size: var(--obx-text-sm) !important;
}
body[data-page="reset-password"] > .auth-page-wrapper .footer .text-muted { color: var(--obx-muted) !important; }

/* ---- Phones -------------------------------------------------------------------- */
@media (max-width: 768px) {
  :is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
      body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
      body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
    .card-body :is(.form-control, #btnLoginPage, #btnRegister, #btnForgotPassword, #btnsubmit, #btnChangePassword, a.btn-danger) {
    min-height: var(--obx-touch) !important;
  }
  /* inline text links get a 44px hit band without moving the text */
  body[data-page="login"] .page-content .card-body .float-end a { display: inline-block; padding: 18px 0 7px; margin: -18px 0 -7px; }
  :is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
      body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
      body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
    .card + .mt-4.text-center a {
    display: inline-block; padding: 12px 0; margin: -12px 0;
  }
}
@media (max-width: 575.98px) {
  :is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
      body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
      body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
    .auth-page-content .container { padding-left: 4px !important; padding-right: 4px !important; }
  body[data-page="reset-password"] > .auth-page-wrapper .auth-page-content .container { padding-left: 16px !important; padding-right: 16px !important; }
  body:is([data-page="login"], [data-page="register"], [data-page="forgot-password"], [data-page="verify_2fa"], [data-page="verify_otp"]) .page-content .auth-page-wrapper,
  body[data-page="reset-password"] > .auth-page-wrapper { padding-top: var(--obx-s6) !important; }
  :is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
      body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
      body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
    .auth-page-content .card-body { padding: var(--obx-s6) var(--obx-s5) !important; }
  :is(body[data-page="login"] .page-content, body[data-page="register"] .page-content,
      body[data-page="forgot-password"] .page-content, body[data-page="verify_2fa"] .page-content,
      body[data-page="verify_otp"] .page-content, body[data-page="reset-password"] > .auth-page-wrapper)
    .card-body > .text-center:first-child h5 { font-size: var(--obx-text-lg) !important; }
}

/* ===================== TRANG: e-content (scope body[data-page]) ===================== */
/* Hallmark · design-system: design.md · designed-as-app · group: e-content */
/* =============================================================================
   NHOM E — trang noi dung: contact, faq, policy, privacy, document-api.
   Chi CSS. Moi rule bat dau bang body[data-page="..."] (hoac :is() cua cac
   data-page do — cung do uu tien). Noi dung admin nhap (settings.page_*) duoc
   ve phong thu, khong viet lai. Khong dat display cho phan tu JS bat/tat.
   ========================================================================== */

/* Hallmark · genre: modern-minimal · macrostructure: Long Document · design-system: design.md · designed-as-app · page: contact */
/* Hallmark · genre: modern-minimal · macrostructure: Long Document · design-system: design.md · designed-as-app · page: faq */
/* Hallmark · genre: modern-minimal · macrostructure: Long Document · design-system: design.md · designed-as-app · page: policy */
/* Hallmark · genre: modern-minimal · macrostructure: Long Document · design-system: design.md · designed-as-app · page: privacy */
/* Graphite moment: none (typography only). Code samples inside admin HTML use --obx-sunken. */

/* ---- Cot doc: mot cot, can trai theo tieu de trang, ~72ch --------------- */
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .row.justify-content-center {
  justify-content: flex-start !important;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .row.justify-content-center > .col-lg-10 {
  max-width: calc(72ch + 2 * var(--obx-s8));
}

/* ---- Dau tai lieu: bo dai mau vang + song SVG trang tri ------------------ */
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .bg-warning-subtle {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-panel) var(--obx-r-panel) 0 0;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .bg-warning-subtle > .card-body {
  padding: var(--obx-s6) var(--obx-s8) var(--obx-s4) !important;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .bg-warning-subtle .text-center {
  text-align: left !important;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .bg-warning-subtle h3 {
  margin: 0;
  font-size: var(--obx-text-lg) !important;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--obx-ink) !important;
}
/* song SVG: trang tri thuan tuy, khong mang thong tin, JS khong dung toi */
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .bg-warning-subtle > .shape {
  display: none !important;
}

/* ---- Than tai lieu (HTML admin nhap) ------------------------------------- */
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 {
  padding: var(--obx-s6) var(--obx-s8) var(--obx-s8) !important;
  min-height: 96px;
  color: var(--obx-ink-2);
  font-size: var(--obx-text-base);
  line-height: 1.7;
  overflow-wrap: break-word;
}
/* trinh soan thao hay de lai font-family / line-height inline: giu Inter */
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :not(pre):not(code):not(kbd):not(i):not([class*="ri-"]):not([class*="mdi"]):not([class*="bx"]) {
  font-family: var(--obx-font) !important;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 > :first-child,
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 > :first-child > :first-child { margin-top: 0 !important; }
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 > :last-child { margin-bottom: 0 !important; }

body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--obx-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-transform: none !important;
  margin: 1.6em 0 0.5em;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 h1 { font-size: var(--obx-text-xl) !important; }
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 h2 { font-size: var(--obx-text-lg) !important; }
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :is(h3, h4) { font-size: var(--obx-text-md) !important; }
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :is(h5, h6) { font-size: var(--obx-text-base) !important; letter-spacing: 0; }

body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :is(p, ul, ol, dl, blockquote, pre, table, figure) {
  margin: 0 0 1em;
  max-width: 72ch;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :is(p, li, dd, td) {
  font-size: var(--obx-text-base);
  line-height: 1.7;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :is(ul, ol) { padding-left: 1.4em; }
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 li { margin: 0.25em 0; }
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 li::marker { color: var(--obx-muted); }
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :is(strong, b) { color: var(--obx-ink); font-weight: 600; }
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 a:not(.btn):not(.accordion-button) {
  color: var(--obx-accent-ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  transition: color var(--obx-dur) var(--obx-ease);
}
@media (hover: hover) {
  body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 a:not(.btn):not(.accordion-button):hover { color: var(--obx-accent-hover) !important; }
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 blockquote {
  padding: 2px 0 2px var(--obx-s4);
  border-left: 2px solid var(--obx-rule-2);
  color: var(--obx-ink-2);
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 hr {
  border: 0; border-top: 1px solid var(--obx-rule); opacity: 1; margin: var(--obx-s6) 0;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :is(img, video, iframe, svg, embed, object) {
  max-width: 100% !important;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :is(img, video) {
  height: auto !important;
  border-radius: var(--obx-r-control);
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 pre {
  font-family: var(--obx-mono) !important;
  font-size: var(--obx-text-sm);
  line-height: 1.6;
  background: var(--obx-sunken);
  color: var(--obx-ink);
  border: 1px solid var(--obx-rule);
  border-radius: var(--obx-r-control);
  padding: var(--obx-s3) var(--obx-s4);
  overflow-x: auto;
  white-space: pre-wrap;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 pre code { background: none; padding: 0; }
/* bang trong noi dung: cuon ngang ben trong, khong day trang */
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--obx-text-sm);
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 :is(th, td) {
  border: 1px solid var(--obx-rule) !important;
  padding: var(--obx-s2) var(--obx-s3) !important;
  vertical-align: top;
  text-align: left;
  font-size: var(--obx-text-sm);
  min-width: 10ch;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 th {
  background: var(--obx-sunken) !important;
  color: var(--obx-ink) !important;
  font-weight: 600;
}

/* ---- FAQ dang accordion (Bootstrap .accordion hoac <details>) -------------
   Danh sach hairline yen tinh; khong dat display cho .collapse (Bootstrap bat/tat). */
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 .accordion {
  --vz-accordion-bg: transparent;
  --vz-accordion-border-color: var(--obx-rule);
  --vz-accordion-btn-focus-box-shadow: none;
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--obx-rule);
  --bs-accordion-btn-focus-box-shadow: none;
  max-width: 72ch;
  border-top: 1px solid var(--obx-rule);
  margin: 0 0 1em;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 .accordion-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--obx-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 .accordion-header { margin: 0 !important; }
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 .accordion-button {
  background: transparent !important;
  color: var(--obx-ink) !important;
  font-size: var(--obx-text-base) !important;
  font-weight: 600 !important;
  line-height: 1.5;
  min-height: var(--obx-touch);
  padding: var(--obx-s3) var(--obx-s1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left;
  transition: color var(--obx-dur) var(--obx-ease) !important;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 .accordion-button:not(.collapsed) { color: var(--obx-accent-ink) !important; }
@media (hover: hover) {
  body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 .accordion-button:hover { color: var(--obx-accent-ink) !important; }
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 .accordion-button::after {
  width: 14px; height: 14px; background-size: 14px; opacity: 0.6;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 .accordion-body {
  padding: 0 var(--obx-s1) var(--obx-s4) !important;
  color: var(--obx-ink-2) !important;
  background: transparent !important;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 details {
  border-bottom: 1px solid var(--obx-rule);
  max-width: 72ch;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 summary {
  min-height: var(--obx-touch);
  padding: var(--obx-s3) var(--obx-s1);
  color: var(--obx-ink);
  font-weight: 600;
  cursor: pointer;
}
body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 summary::marker { color: var(--obx-muted); }

@media (max-width: 575.98px) {
  body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .bg-warning-subtle > .card-body { padding: var(--obx-s5) var(--obx-s4) var(--obx-s3) !important; }
  body:is([data-page="contact"], [data-page="faq"], [data-page="policy"], [data-page="privacy"]) .page-content .card > .card-body.p-4 { padding: var(--obx-s4) var(--obx-s4) var(--obx-s6) !important; }
}


/* Hallmark · genre: modern-minimal · macrostructure: Long Document (technical reference) · design-system: design.md · designed-as-app · page: document-api */
/* Graphite moment: the code samples (example JSON responses) — one treatment type, one per open tab. */

body[data-page="document-api"] .page-content .row.justify-content-center { justify-content: flex-start !important; }
body[data-page="document-api"] .page-content .row.justify-content-center > .col-xl-10 { max-width: 960px; }

/* ---- Dau tai lieu: the gradient -> tieu de + loi dan tren nen giay ------- */
body[data-page="document-api"] .page-content .api-endpoint-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--obx-ink-2) !important;
  margin-bottom: 0 !important;
}
body[data-page="document-api"] .page-content .api-endpoint-card > .card-body { padding: var(--obx-s2) 0 0 !important; }
body[data-page="document-api"] .page-content .api-endpoint-card .card-title {
  font-size: var(--obx-text-lg) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--obx-ink) !important;
}
body[data-page="document-api"] .page-content .api-endpoint-card .card-title i { color: var(--obx-muted); }
/* p.text-white-50: tren nen sang bi trang-tren-trang (chu vo hinh) -> muted */
body[data-page="document-api"] .page-content .api-endpoint-card .text-white-50 {
  color: var(--obx-muted) !important;
  font-size: var(--obx-text-base) !important;
  line-height: 1.6;
  max-width: 72ch;
}
body[data-page="document-api"] .page-content .api-endpoint-card + * { margin-top: 0; }
body[data-page="document-api"] .page-content .row.mb-4:has(.api-endpoint-card) { margin-bottom: var(--obx-s5) !important; }

/* ---- Panel tung phan -------------------------------------------------------- */
body[data-page="document-api"] .page-content .api-section-card {
  background: var(--obx-surface) !important;
  border: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-panel) !important;
  box-shadow: none !important;
  margin-bottom: var(--obx-s6) !important;
}

/* ---- Bang cau hinh API: danh sach dinh nghia hairline -------------------- */
body[data-page="document-api"] .page-content .api-config-table { margin: 0 !important; }
body[data-page="document-api"] .page-content .api-config-table > tbody > tr > td {
  padding: var(--obx-s3) 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--obx-rule) !important;
  vertical-align: middle;
}
body[data-page="document-api"] .page-content .api-config-table > tbody > tr:last-child > td { border-bottom: 0 !important; }
body[data-page="document-api"] .page-content .api-config-table > tbody > tr > td:first-child {
  width: 160px !important;
  padding-right: var(--obx-s4) !important;
  color: var(--obx-muted) !important;
  font-size: var(--obx-text-sm) !important;
  font-weight: 500 !important;
  white-space: nowrap;
}
body[data-page="document-api"] .page-content .api-config-table > tbody > tr > td:last-child {
  color: var(--obx-ink) !important;
  font-size: var(--obx-text-sm) !important;
  overflow-wrap: anywhere;
}
body[data-page="document-api"] .page-content .api-config-table code {
  background: transparent !important; padding: 0 !important; color: var(--obx-ink) !important; font-size: var(--obx-text-sm) !important;
}
/* API key bi che: khong phai trang thai loi -> muc, mono */
body[data-page="document-api"] .page-content #api-key-display {
  color: var(--obx-ink) !important;
  font-family: var(--obx-mono) !important;
  font-size: var(--obx-text-sm);
  overflow-wrap: anywhere;
  margin-right: var(--obx-s2) !important;
}
body[data-page="document-api"] .page-content .api-config-table .btn-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-height: 0 !important;
  margin-left: 0 !important;
  color: var(--obx-ink-2) !important;
  border-radius: var(--obx-r-control) !important;
  font-size: 16px !important;
  flex: none;
}
@media (hover: hover) {
  body[data-page="document-api"] .page-content .api-config-table .btn-link:hover { background: var(--obx-sunken) !important; color: var(--obx-accent-ink) !important; }
}
/* POST / JSON: nhan ky thuat, khong phai trang thai -> mono trung tinh */
body[data-page="document-api"] .page-content .api-config-table .badge {
  background: var(--obx-sunken) !important;
  color: var(--obx-ink) !important;
  border: 1px solid var(--obx-rule-2) !important;
  font-family: var(--obx-mono) !important;
  font-weight: 600 !important;
}

/* ---- Danh sach endpoint (nav-pills-custom) -------------------------------- */
body[data-page="document-api"] .page-content #api-tabs {
  justify-content: flex-start !important;
  gap: var(--obx-s1);
  margin-bottom: var(--obx-s6) !important;
  padding-bottom: var(--obx-s4);
  border-bottom: 1px solid var(--obx-rule);
}
body[data-page="document-api"] .page-content #api-tabs .nav-link {
  margin: 0 !important;
  padding: 0 var(--obx-s3) !important;
  min-height: 36px;
  display: inline-flex; align-items: center;
  border: 1px solid transparent !important;
  border-radius: var(--obx-r-control) !important;
  background: transparent !important;
  color: var(--obx-ink-2) !important;
  font-size: var(--obx-text-sm) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: background-color var(--obx-dur) var(--obx-ease), color var(--obx-dur) var(--obx-ease) !important;
}
body[data-page="document-api"] .page-content #api-tabs .nav-link i { color: var(--obx-muted); margin-right: 6px !important; }
@media (hover: hover) {
  body[data-page="document-api"] .page-content #api-tabs .nav-link:hover { background: var(--obx-sunken) !important; color: var(--obx-ink) !important; }
}
body[data-page="document-api"] .page-content #api-tabs .nav-link.active {
  background: var(--obx-accent-tint) !important;
  border-color: color-mix(in oklch, var(--obx-accent) 22%, transparent) !important;
  color: var(--obx-accent-ink) !important;
  font-weight: 600 !important;
}
body[data-page="document-api"] .page-content #api-tabs .nav-link.active i { color: var(--obx-accent-ink); }

/* ---- Noi dung tung endpoint: Parameters roi Example Response, mot cot ----- */
body[data-page="document-api"] .page-content #api-tabsContent .tab-pane > .row > .col-lg-6 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
body[data-page="document-api"] .page-content #api-tabsContent .tab-pane > .row > .col-lg-6 + .col-lg-6 { margin-top: var(--obx-s6); }
body[data-page="document-api"] .page-content #api-tabsContent h6 {
  font-size: var(--obx-text-md) !important;
  font-weight: 600 !important;
  color: var(--obx-ink) !important;
  margin-bottom: var(--obx-s3) !important;
}
body[data-page="document-api"] .page-content #api-tabsContent h6 i { color: var(--obx-muted); font-weight: 400; }
body[data-page="document-api"] .page-content #api-tabsContent p {
  font-size: var(--obx-text-base);
  line-height: 1.65;
  color: var(--obx-ink-2);
  max-width: 72ch;
  margin-bottom: var(--obx-s2);
}
body[data-page="document-api"] .page-content #api-tabsContent p strong { color: var(--obx-ink); font-weight: 600; }

/* bang tham so: hairline, cuon ngang ben trong o man hep */
body[data-page="document-api"] .page-content .parameter-table {
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
body[data-page="document-api"] .page-content .parameter-table > thead > tr > th {
  padding: var(--obx-s2) var(--obx-s3) !important;
}
body[data-page="document-api"] .page-content .parameter-table > tbody > tr > td {
  padding: var(--obx-s3) !important;
  background: transparent !important;
  color: var(--obx-ink-2) !important;
  border-bottom: 1px solid var(--obx-rule) !important;
  vertical-align: top !important;
  font-size: var(--obx-text-sm) !important;
  line-height: 1.55;
}
body[data-page="document-api"] .page-content .parameter-table > tbody > tr > td:first-child { width: 1%; white-space: nowrap; }
body[data-page="document-api"] .page-content .parameter-table .param-name {
  font-family: var(--obx-mono) !important;
  font-size: var(--obx-text-sm) !important;
  font-weight: 600 !important;
  color: var(--obx-ink) !important;
  background: var(--obx-sunken) !important;
  border: 1px solid var(--obx-rule);
  border-radius: 4px !important;
  padding: 1px 6px !important;
}
body[data-page="document-api"] .page-content #api-tabsContent .table-responsive { border-top: 0; }

/* ---- Mau code (khoanh khac graphite duy nhat) ---------------------------- */
body[data-page="document-api"] .page-content .code-block {
  background: var(--obx-graphite) !important;
  color: var(--obx-g-text) !important;
  border: 1px solid var(--obx-graphite) !important;
  border-radius: var(--obx-r-panel) !important;
  box-shadow: none !important;
  font-family: var(--obx-mono) !important;
  font-size: var(--obx-text-sm) !important;
  line-height: 1.65 !important;
  padding: 52px var(--obx-s5) var(--obx-s5) !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--obx-s4);
}
/* ba cham "cua so mac": trang tri -> bo */
body[data-page="document-api"] .page-content .code-block::before { content: none !important; }
body[data-page="document-api"] .page-content .code-block .json-key { color: var(--obx-g-accent) !important; font-weight: 500 !important; }
body[data-page="document-api"] .page-content .code-block :is(.json-string, .json-number, .json-boolean) { color: var(--obx-g-text) !important; }
body[data-page="document-api"] .page-content .code-block :is(.json-punctuation, .json-null) { color: var(--obx-g-muted) !important; }

body[data-page="document-api"] .page-content .copy-btn {
  top: var(--obx-s3) !important;
  right: var(--obx-s3) !important;
  display: inline-flex; align-items: center;
  min-height: 32px;
  padding: 0 var(--obx-s3) !important;
  background: transparent !important;
  border: 1px solid var(--obx-g-rule) !important;
  border-radius: var(--obx-r-control) !important;
  color: var(--obx-g-text) !important;
  font-family: var(--obx-font) !important;
  font-size: var(--obx-text-sm) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color var(--obx-dur) var(--obx-ease), border-color var(--obx-dur) var(--obx-ease), color var(--obx-dur) var(--obx-ease) !important;
}
@media (hover: hover) {
  body[data-page="document-api"] .page-content .copy-btn:hover { background: var(--obx-g-rule) !important; border-color: var(--obx-g-muted) !important; }
}
body[data-page="document-api"] .page-content .copy-btn:active { transform: translateY(1px) !important; }
/* trang thai "Copied!": JS dat style.background inline -> doi sang mau ok (gia tri ok cua dark theme, do tren graphite) */
body[data-page="document-api"] .page-content .copy-btn[style*="background"] {
  color: oklch(80% 0.13 155) !important;
  border-color: oklch(80% 0.13 155 / 0.5) !important;
}

/* ---- IP Whitelist ---------------------------------------------------------- */
body[data-page="document-api"] .page-content .api-section-card .card-title.fw-semibold {
  font-size: var(--obx-text-md) !important;
}
body[data-page="document-api"] .page-content .api-section-card .ri-shield-line { color: var(--obx-muted) !important; font-size: 18px !important; }
body[data-page="document-api"] .page-content #ip_whitelist {
  font-family: var(--obx-mono) !important;
  font-size: var(--obx-text-sm) !important;
  line-height: 1.6;
  min-height: 6rem;
}
body[data-page="document-api"] .page-content .api-section-card .form-label i,
body[data-page="document-api"] .page-content .api-section-card .form-text i,
body[data-page="document-api"] .page-content .api-section-card p.text-muted > i { color: var(--obx-muted) !important; }
body[data-page="document-api"] .page-content .api-section-card .form-text small { font-size: var(--obx-text-xs); }
/* "Thong tin IP hien tai": hop xam trong panel (the-trong-the) -> nhom duong ke */
body[data-page="document-api"] .page-content .api-section-card .bg-light.rounded {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 0 var(--obx-s4) !important;
  border-bottom: 1px solid var(--obx-rule);
}
body[data-page="document-api"] .page-content .api-section-card .bg-light.rounded h6 { font-size: var(--obx-text-sm) !important; font-weight: 600 !important; }
body[data-page="document-api"] .page-content .api-section-card .bg-light.rounded h6 i { color: var(--obx-muted) !important; }
body[data-page="document-api"] .page-content .api-section-card .bg-light.rounded code {
  color: var(--obx-ink) !important; background: var(--obx-sunken) !important;
}
/* hang nut: can trai, khoang cach deu, xuong dong gon tren mobile */
body[data-page="document-api"] .page-content .api-section-card .text-center.mt-4 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--obx-s2);
  justify-content: flex-start;
  padding-top: var(--obx-s5);
  border-top: 1px solid var(--obx-rule);
}
body[data-page="document-api"] .page-content .api-section-card .text-center.mt-4 > .btn { margin-left: 0 !important; }

/* AOS da tat trong header.php; phong khi bat lai: khong co hieu ung xuat hien */
body[data-page="document-api"] .page-content [data-aos] { opacity: 1 !important; transform: none !important; }

/* ---- Hop thoai Swal + toast tren trang nay: ve lai mau accent / be mat ---- */
body[data-page="document-api"] .swal2-popup { border-radius: var(--obx-r-panel) !important; }
body[data-page="document-api"] .swal2-styled.swal2-confirm {
  background-color: var(--obx-accent) !important; color: var(--obx-on-accent) !important;
  border-radius: var(--obx-r-control) !important; box-shadow: none !important; font-weight: 500 !important;
}
body[data-page="document-api"] .swal2-styled.swal2-cancel {
  background-color: var(--obx-surface) !important; color: var(--obx-ink) !important; border: 1px solid var(--obx-rule-2) !important;
  border-radius: var(--obx-r-control) !important; box-shadow: none !important; font-weight: 500 !important;
}
body[data-page="document-api"] .toastify {
  background: var(--obx-surface) !important;
  color: var(--obx-ink) !important;
  border: 1px solid var(--obx-rule) !important;
  border-radius: var(--obx-r-panel) !important;
  box-shadow: var(--obx-shadow-pop) !important;
  font-family: var(--obx-font) !important;
  font-size: var(--obx-text-base) !important;
}
body[data-page="document-api"] .toastify .toast-close { color: var(--obx-muted) !important; opacity: 1 !important; }

/* ---- Man hep ---------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="document-api"] .page-content .api-config-table .btn-link { width: 44px; height: 44px; }
  body[data-page="document-api"] .page-content .copy-btn { min-height: 44px; }
  body[data-page="document-api"] .page-content .code-block { padding-top: 64px !important; font-size: var(--obx-text-xs) !important; }
  body[data-page="document-api"] .page-content #api-tabs .nav-link { min-height: var(--obx-touch); }
  body[data-page="document-api"] .page-content .api-section-card .text-center.mt-4 > .btn { min-height: var(--obx-touch); }
}
@media (max-width: 575.98px) {
  body[data-page="document-api"] .page-content .api-section-card > .card-body { padding: var(--obx-s4) !important; }
  /* 10 endpoint: luoi 2 cot, thay vi 10 dong can giua */
  body[data-page="document-api"] .page-content #api-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  body[data-page="document-api"] .page-content #api-tabs .nav-item { min-width: 0; }
  body[data-page="document-api"] .page-content #api-tabs .nav-link {
    width: 100%;
    white-space: normal;
    line-height: 1.25;
    padding: var(--obx-s1) var(--obx-s2) !important;
    text-align: left;
  }
  body[data-page="document-api"] .page-content .api-config-table > tbody > tr > td:first-child { width: 92px !important; white-space: normal; }
  /* khoa che + 3 nut: khoa mot dong, nut xuong dong duoi (khong vo tung ky tu) */
  body[data-page="document-api"] .page-content .api-config-table td > .d-flex { flex-wrap: wrap; }
  body[data-page="document-api"] .page-content #api-key-display { flex: 1 0 100%; margin-right: 0 !important; overflow-wrap: anywhere; }
  body[data-page="document-api"] .page-content .api-section-card .text-center.mt-4 > .btn { flex: 1 1 100%; }
}

/* ---- Bo loc danh sach tren dien thoai: o nhap 1 cot (col-6 cat chu goi y o 375px) ---- */
@media (max-width: 575.98px) {
  body:is([data-page="orders"], [data-page="transactions"], [data-page="logs"], [data-page="support-tickets"], [data-page="service-updates"]) .page-content form .row.g-3 > .col-6:has(> .search-box, > input, > select:not([name="limit"]):not([name="shortByDate"])) { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
}

/* ---- document-api tren man rong (yeu cau chu site 2026-10-19: "trong 1 ben qua") ----
   Bo cuc tai lieu API kieu tham chieu: o >=1200px
   - khoi "thiet lap" (cau hinh API + IP whitelist) nam canh nhau o tren;
   - moi endpoint: Parameters ben trai, Example Response ben phai (dinh khi cuon).
   Chi CSS grid tren cac .row co san; khong doi DOM. Duoi 1200px giu mot cot nhu cu. */
@media (min-width: 1200px) {
  body[data-page="document-api"] .page-content .row.justify-content-center > .col-xl-10 {
    flex: 0 0 100% !important; width: 100% !important; max-width: none !important; /* chu site: lap het chieu ngang man rong */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--obx-s6); align-items: start;
  }
  body[data-page="document-api"] .page-content .col-xl-10 > .row { margin-left: 0; margin-right: 0; min-width: 0; }
  body[data-page="document-api"] .page-content .col-xl-10 > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
  /* trai: gioi thieu + cau hinh; phai: IP whitelist chay suot 2 hang; duoi: cac endpoint */
  body[data-page="document-api"] .page-content .col-xl-10 > .row:has(.api-endpoint-card) { grid-column: 1; grid-row: 1; }
  body[data-page="document-api"] .page-content .col-xl-10 > .row:has(.api-config-table) { grid-column: 1; grid-row: 2; }
  body[data-page="document-api"] .page-content .col-xl-10 > .row:last-child:not(:has(#api-tabs)) { grid-column: 2; grid-row: 1 / span 2; }
  body[data-page="document-api"] .page-content .col-xl-10 > .row:has(#api-tabs) { grid-column: 1 / -1; grid-row: 3; }

  /* Tung endpoint: tham so | vi du phan hoi */
  body[data-page="document-api"] .page-content #api-tabsContent .tab-pane > .row {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--obx-s8); align-items: start; margin: 0;
  }
  body[data-page="document-api"] .page-content #api-tabsContent .tab-pane > .row > .col-lg-6 { padding: 0; min-width: 0; }
  body[data-page="document-api"] .page-content #api-tabsContent .tab-pane > .row > .col-lg-6 + .col-lg-6 { margin-top: 0 !important; position: sticky; top: 88px; }
  /* tab endpoint can trai, it dong hon khi rong */
  body[data-page="document-api"] .page-content #api-tabs { justify-content: flex-start !important; }
}

/* document-api 1200-1599px: khung IP hep -> o nhap IP chiem ca hang, "IP hien tai" + canh bao xuong duoi */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  body[data-page="document-api"] .page-content .col-xl-10 > .row:last-child:not(:has(#api-tabs)) .card-body > .row > .col-md-8,
  body[data-page="document-api"] .page-content .col-xl-10 > .row:last-child:not(:has(#api-tabs)) .card-body > .row > .col-md-4 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
  body[data-page="document-api"] .page-content .col-xl-10 > .row:last-child:not(:has(#api-tabs)) .card-body > .row > .col-md-4 { margin-top: var(--obx-s4); }
}

/* ---- service-updates: icon nen tang canh ten dich vu (giong Bang gia) ---- */
body[data-page="service-updates"] .page-content .su-svc { display: flex; align-items: flex-start; gap: var(--obx-s2); }
body[data-page="service-updates"] .page-content .su-svc-icon { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 4px; object-fit: cover; margin-top: 1px; }
body[data-page="service-updates"] .page-content .su-svc-icon-none { display: inline-flex; align-items: center; justify-content: center; background: var(--obx-sunken); border: 1px solid var(--obx-rule); color: var(--obx-muted); font-size: 12px; }

/* ---- orders: 7 o thong ke tren MOT hang (yeu cau chu site 2026-10-19) ------------------
   Mau icon theo bang trang thai chung (design.md): hoan thanh/da tra = ok, cho = warn,
   xu ly/dang chay = accent, huy = crit, tong = trung tinh. So lieu mono. */
body[data-page="orders"] .page-content .ox-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--obx-s3); margin-bottom: var(--obx-s5);
}
body[data-page="orders"] .page-content .ox-stat {
  display: flex; align-items: center; gap: var(--obx-s3); min-width: 0;
  background: var(--obx-surface); border: 1px solid var(--obx-rule); border-radius: var(--obx-r-panel);
  padding: var(--obx-s3) var(--obx-s4);
}
body[data-page="orders"] .page-content .ox-stat-icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--obx-r-control);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--obx-sunken); color: var(--obx-ink-2);
}
body[data-page="orders"] .page-content .ox-stat--completed .ox-stat-icon,
body[data-page="orders"] .page-content .ox-stat--paid .ox-stat-icon { background: var(--obx-ok-tint); color: var(--obx-ok); }
body[data-page="orders"] .page-content .ox-stat--pending .ox-stat-icon { background: var(--obx-warn-tint); color: var(--obx-warn); }
body[data-page="orders"] .page-content :is(.ox-stat--processing, .ox-stat--running) .ox-stat-icon { background: var(--obx-accent-tint); color: var(--obx-accent-ink); }
body[data-page="orders"] .page-content .ox-stat--canceled .ox-stat-icon { background: var(--obx-crit-tint); color: var(--obx-crit); }
body[data-page="orders"] .page-content .ox-stat-body { min-width: 0; }
body[data-page="orders"] .page-content .ox-stat-label { margin: 0 0 2px; font-size: var(--obx-text-xs); font-weight: 500; color: var(--obx-muted); line-height: 1.35; }
body[data-page="orders"] .page-content .ox-stat-value {
  margin: 0; font-family: var(--obx-mono); font-variant-numeric: tabular-nums;
  font-size: var(--obx-text-lg); font-weight: 700; line-height: 1.2; color: var(--obx-ink);
  overflow-wrap: anywhere;
}
body[data-page="orders"] .page-content .ox-stat--paid .ox-stat-value { color: var(--obx-ok); }
/* dien thoai: o "da thanh toan" chiem ca hang (so tien dai) */
body[data-page="orders"] .page-content .ox-stat--paid { grid-column: 1 / -1; }
@media (min-width: 768px) {
  body[data-page="orders"] .page-content .ox-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-page="orders"] .page-content .ox-stat--paid { grid-column: span 1; }
}
@media (min-width: 1200px) {
  body[data-page="orders"] .page-content .ox-stats { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
/* 1200-1599px: 7 o hep -> icon len tren chu, so lieu 16px */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  body[data-page="orders"] .page-content .ox-stat { flex-direction: column; align-items: flex-start; gap: var(--obx-s2); padding: var(--obx-s3); }
  body[data-page="orders"] .page-content .ox-stat-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 16px; }
  body[data-page="orders"] .page-content .ox-stat-value { font-size: var(--obx-text-md); }
}