/* ============================================================
   Theme Tokens — 2 ธีม: ขาว (light) / ดำ (dark)
   ธีมถูกกำหนดผ่าน <html data-theme="light|dark"> (ดู partials/head.php)
   ============================================================ */
:root {
    color-scheme: light;
    --bg: #ffffff;
    --bg-soft: #fafafa;
    --surface: #ffffff;
    --surface-2: #f4f4f5;
    --surface-3: #e4e4e7;
    --border: #e4e4e7;
    --border-soft: #f4f4f5;
    --fg: #18181b;
    --fg-muted: #71717a;
    --fg-subtle: #a1a1aa;
    --fg-soft: #52525b;
    --accent: #18181b;
    --accent-hover: #3f3f46;
    --accent-fg: #ffffff;
    --ring: rgba(24, 24, 27, 0.18);
    --shadow-toast: 0 10px 30px -10px rgba(0, 0, 0, .15);
    --theme-transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, stroke .3s ease;
}

/* ------------------------------------------------------------
   ธีมดำ: remap พาเลตของ Tailwind v4 (utilities ใช้ var(--color-*))
   → ทุกหน้าที่ใช้ bg-white / text-zinc-900 / border-zinc-200 ฯลฯ
     จะกลับสีอัตโนมัติ โดยไม่ต้องแก้ view ทีละไฟล์
   ------------------------------------------------------------ */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #09090b;
    --bg-soft: #111113;
    --surface: #111113;
    --surface-2: #1c1c1f;
    --surface-3: #27272a;
    --border: #27272a;
    --border-soft: #1c1c1f;
    --fg: #fafafa;
    --fg-muted: #a1a1aa;
    --fg-subtle: #71717a;
    --fg-soft: #d4d4d8;
    --accent: #fafafa;
    /* Accent / Primary Focus Ring */
    --accent: #fafafa;
    --accent-hover: #e4e4e7;
    --accent-fg: #09090b;
    --ring: rgba(250, 250, 250, 0.25);
    --shadow-toast: 0 10px 30px -10px rgba(0, 0, 0, .7);

    /* สีสถานะในโหมดมืด (Dark Mode Status Colors): โทนอ่อนกลายเป็นพื้นเข้มอมสีโปร่งแสง, โทนเข้มสว่างขึ้นเพื่อให้อ่านง่ายและสบายตา */
    --color-emerald-50:  rgba(6, 78, 59, 0.25);
    --color-emerald-100: rgba(6, 78, 59, 0.4);
    --color-emerald-200: rgba(5, 150, 105, 0.35);
    --color-emerald-300: #6ee7b7;
    --color-emerald-600: #34d399;
    --color-emerald-700: #10b981;
    --color-emerald-800: #059669;
    --color-emerald-900: #a7f3d0;
    --color-emerald-950: #d1fae5;

    --color-rose-50:  rgba(136, 19, 55, 0.25);
    --color-rose-100: rgba(136, 19, 55, 0.4);
    --color-rose-200: rgba(225, 29, 72, 0.35);
    --color-rose-300: #fda4af;
    --color-rose-600: #fb7185;
    --color-rose-700: #f43f5e;

    --color-red-50:  rgba(127, 29, 29, 0.25);
    --color-red-100: rgba(127, 29, 29, 0.4);
    --color-red-200: rgba(220, 38, 38, 0.35);
    --color-red-300: #fca5a5;
    --color-red-600: #f87171;
    --color-red-700: #ef4444;

    --color-amber-50:  rgba(120, 53, 15, 0.25);
    --color-amber-100: rgba(120, 53, 15, 0.4);
    --color-amber-200: rgba(217, 119, 6, 0.35);
    --color-amber-300: #fcd34d;
    --color-amber-600: #fbbf24;
    --color-amber-700: #f59e0b;
    --color-amber-900: #fef3c7;
    --color-amber-950: #fffbeb;

    --color-orange-50:  rgba(124, 45, 18, 0.25);
    --color-orange-100: rgba(124, 45, 18, 0.4);
    --color-orange-200: rgba(234, 88, 12, 0.35);
    --color-orange-600: #fb923c;

    --color-blue-50:  rgba(30, 58, 138, 0.25);
    --color-blue-100: rgba(30, 58, 138, 0.4);
    --color-blue-200: rgba(37, 99, 235, 0.35);
    --color-blue-300: #93c5fd;
    --color-blue-700: #60a5fa;
    --color-blue-800: #93c5fd;
    --color-blue-950: #dbeafe;

    --color-indigo-50:  rgba(49, 46, 129, 0.28);
    --color-indigo-100: rgba(49, 46, 129, 0.45);
    --color-indigo-200: rgba(79, 70, 229, 0.35);
    --color-indigo-300: #a5b4fc;
    --color-indigo-600: #818cf8;
    --color-indigo-700: #6366f1;
    --color-indigo-950: #e0e7ff;

    --color-purple-50:  rgba(88, 28, 135, 0.25);
    --color-purple-100: rgba(88, 28, 135, 0.4);
    --color-purple-200: rgba(147, 51, 234, 0.35);
    --color-purple-300: #d8b4fe;
    --color-purple-950: #f3e8ff;
}

/* ============================================================
   Dark Mode Direct UI Overrides (รับประกันการเปลี่ยนสีดำ 100%)
   ครอบคลุมทุกคลาสของ Tailwind และ Element บนหน้าเว็บ
   ============================================================ */
html[data-theme="dark"],
html.dark {
    color-scheme: dark;
}

html[data-theme="dark"] body,
html.dark body {
    background-color: #09090b !important;
    color: #f4f4f5 !important;
}

/* Header & Navbar */
html[data-theme="dark"] header,
html.dark header {
    background-color: rgba(9, 9, 11, 0.92) !important;
    border-color: #27272a !important;
}

html[data-theme="dark"] #mobile-drawer,
html.dark #mobile-drawer {
    background-color: #121215 !important;
    border-color: #27272a !important;
}

/* Card & Background Surfaces (Fallback สำหรับ element ที่ไม่ได้ใส่ class dark:bg- เอง) */
html[data-theme="dark"] .bg-white:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html[data-theme="dark"] .bg-white\/80:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html[data-theme="dark"] .bg-white\/85:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html[data-theme="dark"] .bg-white\/90:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html[data-theme="dark"] .bg-white\/95:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html.dark .bg-white:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html.dark .bg-white\/80:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html.dark .bg-white\/85:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html.dark .bg-white\/90:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html.dark .bg-white\/95:not([class*="dark:bg-"]):not([class*="dark:bg/"]) {
    background-color: #121215 !important;
}

html[data-theme="dark"] .bg-zinc-50:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html[data-theme="dark"] .bg-zinc-50\/50:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html[data-theme="dark"] .bg-zinc-50\/80:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html.dark .bg-zinc-50:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html.dark .bg-zinc-50\/50:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html.dark .bg-zinc-50\/80:not([class*="dark:bg-"]):not([class*="dark:bg/"]) {
    background-color: #18181b !important;
}

html[data-theme="dark"] .bg-zinc-100:not([class*="dark:bg-"]):not([class*="dark:bg/"]),
html.dark .bg-zinc-100:not([class*="dark:bg-"]):not([class*="dark:bg/"]) {
    background-color: #27272a !important;
    color: #e4e4e7 !important;
}

/* Borders */
html[data-theme="dark"] .border-zinc-200:not([class*="dark:border-"]),
html[data-theme="dark"] .border-zinc-200\/80:not([class*="dark:border-"]),
html[data-theme="dark"] .border-zinc-200\/90:not([class*="dark:border-"]),
html[data-theme="dark"] .border-zinc-200\/60:not([class*="dark:border-"]),
html[data-theme="dark"] .border-zinc-100:not([class*="dark:border-"]),
html.dark .border-zinc-200:not([class*="dark:border-"]),
html.dark .border-zinc-200\/80:not([class*="dark:border-"]),
html.dark .border-zinc-200\/90:not([class*="dark:border-"]),
html.dark .border-zinc-200\/60:not([class*="dark:border-"]),
html.dark .border-zinc-100:not([class*="dark:border-"]) {
    border-color: #27272a !important;
}

/* Text Colors */
html[data-theme="dark"] .text-zinc-950:not([class*="dark:text-"]),
html[data-theme="dark"] .text-zinc-900:not([class*="dark:text-"]),
html.dark .text-zinc-950:not([class*="dark:text-"]),
html.dark .text-zinc-900:not([class*="dark:text-"]) {
    color: #fafafa !important;
}

html[data-theme="dark"] .text-zinc-800:not([class*="dark:text-"]),
html[data-theme="dark"] .text-zinc-700:not([class*="dark:text-"]),
html.dark .text-zinc-800:not([class*="dark:text-"]),
html.dark .text-zinc-700:not([class*="dark:text-"]) {
    color: #e4e4e7 !important;
}

html[data-theme="dark"] .text-zinc-600:not([class*="dark:text-"]),
html[data-theme="dark"] .text-zinc-500:not([class*="dark:text-"]),
html.dark .text-zinc-600:not([class*="dark:text-"]),
html.dark .text-zinc-500:not([class*="dark:text-"]) {
    color: #a1a1aa !important;
}

html[data-theme="dark"] .text-zinc-400:not([class*="dark:text-"]),
html.dark .text-zinc-400:not([class*="dark:text-"]) {
    color: #71717a !important;
}

/* UI Components: Cards, Inputs, Buttons, Nav */
html[data-theme="dark"] .card,
html.dark .card,
html[data-theme="dark"] .app-card,
html.dark .app-card,
html[data-theme="dark"] .banner-frame,
html.dark .banner-frame {
    background-color: #121215 !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: 0 4px 25px -2px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .input,
html.dark .input {
    background-color: #18181b !important;
    border-color: #27272a !important;
    color: #fafafa !important;
}

html[data-theme="dark"] .btn-outline,
html.dark .btn-outline {
    background-color: #18181b !important;
    border-color: #27272a !important;
    color: #fafafa !important;
}

html[data-theme="dark"] .btn-outline:hover,
html.dark .btn-outline:hover {
    background-color: #27272a !important;
}

html[data-theme="dark"] .btn-dark,
html.dark .btn-dark {
    background-color: #fafafa !important;
    color: #09090b !important;
}

html[data-theme="dark"] .btn-dark:hover,
html.dark .btn-dark:hover {
    background-color: #e4e4e7 !important;
}

html[data-theme="dark"] .nav-link,
html.dark .nav-link {
    color: #a1a1aa !important;
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active,
html.dark .nav-link:hover,
html.dark .nav-link.active {
    background-color: #1f1f23 !important;
    color: #fafafa !important;
}

/* Footer */
html[data-theme="dark"] footer,
html.dark footer {
    background-color: #09090b !important;
    border-color: #27272a !important;
}

/* Theme Toggle Button in Dark Mode */
html[data-theme="dark"] .theme-toggle,
html.dark .theme-toggle {
    background-color: #18181b !important;
    border-color: #3f3f46 !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .theme-toggle:hover,
html.dark .theme-toggle:hover {
    background-color: #27272a !important;
    border-color: #71717a !important;
}

html[data-theme="dark"] .theme-toggle .icon-sun,
html.dark .theme-toggle .icon-sun {
    opacity: 1 !important;
    transform: rotate(0) scale(1) !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .theme-toggle .icon-moon,
html.dark .theme-toggle .icon-moon {
    opacity: 0 !important;
    transform: rotate(90deg) scale(0.5) !important;
}

/* Quick Contact FAB Card in Dark Mode */
html[data-theme="dark"] #quickContactCard,
html.dark #quickContactCard {
    background-color: rgba(18, 18, 21, 0.95) !important;
    border-color: #27272a !important;
}

html[data-theme="dark"] #quickContactCard a,
html.dark #quickContactCard a {
    background-color: rgba(24, 24, 27, 0.6) !important;
    border-color: #27272a !important;
}

/* Dropdown User Menu in Dark Mode */
html[data-theme="dark"] .group .group-hover\:block,
html.dark .group .group-hover\:block,
html[data-theme="dark"] .group .group-focus-within\:block,
html.dark .group .group-focus-within\:block {
    background-color: #121215 !important;
    border-color: #27272a !important;
}


/* Base & Typography */
html { -webkit-tap-highlight-color: transparent; background-color: var(--bg); max-width: 100vw; overflow-x: hidden; }
body { font-family: "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif; font-weight: 400; color: var(--fg); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; max-width: 100vw; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
h1 { font-weight: 800; letter-spacing: -0.025em; }
h2 { font-weight: 700; letter-spacing: -0.02em; }
h3 { font-weight: 600; letter-spacing: -0.015em; }
h4, h5, h6 { font-weight: 600; }

/* ป้องกันไม่ให้หัวข้อยุบเป็นเส้นบาง แม้มีคลาส font-light / font-extralight ติดมาจากเทมเพลตเดิม */
h1.font-light, h1.font-extralight,
h2.font-light, h2.font-extralight {
    font-weight: 700 !important;
}
h3.font-light, h3.font-extralight,
h4.font-light, h4.font-extralight,
h5.font-light, h6.font-light {
    font-weight: 600 !important;
}

b, strong { font-weight: 600; }
::selection { background: var(--accent); color: var(--accent-fg); }

/* เปลี่ยนธีมแบบนุ่มนวล (เปิดชั่วคราวเฉพาะตอนสลับ เพื่อไม่ให้ hover อื่นช้าลง) */
html.theme-animating, html.theme-animating *, html.theme-animating *::before, html.theme-animating *::after {
    transition: var(--theme-transition) !important;
    transition-delay: 0s !important;
}

/* Custom Component Classes */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 2px solid var(--fg-muted);
    outline-offset: 2px;
}
.btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.375rem; height: 2.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: all 0.2s; cursor: pointer; user-select: none; outline: none; }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; box-shadow: 0 0 0 4px var(--ring); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-dark { background-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.btn-dark:hover:not(:disabled) { background-color: var(--accent-hover); }
.btn-light { background-color: var(--surface-2); color: var(--fg); font-weight: 500; }
.btn-light:hover:not(:disabled) { background-color: var(--surface-3); }
.btn-outline { border: 1px solid var(--border); background-color: var(--surface); color: var(--fg); font-weight: 500; }
.btn-outline:hover:not(:disabled) { background-color: var(--surface-2); }
.btn-ghost { color: var(--fg-muted); font-weight: 500; }
.btn-ghost:hover:not(:disabled) { background-color: var(--surface-2); color: var(--fg); }
.btn-sm { height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.75rem; border-radius: 0.5rem; }
.input { width: 100%; height: 2.75rem; border-radius: 0.75rem; border: 1px solid var(--border); background-color: var(--surface); color: var(--fg); padding-left: 0.875rem; padding-right: 0.875rem; font-size: 0.875rem; font-weight: 400; outline: none; transition: all 0.2s; }
.input::placeholder { color: var(--fg-subtle); }
.input:focus, .input:focus-visible { border-color: var(--fg); box-shadow: 0 0 0 4px var(--ring); outline: none; }
.input:disabled { opacity: 0.6; cursor: not-allowed; background-color: var(--surface-2); }
.input[aria-invalid="true"], .input.is-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important; }
textarea.input { height: auto; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--fg-muted); margin-bottom: 0.375rem; }
.card { border-radius: 1.5rem; border: none !important; border-width: 0 !important; background-color: var(--surface); box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02); }
.nav-link { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 0.75rem; padding: 0.4rem 0.65rem; font-size: 0.8125rem; font-weight: 500; color: var(--fg-muted); white-space: nowrap !important; flex-shrink: 0; transition: color 0.15s, background-color 0.15s; }
.nav-link:hover { background-color: var(--surface-2); color: var(--fg); }
.nav-link.active { background-color: var(--surface-2); color: var(--fg); font-weight: 600; }
.badge { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid var(--border); padding: 0.125rem 0.5rem; font-size: 11px; font-weight: 500; color: var(--fg-soft); }
.badge-dark { border-color: var(--accent); background-color: var(--accent); color: var(--accent-fg); }
.table-clean { width: 100%; font-size: 0.875rem; }
.table-clean th { position: sticky; top: 0; z-index: 1; background-color: var(--surface); text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--fg-subtle); padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-soft); }
.table-clean td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
select.input option { background-color: var(--surface); color: var(--fg); }

/* ---------- ปุ่มสลับธีม ---------- */
.theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; border: 1px solid var(--border); background-color: var(--surface); color: var(--fg); cursor: pointer; overflow: hidden; transition: background-color .2s, border-color .2s, transform .15s; }
.theme-toggle:hover { background-color: var(--surface-2); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring), 0 0 0 1px var(--fg-subtle); }
.theme-toggle svg { position: absolute; width: 1rem; height: 1rem; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.theme-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg) scale(.5); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
.theme-toggle-wide { width: 100%; height: auto; justify-content: flex-start; gap: .5rem; padding: .5rem .75rem; font-size: .875rem; font-weight: 400; color: var(--fg-muted); border: 0; background-color: transparent; }
.theme-toggle-wide:hover { color: var(--fg); }
.theme-toggle-wide svg { position: static; }
.theme-toggle-wide .theme-toggle-icons { position: relative; display: inline-flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; }
.theme-toggle-wide .theme-toggle-icons svg { position: absolute; }
.theme-toggle-wide .label-dark { display: inline; }
.theme-toggle-wide .label-light { display: none; }
html[data-theme="dark"] .theme-toggle-wide .label-dark { display: none; }
html[data-theme="dark"] .theme-toggle-wide .label-light { display: inline; }

/* Animation & Utility */
[x-cloak], .hidden-init { display: none; }
.fade-up { animation: fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
.fade-up.d1 { animation-delay: .08s; }
.fade-up.d2 { animation-delay: .16s; }
.fade-up.d3 { animation-delay: .24s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.spinner { width: 1rem; height: 1rem; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 9999px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.game-card img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.game-card:hover img { transform: scale(1.06); }

/* SweetAlert2 — ธีมขาวดำ (ตามธีมปัจจุบัน) */
.swal2-popup { font-family: "Noto Sans Thai", sans-serif !important; font-weight: 400 !important; border-radius: 1.5rem !important; background: var(--surface) !important; color: var(--fg) !important; }
.swal2-title { font-weight: 700 !important; color: var(--fg) !important; }
.swal2-html-container { font-weight: 400 !important; color: var(--fg-muted) !important; }
.swal2-styled.swal2-confirm { background: var(--accent) !important; color: var(--accent-fg) !important; border-radius: .75rem !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel { background: var(--surface-2) !important; color: var(--fg) !important; border-radius: .75rem !important; font-weight: 500 !important; }
.swal2-styled.swal2-deny { border-radius: .75rem !important; font-weight: 500 !important; }
.swal2-input, .swal2-textarea, .swal2-select { border-radius: .75rem !important; font-family: inherit !important; font-weight: 400 !important; box-shadow: none !important; background: var(--surface) !important; color: var(--fg) !important; border-color: var(--border) !important; }
.swal2-toast { border: 1px solid var(--border) !important; box-shadow: var(--shadow-toast) !important; }
.swal2-timer-progress-bar { background: var(--fg-subtle) !important; }
html[data-theme="dark"] .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .6) !important; }
html[data-theme="dark"] .swal2-close:hover { color: var(--fg) !important; }

@media (max-width: 767.98px) {
    .table-responsive thead { display: none !important; }
    .table-responsive tbody { display: block !important; }
    .table-responsive tr { 
        display: block !important; 
        padding: 0.875rem 0.875rem !important; 
        margin-bottom: 0.75rem !important; 
        border: 1px solid var(--border) !important; 
        border-radius: 1rem !important; 
        background: var(--surface) !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
    }
    .table-responsive td { 
        display: flex !important; 
        justify-content: space-between !important; 
        align-items: center !important;
        gap: 0.5rem !important; 
        border: 0 !important; 
        padding: 0.35rem 0 !important; 
        flex-wrap: wrap !important;
        min-width: 0 !important;
        font-size: 0.8125rem !important;
    }
    .table-responsive td::before { 
        content: attr(data-label); 
        color: var(--fg-subtle); 
        font-size: 0.725rem; 
        font-weight: 600;
        flex-shrink: 0;
        max-width: 45%;
    }
    .table-responsive td:not([data-label])::before {
        display: none !important;
    }
    .table-responsive td[data-label="จัดการ"],
    .table-responsive td[data-label="ราคาขาย"],
    .table-responsive td[data-label="ราคาขายต่อ 1,000"],
    .table-responsive td[data-label="ชื่อสินค้า"],
    .table-responsive td[data-label="สินค้า / รายละเอียด"],
    .table-responsive td[data-label="ข้อมูลสต็อก"],
    .table-responsive td[data-label="ผู้ซื้อ"],
    .table-responsive td[data-label="ลิงก์"],
    .table-responsive td[data-label="สถานะจำหน่าย"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem !important;
    }
    .table-responsive td[data-label="จัดการ"]::before,
    .table-responsive td[data-label="ราคาขาย"]::before,
    .table-responsive td[data-label="ราคาขายต่อ 1,000"]::before,
    .table-responsive td[data-label="ชื่อสินค้า"]::before,
    .table-responsive td[data-label="สินค้า / รายละเอียด"]::before,
    .table-responsive td[data-label="ข้อมูลสต็อก"]::before,
    .table-responsive td[data-label="ผู้ซื้อ"]::before,
    .table-responsive td[data-label="ลิงก์"]::before {
        margin-bottom: 0.15rem;
    }
    .table-responsive td[data-label="จัดการ"] > div,
    .table-responsive td[data-label="ราคาขาย"] > div,
    .table-responsive td[data-label="ราคาขายต่อ 1,000"] > div {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
    }
    .table-responsive td > * {
        max-width: 100%;
        word-break: break-word;
    }
}

/* Horizontal scroll containers smooth touch support */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
}
.overflow-x-auto::-webkit-scrollbar {
    height: 4px;
}
.overflow-x-auto::-webkit-scrollbar-track {
    background: transparent;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(161, 161, 170, 0.35);
    border-radius: 9999px;
}
html.dark .overflow-x-auto::-webkit-scrollbar-thumb,
html[data-theme="dark"] .overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(82, 82, 91, 0.45);
}

/* Mobile SweetAlert2 optimizations */
@media (max-width: 640px) {
    .swal2-popup {
        width: calc(100vw - 1.5rem) !important;
        padding: 1.25rem 1rem !important;
        border-radius: 1.25rem !important;
    }
    .swal2-input, .swal2-select, .swal2-textarea {
        font-size: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-animating, html.theme-animating * { transition: none !important; }
    .theme-toggle svg { transition: none; }
}

/* Hero Banner Showcase (Always Deep Dark OLED Aesthetic in both Light and Dark Modes) */
/* Hero Banner Showcase (Always Deep Dark OLED Aesthetic in both Light and Dark Modes) */
#heroBannerCarouselContainer .banner-frame {
    background-color: #09090b !important;
    border: none !important;
    border-width: 0 !important;
    color: #ffffff !important;
}
#heroBannerCarouselContainer h2 {
    color: #ffffff !important;
}
#heroBannerCarouselContainer p {
    color: #d4d4d8 !important;
}
#heroBannerCarouselContainer .banner-badge {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: none !important;
    border-width: 0 !important;
}
#heroBannerCarouselContainer .btn-banner-cta {
    background-color: #ffffff !important;
    color: #09090b !important;
}
#heroBannerCarouselContainer .btn-banner-cta:hover {
    background-color: #f4f4f5 !important;
}

/* Card Borderless Platform Standard */
.card,
.card-borderless,
.banner-frame,
.app-card,
.service-card,
.site-card,
.domain-card {
    border: none !important;
    border-width: 0 !important;
}

.card:hover,
.app-card:hover,
.service-card:hover,
.banner-frame:hover {
    border: none !important;
    border-width: 0 !important;
}

/* Responsive Nav Layout */
#desktop-nav {
    display: none;
}
@media (min-width: 992px) {
    #desktop-nav {
        display: flex !important;
    }
    #mobile-toggle-btn,
    #mobile-drawer {
        display: none !important;
    }
}
@media (max-width: 991.98px) {
    #desktop-nav {
        display: none !important;
    }
    #mobile-toggle-btn {
        display: flex !important;
    }
}
#mobile-drawer,
#admin-mobile-drawer {
    max-height: calc(100dvh - 4.25rem);
    max-height: calc(100vh - 4.25rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#mobile-drawer::-webkit-scrollbar,
#admin-mobile-drawer::-webkit-scrollbar {
    width: 4px;
}
#mobile-drawer::-webkit-scrollbar-track,
#admin-mobile-drawer::-webkit-scrollbar-track {
    background: transparent;
}
#mobile-drawer::-webkit-scrollbar-thumb,
#admin-mobile-drawer::-webkit-scrollbar-thumb {
    background: rgba(161, 161, 170, 0.35);
    border-radius: 9999px;
}
html.dark #mobile-drawer::-webkit-scrollbar-thumb,
html.dark #admin-mobile-drawer::-webkit-scrollbar-thumb,
html[data-theme="dark"] #mobile-drawer::-webkit-scrollbar-thumb,
html[data-theme="dark"] #admin-mobile-drawer::-webkit-scrollbar-thumb {
    background: rgba(82, 82, 91, 0.45);
}
#mobile-drawer.hidden,
#admin-mobile-drawer.hidden {
    display: none !important;
}