/* ============================================================================
   nhf/theme-override.css — "Ruby Ledger" design layer (P6-design, 2026-09-28)
   ----------------------------------------------------------------------------
   CSS-only override on top of the legacy stack (bootstrap.css → style.css →
   pageup.css → themes/red.css). Loaded twice like the legacy theme CSS:
   <head> (after theme css #1) and end of <body> (after theme css #2) so it is
   the LAST stylesheet in the document and wins every equal-specificity fight.

   Rules of this file:
   - Never rename/hide DOM: ids/classes used by pagebet.js, member.js, index.js,
     owl-carousel, DataTables, bootstrap-select stay untouched. Only visuals.
   - JS-toggled state classes (.active .open .blur .disabled .selected .d-none
     .show .collapse) keep working: we style them, never override display of
     .d-none/.show/.collapse.
   - Tokens live in :root (--nhf-*). nhf/red.css only re-assigns tokens + a few
     red-only grid fixes; component rules below are shared by both themes.
   - `!important` is used only where the legacy CSS (style.css / red.css /
     bootstrap utilities / inline <style> blocks) already uses it.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   0. TOKENS
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* brand */
  --nhf-red: #b90504;
  --nhf-red-hi: #d21414;
  --nhf-red-deep: #790000;
  --nhf-red-ink: #500202;
  --nhf-red-soft: #fff1f1;
  --nhf-red-line: rgba(185, 5, 4, .22);
  --nhf-gold: #f2c14e;
  --nhf-gold-deep: #c9971a;
  /* semantic (unified with bootstrap classes) */
  --nhf-green: #1f9d55;
  --nhf-green-deep: #157a41;
  --nhf-green-soft: #eaf7ee;
  --nhf-blue: #2563eb;
  --nhf-blue-deep: #1d4ed8;
  --nhf-blue-soft: #eef3ff;
  --nhf-amber: #f6c445;
  --nhf-amber-soft: #fff4d6;
  /* neutrals */
  --nhf-ink: #1b1b1f;
  --nhf-ink-2: #3a3a42;
  --nhf-muted: #6b7280;
  --nhf-muted-2: #9aa0a6;
  --nhf-paper: #ffffff;
  --nhf-paper-2: #f6f5f4;
  --nhf-paper-3: #eceae8;
  --nhf-line: rgba(27, 27, 31, .10);
  --nhf-line-2: #d9d6d2;
  /* surfaces */
  --nhf-topbar-a: #c40707;
  --nhf-topbar-b: #a10303;
  --nhf-topbar-border: rgba(0, 0, 0, .28);
  --nhf-marquee-bg: #7a0000;
  --nhf-footer-bg: #0e0e10;
  --nhf-modal-head-a: #c40707;
  --nhf-modal-head-b: #7a0000;
  --nhf-modal-bg: #f3f2f1;
  /* game/provider cards v2 (owner 2026-09-28 "UI แบบรูปที่ 2") */
  --nhf-main-bg: #e9e9e9;
  --nhf-card-bg: #ffffff;
  --nhf-card-border: #e2ddd2;
  --nhf-card-bar: #f3ede2;
  --nhf-card-bar-text: #2b2b2b;
  --nhf-card-r: 16px;
  --nhf-card-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  --nhf-card-shadow-hover: 0 10px 28px rgba(0, 0, 0, .16);
  --nhf-new-pill: #f04e2b;
  /* shape */
  --nhf-r-xs: 6px;
  --nhf-r-sm: 8px;
  --nhf-r: 12px;
  --nhf-r-lg: 16px;
  --nhf-r-xl: 20px;
  --nhf-r-pill: 999px;
  /* elevation */
  --nhf-shadow-0: 0 1px 2px rgba(0, 0, 0, .05);
  --nhf-shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 10px rgba(0, 0, 0, .06);
  --nhf-shadow-2: 0 8px 24px rgba(0, 0, 0, .14);
  --nhf-shadow-3: 0 24px 64px rgba(0, 0, 0, .35);
  --nhf-ring: 0 0 0 3px rgba(185, 5, 4, .22);
  /* motion */
  --nhf-ease: cubic-bezier(.2, .8, .2, 1);
  --nhf-fast: .16s;
  --nhf-med: .28s;
  /* type */
  --nhf-font-display: 'Mitr', 'NotosansThai', sans-serif;
  --nhf-font-body: 'NotosansThai', 'Mitr', sans-serif;
  --nhf-fs-xs: 11px;
  --nhf-fs-sm: 13px;
  --nhf-fs: 14px;
  --nhf-fs-md: 16px;
  --nhf-fs-lg: 18px;
  --nhf-fs-xl: 22px;
  --nhf-fs-2xl: 28px;
  /* touch */
  --nhf-tap: 44px;
  /* spacing rhythm */
  --nhf-sp-1: 4px;
  --nhf-sp-2: 8px;
  --nhf-sp-3: 12px;
  --nhf-sp-4: 16px;
  --nhf-sp-5: 24px;
}

/* ─────────────────────────────────────────────────────────────────────────
   1. BASE
   ───────────────────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--nhf-font-body);
  letter-spacing: 0;
  color: var(--nhf-ink);
  -webkit-text-size-adjust: 100%;
}
.fixed-bg {
  background-color: #141416;
}
/* soft vignette so white panels lift off the dark texture */
.fixed-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(185, 5, 4, .18), transparent 60%),
              linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45));
  pointer-events: none;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--nhf-font-display);
  font-weight: 500;
  letter-spacing: .1px;
  color: var(--nhf-ink);
}
/* headings inside coloured/dark blocks keep the parent's text colour (bootstrap .text-white/.text-light/.bg-dark) */
.text-white :is(h1, h2, h3, h4, h5, h6), .text-light :is(h1, h2, h3, h4, h5, h6), .bg-dark :is(h1, h2, h3, h4, h5, h6),
.bg-danger :is(h1, h2, h3, h4, h5, h6), .bg-success :is(h1, h2, h3, h4, h5, h6), .bg-primary :is(h1, h2, h3, h4, h5, h6),
.card-main :is(h1, h2, h3, h4, h5, h6), .sidebar-huay :is(h1, h2, h3, h4, h5, h6), .pagemodal .head :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
a { transition: color var(--nhf-fast) var(--nhf-ease); }
::selection { background: rgba(185, 5, 4, .18); }
/* numbers everywhere (balances, rates, countdowns) */
.thb, .odometer, .countdown, .txt-num {
  font-family: var(--nhf-font-display);
  font-variant-numeric: tabular-nums;
}
/* thin, brand-tinted scrollbars (style.css already themes them) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(185, 5, 4, .55); border-radius: var(--nhf-r-pill); }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .08); }

/* ─────────────────────────────────────────────────────────────────────────
   2. BUTTON SYSTEM — one shape, one motion, semantic colours
   (bootstrap .btn-* + legacy .btn-red / .btn-outline-red|blue|green / .btn-credit)
   ───────────────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--nhf-font-display) !important;
  font-weight: 500 !important;
  font-size: var(--nhf-fs) !important;
  line-height: 1.5;
  letter-spacing: .1px;
  padding: .52rem 1rem !important;
  border-radius: var(--nhf-r-sm) !important;
  border-width: 1px;
  text-shadow: none !important;
  box-shadow: var(--nhf-shadow-0);
  transition: background-color var(--nhf-fast) var(--nhf-ease),
              border-color var(--nhf-fast) var(--nhf-ease),
              color var(--nhf-fast) var(--nhf-ease),
              box-shadow var(--nhf-fast) var(--nhf-ease),
              transform var(--nhf-fast) var(--nhf-ease);
}
.btn i, .btn .fas, .btn .far, .btn .fab, .btn .sn-icon { font-size: 1em; vertical-align: -1px; }
.btn-sm, .btn-group-sm > .btn {
  font-size: var(--nhf-fs-sm) !important;
  padding: .42rem .7rem !important;
  border-radius: var(--nhf-r-xs) !important;
}
.btn-lg, .btn-group-lg > .btn {
  font-size: var(--nhf-fs-md) !important;
  padding: .7rem 1.4rem !important;
  border-radius: var(--nhf-r) !important;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--nhf-shadow-1); }
.btn:active, .btn.active { transform: translateY(0); box-shadow: var(--nhf-shadow-0); }
.btn:focus, .btn.focus { box-shadow: var(--nhf-ring) !important; outline: 0; }
.btn:disabled, .btn.disabled { opacity: .55; transform: none; box-shadow: none; cursor: not-allowed; }
/* subtle top-light gloss on filled buttons — works with any bg colour */
.btn-primary, .btn-danger, .btn-success, .btn-info, .btn-warning, .btn-dark, .btn-secondary, .btn-red {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .06));
  border-color: transparent !important;
}
.btn-primary { background-color: var(--nhf-blue) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--nhf-blue-deep) !important; color: #fff !important; }
.btn-danger, .btn-red { background-color: var(--nhf-red-hi) !important; color: #fff !important; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:not(:disabled):not(.disabled):active,
.btn-red:hover, .btn-red:active { background-color: var(--nhf-red) !important; color: #fff !important; }
.btn-success { background-color: var(--nhf-green) !important; color: #fff !important; }
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active { background-color: var(--nhf-green-deep) !important; color: #fff !important; }
.btn-dark { background-color: var(--nhf-ink) !important; color: #fff !important; }
.btn-dark:hover, .btn-dark:focus { background-color: #000 !important; color: #fff !important; }
.btn-secondary { background-color: #6b7280 !important; color: #fff !important; }
.btn-secondary:hover, .btn-secondary:focus { background-color: #565c66 !important; color: #fff !important; }
.btn-light {
  background: var(--nhf-paper) !important;
  border-color: var(--nhf-line-2) !important;
  color: var(--nhf-ink) !important;
}
.btn-light:hover, .btn-light:focus { background: var(--nhf-paper-2) !important; border-color: #c9c5c0 !important; color: var(--nhf-ink) !important; }
.btn-info { background-color: #0e9bb5 !important; color: #fff !important; }
.btn-warning { background-color: #e0a300 !important; color: #1b1b1f !important; }
/* outlines: 1.5px, tinted fill on hover, solid when .active (legacy keeps .active bg) */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger,
.btn-outline-dark, .btn-outline-info, .btn-outline-warning, .btn-outline-light,
.btn-outline-red, .btn-outline-blue, .btn-outline-green {
  border-width: 1.5px;
  background-image: none;
}
.btn-outline-danger { color: var(--nhf-red-hi); border-color: var(--nhf-red-hi); }
.btn-outline-danger:hover { background-color: var(--nhf-red-hi); border-color: var(--nhf-red-hi); }
.btn-outline-secondary { color: var(--nhf-ink-2); border-color: var(--nhf-line-2); background-color: #fff; }
.btn-outline-secondary:hover { color: var(--nhf-ink); background-color: var(--nhf-paper-2); border-color: #c9c5c0; }
.btn-outline-dark { color: var(--nhf-ink); border-color: var(--nhf-ink); }
.btn-outline-success { color: var(--nhf-green); border-color: var(--nhf-green); }
.btn-outline-success:hover { background-color: var(--nhf-green); border-color: var(--nhf-green); }
.btn-outline-red { color: var(--nhf-red-hi); border-color: var(--nhf-red-hi); background-color: var(--nhf-red-soft); }
.btn-outline-red.active, .btn-outline-red:not(:disabled):active { background-color: var(--nhf-red-hi) !important; border-color: var(--nhf-red-hi) !important; color: #fff !important; }
.btn-outline-blue { color: var(--nhf-blue); border-color: var(--nhf-blue); background-color: var(--nhf-blue-soft); }
.btn-outline-blue.active, .btn-outline-blue:not(:disabled):active { background-color: var(--nhf-blue) !important; border-color: var(--nhf-blue) !important; color: #fff !important; }
.btn-outline-green { color: var(--nhf-green); border-color: var(--nhf-green); background-color: var(--nhf-green-soft); }
.btn-outline-green.active, .btn-outline-green:not(:disabled):active { background-color: var(--nhf-green) !important; border-color: var(--nhf-green) !important; color: #fff !important; }
/* pill actions (deposit / withdraw on main) */
.btn-credit {
  border-radius: var(--nhf-r-pill) !important;
  font-weight: 500 !important;
  letter-spacing: .2px;
  padding-top: .6rem !important;
  padding-bottom: .6rem !important;
}
.btn-credit.btn-lg { font-size: var(--nhf-fs-lg) !important; }
/* mobile: primary block actions must be ≥ 44 px tall */
@media (max-width: 767.98px) {
  .btn-block:not(.btn-sm):not(.btn-lg) { padding-top: .68rem !important; padding-bottom: .68rem !important; }
  .btn-block.btn-sm { padding-top: .55rem !important; padding-bottom: .55rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. FORMS
   ───────────────────────────────────────────────────────────────────────── */
.form-control, .custom-select {
  border-radius: var(--nhf-r-sm);
  border: 1px solid var(--nhf-line-2);
  color: var(--nhf-ink);
  font-size: var(--nhf-fs);
  transition: border-color var(--nhf-fast), box-shadow var(--nhf-fast);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--nhf-red);
  box-shadow: var(--nhf-ring);
}
.form-control::placeholder { color: var(--nhf-muted-2); }
.form-control-sm { border-radius: var(--nhf-r-xs); }
.form-control-lg { border-radius: var(--nhf-r); font-family: var(--nhf-font-display); }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-append .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; transform: none; }
.input-group-append .btn:hover { transform: none; }
.input-group-prepend .btn { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group-text { border-radius: var(--nhf-r-sm); border-color: var(--nhf-line-2); background: var(--nhf-paper-2); }
label { color: var(--nhf-ink-2); }
.form-check-input { accent-color: var(--nhf-red); }
/* bootstrap-select */
.bootstrap-select > .dropdown-toggle { border-radius: var(--nhf-r-sm) !important; }
.bootstrap-select .dropdown-menu { border-radius: var(--nhf-r) !important; border: 1px solid var(--nhf-line) !important; box-shadow: var(--nhf-shadow-2) !important; padding: 6px !important; }
.bootstrap-select .dropdown-menu li a { border-radius: var(--nhf-r-xs); }
/* datetimepicker widget */
.bootstrap-datetimepicker-widget { border-radius: var(--nhf-r) !important; box-shadow: var(--nhf-shadow-2) !important; border: 1px solid var(--nhf-line) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   4. GENERIC COMPONENTS — tables, badges, alerts, cards, modals, tabs, dropdowns
   ───────────────────────────────────────────────────────────────────────── */
.table { color: var(--nhf-ink); font-size: var(--nhf-fs); }
.table th, .table td { vertical-align: middle; border-top-color: var(--nhf-line); }
.table thead th { border-bottom: 1px solid var(--nhf-line); background: var(--nhf-paper-2); color: var(--nhf-muted); font-weight: 500; font-size: var(--nhf-fs-sm); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(185, 5, 4, .025); }
.table-hover tbody tr:hover { background-color: rgba(185, 5, 4, .05); }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--nhf-line); }

.badge { font-weight: 500; letter-spacing: .1px; border-radius: var(--nhf-r-xs); padding: .3em .55em; }
.badge-pill { border-radius: var(--nhf-r-pill); }
.badge-warning { background-color: var(--nhf-amber); color: var(--nhf-ink); }
.badge-danger { background-color: var(--nhf-red-hi); }
.badge-success { background-color: var(--nhf-green); }
.badge-primary { background-color: var(--nhf-blue); }

.alert { border-radius: var(--nhf-r); border-width: 0; border-left: 4px solid transparent; box-shadow: var(--nhf-shadow-0); }
.alert-danger { background: var(--nhf-red-soft); color: #7f1d1d; border-left-color: var(--nhf-red-hi); }
.alert-success { background: var(--nhf-green-soft); color: #14532d; border-left-color: var(--nhf-green); }
.alert-warning { background: var(--nhf-amber-soft); color: #7a4b00; border-left-color: var(--nhf-amber); }
.alert-info, .alert-primary { background: var(--nhf-blue-soft); color: #1e3a8a; border-left-color: var(--nhf-blue); }
.alert-secondary, .alert-light { background: var(--nhf-paper-2); color: var(--nhf-ink-2); border-left-color: var(--nhf-line-2); }

.card { border-radius: var(--nhf-r); border-color: var(--nhf-line); }
.card-header { background: var(--nhf-paper-2); border-bottom-color: var(--nhf-line); }
.card-header:first-child { border-radius: calc(var(--nhf-r) - 1px) calc(var(--nhf-r) - 1px) 0 0; }

/* bootstrap utility re-tokenisation (equal specificity, later source → wins) */
.rounded { border-radius: var(--nhf-r) !important; }
.rounded-top { border-top-left-radius: var(--nhf-r) !important; border-top-right-radius: var(--nhf-r) !important; }
.rounded-bottom { border-bottom-left-radius: var(--nhf-r) !important; border-bottom-right-radius: var(--nhf-r) !important; }
.rounded-left { border-top-left-radius: var(--nhf-r-sm) !important; border-bottom-left-radius: var(--nhf-r-sm) !important; }
.rounded-right { border-top-right-radius: var(--nhf-r-sm) !important; border-bottom-right-radius: var(--nhf-r-sm) !important; }
.shadow-sm { box-shadow: var(--nhf-shadow-1) !important; }
.shadow { box-shadow: var(--nhf-shadow-2) !important; }
.bg-danger { background-color: var(--nhf-red-hi) !important; }
.bg-primary { background-color: var(--nhf-blue) !important; }
.bg-success { background-color: var(--nhf-green) !important; }
.bg-dark { background-color: var(--nhf-ink) !important; }
.bg-light { background-color: var(--nhf-paper-2) !important; }
.text-primary { color: var(--nhf-blue) !important; }
.border-secondary { border-color: var(--nhf-line-2) !important; }

/* bootstrap modals (contactbox, rules, rate, p2p amount, confirm boxes) */
.modal-content {
  border: 0;
  border-radius: var(--nhf-r-lg) !important; /* beats inline style="border-radius:10px" */
  box-shadow: var(--nhf-shadow-3);
  overflow: hidden;
}
.modal-header { padding: 14px 18px; border-bottom: 1px solid var(--nhf-line); align-items: center; }
.modal-header.bg-danger { background: linear-gradient(135deg, var(--nhf-modal-head-a), var(--nhf-modal-head-b)) !important; border-bottom: 0; }
.modal-header.bg-dark, .modal-header.bg-success { border-bottom: 0; }
.modal-title { font-family: var(--nhf-font-display); font-weight: 500; font-size: var(--nhf-fs-lg); }
.modal-header .close {
  width: 36px; height: 36px; padding: 0; margin: -6px -6px -6px auto;
  border-radius: 50%; background: rgba(0, 0, 0, .12); opacity: 1; font-size: 22px; line-height: 36px;
  text-shadow: none; transition: background var(--nhf-fast);
}
.modal-header .close:hover { background: rgba(0, 0, 0, .24); opacity: 1; }
.modal-body { padding: 18px; }
.modal-footer { border-top: 1px solid var(--nhf-line); padding: 12px 18px; }
.modal-backdrop.show { opacity: .62; }
.modal.fade .modal-dialog { transition: transform var(--nhf-med) var(--nhf-ease), opacity var(--nhf-med) var(--nhf-ease); transform: translateY(18px) scale(.985); opacity: 0; }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.btn-contactbox { padding: 14px 18px !important; border-radius: var(--nhf-r) !important; font-size: var(--nhf-fs-md) !important; }

/* tabs / pills (statement #menucredit, poy #poytab, pagebet tabs handled in §9) */
.nav-tabs { border-bottom-color: var(--nhf-line); }
.nav-tabs .nav-link { border-radius: var(--nhf-r-sm) var(--nhf-r-sm) 0 0; color: var(--nhf-muted); font-weight: 500; padding: 10px 14px; }
.nav-tabs .nav-link.active { color: var(--nhf-red); border-color: var(--nhf-line) var(--nhf-line) #fff; }
.nav-pills .nav-link { border-radius: var(--nhf-r-sm); font-weight: 500; }
.nav-pills .nav-link.active { background-color: var(--nhf-red-hi); }

.dropdown-menu { border-radius: var(--nhf-r); border: 1px solid var(--nhf-line); box-shadow: var(--nhf-shadow-2); padding: 6px; }
.dropdown-item { border-radius: var(--nhf-r-xs); padding: 8px 12px; font-size: var(--nhf-fs); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--nhf-red-soft); color: var(--nhf-red); }
.dropdown-divider { border-top-color: var(--nhf-line); }

.list-group-item { border-color: var(--nhf-line); }
.list-group-item:first-child { border-top-left-radius: var(--nhf-r); border-top-right-radius: var(--nhf-r); }
.list-group-item:last-child { border-bottom-left-radius: var(--nhf-r); border-bottom-right-radius: var(--nhf-r); }
.page-link { border-radius: var(--nhf-r-xs); margin: 0 2px; border-color: var(--nhf-line); color: var(--nhf-ink-2); }
.page-item.active .page-link { background: var(--nhf-red-hi); border-color: var(--nhf-red-hi); }
.progress { border-radius: var(--nhf-r-pill); }
hr { border-top-color: var(--nhf-line); }

/* ─────────────────────────────────────────────────────────────────────────
   5. LAYOUT CHROME — topbar, marquee, sidebar, back bar, content panels, footer
   ───────────────────────────────────────────────────────────────────────── */
.topnavbar {
  background: linear-gradient(180deg, var(--nhf-topbar-a), var(--nhf-topbar-b)) !important;
  border-bottom: 1px solid var(--nhf-topbar-border) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28) !important;
  padding: 7px 0;
}
.topnavbar .container > .d-flex { min-height: 40px; }
/* pc icon menu — quiet white glyphs, pill hover, underline-less active */
#menu-pc a {
  color: rgba(255, 255, 255, .86) !important;
  text-shadow: none !important;
  font-size: 20px;
  padding: 7px 10px !important;
  margin: 0 1px;
  border-radius: var(--nhf-r-sm);
  line-height: 1;
  transition: background var(--nhf-fast), color var(--nhf-fast);
}
#menu-pc a:hover, #menu-pc a:active, #menu-pc a.active {
  color: #fff !important;
  background: rgba(0, 0, 0, .2) !important;
  text-shadow: none !important;
}
#menu-pc .linemenu-x { border-color: rgba(255, 255, 255, .25); }
/* balance pill */
#re-credit .badge, .topnavbar .badge-light.thb {
  background: #fff !important;
  color: var(--nhf-red-deep) !important;
  font-family: var(--nhf-font-display);
  font-weight: 500 !important;
  font-size: var(--nhf-fs-sm) !important;
  padding: 6px 12px !important;
  border-radius: var(--nhf-r-pill) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .15) !important;
}
/* avatars: force square + cover (legacy attributes 40×35 / 28×28 distort) */
#menu-profile img, #sidebarCollapse img {
  width: 34px !important; height: 34px !important;
  object-fit: cover; border: 2px solid rgba(255, 255, 255, .7); background: #fff;
}
#sidebarCollapse { min-width: var(--nhf-tap); min-height: var(--nhf-tap); display: inline-flex !important; align-items: center; justify-content: center; }
.mobile-view#sidebarCollapse { display: none !important; }
@media (max-width: 767.98px) { .mobile-view#sidebarCollapse { display: inline-flex !important; } }
#sidebarCollapse i { margin-top: 0; }
#menu-profile { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
#menu-profile #username { font-size: var(--nhf-fs); }
.pc-view .bootstrap-select .btn-sm { background: rgba(0, 0, 0, .18) !important; border: 1px solid rgba(255, 255, 255, .18) !important; }
/* jackpot ribbon (pc + mobile bar) */
.bar-powerball-pc { font-family: var(--nhf-font-display); font-size: var(--nhf-fs-md); letter-spacing: .2px; }
.bar-powerball {
  background: linear-gradient(180deg, #17171a, #0f0f11) !important;
  border-bottom: 1px solid rgba(185, 5, 4, .55) !important;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-md);
  padding: 7px 0;
  letter-spacing: .2px;
}
.bar-powerball i, .bar-powerball-pc i { color: var(--nhf-gold); }
/* marquee row */
.navbar { background-color: var(--nhf-marquee-bg); padding: 6px 0; }
/* NOTE: keep align-items:stretch — ul.marquee has no in-flow content (li is absolute, height:100%), its height comes from the
   stretched .txt-notice flex item ; align-items:center would collapse it to 0 and hide the marquee text */
.notice-bar {
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--nhf-r-pill);
  height: 28px;
  padding: 3px 8px;
  align-items: stretch;
}
.txt-notice { font-size: var(--nhf-fs-sm); line-height: 20px; color: rgba(255, 255, 255, .92); }
.txt-notice ul.marquee li { line-height: 20px; }

/* off-canvas sidebar */
#sidebar { background: var(--nhf-paper); color: var(--nhf-ink-2); box-shadow: -8px 0 32px rgba(0, 0, 0, .35); }
#sidebar .sidebar-header {
  background: linear-gradient(160deg, var(--nhf-topbar-a), var(--nhf-red-deep)) !important;
  box-shadow: none;
  padding: 28px 20px 18px;
}
#sidebar .sidebar-header img { width: 84px !important; height: 84px !important; object-fit: cover; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
#sidebar .sidebar-header .username { font-family: var(--nhf-font-display); font-size: var(--nhf-fs-lg); display: inline-block; margin: 8px 0 4px; }
#sidebar .sidebar-header .badge-danger.thb { background: rgba(0, 0, 0, .28) !important; font-size: var(--nhf-fs-sm); padding: 5px 12px; }
#sidebar .sidebar-header .fa-coins { color: var(--nhf-gold); }
#dismiss {
  color: rgba(255, 255, 255, .85); font-size: 22px; top: 8px; left: 8px;
  width: 36px; height: 36px; line-height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .2);
}
#dismiss:hover { color: #fff; background: rgba(0, 0, 0, .35); }
#sidebar ul.components { background: var(--nhf-paper); border-bottom: 0; padding: 8px !important; }
#sidebar ul li a {
  font-size: var(--nhf-fs) !important;
  padding: 12px 12px;
  border-radius: var(--nhf-r-sm);
  border-bottom: 0 !important;
  color: var(--nhf-ink-2);
  text-shadow: none;
  display: flex; align-items: center; gap: 10px;
}
#sidebar ul li a i { width: 22px; text-align: center; color: var(--nhf-red); }
#sidebar ul li a:hover, #sidebar ul li.active > a { background: var(--nhf-red-soft); color: var(--nhf-red); }
#sidebar ul li .mobile-view { padding: 6px 12px; }
#sidebar ul.CTAs { padding: 8px 12px 24px; }
#sidebar ul.CTAs a { border-radius: var(--nhf-r-sm); padding: 12px; font-size: var(--nhf-fs) !important; border: 1.5px solid var(--nhf-red-hi); color: var(--nhf-red-hi); background: #fff; }
#sidebar ul.CTAs a:hover { background: var(--nhf-red-hi); color: #fff; }
.overlay { background: rgba(10, 0, 0, .6); }

/* back bar + content panels */
.bar-back {
  font-size: var(--nhf-fs-md);
  padding: 10px 14px;
  border-top: 0;
  border-bottom: 1px solid var(--nhf-line);
  background: var(--nhf-paper);
  min-height: 48px;
  display: flex; align-items: center;
}
.bar-back a { color: var(--nhf-ink-2); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.bar-back a i { color: var(--nhf-red); }
.bar-back a:hover { color: var(--nhf-red); }
.bar-back .btn { font-size: var(--nhf-fs-sm) !important; }
.main-content {
  background: var(--nhf-paper-2) !important;
  padding: var(--nhf-sp-3) !important;
  border-radius: 0 0 var(--nhf-r-lg) var(--nhf-r-lg);
}
@media (min-width: 768px) { .main-content { padding: var(--nhf-sp-4) !important; } }
.bgwhitealpha {
  background: var(--nhf-paper);
  border: 1px solid var(--nhf-line);
  border-radius: var(--nhf-r) !important;
  margin-bottom: var(--nhf-sp-3);
  box-shadow: var(--nhf-shadow-1) !important;
}
.bgwhitealpha.p-2 { padding: var(--nhf-sp-3) !important; }
.bgwhitealpha.p-1 { padding: var(--nhf-sp-2) !important; }
@media (min-width: 768px) { .bgwhitealpha.p-2 { padding: var(--nhf-sp-4) !important; } }
/* section titles inside panels: display face + ruby accent bar */
.col-lotto > h3, .col-lotto > h3:first-child, .bgwhitealpha > h3, .lotto-title > h4, .lotto-title > .d-flex > h4, .lotto-title h4.tanghuay-h4 {
  font-family: var(--nhf-font-display) !important;
  font-weight: 500;
  font-size: var(--nhf-fs-xl);
  color: var(--nhf-ink) !important;
  line-height: 1.25;
  margin: 2px 0 var(--nhf-sp-3);
  padding-left: 12px;
  position: relative;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.col-lotto > h3::before, .bgwhitealpha > h3::before, .lotto-title > h4::before, .lotto-title > .d-flex > h4::before, .lotto-title h4.tanghuay-h4::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 1.05em; border-radius: 2px;
  background: linear-gradient(180deg, var(--nhf-red-hi), var(--nhf-red-deep));
}
.lotto-title h4 { margin-bottom: 2px; }
.lotto-title h4 i { color: var(--nhf-red); font-size: .9em; }
.lotto-title h4 .badge { font-size: 55%; }
/* h4 ที่ครอบ badge ลิงก์ (poy "ดูโพยใหม่") ไม่ใช่หัวข้อ → ไม่มีแถบ accent */
.lotto-title a > h4 { padding-left: 0; margin: 0; }
.lotto-title a > h4::before { display: none; }
@media (max-width: 575.98px) { .col-lotto > h3, .bgwhitealpha > h3, .lotto-title h4 { font-size: var(--nhf-fs-lg); } }
.bgwhitealpha h6 { font-family: var(--nhf-font-display); font-weight: 500; text-shadow: none; }

/* member footer (fixed on pc) */
#footer-member, footer.page-footer.bg-danger { background: var(--nhf-footer-bg) !important; border-top: 1px solid rgba(255, 255, 255, .08); }
#footer-member .footer-copyright, footer.page-footer .footer-copyright { padding: 10px 0 !important; font-size: var(--nhf-fs-sm); color: rgba(255, 255, 255, .7); text-shadow: none; }
#footer-member.bg-danger div.footer-copyright a { color: #ff6b6b; }
footer.bg-danger div.footer-copyright a { color: #ffb4b4; }

/* ─────────────────────────────────────────────────────────────────────────
   6. MAIN PAGE — balance card, deposit/withdraw pills, menu grid, game tiles
   ───────────────────────────────────────────────────────────────────────── */
.card-main {
  background: linear-gradient(135deg, rgba(150, 3, 3, .78), rgba(70, 0, 0, .82)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: var(--nhf-r-xl) !important;
  box-shadow: var(--nhf-shadow-2), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  margin: 12px 10px 0;
  padding: 16px 20px 34px !important;
  color: #fff !important;
}
.card-main h5.thb { font-size: var(--nhf-fs-2xl); font-weight: 500; letter-spacing: .3px; margin-bottom: 0; }
.card-main .text-secondary { color: rgba(255, 255, 255, .7) !important; }
.card-main .bg-dark { background: rgba(0, 0, 0, .35) !important; }
.card-main .border-secondary { border-color: rgba(255, 255, 255, .25) !important; }
.card-main .fa-gem { color: var(--nhf-gold); }
.card-sub {
  border-radius: var(--nhf-r-pill) !important;
  border: 0 !important;
  box-shadow: var(--nhf-shadow-2) !important;
  margin: -26px 24px 0 !important;
  padding: 2px;
  position: relative; z-index: 5;
}
.card-sub .p-2 { padding: 4px !important; }
/* menu grid: 3 columns mobile / 6 pc (legacy col-4 col-lg-2) — equal cards, bigger icons */
/* main content area = light grey, container-wide, straight edges (รูปที่ 2) */
.row-menu-grid {
  border-radius: 0 !important;
  padding: 28px var(--nhf-sp-3) var(--nhf-sp-3) !important;
  margin-bottom: 64px;
  background: var(--nhf-main-bg) !important;
}
@media (min-width: 768px) { .row-menu-grid { padding: 30px var(--nhf-sp-4) var(--nhf-sp-4) !important; } }
.row-menu-grid .row.px-2 { margin-left: -5px; margin-right: -5px; padding: 0 !important; }
.row-menu-grid .row .col-4, .row-menu-grid .row .col-6, .row-menu-grid .row .col-3 { padding: 5px !important; }
a.menu-grid, a.menu-grid.hot, a.menu-grid.hothot {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 6px;
  min-height: 96px !important;
  height: 100%;
  margin: 0 !important;
  padding: 14px 8px 12px !important;
  background: var(--nhf-paper) !important;
  border: 1px solid var(--nhf-line) !important;
  border-radius: var(--nhf-r) !important;
  box-shadow: var(--nhf-shadow-1) !important;
  color: var(--nhf-ink) !important;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-sm) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
  animation: none !important;
  position: relative;
  transition: transform var(--nhf-fast) var(--nhf-ease), box-shadow var(--nhf-fast) var(--nhf-ease), border-color var(--nhf-fast);
}
a.menu-grid br { display: none; }
a.menu-grid:hover, a.menu-grid:active {
  transform: translateY(-2px);
  border-color: var(--nhf-red-line) !important;
  box-shadow: var(--nhf-shadow-2) !important;
  background: var(--nhf-paper) !important;
  color: var(--nhf-red) !important;
}
a.menu-grid.hothot { background: linear-gradient(180deg, #fff, var(--nhf-red-soft)) !important; }
a.menu-grid i, .row .col-4 .menu-grid i, .row .col-3 .menu-grid i { font-size: 30px !important; line-height: 1 !important; color: var(--nhf-red); }
a.menu-grid .fa-layers { font-size: 30px; width: 1.1em; height: 1.1em; }
a.menu-grid .fa-layers i { font-size: 1em !important; }
a.menu-grid .fa-layers .fa-sm { font-size: .68em !important; color: var(--nhf-gold-deep); }
a.menu-grid img { width: 34px !important; height: 34px !important; object-fit: contain; display: block; }
a.menu-grid.powerball i { color: var(--nhf-gold-deep); }
@media (min-width: 992px) { a.menu-grid, a.menu-grid.hot, a.menu-grid.hothot { min-height: 108px !important; font-size: var(--nhf-fs) !important; } a.menu-grid i { font-size: 32px !important; } }
/* corner ribbon → compact tag */
a.menu-grid .ribbon { width: 46px; height: 46px; top: -1px; left: -1px; }
a.menu-grid .ribbon::before, a.menu-grid .ribbon::after { display: none; }
a.menu-grid .ribbon span {
  width: 74px; padding: 3px 0; right: -6px; top: 7px;
  background: linear-gradient(90deg, var(--nhf-red-hi), var(--nhf-red-deep));
  font: 500 9px/1 var(--nhf-font-display) !important;
  letter-spacing: .6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); text-shadow: none;
}
/* wide money shortcuts (request / statement) — dark cards, gold icon, white text (must beat the a.menu-grid card rule above) */
a.menu-grid.menu-money, a.menu-grid.menu-money.hot {
  display: block !important;
  background: var(--nhf-ink) !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: var(--nhf-r) !important;
  box-shadow: var(--nhf-shadow-1), inset 4px 0 0 var(--nhf-red-hi) !important;
  min-height: 64px !important;
  padding: 12px 14px 12px 18px !important;
  color: #fff !important;
  text-shadow: none !important;
  font-size: var(--nhf-fs) !important;
  transition: transform var(--nhf-fast) var(--nhf-ease), box-shadow var(--nhf-fast);
}
a.menu-grid.menu-money:hover, a.menu-grid.menu-money:active { background: #000 !important; color: #fff !important; transform: translateY(-2px); border-color: rgba(255, 255, 255, .12) !important; box-shadow: var(--nhf-shadow-2), inset 4px 0 0 var(--nhf-red-hi) !important; }
a.menu-grid.menu-money i { color: var(--nhf-gold) !important; font-size: 26px !important; text-shadow: none; }
a.menu-grid.menu-money:hover i { color: var(--nhf-gold) !important; }
a.menu-grid.menu-money .text-left { font-family: var(--nhf-font-display); font-size: var(--nhf-fs); line-height: 1.3; color: #fff; }
a.menu-grid.menu-money br { display: inline; }
.row-menu-grid .row.px-2 > .col-12.col-lg-6.p-1 { padding: 5px !important; }
/* R21 (2026-10-02): แถวปุ่ม request/all + statement ย้ายมาเป็นแถวแรกเหนือ menu grid (Main.vue) — วางคู่กันทุกขนาดจอ (มือถือเดิม col-12 ซ้อนกัน 2 แถว กินที่สูง) + เว้นช่องก่อน grid */
.row-menu-grid .row.nhf-money-top { margin-bottom: 6px; }
.row-menu-grid .row.nhf-money-top > .col-12.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
@media (max-width: 575.98px) {
  .row-menu-grid .row.nhf-money-top a.menu-grid.menu-money { min-height: 58px !important; padding: 10px 8px 10px 12px !important; }
  .row-menu-grid .row.nhf-money-top a.menu-grid.menu-money i { font-size: 22px !important; }
  .row-menu-grid .row.nhf-money-top a.menu-grid.menu-money .text-left { font-size: var(--nhf-fs-sm); line-height: 1.25; }
}
/* section header bar "สล็อต / เกม / คาสิโน" */
.tab {
  background: linear-gradient(90deg, var(--nhf-red-deep), var(--nhf-red-hi)) !important;
  border: 0 !important;
  border-radius: var(--nhf-r-sm) !important;
  padding: 9px 14px !important;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-md) !important;
  font-weight: 500;
  letter-spacing: .2px;
  box-shadow: var(--nhf-shadow-1);
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  margin: 12px 0 4px;
}
.tab .tab-icon, .tab i { color: var(--nhf-gold) !important; font-size: 1em; }
.topbox { margin-top: 8px; padding-bottom: 12px !important; align-items: center; }
.topbox .marqueemain { background: rgba(255, 255, 255, .92); border-radius: var(--nhf-r-sm) !important; color: var(--nhf-ink-2); }

/* ─── media tiles (main + casino/slot select + login carousel) ────────────
   .image-container > a > img.img-fluid + .image-tab  — CSS-only re-proportion:
   mobile 1:1, pc 2:1, cover-crop, one radius, scrim label. */
.image-container:not(.nano-video-wrap) {
  border-radius: var(--nhf-r) !important;
  overflow: hidden !important;
  background: #111;
  box-shadow: var(--nhf-shadow-1);
  transition: transform var(--nhf-fast) var(--nhf-ease), box-shadow var(--nhf-fast) var(--nhf-ease);
}
.image-container:not(.nano-video-wrap):hover { transform: translateY(-2px); box-shadow: var(--nhf-shadow-2); }
.image-container:not(.nano-video-wrap) a { display: block; }
.image-container:not(.nano-video-wrap) img.img-fluid, .owl-carousel .image-container img {
  width: 100% !important;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  transition: transform .45s var(--nhf-ease);
}
.image-container:not(.nano-video-wrap):hover img.img-fluid { transform: scale(1.04); }
/* banners keep their natural ratio */
.lrimg .image-container img.img-fluid, .mobile-banner .image-container img.img-fluid, .col-12 > .image-container img.img-fluid { aspect-ratio: auto !important; }
.image-tab {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .82) 100%) !important;
  padding: 24px 8px 8px !important;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-xs) !important;
  font-weight: 500 !important;
  line-height: 1.25;
  color: #fff !important;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  border-radius: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 576px) { .image-tab { font-size: var(--nhf-fs-sm) !important; } }
@media (min-width: 992px) { .image-tab { font-size: var(--nhf-fs) !important; padding: 26px 10px 9px !important; } }
/* ─── 6b. GAME / PROVIDER CARDS v2 — main.php + select/casinoall|slotall (owner 2026-09-28 "หน้า main ขอ UI แบบรูปที่ 2") ──
   card = white · r16 · 1px border · soft shadow ; image 2:3 cover (image_url_mobile covers are 1024×1536 / 400×600) ;
   cream name bar BELOW the image (not overlay) ; grid 2 / 3 / 4 columns (<768 / 768–1199 / ≥1200) on EVERY viewport.
   The DOM carries two card sets: `.col-4.d-lg-none` (covers) and `.col-lg-6.d-none.d-lg-block` (landscape partner banners).
   To get portrait cards on desktop we display the cover set at ≥992 and hide the banner set — CSS only, same links/games. */
#section-content .row.p-1:has(> [class*="col-"] > .image-container) { margin-left: -6px; margin-right: -6px; padding: 0 !important; }
#section-content .row.p-1 > [class*="col-"]:has(> .image-container) { padding: 6px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
#section-content .row.p-1:has(> .tab) { margin-left: 0; margin-right: 0; padding: 0 !important; }
#section-content .row.p-1.d-block.d-lg-none { margin-left: 0; margin-right: 0; padding: 0 !important; }
#section-content .row.p-1.d-block.d-lg-none > .col-12.lrimg { padding: 0 !important; margin-top: 8px !important; }
.col-lotto > .row:has(> [class*="col-"] > .image-container) { margin-left: -6px; margin-right: -6px; }
.col-lotto > .row > [class*="col-"]:has(> .image-container) { padding: 6px !important; margin-top: 0 !important; }
.col-lotto > .row.mobile-banner { margin-left: 0; margin-right: 0; padding: 0 !important; margin-bottom: 8px; }
.col-lotto > .row.mobile-banner > .col-12 { padding: 0 !important; }
/* select pages: the panel holding the cards takes the same light-grey ground as main */
.col-lotto:has(> .row > [class*="col-"] > .image-container) { background: var(--nhf-main-bg) !important; border-color: transparent !important; }
/* mobile <768: 3 columns (owner 2026-09-28 "ทำให้เป็น 3 col มือถือ" — was 2) ; gutter 10 (padding 5) so 360px wide screens still get ~100px cards */
#section-content .row.p-1 > .col-4.d-lg-none:has(> .image-container),
.col-lotto > .row > .col-4.d-lg-none:has(> .image-container) { flex: 0 0 33.3333%; max-width: 33.3333%; }
@media (max-width: 767.98px) {
  #section-content .row.p-1:has(> [class*="col-"] > .image-container), .col-lotto > .row:has(> [class*="col-"] > .image-container) { margin-left: -5px; margin-right: -5px; }
  #section-content .row.p-1 > [class*="col-"]:has(> .image-container), .col-lotto > .row > [class*="col-"]:has(> .image-container) { padding: 5px !important; }
}
/* tablet 768–991: cover set still visible → 3 columns (gap 24) */
@media (min-width: 768px) {
  #section-content .row.p-1:has(> [class*="col-"] > .image-container), .col-lotto > .row:has(> [class*="col-"] > .image-container) { margin-left: -12px; margin-right: -12px; }
  #section-content .row.p-1 > [class*="col-"]:has(> .image-container), .col-lotto > .row > [class*="col-"]:has(> .image-container) { padding: 12px !important; }
  #section-content .row.p-1 > .col-4.d-lg-none:has(> .image-container),
  .col-lotto > .row > .col-4.d-lg-none:has(> .image-container) { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
/* desktop ≥992: show cover set (3 cols), hide landscape banner set ; ≥1200: 4 cols
   select pages: the hero banner row `.row.mobile-banner.d-lg-none` (Foxy Live) is shown too — full container width, r12 — otherwise that
   provider would only exist in the hidden banner set on desktop */
@media (min-width: 992px) {
  #section-content .row.p-1 > .col-4.d-lg-none:has(> .image-container),
  .col-lotto > .row > .col-4.d-lg-none:has(> .image-container),
  .col-lotto > .row > .col-12.d-lg-none:has(> .image-container),
  .col-lotto > .row.mobile-banner.d-lg-none:has(> .col-12 > .image-container) { display: block !important; }
  #section-content .row.p-1 > .col-lg-6.d-lg-block:has(> .image-container),
  .col-lotto > .row > .col-lg-6.d-lg-block:has(> .image-container) { display: none !important; }
  .col-lotto > .row.mobile-banner .image-container img.img-fluid { max-height: 360px; object-fit: cover; }
}
@media (min-width: 1200px) {
  #section-content .row.p-1 > .col-4.d-lg-none:has(> .image-container),
  .col-lotto > .row > .col-4.d-lg-none:has(> .image-container) { flex: 0 0 25%; max-width: 25%; }
}
/* the card */
#section-content .row.p-1 > [class*="col-"] > .image-container:not(.nano-video-wrap),
.col-lotto > .row > [class*="col-"] > .image-container,
.r-game-grid .image-container, .r-game-grid-m .image-container {
  background: var(--nhf-card-bg) !important;
  border: 1px solid var(--nhf-card-border) !important;
  border-radius: var(--nhf-card-r) !important;
  overflow: hidden !important;
  box-shadow: var(--nhf-card-shadow) !important;
  height: 100%;
  display: flex; flex-direction: column;
  transition: transform var(--nhf-fast) var(--nhf-ease), box-shadow var(--nhf-fast) var(--nhf-ease) !important;
}
#section-content .row.p-1 > [class*="col-"] > .image-container:not(.nano-video-wrap):hover,
.col-lotto > .row > [class*="col-"] > .image-container:hover,
.r-game-grid .image-container:hover, .r-game-grid-m .image-container:hover { transform: translateY(-2px) !important; box-shadow: var(--nhf-card-shadow-hover) !important; }
#section-content .row.p-1 > [class*="col-"] > .image-container:not(.nano-video-wrap) > a,
.col-lotto > .row > [class*="col-"] > .image-container > a,
.r-game-grid .image-container > a, .r-game-grid-m .image-container > a { display: flex !important; flex-direction: column; height: 100%; }
#section-content .row.p-1 > [class*="col-"] > .image-container:not(.nano-video-wrap) img.img-fluid,
.col-lotto > .row > [class*="col-"] > .image-container img.img-fluid,
.r-game-grid .image-container img, .r-game-grid-m .image-container img {
  aspect-ratio: 2 / 3 !important;
  width: 100% !important; height: auto !important;
  object-fit: cover; object-position: center;
  border-radius: 0 !important;
  display: block;
}
/* hero / promo banners inside the same rows keep their natural (landscape) ratio — selectors must out-rank the card rule above
   (id + 6 classes): main mobile promo `.row.p-1.d-block.d-lg-none > .col-12.lrimg`, select hero `.row.mobile-banner > .col-12` */
#section-content .row.p-1.d-block.d-lg-none > .col-12.lrimg > .image-container img.img-fluid,
#section-content .row.p-1.d-block.d-lg-none > .col-12.lrimg > .image-container picture img,
#section-content .row.p-1 > .col-12:not(.lrimg) > .image-container img.img-fluid,
.col-lotto > .row.mobile-banner > .col-12.d-lg-none > .image-container img.img-fluid,
.col-lotto > .row > .col-12 > .image-container img.img-fluid,
.mobile-banner .image-container img.img-fluid { aspect-ratio: auto !important; height: auto !important; }
#section-content .row.p-1.d-block.d-lg-none > .col-12.lrimg > .image-container:not(.nano-video-wrap),
.col-lotto > .row.mobile-banner > .col-12.d-lg-none > .image-container {
  display: block; height: auto;
  background: #111 !important;
  border: 0 !important;
  border-radius: var(--nhf-r) !important;
  box-shadow: var(--nhf-shadow-1) !important;
}
#section-content .row.p-1.d-block.d-lg-none > .col-12.lrimg > .image-container:not(.nano-video-wrap) > a,
.col-lotto > .row.mobile-banner > .col-12.d-lg-none > .image-container > a { display: block !important; height: auto; }
/* name bar (cream, below the image) */
#section-content .row.p-1 > [class*="col-"] > .image-container .image-tab,
.col-lotto > .row > [class*="col-"] > .image-container .image-tab,
.r-game-grid .image-tab, .r-game-grid-m .image-tab {
  /* display:block (not flex) — text-overflow:ellipsis only works on a block container's own text */
  position: static !important;
  display: block !important;
  height: 48px; line-height: 48px; flex: 0 0 48px;
  padding: 0 12px !important;
  background: var(--nhf-card-bar) !important;
  border-top: 1px solid rgba(0, 0, 0, .04);
  border-radius: 0 !important;
  color: var(--nhf-card-bar-text) !important;
  font-family: var(--nhf-font-display) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-align: center;
  text-shadow: none !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  -webkit-line-clamp: unset; -webkit-box-orient: unset;
}
/* phones <576 with 3 columns: cards are ~100–120px wide → smaller name bar so names such as "Pragmatic Play Live" keep more letters */
@media (max-width: 575.98px) {
  #section-content .row.p-1 > [class*="col-"] > .image-container .image-tab,
  .col-lotto > .row > [class*="col-"] > .image-container .image-tab,
  .r-game-grid .image-tab, .r-game-grid-m .image-tab { height: 38px; line-height: 38px; flex-basis: 38px; font-size: 12px !important; padding: 0 6px !important; }
}
@media (min-width: 768px) {
  #section-content .row.p-1 > [class*="col-"] > .image-container .image-tab,
  .col-lotto > .row > [class*="col-"] > .image-container .image-tab,
  .r-game-grid .image-tab, .r-game-grid-m .image-tab { height: 56px; line-height: 56px; flex-basis: 56px; font-size: 17px !important; padding: 0 14px !important; }
}
@media (min-width: 1400px) {
  #section-content .row.p-1 > [class*="col-"] > .image-container .image-tab,
  .col-lotto > .row > [class*="col-"] > .image-container .image-tab,
  .r-game-grid .image-tab, .r-game-grid-m .image-tab { font-size: 18px !important; }
}
/* banners (main mobile promo / select hero): flat r12 image, no card chrome */
#section-content .lrimg .image-container:not(.nano-video-wrap), .col-lotto > .row.mobile-banner .image-container { border: 0 !important; border-radius: var(--nhf-r) !important; box-shadow: var(--nhf-shadow-1) !important; background: #111 !important; }
/* NEW pill (gamelist template B badge — main/select cards carry no badge data in the DOM, so none is synthesised there) */
.rg-badge-new {
  background: var(--nhf-new-pill) !important;
  color: #fff !important;
  border-radius: var(--nhf-r-pill) !important;
  padding: 4px 10px !important;
  top: 10px !important; left: 10px !important;
  font-family: var(--nhf-font-display);
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .5px !important;
  box-shadow: 0 2px 8px rgba(240, 78, 43, .35) !important;
}
/* video promo banner (main mobile) */
.nano-video-wrap { border-radius: var(--nhf-r) !important; overflow: hidden; box-shadow: var(--nhf-shadow-1); }
.video-banner-wrap img { border-radius: var(--nhf-r-sm); box-shadow: var(--nhf-shadow-2); }

/* ─────────────────────────────────────────────────────────────────────────
   7. CASINO GAME LISTS (gamelist.css .rg-game-*) — 3 / 3 / 4 / 5 / 6 columns (<576 / 576–767 / 768–991 / 992–1199 / ≥1200)
      mobile was 2 (`.col-6`) → 3 per owner 2026-09-28 "ทำให้เป็น 3 col มือถือ … หน้า gamelist" (A/B/C/PG/EZ templates share `.rg-game-col`)
   ───────────────────────────────────────────────────────────────────────── */
/* gutters: tester 2026-09-28 (web L, PP gamelist) "ไอคอนเกมส์ต่างๆ ติดกันเกินไป" → back to the legacy 8px (gamelist.css .5rem), 6px on phones */
.rg-game-grid { margin: 0 -8px !important; }
.rg-game-grid .rg-game-col { padding: 8px !important; }
@media (max-width: 767.98px) { .rg-game-grid .rg-game-col { flex: 0 0 33.3333%; max-width: 33.3333%; } }
@media (max-width: 575.98px) {
  .rg-game-grid { margin: 0 -6px !important; }
  .rg-game-grid .rg-game-col { padding: 6px !important; }
  .rg-game-body { padding: 6px 6px 8px !important; }
  .rg-game-title { font-size: 12px !important; }
}
/* 1:1 thumb for EVERY .rg-game-thumb — gamelist.css defines it, but views that load only perpage.css (gpxpp = Pragmatic Play,
   views/casino/gpxpp/main.php:2-3) have no thumb rules → natural-size <img> spilling out of the card ("รูปภาพแตก ไม่ตรงกรอบ", tester L #57).
   Same values as gamelist.css:30-43 so pages that already have them are unchanged. */
.rg-game-thumb { position: relative !important; padding-top: 100% !important; overflow: hidden !important; display: block; }
.rg-game-thumb img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.rg-game-card { display: flex !important; flex-direction: column; align-items: stretch; overflow: hidden !important; text-decoration: none !important; }
.rg-game-body { text-align: center; }
.rg-game-title { line-height: 1.3; min-height: 2.1em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 992px) and (max-width: 1199.98px) { .rg-game-grid .rg-game-col { flex: 0 0 20%; max-width: 20%; } }
@media (min-width: 1200px) { .rg-game-grid .rg-game-col { flex: 0 0 16.6667%; max-width: 16.6667%; } }
.rg-game-card {
  border-radius: var(--nhf-r) !important;
  background: #16161a !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: var(--nhf-shadow-1) !important;
  transition: transform var(--nhf-fast) var(--nhf-ease), box-shadow var(--nhf-fast) var(--nhf-ease), border-color var(--nhf-fast) !important;
}
.rg-game-card:hover { transform: translateY(-3px) !important; box-shadow: var(--nhf-shadow-2) !important; border-color: rgba(255, 255, 255, .18) !important; }
.rg-game-thumb img { transition: transform .45s var(--nhf-ease); }
.rg-game-card:hover .rg-game-thumb img { transform: scale(1.05); }
.rg-game-body { padding: 8px 8px 10px !important; }
.rg-game-title { font-family: var(--nhf-font-display); font-size: var(--nhf-fs-sm) !important; font-weight: 500 !important; color: #f3f3f3 !important; }
.rg-badge-new { border-radius: var(--nhf-r-xs) !important; font-family: var(--nhf-font-display); letter-spacing: .6px !important; }
/* template C pager */
.pagination-bottom-container { padding: 12px 0 !important; gap: 8px !important; }
.pagination-bottom-container a {
  border-radius: var(--nhf-r-sm) !important;
  box-shadow: var(--nhf-shadow-1) !important;
  font-family: var(--nhf-font-display); font-weight: 500 !important;
  color: var(--nhf-ink-2) !important;
  min-height: 42px; padding: 8px 16px !important;
}
.pagination-bottom-container a:hover { background: var(--nhf-red-soft) !important; color: var(--nhf-red) !important; }
.pagination-bottom-container a .arrow { border-color: currentColor; }
/* pg sticky promo */
.sticky-promo__inner { border-radius: var(--nhf-r) !important; overflow: hidden; box-shadow: var(--nhf-shadow-2) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   8. LOTTERY LIST · RESULTS · POY · STATEMENT · DEPOSIT/WITHDRAW · AUTH
   ───────────────────────────────────────────────────────────────────────── */
/* lottery cards (lottery.php) */
.col-lotto .row .col-6, .col-lotto .row .col-4, .col-lotto .row .col-3 { margin-bottom: 8px; padding: 0 5px; }
a .lotto-card, .lotto-card {
  border: 0 !important;
  border-radius: var(--nhf-r) !important;
  box-shadow: var(--nhf-shadow-1) !important;
  background: var(--nhf-paper);
  transition: transform var(--nhf-fast) var(--nhf-ease), box-shadow var(--nhf-fast) var(--nhf-ease);
}
a .lotto-card:hover, a.lotto-card:focus { transform: translateY(-2px); box-shadow: var(--nhf-shadow-2) !important; }
.lotto-head { border-radius: 0; padding: 9px 12px 8px; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); min-height: 54px; display: flex; flex-direction: column; justify-content: center; }
.lotto-head > h5 { font-family: var(--nhf-font-display); font-size: var(--nhf-fs-md); font-weight: 500 !important; color: #fff; letter-spacing: .2px; }
.lotto-head .badge { background: rgba(0, 0, 0, .28) !important; font-weight: 400; font-size: var(--nhf-fs-xs); border-radius: var(--nhf-r-xs); padding: 3px 7px; }
.ribbon-lotto { height: 30px; line-height: 30px; background: rgba(0, 0, 0, .3); }
.lotto-time {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 12px;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-xl);
  line-height: 28px;
  color: var(--nhf-muted-2);
  align-items: center;
}
.lotto-time.text-success { color: var(--nhf-green) !important; }
.lotto-time span { font-size: 80%; }
.lotto-close .lotto-time { color: var(--nhf-muted-2); }
@media (max-width: 575.98px) { .lotto-head > h5 { font-size: var(--nhf-fs); } .lotto-time { font-size: var(--nhf-fs-lg); padding: 6px 10px; } .lotto-head { min-height: 50px; padding: 7px 10px 6px; } }
.livebtn { border-radius: var(--nhf-r-sm) !important; border: 0 !important; background: linear-gradient(90deg, var(--nhf-red-hi), var(--nhf-red-deep)) !important; padding: 6px 12px; font-family: var(--nhf-font-display); }
/* results (lottery_results/*) */
#contentbox h6 { font-family: var(--nhf-font-display); font-weight: 500; font-size: var(--nhf-fs-md); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#contentbox .card { border-radius: var(--nhf-r-sm); overflow: hidden; }
#contentbox .card-header { font-size: var(--nhf-fs-sm); color: var(--nhf-muted) !important; background: var(--nhf-paper-2); padding: 5px 4px !important; }
#contentbox .card-body { padding: 6px 4px !important; }
#contentbox .card .card-text { font-family: var(--nhf-font-display); font-size: var(--nhf-fs-xl); font-weight: 500; letter-spacing: 1px; color: var(--nhf-ink); margin: 0; line-height: 1.2; }
#contentbox .card.border-danger { border-color: var(--nhf-red-line) !important; }
#contentbox .card.border-dark { border-color: var(--nhf-line) !important; }
#contentbox .bgwhitealpha { margin-bottom: 8px; }
.button-select-category .btn { border-radius: var(--nhf-r-pill) !important; width: 48px; height: 48px; padding: 0 !important; box-shadow: var(--nhf-shadow-2); }
/* poy (bet slips) */
.poy-list { border-radius: var(--nhf-r) !important; border: 1px solid var(--nhf-line) !important; box-shadow: var(--nhf-shadow-1); overflow: hidden; margin-bottom: 8px; }
.poy-list-head { padding: 8px 12px 0; border-bottom-color: var(--nhf-line); font-family: var(--nhf-font-display); }
.poy-list-head .poy-status { border-bottom-left-radius: var(--nhf-r-sm); font-weight: 500; padding: 8px 10px 6px; }
.poy-type { border-radius: var(--nhf-r-sm); background: var(--nhf-paper-2); }
.poy-list-content .btn { border-radius: var(--nhf-r-xs) !important; }
/* statement / request accordion */
.accordion .card { border-radius: var(--nhf-r) !important; }
.accordion .card-header { background: transparent; padding: 0; cursor: pointer; }
.accordion .card-header > .bg-white { border-radius: var(--nhf-r) !important; border-color: var(--nhf-line) !important; transition: box-shadow var(--nhf-fast); }
.accordion .card-header:hover > .bg-white { box-shadow: var(--nhf-shadow-1); }
.accordion .card-header h4 { font-size: var(--nhf-fs-xl); }
.accordion .card-body { border: 1px solid var(--nhf-line); border-top: 0; border-radius: 0 0 var(--nhf-r) var(--nhf-r); background: var(--nhf-paper); }
#menucredit.nav-tabs, .nav-tabs.nav-justified { border-bottom: 0; background: var(--nhf-paper-3); border-radius: var(--nhf-r); padding: 4px; gap: 4px; margin-bottom: 8px; }
#menucredit .nav-link, .nav-tabs.nav-justified .nav-link { border: 0 !important; border-radius: var(--nhf-r-sm); color: var(--nhf-ink-2); padding: 10px 12px; background: transparent; }
#menucredit .nav-link.active, .nav-tabs.nav-justified .nav-link.active { background: var(--nhf-paper); color: var(--nhf-red); box-shadow: var(--nhf-shadow-1); }
/* deposit / withdraw cards (inline view css) */
.deposit-select-card { border-radius: var(--nhf-r-lg) !important; border-width: 1.5px !important; box-shadow: var(--nhf-shadow-1) !important; }
.deposit-select-card:hover { box-shadow: var(--nhf-shadow-2) !important; }
.deposit-select-card .card-inner h5 { font-family: var(--nhf-font-display); font-weight: 500; font-size: var(--nhf-fs-lg); }
.deposit-select-card .card-tag { font-family: var(--nhf-font-display); font-weight: 500; }
.withdraw-card { border-radius: var(--nhf-r-lg) !important; box-shadow: var(--nhf-shadow-1) !important; }
.withdraw-card__title { font-family: var(--nhf-font-display); font-weight: 500 !important; }
.p2p-modal .modal-content { border-radius: var(--nhf-r-lg) !important; }
.p2p-modal__submit { min-height: var(--nhf-tap); font-size: var(--nhf-fs-md) !important; }
/* login (guest) */
.bglogin {
  background: rgba(255, 255, 255, .96) !important;
  border: 0 !important;
  border-radius: var(--nhf-r-lg) var(--nhf-r-lg) 0 0 !important;
  box-shadow: var(--nhf-shadow-2) !important;
  margin-top: 16px;
  padding: 16px !important;
}
.subbglogin {
  background: linear-gradient(135deg, var(--nhf-topbar-a), var(--nhf-red-deep)) !important;
  border: 0 !important;
  border-radius: 0 0 var(--nhf-r-lg) var(--nhf-r-lg) !important;
  box-shadow: var(--nhf-shadow-2) !important;
  padding: 12px 16px !important;
}
.subbglogin .rule a { color: rgba(255, 255, 255, .88); font-weight: 500; }
.subbglogin .rule a:hover { color: #fff; text-shadow: none; }
.subbglogin .submenulogin .btoutline { border-radius: var(--nhf-r-sm); overflow: hidden; }
.form-middle label { font-family: var(--nhf-font-body); }
.form-middle .forgot a { color: var(--nhf-red); }
.dd-gold { border-radius: var(--nhf-r) !important; }
#loginbox .form-control { min-height: 42px; }
.owl-carousel .item { padding: 4px; }
.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next { box-shadow: var(--nhf-shadow-2); width: 36px !important; height: 36px !important; }
/* register / forget (contentbox) */
#contentbox > .bg-white.rounded, #contentbox .bg-white.shadow-sm.rounded { border-radius: var(--nhf-r-lg) !important; border-color: var(--nhf-line) !important; padding: 20px !important; }
#contentbox .bg-dark.rounded { background: linear-gradient(135deg, #202024, #101012) !important; border-radius: var(--nhf-r) !important; border-color: rgba(255, 255, 255, .1) !important; }
#contentbox h5 .badge { font-family: var(--nhf-font-display); font-weight: 500; }
.captcha-image { border-radius: var(--nhf-r-sm); border: 1px solid var(--nhf-line); }

/* ─────────────────────────────────────────────────────────────────────────
   9. PAGEBET — mode tabs, mode buttons, number panel, keypad, slip sidebar
   ───────────────────────────────────────────────────────────────────────── */
/* header row of the bet page */
.tanghuay-time, .tanghuay-time_day {
  background: var(--nhf-red-soft) !important;
  border: 1px solid var(--nhf-red-line) !important;
  color: var(--nhf-red) !important;
  border-radius: var(--nhf-r-sm) !important;
  padding: 6px 10px !important;
  font-family: var(--nhf-font-display);
  font-weight: 500;
  text-shadow: none !important;
  gap: 6px;
}
.tanghuay-time .sn-icon, .tanghuay-time_day .sn-icon { color: var(--nhf-red); }
.cart-item-lists { border-radius: var(--nhf-r) !important; box-shadow: var(--nhf-shadow-1) !important; padding: 8px !important; }
/* "กดเลขเอง | เลือกจากแผง" → segmented control */
#nav-tab1.nav-tabs { border: 0 !important; background: var(--nhf-paper-3); border-radius: var(--nhf-r); padding: 4px; gap: 4px; margin-bottom: 8px; }
#nav-tab1.nav-pills .nav-link {
  border: 0 !important;
  border-radius: var(--nhf-r-sm) !important;
  background: transparent !important;
  color: var(--nhf-ink-2) !important;
  font-family: var(--nhf-font-display);
  font-weight: 500 !important;
  font-size: var(--nhf-fs-md);
  text-shadow: none !important;
  padding: 12px 8px !important;
  min-height: var(--nhf-tap);
  transition: background var(--nhf-fast), color var(--nhf-fast), box-shadow var(--nhf-fast);
}
#nav-tab1.nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--nhf-red-hi), var(--nhf-red-deep)) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(185, 5, 4, .35) !important;
  border-bottom-width: 0 !important;
}
/* สามตัว / สองตัว / เลขวิ่ง pills */
#number-tab { gap: 6px; }
#number-tab .nav-link { border-radius: var(--nhf-r-sm) !important; border: 1.5px solid; font-family: var(--nhf-font-display); font-weight: 500; font-size: var(--nhf-fs-md); min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 8px !important; }
#number-tab .nav-link.btn-outline-red.active { background: var(--nhf-red-hi); border-color: var(--nhf-red-hi); color: #fff; }
#number-tab .nav-link.btn-outline-blue.active { background: var(--nhf-blue); border-color: var(--nhf-blue); color: #fff; }
#number-tab .nav-link.btn-outline-green.active { background: var(--nhf-green); border-color: var(--nhf-green); color: #fff; }
/* mode buttons (bet option + rate) */
.row-btn-tanghuay .btn.btn-tanghuay, .row-btn-tanghuay .btn.btn-panghuay.d-flex {
  padding: 0 !important;
  overflow: hidden;
  min-height: var(--nhf-tap);
  border-radius: var(--nhf-r-sm) !important;
  border-width: 1.5px;
  background-image: none;
}
.row-btn-tanghuay .btn.btn-tanghuay > div:first-child, .row-btn-tanghuay .btn.btn-panghuay > div:first-child {
  margin: 0 !important;
  padding: 10px 10px !important;
  width: 70% !important;
  align-self: stretch;
  display: flex; align-items: center; justify-content: flex-start; gap: 4px;
  text-align: left;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs) !important;
  font-weight: 500;
  border-radius: 0 !important;
  line-height: 1.2;
}
.row-btn-tanghuay .btn.btn-tanghuay > div:first-child i, .row-btn-tanghuay .btn.btn-panghuay > div:first-child i { font-size: 1.05em !important; font-style: normal; }
.row-btn-tanghuay .btn.btn-tanghuay > div:last-child, .row-btn-tanghuay .btn.btn-panghuay > div:last-child {
  width: 30% !important;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-md);
  font-weight: 500;
  font-style: normal;
}
.row-btn-tanghuay .btn.active { outline: 0 !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor, var(--nhf-shadow-1) !important; }
.row-btn-tanghuay .btn.active .badge { background: rgba(0, 0, 0, .35) !important; }
.row-btn-tanghuay .col-6.p-1, .row-btn-tanghuay .col-md-4.p-1, .row-btn-tanghuay .col-lg-3.p-1 { padding: 4px !important; }
/* extra options box */
.box__two-option, .bg-option { background: var(--nhf-paper-3) !important; border-radius: var(--nhf-r) !important; text-shadow: none; padding: 8px !important; }
.bg-option .fa-bars { color: var(--nhf-muted); }
.col-lotto .bg-btn { border: 0; border-radius: var(--nhf-r-sm); box-shadow: none; background: transparent; }
.flex-fill .bg-btn { margin: 3px; }
.bg-btn .btn { min-height: 40px; }
/* keypad (mode keyboard + yeekee) */
.key-pad > .row > .col-3 { padding: 3px !important; }
.key-pad > .row > .col-3 .btn {
  min-height: 52px;
  border-radius: var(--nhf-r-sm) !important;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-xl) !important;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.key-pad > .row > .col-3 .btn-outline-primary { color: var(--nhf-ink); border-color: var(--nhf-line-2); background: #fff; }
.key-pad > .row > .col-3 .btn-outline-primary:hover, .key-pad > .row > .col-3 .btn-outline-primary:active { background: var(--nhf-paper-2); color: var(--nhf-red); border-color: var(--nhf-red-line); }
.key-pad > .row > .col-3 .btn-reset, .key-pad > .row > .col-3 .btn-cancel { font-size: var(--nhf-fs-sm) !important; line-height: 1.2; word-break: normal; }
.key-pad > .row > .col-3 .btn-blank { background: transparent !important; border: 0 !important; box-shadow: none; }
.key-pad > .row > .col-3 .btn-blank:hover { transform: none; }
label.number { border-radius: var(--nhf-r-sm); border-color: var(--nhf-red-line); background: var(--nhf-red-soft); color: var(--nhf-red); font-family: var(--nhf-font-display); }
.num-pad h4 { font-family: var(--nhf-font-display); }
.show-input-number { border-radius: var(--nhf-r) !important; font-size: var(--nhf-fs-2xl); letter-spacing: 4px; min-height: 56px; }
/* number panel (เลือกจากแผง) */
#numlist-tab1 .nav-link.txt-num, #numlist-tab2 .nav-link.txt-num, #numlist-tab3 .nav-link.txt-num, .nav-link.txt-num {
  border-radius: var(--nhf-r-sm) !important;
  border: 1.5px solid var(--nhf-line-2) !important;
  color: var(--nhf-ink-2);
  font-size: var(--nhf-fs-md);
  font-weight: 500;
  min-width: 52px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  margin: 3px !important;
}
.nav-link.txt-num.active { background: var(--nhf-ink) !important; border-color: var(--nhf-ink) !important; color: #fff !important; }
.btn-group-toggle > .btn.panghuay_number {
  min-width: 52px;
  height: 42px;
  padding: 0 6px !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--nhf-r-sm) !important;
  border-width: 1.5px;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-md) !important;
  font-weight: 500 !important;
  margin: 2px 2px 6px !important;
  background-color: #fff;
  transform: none;
}
.btn-group-toggle > .btn.panghuay_number:hover { transform: none; }
.btn-group-toggle > .btn-outline-danger.panghuay_number { color: var(--nhf-red-hi); border-color: var(--nhf-red-line); }
.btn-group-toggle > .btn-limitnum { border-color: var(--nhf-gold-deep); color: #8a6200; background: var(--nhf-amber-soft); }
.btn-group-toggle > .btn-limitnum.active, .btn-group-toggle > .btn-limitnum.focus.active { background: var(--nhf-gold-deep) !important; color: #fff !important; }
.limitnum .bg-dark { border-radius: var(--nhf-r-sm) !important; }
.btn-panghuay#shuffle_3, .btn-panghuay#shuffle_2, .btn-panghuay#shuffle_run, .btn.btn-panghuay.py-2 { min-height: 40px; }
/* slip sidebar (dark) */
.sidebar-huay { background: var(--nhf-ink) !important; border-radius: var(--nhf-r) !important; padding: 8px !important; box-shadow: var(--nhf-shadow-1); }
.sidebar-huay .btn { margin-bottom: 4px !important; }
.sidebar-huay .title-huay { color: #ff8080 !important; font-family: var(--nhf-font-display); border-bottom: 1px dashed rgba(255, 255, 255, .15) !important; height: auto !important; padding: 6px 4px 6px !important; font-size: var(--nhf-fs-md); }
.sidebar-huay .bet_num_count { color: rgba(255, 255, 255, .6); }
ol.num-huay li { padding: 5px 8px; font-family: var(--nhf-font-display); font-size: var(--nhf-fs-md); letter-spacing: 1px; border-radius: var(--nhf-r-xs); }
ol.num-huay li::before { color: rgba(255, 255, 255, .45); letter-spacing: 0; }
ol.num-huay li:nth-child(odd) { background: rgba(255, 255, 255, .06); }
.list-huay::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); }
.list-huay::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); }
.btn-move { border-radius: var(--nhf-r-xs); font-family: var(--nhf-font-display); }
/* pull-poy / enter-price bar */
.row.mb-2.py-3.mx-0.bg-dark.rounded { background: var(--nhf-ink) !important; border-radius: var(--nhf-r) !important; padding: 10px 6px !important; }
.row.bg-dark.rounded .btn.number-sets, .row.bg-dark.rounded .btn.show-lists { min-height: var(--nhf-tap); font-size: var(--nhf-fs-md) !important; }
.number-sets.border { border-color: transparent !important; }
/* rules box */
.box__condition-info { background: var(--nhf-paper) !important; border: 1px solid var(--nhf-line) !important; border-radius: var(--nhf-r) !important; padding: 12px !important; box-shadow: var(--nhf-shadow-1); }
.box__condition-info h2 { font-family: var(--nhf-font-display); font-size: var(--nhf-fs-lg); color: var(--nhf-red) !important; border-bottom: 1px dashed var(--nhf-line-2) !important; padding-bottom: 6px; }
.box__condition-info h3 { background: linear-gradient(90deg, var(--nhf-red-hi), var(--nhf-red-deep)) !important; border-radius: var(--nhf-r-sm) !important; font-family: var(--nhf-font-display); font-size: var(--nhf-fs-md) !important; padding: 7px 12px !important; }
.box__condition-info p { font-size: var(--nhf-fs); color: var(--nhf-ink-2); }
.recommendnumber { border: 0 !important; border-radius: var(--nhf-r) !important; background: linear-gradient(135deg, #e74c3c, var(--nhf-red-deep)) !important; font-family: var(--nhf-font-display); font-size: var(--nhf-fs-lg) !important; padding: 12px !important; box-shadow: var(--nhf-shadow-1); }
.returnbtn { border: 0 !important; border-radius: var(--nhf-r) !important; background: var(--nhf-ink-2) !important; font-family: var(--nhf-font-display); font-size: var(--nhf-fs-md) !important; }
.recommendnumber, .livebtn { animation-duration: 3s !important; }

/* ─────────────────────────────────────────────────────────────────────────
   10. BETTING POPUPS — .pagemodal-wrapper (#price #sendpoy #printpoy #poy)
   JS contract kept: .open toggles, .content-scroll height set inline by
   pagebet.js (window.height - fixbot - 50 → head may be ≤ 50px), .fixbot is
   position:fixed → NO transform/filter/backdrop-filter on any ancestor.
   ───────────────────────────────────────────────────────────────────────── */
.pagemodal-wrapper {
  height: 100vh !important;
  background: rgba(22, 4, 4, .66) !important;
  transition: opacity var(--nhf-med) var(--nhf-ease), width 0s linear var(--nhf-med);
}
.pagemodal-wrapper.open { transition: opacity var(--nhf-med) var(--nhf-ease), width 0s linear 0s; }
.pagemodal {
  background: var(--nhf-modal-bg) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 24px 80px rgba(0, 0, 0, .45) !important;
  transition: opacity var(--nhf-med) var(--nhf-ease);
}
@media (min-width: 768px) {
  .pagemodal-wrapper .container { max-width: 760px; }
  .fixbot { max-width: 730px !important; }
}
@media (max-width: 767.98px) { .fixbot { max-width: 100% !important; } }
/* enter animation on children only (safe for the fixed .fixbot) */
.pagemodal .head, .pagemodal .content-scroll { opacity: 0; transform: translateY(14px); transition: opacity var(--nhf-med) var(--nhf-ease), transform .36s var(--nhf-ease); }
.pagemodal-wrapper.open .head, .pagemodal-wrapper.open .content-scroll { opacity: 1; transform: none; }
@keyframes nhf-rise { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
.pagemodal-wrapper.open .fixbot { animation: nhf-rise .34s var(--nhf-ease) both; }
/* head */
.pagemodal .head, .pagemodal .head.bg-success, .pagemodal .head.bg-dark {
  height: 48px !important;
  padding: 0 52px !important;
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--nhf-modal-head-a), var(--nhf-modal-head-b)) !important;
  color: #fff !important;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-md);
  font-weight: 500;
  letter-spacing: .2px;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  position: relative;
}
.pagemodal .head.bg-success { background: linear-gradient(135deg, var(--nhf-green), var(--nhf-green-deep)) !important; }
.pagemodal .head * { color: #fff !important; }
.pagemodal .head .badge { background: rgba(0, 0, 0, .3) !important; font-weight: 400; font-size: var(--nhf-fs-xs); padding: 4px 9px; }
.pagemodal .head .btn-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; float: none;
  border-radius: 50%; background: rgba(255, 255, 255, .16);
  transition: background var(--nhf-fast);
}
.pagemodal .head .btn-close:hover { background: rgba(255, 255, 255, .3); }
.pagemodal .head .btn-close::before, .pagemodal .head .btn-close::after {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: 18px; height: 2px; border-radius: 1px;
}
.pagemodal .head .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.pagemodal .head .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* body */
.pagemodal .content { background: transparent !important; }
.pagemodal .content-scroll { background: transparent !important; padding: 10px 10px 30px !important; }
@media (min-width: 768px) { .pagemodal .content-scroll { padding: 14px 14px 30px !important; } }
/* price table (#poy_list clones of #model_poy_option) */
.pagemodal #poy_list .table, #price #poy_list table {
  background: var(--nhf-paper);
  border-collapse: separate; border-spacing: 0;
  border-radius: var(--nhf-r) !important;
  overflow: hidden;
  box-shadow: var(--nhf-shadow-1);
  margin-bottom: 12px;
  font-size: var(--nhf-fs) !important;
}
.pagemodal #poy_list table th {
  background: var(--nhf-paper-2) !important;
  border-top: 0 !important; border-bottom: 1px solid var(--nhf-line) !important;
  padding: 10px 8px !important;
  font-family: var(--nhf-font-display);
  font-weight: 500 !important;
  font-size: var(--nhf-fs-sm) !important;
  color: var(--nhf-muted) !important;
  white-space: nowrap;
}
.pagemodal #poy_list table th.text-danger { color: var(--nhf-red) !important; font-size: var(--nhf-fs-md) !important; }
.pagemodal #poy_list table th.text-primary { color: var(--nhf-ink-2) !important; }
.pagemodal #poy_list table th.text-dark { text-align: right; padding-right: 14px !important; }
.pagemodal #poy_list table td { padding: 6px 6px !important; border-top: 1px solid var(--nhf-line) !important; vertical-align: middle !important; }
.pagemodal #poy_list table.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(185, 5, 4, .025); }
.pagemodal #poy_list table.table-hover tbody tr:hover { background-color: rgba(185, 5, 4, .05); }
.pagemodal #poy_list table td.table-secondary { background: transparent !important; color: var(--nhf-muted-2) !important; font-size: var(--nhf-fs-xs) !important; width: 34px; padding-right: 0 !important; }
.pagemodal #poy_list table td.bg-success.text-white {
  background: var(--nhf-ink) !important;
  color: #fff !important;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-lg) !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px;
  border-radius: var(--nhf-r-sm);
  padding: 8px 10px !important;
  min-width: 58px;
  text-align: center;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .08);
}
/* rows JS marks (duplicate / rate changed / closed) — re-tinted, still !important-safe */
.pagemodal #poy_list table tr.number-is-duplicate-active, .pagemodal #poy_list table tr.number-is-duplicate.number-is-duplicate-active { background: var(--nhf-amber-soft) !important; color: var(--nhf-ink) !important; }
.pagemodal #poy_list table td.bg-success.text-white.number-is-duplicate-active { background: var(--nhf-amber) !important; color: var(--nhf-ink) !important; }
.pagemodal #poy_list table tr.multiply-change { background: #ffe1e1 !important; color: var(--nhf-ink) !important; }
.pagemodal #poy_list table tr.multiply-change td.bg-success.text-white { background: var(--nhf-red-hi) !important; color: #fff !important; }
.pagemodal #poy_list table tr.multiply-close { background: #e8e8ea !important; color: var(--nhf-muted) !important; }
.pagemodal #poy_list table tr.multiply-close td.bg-success.text-white { background: #8a8f98 !important; color: #fff !important; }
.pagemodal #poy_list table input.pl_price {
  background: #fff !important;
  color: var(--nhf-ink) !important;
  border: 1.5px solid var(--nhf-line-2) !important;
  border-radius: var(--nhf-r-sm) !important;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs-md);
  font-weight: 500;
  text-align: right;
  width: 92px;
  min-height: 40px;
  padding: 6px 10px;
}
.pagemodal #poy_list table input.pl_price:focus { border-color: var(--nhf-red) !important; box-shadow: var(--nhf-ring); }
.pagemodal #poy_list table td[id$="_multiply"], .pagemodal #poy_list table #model_poy_list_multiply { font-family: var(--nhf-font-display); font-size: var(--nhf-fs-md); color: var(--nhf-ink-2); white-space: nowrap; }
.pagemodal #poy_list table input[id$="_win"], .pagemodal #poy_list table #model_poy_list_win {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  text-align: right; padding-right: 4px;
  font-family: var(--nhf-font-display); font-size: var(--nhf-fs-md); font-weight: 500; color: var(--nhf-green);
  width: 100%; min-width: 80px;
}
.pagemodal #poy_list table .btn.btn-danger {
  width: 36px; height: 36px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--nhf-r-sm) !important;
  background: #fff !important; background-image: none;
  color: var(--nhf-red-hi) !important;
  border: 1.5px solid rgba(220, 53, 69, .35) !important;
  box-shadow: none;
}
.pagemodal #poy_list table .btn.btn-danger:hover { background: var(--nhf-red-hi) !important; color: #fff !important; transform: none; }
@media (max-width: 575.98px) {
  .pagemodal #poy_list table th { padding: 8px 5px !important; font-size: var(--nhf-fs-xs) !important; }
  .pagemodal #poy_list table th.text-danger { font-size: var(--nhf-fs) !important; }
  .pagemodal #poy_list table td { padding: 5px 3px !important; font-size: var(--nhf-fs-sm) !important; }
  .pagemodal #poy_list table td.bg-success.text-white { font-size: var(--nhf-fs-md) !important; padding: 7px 6px !important; min-width: 50px; letter-spacing: 1px; }
  .pagemodal #poy_list table input.pl_price { width: 74px; font-size: var(--nhf-fs); padding: 6px 6px; }
  .pagemodal #poy_list table input[id$="_win"] { min-width: 64px; font-size: var(--nhf-fs); }
  .pagemodal #poy_list table .btn.btn-danger { width: 32px; height: 32px; }
}
/* fixbot — action sheet */
.fixbot, .pagemodal .fixbot {
  background: var(--nhf-paper) !important;
  border-top: 1px solid var(--nhf-line) !important;
  border-radius: var(--nhf-r-lg) var(--nhf-r-lg) 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .12) !important;
  padding: 10px 10px 12px !important;
}
.fixbot hr { margin: 8px 0 !important; border-top-color: var(--nhf-line) !important; }
.fixbot .row.px-3 { padding-left: 6px !important; padding-right: 6px !important; }
.fixbot .col-6 { padding-left: 4px; padding-right: 4px; }
.fixbot .btn { min-height: var(--nhf-tap); font-size: var(--nhf-fs) !important; border-radius: var(--nhf-r-sm) !important; }
.fixbot .btn.btn-sm { min-height: 36px; }
.fixbot .btn-secondary, .pagemodal .fixbot .btn-secondary, .pagemodal .fixbot .btn-dark {
  background: var(--nhf-paper-3) !important; background-image: none;
  color: var(--nhf-ink-2) !important;
  border: 1px solid var(--nhf-line-2) !important;
  border-radius: var(--nhf-r-sm) !important;
  font-size: var(--nhf-fs-sm) !important;
  padding: 8px 6px !important;
}
.pagemodal .fixbot .btn-dark { background: var(--nhf-ink) !important; color: #fff !important; border-color: transparent !important; }
.fixbot .text-success { color: var(--nhf-green) !important; font-family: var(--nhf-font-display); font-size: var(--nhf-fs-sm); }
.fixbot .input-group .form-control { min-height: 42px; font-family: var(--nhf-font-display); font-size: var(--nhf-fs-md); text-align: center; }
.fixbot .input-group .btn-outline-success { min-height: 42px; padding: 0 14px !important; }
.fixbot .input-group.mb-3 { margin-bottom: 8px !important; }
.box__chip-lists { padding: 2px !important; gap: 4px; }
.box__chip-lists .price {
  background: #fff !important;
  border: 1.5px solid var(--nhf-line-2) !important;
  border-radius: var(--nhf-r-pill) !important;
  padding: 8px 6px !important;
  margin: 2px !important;
  flex: 1 0 28% !important;
  min-height: 40px;
  font-family: var(--nhf-font-display);
  font-size: var(--nhf-fs) !important;
  font-weight: 500 !important;
  color: var(--nhf-ink) !important;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background var(--nhf-fast), color var(--nhf-fast), border-color var(--nhf-fast), transform var(--nhf-fast);
}
.box__chip-lists .price:hover, .box__chip-lists .price:active { background: var(--nhf-red-hi) !important; color: #fff !important; border-color: var(--nhf-red-hi) !important; transform: translateY(-1px); }
/* credit / total blocks */
.pagemodal .fixbot .col-6.bg-primary, .pagemodal .fixbot .col-6.bg-danger {
  padding: 8px 6px !important;
  margin-bottom: 10px !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.pagemodal .fixbot .col-6.bg-primary { background: var(--nhf-ink) !important; border-radius: var(--nhf-r) 0 0 var(--nhf-r) !important; }
.pagemodal .fixbot .col-6.bg-danger { background: linear-gradient(135deg, var(--nhf-red-hi), var(--nhf-red-deep)) !important; border-radius: 0 var(--nhf-r) var(--nhf-r) 0 !important; }
.pagemodal .fixbot .col-6.bg-primary .badge-light, .pagemodal .fixbot .col-6.bg-danger .badge-light { background: transparent !important; color: rgba(255, 255, 255, .75) !important; font-size: var(--nhf-fs-xs); padding: 0; font-weight: 400; }
.pagemodal .fixbot .col-6.bg-primary br, .pagemodal .fixbot .col-6.bg-danger br { display: none; }
.pagemodal .fixbot .col-6.bg-primary .thb, .pagemodal .fixbot .col-6.bg-danger .thb { font-size: var(--nhf-fs-xl); font-weight: 500; letter-spacing: .3px; line-height: 1.1; }
/* primary actions */
.fixbot .btn-success, .pagemodal .fixbot .btn-success {
  background: linear-gradient(135deg, var(--nhf-green), var(--nhf-green-deep)) !important;
  color: #fff !important; border: 0 !important;
  font-size: var(--nhf-fs-md) !important; font-weight: 500 !important;
  min-height: 48px;
  border-radius: var(--nhf-r-sm) !important;
  box-shadow: 0 6px 16px rgba(31, 157, 85, .3) !important;
}
.fixbot .btn-success:hover { filter: brightness(1.05); }
.fixbot .btn-light, .pagemodal .fixbot .btn-light {
  background: #fff !important; background-image: none;
  border: 1.5px solid var(--nhf-line-2) !important;
  color: var(--nhf-ink-2) !important;
  min-height: 48px;
  border-radius: var(--nhf-r-sm) !important;
  font-size: var(--nhf-fs) !important;
}
.fixbot .btn-primary, .pagemodal .fixbot .btn-primary {
  background: linear-gradient(135deg, var(--nhf-red-hi), var(--nhf-red-deep)) !important;
  border: 0 !important; color: #fff !important; min-height: 48px;
}
.pagemodal .fixbot .btn.rounded-0 { border-radius: var(--nhf-r-sm) !important; }
#printpoy .fixbot .row.px-3.mt-3 { margin-top: 4px !important; }
#printpoy .fixbot .col-4.p-0 { padding: 0 3px !important; }
#printpoy .fixbot .btn { font-size: var(--nhf-fs-sm) !important; }
/* mobile: confirm / cancel full width, stacked (cancel above confirm) */
@media (max-width: 575.98px) {
  #price .fixbot .col-6:has(> #reset_poy), #price .fixbot .col-6:has(> .triggerSendpoy),
  #sendpoy .fixbot .col-6:has(> .btn) { flex: 0 0 100%; max-width: 100%; }
  #price .fixbot .col-6:has(> #reset_poy) .btn, #sendpoy .fixbot .col-6:has(> .btn.btn-light) .btn { margin-bottom: 6px; min-height: 42px; }
  #price .fixbot .col-6:has(> .triggerSendpoy) .btn, #sendpoy .fixbot .col-6:has(> .successbet) .btn { min-height: 50px; font-size: var(--nhf-fs-lg) !important; }
  #price .fixbot .col-6.text-success { padding-left: 8px !important; }
}
/* send_poy / print_poy receipt */
#sendpoy .content-scroll > .border, #printpoy #capture {
  background: var(--nhf-paper) !important;
  border: 0 !important;
  border-radius: var(--nhf-r) !important;
  box-shadow: var(--nhf-shadow-1);
  overflow: hidden;
}
#sendpoy .content-scroll > .border > .row > .bg-dark, #printpoy #capture .row.bg-dark { background: linear-gradient(135deg, #222226, #111114) !important; }
#sendpoy .col-7.bg-dark, #sendpoy .col-5.bg-dark { padding-top: 10px !important; padding-bottom: 10px !important; }
#sendpoy .hbill, #printpoy .hbill { font-family: var(--nhf-font-display); font-weight: 500; font-size: var(--nhf-fs-lg); letter-spacing: .3px; color: #fff !important; }
#printpoy .hbill small { color: rgba(255, 255, 255, .55); }
#sendpoy .hhuay, #printpoy .hhuay { font-family: var(--nhf-font-display); font-weight: 500 !important; font-size: var(--nhf-fs-lg); color: var(--nhf-ink); }
#sendpoy .hhuay_round, #printpoy .hhuay_round { font-family: var(--nhf-font-display); font-weight: 500; color: var(--nhf-red); }
#sendpoy .table-sm td, #printpoy .table-sm td { border-color: var(--nhf-line) !important; font-size: var(--nhf-fs-sm); }
#sendpoy .table-sm td.table-secondary, #printpoy .table-sm td.table-secondary { background: var(--nhf-paper-2) !important; color: var(--nhf-muted) !important; }
#sendpoy .table-success, #printpoy .table-success {
  background: var(--nhf-green-soft) !important;
  color: #14532d !important;
  border-color: rgba(31, 157, 85, .25) !important;
  font-family: var(--nhf-font-display);
}
#sendpoy .table-success .total_price, #printpoy .table-success .total_price { font-size: var(--nhf-fs-xl) !important; font-weight: 500 !important; color: var(--nhf-green) !important; margin-left: 4px; }
.pagemodal .card-huay { border: 1px solid var(--nhf-line) !important; border-radius: var(--nhf-r-sm) !important; overflow: hidden; margin-bottom: 8px !important; box-shadow: none; }
.pagemodal .card-huay .card-header { background: var(--nhf-paper-2) !important; border-bottom: 1px solid var(--nhf-line) !important; padding: 8px 12px !important; font-size: var(--nhf-fs-sm) !important; font-family: var(--nhf-font-display); }
.pagemodal .card-huay .card-header .text-success { color: var(--nhf-red) !important; font-size: var(--nhf-fs); }
.pagemodal .card-huay .card-body { padding: 6px 12px !important; font-size: var(--nhf-fs) !important; }
.pagemodal .card-huay .card-body .col-3 { color: var(--nhf-muted-2); font-size: var(--nhf-fs-sm); }
.pagemodal .card-huay .card-body .col-4 { font-family: var(--nhf-font-display); font-weight: 500; font-size: var(--nhf-fs-md); letter-spacing: 1px; }
.pagemodal .card-huay .card-body .col-5.text-right { font-family: var(--nhf-font-display); font-weight: 500; }
#sendpoy textarea#note { border-radius: var(--nhf-r-sm) !important; min-height: 46px; resize: vertical; font-size: var(--nhf-fs); }
#printpoy .alert-success { border-radius: var(--nhf-r-sm); margin-top: 6px; }
#printpoy .text-success .fa-vote-yea { color: var(--nhf-green); }
/* number_set modal (#poy) — tabs & tables */
#poy #poytab.nav-tabs { border: 0 !important; background: var(--nhf-paper-3); border-radius: var(--nhf-r); padding: 4px; gap: 4px; margin: 4px 0 10px; display: flex; flex-wrap: nowrap; }
#poy #poytab > .nav-item, #poy #poytab > .nav-item.w-50 { width: auto !important; flex: 1 1 0; min-width: 0; }
#poy #poytab .nav-link {
  border: 0 !important; border-radius: var(--nhf-r-sm) !important;
  background: transparent !important; color: var(--nhf-ink-2) !important;
  font-family: var(--nhf-font-display); font-weight: 500; font-size: var(--nhf-fs-md) !important;
  padding: 11px 8px !important; text-shadow: none !important;
}
#poy #poytab .nav-link.active { background: linear-gradient(135deg, var(--nhf-red-hi), var(--nhf-red-deep)) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(185, 5, 4, .3); }
#poy .tab-pane { padding: 4px !important; min-height: 0 !important; }
#poy .table { background: var(--nhf-paper); border-radius: var(--nhf-r) !important; overflow: hidden; border-collapse: separate; border-spacing: 0; box-shadow: var(--nhf-shadow-1); }
#poy .table tr.bg-info, #poy .table tr.bg-dark { background: var(--nhf-ink) !important; }
#poy .table th { border: 0 !important; font-weight: 500; font-size: var(--nhf-fs-sm); padding: 10px 8px !important; font-family: var(--nhf-font-display); }
#poy .table td { padding: 8px !important; border-top-color: var(--nhf-line) !important; }
#poy .table .btn-outline-success.btn-sm { width: 36px; height: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--nhf-r-sm) !important; }
#poy .btn.rounded-0, #poy .form-control.rounded-0 { border-radius: var(--nhf-r-sm) !important; }
#poy .btn-sm { min-height: 38px; }
/* pagebet inline confirm modals (#modal_confirm_reset etc.) inherit §4 */

/* ─────────────────────────────────────────────────────────────────────────
   11. SWEETALERT2 v6 (footer.php:26) + TOASTR
   ───────────────────────────────────────────────────────────────────────── */
.swal2-container { padding: 16px !important; }
.swal2-container.swal2-shown { background: rgba(22, 4, 4, .6) !important; }
.swal2-modal {
  font-family: var(--nhf-font-body) !important;
  border-radius: var(--nhf-r-xl) !important;
  padding: 26px 22px 22px !important;
  box-shadow: var(--nhf-shadow-3) !important;
  max-width: 92vw;
}
.swal2-title { font-family: var(--nhf-font-display) !important; font-weight: 500 !important; font-size: var(--nhf-fs-xl) !important; color: var(--nhf-ink) !important; margin: 0 0 .5em !important; }
.swal2-content { font-size: var(--nhf-fs-md) !important; font-weight: 400 !important; color: var(--nhf-ink-2) !important; line-height: 1.5 !important; }
.swal2-icon { margin: 8px auto 18px !important; }
.swal2-image { border-radius: var(--nhf-r) !important; box-shadow: var(--nhf-shadow-2); max-width: 100%; height: auto; }
.swal2-buttonswrapper { margin-top: 14px !important; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; }
.swal2-styled, .swal2-modal .swal2-buttonswrapper .swal2-styled {
  border-radius: var(--nhf-r-sm) !important;
  font-family: var(--nhf-font-display) !important;
  font-size: var(--nhf-fs-md) !important;
  font-weight: 500 !important;
  min-width: 128px;
  min-height: var(--nhf-tap);
  padding: 10px 26px !important;
  margin: 8px 0 0 !important;
  box-shadow: var(--nhf-shadow-1) !important;
  transition: transform var(--nhf-fast), filter var(--nhf-fast), box-shadow var(--nhf-fast);
}
.swal2-styled:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: var(--nhf-shadow-2) !important; }
.swal2-styled:focus { outline: 0; box-shadow: var(--nhf-ring) !important; }
.swal2-input, .swal2-textarea, .swal2-select { border-radius: var(--nhf-r-sm) !important; border: 1.5px solid var(--nhf-line-2) !important; font-size: var(--nhf-fs-md) !important; }
.swal2-input:focus, .swal2-textarea:focus { border-color: var(--nhf-red) !important; box-shadow: var(--nhf-ring) !important; }
.swal2-close { color: var(--nhf-muted-2) !important; font-size: 30px !important; }
@media (max-width: 575.98px) {
  .swal2-modal { padding: 22px 16px 18px !important; }
  .swal2-buttonswrapper { flex-direction: column-reverse; }
  .swal2-styled, .swal2-modal .swal2-buttonswrapper .swal2-styled { width: 100%; margin: 4px 0 !important; }
}
/* toastr */
#toast-container > div {
  border-radius: var(--nhf-r) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28) !important;
  opacity: .98 !important;
  padding: 14px 16px 14px 52px !important;
  font-family: var(--nhf-font-body);
  font-size: var(--nhf-fs) !important;
  width: 320px !important;
  max-width: calc(100vw - 24px);
  border: 1px solid rgba(255, 255, 255, .12);
}
#toast-container > div:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, .34) !important; }
#toast-container > .toast-success { background-color: var(--nhf-green) !important; }
#toast-container > .toast-error { background-color: var(--nhf-red-hi) !important; }
#toast-container > .toast-warning { background-color: #d99400 !important; }
#toast-container > .toast-info { background-color: var(--nhf-blue) !important; }
.toast-title { font-family: var(--nhf-font-display); font-weight: 500; }
.toast-message { line-height: 1.45; }
.toast-top-right { top: 12px; right: 12px; }
@media (max-width: 480px) { #toast-container > div { width: calc(100vw - 24px) !important; } }

/* ─────────────────────────────────────────────────────────────────────────
   12. LOADING / MISC
   ───────────────────────────────────────────────────────────────────────── */
/* #loading overlay: ไม่ render แล้ว (R20 2026-10-02 — BodyOpen.vue ; เปิดกลับ NUXT_PUBLIC_LOADING_OVERLAY=true) ; ถ้าเปิดกลับใช้สีเดิมของ style.css:3864 (ดำโปร่ง 50% + gif) */
.logo-text-fallback { font-family: var(--nhf-font-display); font-weight: 500; letter-spacing: 1px; }
.text-danger { color: var(--nhf-red-hi) !important; }
.text-success { color: var(--nhf-green) !important; }
.border-danger { border-color: var(--nhf-red-line) !important; }
.border-success { border-color: rgba(31, 157, 85, .35) !important; }
img { image-rendering: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   13. MOTION PREFERENCES
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .pagemodal .head, .pagemodal .content-scroll { transform: none; }
}