:root {
                                                                                            --bg: #f5f6f8;
                                                                                            --card-bg: #fff;
                                                                                            --text: #212529;
                                                                                            --muted: #6c757d;
                                                                                            --shadow: 0 6px 16px rgba(0, 0, 0, .06);
                                                                                            --shadow-lg: 0 12px 24px rgba(0, 0, 0, .12);
                                                                                            --accent: #0d6efd;
                                                                                            --pill-border: #dee2e6;
                                                                                            --header-bg: #ffffffaa;
                                                                                            --header-border: #e9ecef;
                                                                                        }
                                                                                        
                                                                                        html.dark {
                                                                                            --bg: #0f1216;
                                                                                            --card-bg: #151a21;
                                                                                            --text: #e6e6e6;
                                                                                            --muted: #9aa4b2;
                                                                                            --shadow: 0 6px 16px rgba(0, 0, 0, .5);
                                                                                            --shadow-lg: 0 16px 32px rgba(0, 0, 0, .6);
                                                                                            --accent: #4da3ff;
                                                                                            --pill-border: #2b3440;
                                                                                            --header-bg: #0f1216cc;
                                                                                            --header-border: #2b3440;
                                                                                        }
                                                                                        
                                                                                        @media (prefers-color-scheme: dark) {
                                                                                            html[data-theme="auto"] {
                                                                                                color-scheme: dark
                                                                                            }
                                                                                            html[data-theme="auto"] body {
                                                                                                background: #0f1216
                                                                                            }
                                                                                            html[data-theme="auto"] {
                                                                                                --bg: #0f1216;
                                                                                                --card-bg: #151a21;
                                                                                                --text: #e6e6e6;
                                                                                                --muted: #9aa4b2;
                                                                                                --shadow: 0 6px 16px rgba(0, 0, 0, .5);
                                                                                                --shadow-lg: 0 16px 32px rgba(0, 0, 0, .6);
                                                                                                --accent: #4da3ff;
                                                                                                --pill-border: #2b3440;
                                                                                                --header-bg: #0f1216cc;
                                                                                                --header-border: #2b3440;
                                                                                            }
                                                                                        }
                                                                                        
                                                                                        body {
                                                                                            background: var(--bg);
                                                                                            color: var(--text);
                                                                                        }
                                                                                        /* ===== Mini Header (top) ===== */
                                                                                        
                                                                                        .mini-header {
                                                                                            position: sticky;
                                                                                            top: 0;
                                                                                            z-index: 1030;
                                                                                            backdrop-filter: saturate(130%) blur(6px);
                                                                                            background: var(--header-bg, #ffffffaa);
                                                                                            border-bottom: 1px solid var(--header-border, #e9ecef);
                                                                                        }
                                                                                        /* โครงแถวบน */
                                                                                        
                                                                                        .mini-header .hdr-bar {
                                                                                            display: flex;
                                                                                            justify-content: space-between;
                                                                                            align-items: center;
                                                                                            gap: .75rem;
                                                                                            padding: .5rem 0;
                                                                                        }
                                                                                        
                                                                                        .mini-header .actions {
                                                                                            display: flex;
                                                                                            align-items: center;
                                                                                            gap: .75rem;
                                                                                            flex-wrap: wrap;
                                                                                        }
                                                                                        
                                                                                        .mini-header .auth {
                                                                                            display: flex;
                                                                                            align-items: center;
                                                                                            gap: .5rem;
                                                                                        }
                                                                                        
                                                                                        .mini-header .brand {
                                                                                            font-weight: 700;
                                                                                            letter-spacing: .2px;
                                                                                        }
                                                                                        /* กันปุ่ม Google ดัน layout; ให้ย่อบนจอเล็ก และยึดขวา */
                                                                                        
                                                                                        .mini-header .g_id_signin {
                                                                                            display: inline-flex;
                                                                                        }
                                                                                        /* มือถือ: ให้เรียงเป็นสองบรรทัด -> ล็อกอิน (บน) / โหมดมืด (ล่าง) */
                                                                                        
                                                                                        @media (max-width: 576px) {
                                                                                            .mini-header .hdr-bar {
                                                                                                align-items: flex-start;
                                                                                            }
                                                                                            .mini-header .actions {
                                                                                                flex-direction: column;
                                                                                                /* เรียงลงล่าง */
                                                                                                align-items: flex-end;
                                                                                                /* ชิดขวา */
                                                                                                gap: .4rem;
                                                                                            }
                                                                                            .mini-header .auth {
                                                                                                order: 1;
                                                                                            }
                                                                                            /* บรรทัดบน */
                                                                                            .mini-header .theme-toggle {
                                                                                                order: 2;
                                                                                            }
                                                                                            /* บรรทัดล่าง */
                                                                                            /* กันปุ่ม Google ล้นขอบ */
                                                                                            .mini-header .g_id_signin {
                                                                                                transform: scale(.96);
                                                                                                transform-origin: right center;
                                                                                            }
                                                                                        }
                                                                                        /* ให้เข้ากับธีมมืด/สว่าง */
                                                                                        
                                                                                        html.dark .mini-header .user-email {
                                                                                            color: var(--text);
                                                                                        }
                                                                                        
                                                                                        .mini-header .user-email {
                                                                                            max-width: 40ch;
                                                                                            white-space: nowrap;
                                                                                            overflow: hidden;
                                                                                            text-overflow: ellipsis;
                                                                                        }
                                                                                        
                                                                                        .mini-header .btn-logout {
                                                                                            border-radius: 999px;
                                                                                            padding: .25rem .6rem;
                                                                                        }
                                                                                        /* Top nav tabs (below header) */
                                                                                        
                                                                                        .topnav {
                                                                                            gap: .5rem;
                                                                                        }
                                                                                        
                                                                                        .topnav .nav-link {
                                                                                            border-radius: 999px;
                                                                                            padding: .35rem .85rem;
                                                                                            color: var(--text);
                                                                                        }
                                                                                        
                                                                                        .topnav .nav-link.active {
                                                                                            background: var(--accent);
                                                                                            color: #fff;
                                                                                        }
                                                                                        /* Theme toggle */
                                                                                        
                                                                                        .theme-toggle {
                                                                                            display: flex;
                                                                                            align-items: center;
                                                                                            gap: .5rem;
                                                                                        }
                                                                                        
                                                                                        .theme-toggle .form-check-input {
                                                                                            cursor: pointer;
                                                                                        }
                                                                                        /* Sort bar */
                                                                                        
                                                                                        .sort-bar {
                                                                                            padding: 10px 12px;
                                                                                            background: var(--card-bg);
                                                                                            border-radius: 14px;
                                                                                            box-shadow: var(--shadow);
                                                                                        }
                                                                                        
                                                                                        .sort-btn {
                                                                                            border: 1px solid var(--pill-border);
                                                                                            background: transparent;
                                                                                            color: var(--text);
                                                                                            padding: 6px 14px;
                                                                                            border-radius: 999px;
                                                                                            font-size: .85rem;
                                                                                            transition: .2s;
                                                                                        }
                                                                                        
                                                                                        .sort-btn:hover {
                                                                                            background: rgba(0, 0, 0, .05);
                                                                                        }
                                                                                        
                                                                                        html.dark .sort-btn:hover,
                                                                                        html[data-theme="auto"][style*="--bg:#0f1216"] .sort-btn:hover {
                                                                                            background: rgba(255, 255, 255, .06);
                                                                                        }
                                                                                        
                                                                                        .sort-btn.active {
                                                                                            background: var(--accent);
                                                                                            color: #fff;
                                                                                            border-color: var(--accent);
                                                                                            font-weight: 600;
                                                                                        }
                                                                                        /* Card */
                                                                                        
                                                                                        .card-game {
                                                                                            border: 0;
                                                                                            border-radius: 16px;
                                                                                            overflow: hidden;
                                                                                            background: var(--card-bg);
                                                                                            box-shadow: var(--shadow);
                                                                                            transition: transform .18s ease, box-shadow .18s ease;
                                                                                            will-change: transform;
                                                                                        }
                                                                                        
                                                                                        .card-game:hover,
                                                                                        .card-game:focus-within {
                                                                                            transform: translateY(-4px) scale(1.02);
                                                                                            box-shadow: var(--shadow-lg);
                                                                                        }
                                                                                        
                                                                                        .thumb {
                                                                                            position: relative;
                                                                                            width: 100%;
                                                                                            height: 180px;
                                                                                            overflow: hidden;
                                                                                            background: #000;
                                                                                        }
                                                                                        
                                                                                        .thumb img {
                                                                                            width: 100%;
                                                                                            height: 100%;
                                                                                            object-fit: cover;
                                                                                            display: block;
                                                                                        }
                                                                                        
                                                                                        .badge-stack {
                                                                                            position: absolute;
                                                                                            top: 8px;
                                                                                            left: 8px;
                                                                                            display: flex;
                                                                                            flex-wrap: wrap;
                                                                                            gap: 6px;
                                                                                            z-index: 3;
                                                                                        }
                                                                                        
                                                                                        .badge-sale {
                                                                                            background: #ff4757;
                                                                                            color: #fff;
                                                                                            border-radius: 999px;
                                                                                            padding: 2px 6px;
                                                                                            font-size: .75rem;
                                                                                            font-weight: 700;
                                                                                        }
                                                                                        
                                                                                        .popular-badge {
                                                                                            background: #ffd43b;
                                                                                            color: #6b4f00;
                                                                                            border-radius: 999px;
                                                                                            padding: 2px 6px;
                                                                                            font-size: .75rem;
                                                                                            font-weight: 700;
                                                                                        }
                                                                                        
                                                                                        html.dark .popular-badge {
                                                                                            background: #ffca2c;
                                                                                            color: #1a1200;
                                                                                            text-shadow: 0 1px 1px rgba(255, 255, 255, .25), 0 0 2px rgba(0, 0, 0, .35);
                                                                                        }
                                                                                        
                                                                                        .discount-badge {
                                                                                            background: #20c997;
                                                                                            color: #073b2a;
                                                                                            border-radius: 999px;
                                                                                            padding: 2px 6px;
                                                                                            font-size: .75rem;
                                                                                            font-weight: 700;
                                                                                        }
                                                                                        
                                                                                        .title-trunc {
                                                                                            white-space: nowrap;
                                                                                            overflow: hidden;
                                                                                            text-overflow: ellipsis;
                                                                                        }
                                                                                        
                                                                                        .price {
                                                                                            /* font-weight: 700; */
                                                                                            font-size: 20px;
                                                                                        }
                                                                                        
                                                                                        .muted {
                                                                                            color: var(--muted);
                                                                                        }
                                                                                        /* region list */
                                                                                        
                                                                                        .region-mini {
                                                                                            margin-top: .5rem;
                                                                                            font-size: .9rem;
                                                                                        }
                                                                                        
                                                                                        .region-mini .line {
                                                                                            display: flex;
                                                                                            align-items: center;
                                                                                            justify-content: space-between;
                                                                                            gap: .5rem;
                                                                                        }
                                                                                        
                                                                                        .region-mini .name {
                                                                                            flex: 1 1 auto;
                                                                                            min-width: 0;
                                                                                        }
                                                                                        
                                                                                        .region-mini .name .text {
                                                                                            display: inline-block;
                                                                                            max-width: 100%;
                                                                                            white-space: nowrap;
                                                                                            overflow: hidden;
                                                                                            text-overflow: ellipsis;
                                                                                        }
                                                                                        
                                                                                        .region-mini .val {
                                                                                            white-space: nowrap;
                                                                                            font-weight: 700;
                                                                                        }
                                                                                        
                                                                                        .sale-chip {
                                                                                            font-size: .78rem;
                                                                                            padding: 0 .25rem;
                                                                                            border-radius: .35rem;
                                                                                            color: #d90429;
                                                                                        }
                                                                                        
                                                                                        @media (max-width:576px) {
                                                                                            .sort-bar {
                                                                                                flex-direction: column;
                                                                                                align-items: flex-start !important;
                                                                                                gap: 10px;
                                                                                            }
                                                                                        }
                                                                                        /* Dark-mode text fix inside cards */
                                                                                        /* html.dark .card-game :not(.btn-fav):not(.btn-fav *) {
                  color: var(--text) !important;
              } */
                                                                                        
                                                                                        html.dark .card-game :not(.btn-fav):not(.btn-fav *):not(.text-danger):not(.badge-sale):not(.discount-badge):not(.sale-chip):not(.price *) {
                                                                                            color: var(--text) !important;
                                                                                        }
                                                                                        
                                                                                        html.dark .card-game small.text-muted {
                                                                                            color: var(--muted) !important;
                                                                                        }
                                                                                        
                                                                                        html.dark .card-game .title-trunc strong {
                                                                                            color: #fff !important;
                                                                                        }
                                                                                        
                                                                                        html.dark .region-mini .name .text {
                                                                                            color: var(--text) !important;
                                                                                        }
                                                                                        /* Platform icon */
                                                                                        
                                                                                        .platform-icon {
                                                                                            height: 30px;
                                                                                            width: auto;
                                                                                            vertical-align: middle;
                                                                                            margin-right: 6px;
                                                                                            border-radius: 6px;
                                                                                            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
                                                                                        }
                                                                                        
                                                                                        html.dark .platform-icon {
                                                                                            filter: brightness(1.2) drop-shadow(0 1px 1px rgba(255, 255, 255, .25));
                                                                                        }
                                                                                        /* Base (เหมือนปุ่มขึ้นบน) */
                                                                                        
                                                                                        .btn-to-top,
                                                                                        .btn-to-btm {
                                                                                            position: fixed;
                                                                                            right: calc(16px + env(safe-area-inset-right, 0px));
                                                                                            width: 44px;
                                                                                            height: 44px;
                                                                                            border: 0;
                                                                                            border-radius: 999px;
                                                                                            background: var(--accent, #0d6efd);
                                                                                            color: #fff;
                                                                                            display: none;
                                                                                            align-items: center;
                                                                                            justify-content: center;
                                                                                            box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
                                                                                            cursor: pointer;
                                                                                            z-index: 999;
                                                                                            transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
                                                                                            opacity: .95;
                                                                                        }
                                                                                        /* ตำแหน่ง: ขึ้นบน = ล่างสุด, เลื่อนลง = เหนือขึ้นมา */
                                                                                        
                                                                                        .btn-to-top {
                                                                                            bottom: calc(16px + env(safe-area-inset-bottom, 0px));
                                                                                        }
                                                                                        
                                                                                        .btn-to-btm {
                                                                                            bottom: calc(16px + 52px + env(safe-area-inset-bottom, 0px));
                                                                                        }
                                                                                        /* 52px = 44 + margin */
                                                                                        
                                                                                        .btn-to-top.show,
                                                                                        .btn-to-btm.show {
                                                                                            display: inline-flex;
                                                                                        }
                                                                                        
                                                                                        .btn-to-top:hover,
                                                                                        .btn-to-btm:hover {
                                                                                            transform: translateY(-2px) scale(1.03);
                                                                                            box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
                                                                                            opacity: 1;
                                                                                        }
                                                                                        
                                                                                        .btn-to-top:focus,
                                                                                        .btn-to-btm:focus {
                                                                                            outline: 2px solid rgba(255, 255, 255, .6);
                                                                                            outline-offset: 2px;
                                                                                        }
                                                                                        
                                                                                        html.dark .btn-to-top,
                                                                                        html.dark .btn-to-btm {
                                                                                            background: var(--accent, #4da3ff);
                                                                                            color: #0b1220;
                                                                                        }
                                                                                        
                                                                                        .btn-to-btm svg,
                                                                                        .btn-to-top svg {
                                                                                            width: 20px;
                                                                                            height: 20px;
                                                                                            display: block;
                                                                                        }
                                                                                        /* Colors for prices */
                                                                                        
                                                                                        html.dark .price.text-danger {
                                                                                            color: #ff6b6b !important;
                                                                                        }
                                                                                        
                                                                                        .region-mini .val.sale {
                                                                                            color: #dc3545 !important;
                                                                                        }
                                                                                        
                                                                                        html.dark .region-mini .val.sale {
                                                                                            color: #ff6b6b !important;
                                                                                        }
                                                                                        /* ==== Floating action buttons on card ==== */
                                                                                        
                                                                                        .card-game {
                                                                                            position: relative;
                                                                                        }
                                                                                        /* ให้วางปุ่มแบบ absolute ได้ */
                                                                                        
                                                                                        .card-actions {
                                                                                            position: absolute;
                                                                                            right: 10px;
                                                                                            bottom: 10px;
                                                                                            display: flex;
                                                                                            gap: 10px;
                                                                                            z-index: 5;
                                                                                        }
                                                                                        
                                                                                        .card-action-btn {
                                                                                            width: 42px;
                                                                                            height: 42px;
                                                                                            border: 0;
                                                                                            border-radius: 999px;
                                                                                            background: rgba(255, 255, 255, .92);
                                                                                            color: #222;
                                                                                            display: inline-flex;
                                                                                            align-items: center;
                                                                                            justify-content: center;
                                                                                            box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
                                                                                            cursor: pointer;
                                                                                            transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
                                                                                        }
                                                                                        
                                                                                        .card-action-btn:hover {
                                                                                            transform: translateY(-2px);
                                                                                            box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
                                                                                        }
                                                                                        
                                                                                        .card-action-btn svg {
                                                                                            width: 20px;
                                                                                            height: 20px;
                                                                                        }
                                                                                        
                                                                                        html.dark .card-action-btn {
                                                                                            background: rgba(21, 26, 33, .92);
                                                                                            color: #e6e6e6;
                                                                                            box-shadow: 0 8px 18px rgba(0, 0, 0, .55);
                                                                                        }
                                                                                        
                                                                                        .card-action-btn.is-fav {
                                                                                            background: #ff4d6d;
                                                                                            color: #fff;
                                                                                        }
                                                                                        /* ปุ่มหัวใจ (สถานะ favorite) — ให้เด่นทั้งโหมดสว่าง/มืด */
                                                                                        
                                                                                        .card-action-btn.is-fav {
                                                                                            background: #ff4d6d;
                                                                                            color: #fff;
                                                                                        }
                                                                                        
                                                                                        html.dark .card-action-btn.is-fav {
                                                                                            background: #ff4d6d;
                                                                                            color: #fff;
                                                                                        }
                                                                                        
                                                                                        html.dark .card-action-btn.is-fav svg {
                                                                                            fill: currentColor;
                                                                                        }
                                                                                        /* ถ้าคุณมีปุ่มหัวใจแบบ inline (เช่น .btn-fav) ให้สีชัดใน dark mode ด้วย */
                                                                                        
                                                                                        .btn-fav {
                                                                                            color: #999;
                                                                                        }
                                                                                        
                                                                                        .btn-fav:hover {
                                                                                            color: #e74c3c;
                                                                                        }
                                                                                        
                                                                                        .btn-fav.active {
                                                                                            color: #e74c3c;
                                                                                        }
                                                                                        
                                                                                        html.dark .btn-fav {
                                                                                            color: #bfbfbf;
                                                                                        }
                                                                                        
                                                                                        html.dark .btn-fav:hover {
                                                                                            color: #ff6b6b;
                                                                                        }
                                                                                        
                                                                                        html.dark .btn-fav.active {
                                                                                            color: #ff6b6b;
                                                                                        }
                                                                                        
                                                                                        .card-game .thumb {
                                                                                            position: relative;
                                                                                            aspect-ratio: 3 / 4;
                                                                                            /* ปกเกมส่วนใหญ่ 3:4 */
                                                                                            overflow: hidden;
                                                                                            border-radius: 12px;
                                                                                            background: #111;
                                                                                            /* กันพื้นโปร่ง */
                                                                                        }
                                                                                        
                                                                                        .card-game .thumb img {
                                                                                            position: absolute;
                                                                                            inset: 0;
                                                                                            width: 100%;
                                                                                            height: 100%;
                                                                                            object-fit: cover;
                                                                                            /* ยังครอบคลุมเต็มกรอบ */
                                                                                            object-position: 50% 20%;
                                                                                            /* เลื่อนขึ้นให้เห็นหัวภาพมากขึ้น (20%) */
                                                                                        }
                                                                                        
                                                                                        .price .text-danger {
                                                                                            color: #e03131 !important;
                                                                                        }
                                                                                        
                                                                                        .price s,
                                                                                        .price .text-decoration-line-through {
                                                                                            opacity: .7;
                                                                                        }
                                                                                        /* ==== Region list: show 5 then toggle more ==== */
                                                                                        
                                                                                        .region-mini .more {
                                                                                            display: none;
                                                                                        }
                                                                                        
                                                                                        .region-mini.expanded .more {
                                                                                            display: block;
                                                                                        }
                                                                                        /* เงาจางตอนย่อ บอกว่ามีต่อ */
                                                                                        
                                                                                        .region-mini .fade {
                                                                                            height: 16px;
                                                                                            margin-top: -16px;
                                                                                            display: block;
                                                                                            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--card-bg));
                                                                                        }
                                                                                        /* ปุ่มดูทั้งหมด/ย่อ */
                                                                                        
                                                                                        .region-toggle {
                                                                                            border: 0;
                                                                                            background: none;
                                                                                            color: var(--accent);
                                                                                            padding: 0;
                                                                                            cursor: pointer;
                                                                                            font-size: .9rem;
                                                                                            margin-top: .25rem;
                                                                                        }
                                                                                        /* Modal layout (ขั้นต่ำ) */
                                                                                        
                                                                                        .np-modal {
                                                                                            position: fixed;
                                                                                            inset: 0;
                                                                                            display: none;
                                                                                            z-index: 5000;
                                                                                        }
                                                                                        
                                                                                        .np-modal.show {
                                                                                            display: block;
                                                                                        }
                                                                                        
                                                                                        .np-modal__backdrop {
                                                                                            position: absolute;
                                                                                            inset: 0;
                                                                                            background: rgba(0, 0, 0, .55);
                                                                                            backdrop-filter: blur(2px);
                                                                                        }
                                                                                        
                                                                                        .np-modal__close {
                                                                                            position: absolute;
                                                                                            right: 8px;
                                                                                            top: 6px;
                                                                                            border: 0;
                                                                                            background: transparent;
                                                                                            font-size: 32px;
                                                                                            line-height: 1;
                                                                                        }
                                                                                        
                                                                                        .np-modal__body {
                                                                                            padding: 16px;
                                                                                            overflow: auto;
                                                                                            max-height: calc(92vh - 16px - 16px);
                                                                                        }
                                                                                        /* Modal content blocks */
                                                                                        
                                                                                        .np-mdl-head {
                                                                                            display: flex;
                                                                                            gap: 16px;
                                                                                            align-items: flex-start;
                                                                                        }
                                                                                        
                                                                                        .np-mdl-cover img {
                                                                                            width: 220px;
                                                                                            height: auto;
                                                                                            border-radius: 12px;
                                                                                            display: block;
                                                                                        }
                                                                                        
                                                                                        .np-mdl-info {
                                                                                            flex: 1 1 auto;
                                                                                            min-width: 0;
                                                                                        }
                                                                                        
                                                                                        .np-mdl-title {
                                                                                            margin: 0 0 8px;
                                                                                            font-size: 1.25rem;
                                                                                        }
                                                                                        
                                                                                        .np-mdl-price {
                                                                                            margin-bottom: 4px;
                                                                                            font-size: 1.1rem;
                                                                                        }
                                                                                        /* Regions table inside modal */
                                                                                        
                                                                                        .region-full {
                                                                                            display: flex;
                                                                                            flex-direction: column;
                                                                                            gap: 8px;
                                                                                        }
                                                                                        
                                                                                        .rf-row {
                                                                                            display: flex;
                                                                                            align-items: center;
                                                                                            justify-content: space-between;
                                                                                            gap: 12px;
                                                                                            padding: 8px 10px;
                                                                                            border-radius: 10px;
                                                                                            background: var(--card-bg);
                                                                                            box-shadow: var(--shadow);
                                                                                        }
                                                                                        
                                                                                        .rf-row.is-cheapest {
                                                                                            outline: 2px solid var(--accent);
                                                                                        }
                                                                                        
                                                                                        .rf-name {
                                                                                            font-weight: 600;
                                                                                        }
                                                                                        
                                                                                        .rf-chip {
                                                                                            display: inline-block;
                                                                                            margin-left: 8px;
                                                                                            padding: 1px 6px;
                                                                                            border-radius: 999px;
                                                                                            background: var(--accent);
                                                                                            color: #fff;
                                                                                            font-size: .75rem;
                                                                                        }
                                                                                        
                                                                                        .rf-price.sale {
                                                                                            color: #dc3545 !important;
                                                                                        }
                                                                                        /* ========== Dark-mode contrast fix ========== */
                                                                                        /* 1) สีแดงให้ชัดทุกที่ใน dark mode (ทั้งการ์ดและโมดัล) */
                                                                                        
                                                                                        html.dark .text-danger {
                                                                                            color: #ff6b6b !important;
                                                                                        }
                                                                                        /* ราคา "ก่อนลด" ที่ถูกขีดทับ: อย่าให้ซีดเกินไป + เปลี่ยนสีเส้นขีดให้สว่างขึ้น */
                                                                                        
                                                                                        html.dark .text-decoration-line-through {
                                                                                            opacity: .95 !important;
                                                                                            text-decoration-color: rgba(255, 255, 255, .55) !important;
                                                                                        }
                                                                                        /* ถ้ามี selector เดิมที่กด opacity ของราคาก่อนลดไว้ ให้ชดเชย */
                                                                                        
                                                                                        html.dark .price s,
                                                                                        html.dark .price .text-decoration-line-through {
                                                                                            opacity: .9 !important;
                                                                                        }
                                                                                        /* 2) ข้อความรายละเอียดใต้ชื่อ (วันที่ออก/อัปเดต) ให้มีคอนทราสต์ขึ้น */
                                                                                        
                                                                                        html.dark .text-muted,
                                                                                        html.dark small.text-muted {
                                                                                            color: #b0b8c3 !important;
                                                                                            /* เทาอ่อนอ่านง่ายบนพื้นมืด */
                                                                                        }
                                                                                        /* 3) รายการประเทศย่อย: ราคาลดให้แดงชัด, ราคาปกติที่ถูกขีดให้มองเห็น */
                                                                                        
                                                                                        html.dark .region-mini .val.sale,
                                                                                        html.dark .rf-price.sale {
                                                                                            /* rf-price = ในโมดัล */
                                                                                            color: #ff6b6b !important;
                                                                                        }
                                                                                        
                                                                                        html.dark .region-mini .text-muted.text-decoration-line-through,
                                                                                        html.dark .rf-row .text-muted.text-decoration-line-through {
                                                                                            color: #b0b8c3 !important;
                                                                                            text-decoration-color: rgba(255, 255, 255, .55) !important;
                                                                                        }
                                                                                        /* (ออปชัน) ป้าย Sale/ถูกสุดในโมดัลให้เด่นขึ้นอีกนิด */
                                                                                        
                                                                                        html.dark .rf-row.is-cheapest {
                                                                                            outline-color: #4da3ff;
                                                                                        }
                                                                                        
                                                                                        .btn-icon {
                                                                                            display: inline-flex;
                                                                                            align-items: center;
                                                                                            justify-content: center;
                                                                                            width: 36px;
                                                                                            height: 36px;
                                                                                            border-radius: 999px;
                                                                                            background: rgba(0, 0, 0, .06);
                                                                                        }
                                                                                        
                                                                                        .btn-icon:hover {
                                                                                            background: rgba(0, 0, 0, .12);
                                                                                        }
                                                                                        
                                                                                        html.dark .btn-icon {
                                                                                            background: rgba(255, 255, 255, .08);
                                                                                        }
                                                                                        
                                                                                        html.dark .btn-icon:hover {
                                                                                            background: rgba(255, 255, 255, .14);
                                                                                        }
                                                                                        
                                                                                        .btn-icon svg {
                                                                                            width: 20px;
                                                                                            height: 20px;
                                                                                        }
                                                                                        /* ===== Modal layout (desktop) ===== */
                                                                                        
                                                                                        .np-mdl-head {
                                                                                            display: grid;
                                                                                            grid-template-columns: 200px 1fr;
                                                                                            /* รูปซ้าย / รายละเอียดขวา */
                                                                                            gap: 16px;
                                                                                            align-items: start;
                                                                                        }
                                                                                        
                                                                                        .np-mdl-cover img {
                                                                                            width: 100%;
                                                                                            height: auto;
                                                                                            border-radius: 14px;
                                                                                            display: block;
                                                                                        }
                                                                                        /* ===== Mobile: ซ้อนเป็นคอลัมน์ รูปอยู่บน ตรงกลาง ===== */
                                                                                        
                                                                                        @media (max-width: 576px) {
                                                                                            .np-mdl-head {
                                                                                                grid-template-columns: 1fr;
                                                                                                /* ซ้อนเป็น 1 คอลัมน์ */
                                                                                                justify-items: center;
                                                                                                /* จัดกลางแนวนอน */
                                                                                                text-align: center;
                                                                                            }
                                                                                            .np-mdl-cover {
                                                                                                width: 80%;
                                                                                                /* ปรับสัดส่วนรูปบนมือถือ */
                                                                                                max-width: 360px;
                                                                                            }
                                                                                            .np-mdl-title {
                                                                                                margin-top: 10px;
                                                                                                font-size: 1.05rem;
                                                                                                line-height: 1.3;
                                                                                                word-break: break-word;
                                                                                                /* กันชื่อยาวดันเลย์เอาต์ */
                                                                                            }
                                                                                            .np-mdl-price,
                                                                                            .np-mdl-pub,
                                                                                            .np-mdl-upd {
                                                                                                text-align: center;
                                                                                            }
                                                                                            /* ปุ่มไอคอนลิงก์ให้เรียงกลางด้วย */
                                                                                            .np-mdl-links {
                                                                                                display: flex;
                                                                                                justify-content: center;
                                                                                                gap: 10px;
                                                                                                flex-wrap: wrap;
                                                                                            }
                                                                                        }
                                                                                        /* เพิ่มความสูง/สกอลล์ของ modal บนมือถือ */
                                                                                        
                                                                                        .np-modal {
                                                                                            max-height: 90vh;
                                                                                            overflow: auto;
                                                                                        }
                                                                                        /* ป้าย “ถูกที่สุด/SALE/Hot” ให้ชิดกลางบนมือถือ */
                                                                                        
                                                                                        @media (max-width: 576px) {
                                                                                            .np-chipbar {
                                                                                                justify-content: center;
                                                                                            }
                                                                                        }
                                                                                        /* ค่าเริ่มต้น (เดสก์ท็อป/แท็บเล็ต) */
                                                                                        /* ตัวครอบ modal ทั้งชุด */
                                                                                        
                                                                                        .np-modal {
                                                                                            position: fixed;
                                                                                            /* สำคัญ: ลอยทับทั้งหน้า */
                                                                                            inset: 0;
                                                                                            /* top/right/bottom/left = 0 */
                                                                                            z-index: 2000;
                                                                                            display: none;
                                                                                        }
                                                                                        
                                                                                        .np-modal.show {
                                                                                            display: block;
                                                                                        }
                                                                                        /* ชั้นมืดด้านหลัง */
                                                                                        
                                                                                        .np-modal__backdrop {
                                                                                            position: fixed;
                                                                                            inset: 0;
                                                                                            /* คลุมเต็มจอแบบไม่เหลือขอบ */
                                                                                            background: rgba(0, 0, 0, .55);
                                                                                            -webkit-backdrop-filter: saturate(120%) blur(2px);
                                                                                            backdrop-filter: saturate(120%) blur(2px);
                                                                                            z-index: 2000;
                                                                                            /* แก้ 100vh บนมือถือ: ใช้ dvh ถ้าซัพพอร์ต */
                                                                                            height: 100vh;
                                                                                        }
                                                                                        
                                                                                        @supports (height: 100dvh) {
                                                                                            .np-modal__backdrop {
                                                                                                height: 100dvh;
                                                                                            }
                                                                                        }
                                                                                        /* ชั้นสกอลล์/วาง dialog */
                                                                                        
                                                                                        .np-modal__scroll {
                                                                                            position: fixed;
                                                                                            inset: 0;
                                                                                            overflow: auto;
                                                                                            z-index: 2001;
                                                                                            padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) 12px;
                                                                                            /* กันชิดขอบ/รอยบากมือถือ */
                                                                                        }
                                                                                        /* กล่อง dialog (เดสก์ท็อปค่าเริ่มต้น) */
                                                                                        
                                                                                        .np-modal__dialog {
                                                                                            margin: 4vh auto;
                                                                                            max-width: 550px;
                                                                                            width: min(92vw, 920px);
                                                                                            max-height: 92vh;
                                                                                            background: var(--card-bg);
                                                                                            color: var(--text);
                                                                                            border-radius: 16px;
                                                                                            box-shadow: var(--shadow-lg);
                                                                                            overflow: hidden;
                                                                                        }
                                                                                        /* มือถือ: บังคับให้ไม่ใหญ่เกิน */
                                                                                        
                                                                                        @media (max-width:576px) {
                                                                                            .np-modal__dialog {
                                                                                                max-width: 320px;
                                                                                                width: calc(100vw - 24px);
                                                                                                margin: 12px auto;
                                                                                                max-height: 92dvh;
                                                                                                /* ใช้ dvh บนมือถือ */
                                                                                            }
                                                                                        }
                                                                                        /* --- Z-Index fix: ให้ backdrop อยู่ล่าง dialog เสมอ --- */
                                                                                        
                                                                                        .np-modal__backdrop {
                                                                                            position: fixed;
                                                                                            inset: 0;
                                                                                            z-index: 1999;
                                                                                            /* ล่างสุด */
                                                                                            background: rgba(0, 0, 0, .55);
                                                                                            -webkit-backdrop-filter: saturate(120%) blur(2px);
                                                                                            backdrop-filter: saturate(120%) blur(2px);
                                                                                        }
                                                                                        
                                                                                        .np-modal__scroll {
                                                                                            position: fixed;
                                                                                            inset: 0;
                                                                                            overflow: auto;
                                                                                            z-index: 2000;
                                                                                            /* เหนือ backdrop */
                                                                                            padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) 12px;
                                                                                        }
                                                                                        
                                                                                        .np-modal__dialog {
                                                                                            position: relative;
                                                                                            z-index: 2001;
                                                                                            /* สูงสุด: ไม่ถูกเบลอทับ */
                                                                                        }
                                                                                        /* กันเคสมี filter ที่พา blur ลูกหลานไปด้วย (อย่าใช้ filter กับครอบใหญ่) */
                                                                                        
                                                                                        .np-modal,
                                                                                        .np-modal__scroll {
                                                                                            filter: none !important;
                                                                                        }
                                                                                        /* Center badges inside MODAL on mobile only */
                                                                                        
                                                                                        @media (max-width: 576px) {
                                                                                            /* กรณีคุณวางป้ายเป็น stack ทั่วไปในโมดัล */
                                                                                            .np-modal .badge-stack,
                                                                                            .np-modal .np-chipbar {
                                                                                                position: absolute;
                                                                                                /* ซ้อนทับบนรูป/หัว */
                                                                                                left: 50%;
                                                                                                right: auto;
                                                                                                transform: translateX(-50%);
                                                                                                top: 8px;
                                                                                                /* ขยับขึ้น/ลงได้ตามชอบ */
                                                                                                gap: 6px;
                                                                                                justify-content: center;
                                                                                                /* จัดกลางในแกน X */
                                                                                                z-index: 3;
                                                                                            }
                                                                                            /* ถ้าป้ายอยู่ในส่วนข้อมูล (ไม่ใช่ซ้อนบนรูป) ให้จัดกลางแบบ in-flow */
                                                                                            .np-modal .np-mdl-info .np-chipbar {
                                                                                                position: static;
                                                                                                transform: none;
                                                                                                left: auto;
                                                                                                right: auto;
                                                                                                margin-top: 6px;
                                                                                                justify-content: center;
                                                                                            }
                                                                                            /* เผื่อวางป้ายทับรูปปกในหัวโมดัล ให้ตัวครอบเป็น relative */
                                                                                            .np-modal .np-mdl-head {
                                                                                                position: relative;
                                                                                            }
                                                                                        }
                                                                                        /* ซ่อน/โชว์ sale-until ตามขนาดหน้าจอ */
                                                                                        /* .rf-saleuntil--mobile {
                                                    display: none;
                                                }
                                                
                                                .rf-saleuntil--desktop {
                                                    display: inline;
                                                } */
                                                                                        
                                                                                        .brand a {
                                                                                            text-decoration: none;
                                                                                            /* ตัดเส้นใต้ */
                                                                                            color: inherit;
                                                                                            /* ใช้สีตาม .brand */
                                                                                            cursor: default;
                                                                                            /* ไม่ให้เป็นรูปมือ */
                                                                                        }
                                                                                        
                                                                                        .brand a:hover,
                                                                                        .brand a:focus {
                                                                                            text-decoration: none;
                                                                                            color: inherit;
                                                                                        }
                                                                                        /* ---- Reset + แยกเดสก์ท็อป/มือถือ (วางท้ายไฟล์) ---- */
                                                                                        
                                                                                        .np-modal .rf-saleuntil {
                                                                                            display: none !important;
                                                                                            /* เริ่มจากซ่อนทั้งหมด */
                                                                                        }
                                                                                        
                                                                                        @media (min-width:577px) {
                                                                                            .np-modal .rf-saleuntil--desktop {
                                                                                                display: inline-block !important;
                                                                                                vertical-align: middle;
                                                                                            }
                                                                                            .np-modal .rf-saleuntil--mobile {
                                                                                                display: none !important;
                                                                                            }
                                                                                        }
                                                                                        
                                                                                        @media (max-width:576px) {
                                                                                            .np-modal .rf-saleuntil--mobile {
                                                                                                display: block !important;
                                                                                                /* โชว์ใต้ชื่อประเทศบนมือถือ */
                                                                                                margin-top: 2px;
                                                                                                color: var(--muted);
                                                                                                font-size: .85rem;
                                                                                            }
                                                                                            .np-modal .rf-saleuntil--desktop {
                                                                                                display: none !important;
                                                                                                /* ซ่อนฝั่งราคาบนมือถือ */
                                                                                            }
                                                                                        }
                                                                                        /* ชุดราคาในโมดัลชิดขวาทั้งก้อน */
                                                                                        
                                                                                        .np-modal .rf-val {
                                                                                            display: flex;
                                                                                            flex-direction: column;
                                                                                            align-items: flex-end;
                                                                                            /* ชิดขวา */
                                                                                            text-align: right;
                                                                                            /* ให้ตัวหนังสือชิดขวา */
                                                                                            gap: 2px;
                                                                                        }
                                                                                        
                                                                                        .np-modal .rf-price,
                                                                                        .np-modal .rf-saleuntil {
                                                                                            display: block;
                                                                                            /* บังคับให้ขึ้นบรรทัดใหม่ตามลำดับ */
                                                                                        }
                                                                                        /* ไม่ให้ brand เหมือนลิ้ง */
                                                                                        
                                                                                        .brand-nolink {
                                                                                            color: var(--text);
                                                                                            text-decoration: none;
                                                                                            font-weight: 700;
                                                                                        }
                                                                                        
                                                                                        .brand-nolink:hover {
                                                                                            opacity: .7;
                                                                                        }
                                                                                        /* ปุ่ม nav ด้านบน */
                                                                                        
                                                                                        .topnav-mini .nav-link {
                                                                                            border-radius: 999px;
                                                                                            padding: 6px 14px;
                                                                                            font-size: .85rem;
                                                                                            font-weight: 600;
                                                                                            color: var(--text);
                                                                                            transition: .2s;
                                                                                        }
                                                                                        
                                                                                        .topnav-mini .nav-link.active,
                                                                                        .topnav-mini .nav-link:hover {
                                                                                            background: var(--accent);
                                                                                            color: #fff;
                                                                                        }
                                                                                        /* มือถือ: ให้ปุ่มอยู่ล่างโลโก้ / กลางพอดี */
                                                                                        
                                                                                        @media (max-width: 576px) {
                                                                                            .hdr-bar {
                                                                                                flex-wrap: wrap;
                                                                                                gap: .5rem;
                                                                                            }
                                                                                            .topnav-mini {
                                                                                                order: 3;
                                                                                                width: 100%;
                                                                                                justify-content: center;
                                                                                                gap: .25rem;
                                                                                            }
                                                                                            .actions {
                                                                                                order: 2;
                                                                                            }
                                                                                        }
                                                                                        
                                                                                        .flag-code {
                                                                                            display: inline-block;
                                                                                            font-size: .75rem;
                                                                                            padding: 2px 5px;
                                                                                            border-radius: 4px;
                                                                                            background: var(--pill-bg, #ddd3);
                                                                                            color: var(--pill-text, #666);
                                                                                            border: 1px solid #9994;
                                                                                        }
                                                                                        
                                                                                        .lang-th {
                                                                                            margin-top: 4px;
                                                                                            font-size: .9rem;
                                                                                            font-weight: 600;
                                                                                            color: var(--accent);
                                                                                            display: inline-flex;
                                                                                            align-items: center;
                                                                                            gap: .35rem;
                                                                                        }
                                                                                        /* ธง (emoji) โบกเบา ๆ */
                                                                                        
                                                                                        .wave-flag {
                                                                                            display: inline-flex;
                                                                                            align-items: center;
                                                                                            gap: .25rem;
                                                                                        }
                                                                                        
                                                                                        .wave-flag::before {
                                                                                            content: "🇹🇭";
                                                                                            display: inline-block;
                                                                                            animation: waveFlag 1.8s ease-in-out infinite;
                                                                                            transform-origin: 60% 60%;
                                                                                            /* ขยายธงให้เด่นขึ้น */
                                                                                            font-size: 1.2em;
                                                                                        }
                                                                                        /* Animation keyframe */
                                                                                        
                                                                                        @keyframes waveFlag {
                                                                                            0% {
                                                                                                transform: rotate(0deg)
                                                                                            }
                                                                                            25% {
                                                                                                transform: rotate(12deg)
                                                                                            }
                                                                                            50% {
                                                                                                transform: rotate(-8deg)
                                                                                            }
                                                                                            75% {
                                                                                                transform: rotate(10deg)
                                                                                            }
                                                                                            100% {
                                                                                                transform: rotate(0deg)
                                                                                            }
                                                                                        }
                                                                                        /* ลิงก์แบรนด์ไม่ต้องมีเส้นใต้ + จัดโลโก้กับชื่อให้อยู่บรรทัดเดียว */
                                                                                        
                                                                                        .brand-link {
                                                                                            display: inline-flex;
                                                                                            align-items: center;
                                                                                            gap: .5rem;
                                                                                            text-decoration: none;
                                                                                            color: inherit;
                                                                                        }
                                                                                        
                                                                                        .brand-link:hover,
                                                                                        .brand-link:focus {
                                                                                            text-decoration: none;
                                                                                            opacity: .96;
                                                                                        }
                                                                                        /* ขนาดโลโก้ปรับตามจอ */
                                                                                        
                                                                                        .brand-logo {
                                                                                            height: 28px;
                                                                                            /* ปรับได้ตามที่ชอบ */
                                                                                            width: auto;
                                                                                            display: block;
                                                                                            border-radius: 6px;
                                                                                            /* ถ้าอยากให้มุมมนนิด ๆ */
                                                                                        }
                                                                                        
                                                                                        @media (max-width:576px) {
                                                                                            .brand-logo {
                                                                                                height: 24px;
                                                                                            }
                                                                                        }
                                                                                        /* ตัวหนังสือแบรนด์ */
                                                                                        
                                                                                        .brand-text {
                                                                                            font-weight: 700;
                                                                                            letter-spacing: .2px;
                                                                                        }
                                                                                        /* ถ้าโลโก้เป็นไฟล์สีดำ-ขาวและอยากให้เข้ากับ Dark mode อัตโนมัติ (เลือกใช้ได้) */
                                                                                        
                                                                                        html.dark .brand-logo.use-dark {
                                                                                            filter: invert(1) hue-rotate(180deg);
                                                                                        }
                                                                                        
                                                                                        #toast-container {
                                                                                            position: fixed;
                                                                                            top: 20px;
                                                                                            right: 20px;
                                                                                            display: flex;
                                                                                            flex-direction: column;
                                                                                            gap: 10px;
                                                                                            z-index: 9999;
                                                                                        }
                                                                                        
                                                                                        .custom-toast {
                                                                                            background: #343a40;
                                                                                            color: #ffffff;
                                                                                            padding: 15px 20px;
                                                                                            font-size: 14px;
                                                                                            border-radius: 8px;
                                                                                            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                                                                                            opacity: 0;
                                                                                            transform: translateY(-20px);
                                                                                            transition: opacity 0.5s ease, transform 0.5s ease;
                                                                                        }
                                                                                        
                                                                                        .custom-toast2 {
                                                                                            color: #fff;
                                                                                            padding: 10px 15px;
                                                                                            border-radius: 5px;
                                                                                            opacity: 0;
                                                                                            transform: translateY(-20px);
                                                                                            transition: opacity 0.5s, transform 0.5s;
                                                                                        }
                                                                                        /* ===== Pretty Ko-fi pill for top nav ===== */
                                                                                        
                                                                                        #topnav .nav-coffee-pill {
                                                                                            --pill-bg: #ffffff;
                                                                                            --pill-fg: #1a1a1a;
                                                                                            --pill-shadow: 0 8px 20px rgba(0, 0, 0, .18);
                                                                                            display: inline-flex;
                                                                                            align-items: center;
                                                                                            gap: .5rem;
                                                                                            text-decoration: none;
                                                                                            background: linear-gradient(180deg, var(--pill-bg), #f1f1f1);
                                                                                            color: var(--pill-fg);
                                                                                            font-weight: 800;
                                                                                            padding: .45rem .85rem;
                                                                                            border-radius: 999px;
                                                                                            box-shadow: var(--pill-shadow);
                                                                                            line-height: 1;
                                                                                            /* ให้สูงเท่าเมนู */
                                                                                            transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
                                                                                        }
                                                                                        
                                                                                        html.dark #topnav .nav-coffee-pill {
                                                                                            --pill-bg: #23262d;
                                                                                            --pill-fg: #f2f2f2;
                                                                                            --pill-shadow: 0 8px 20px rgba(0, 0, 0, .28);
                                                                                            background: linear-gradient(180deg, #262a31, #1e2127);
                                                                                        }
                                                                                        
                                                                                        #topnav .nav-coffee-pill:hover {
                                                                                            transform: translateY(-1px);
                                                                                            filter: saturate(108%);
                                                                                        }
                                                                                        
                                                                                        #topnav .nav-coffee-pill:active {
                                                                                            transform: translateY(0);
                                                                                        }
                                                                                        
                                                                                        #topnav .nav-coffee-pill:focus-visible {
                                                                                            outline: none;
                                                                                            box-shadow: var(--pill-shadow), 0 0 0 3px #fff6, 0 0 0 6px #fe890066;
                                                                                        }
                                                                                        /* icon (เล็กกะทัดรัดให้พอดีแถบเมนู) */
                                                                                        
                                                                                        #topnav .coffee-ico {
                                                                                            width: 18px;
                                                                                            height: 18px;
                                                                                            position: relative;
                                                                                            display: inline-block;
                                                                                            transform-origin: 50% 100%;
                                                                                            animation: coffee-wiggle 2.6s ease-in-out infinite;
                                                                                        }
                                                                                        
                                                                                        @keyframes coffee-wiggle {
                                                                                            0%,
                                                                                            100% {
                                                                                                transform: rotate(0)
                                                                                            }
                                                                                            30% {
                                                                                                transform: rotate(-4deg)
                                                                                            }
                                                                                            60% {
                                                                                                transform: rotate(4deg)
                                                                                            }
                                                                                        }
                                                                                        /* ควันใช้ currentColor → กลืนสีตัวอักษรของเมนู */
                                                                                        
                                                                                        #topnav .coffee-ico .steam {
                                                                                            position: absolute;
                                                                                            left: 50%;
                                                                                            top: -4px;
                                                                                            width: 4px;
                                                                                            height: 9px;
                                                                                            border-radius: 50%;
                                                                                            background: currentColor;
                                                                                            opacity: .35;
                                                                                            filter: blur(.2px);
                                                                                            transform: translateX(-50%);
                                                                                            animation: steam-up 1.8s ease-in-out infinite;
                                                                                        }
                                                                                        
                                                                                        #topnav .coffee-ico .steam.delay {
                                                                                            animation-delay: .8s;
                                                                                        }
                                                                                        
                                                                                        @keyframes steam-up {
                                                                                            0% {
                                                                                                transform: translate(-50%, 6px) scale(.7);
                                                                                                opacity: .05;
                                                                                            }
                                                                                            50% {
                                                                                                opacity: .4;
                                                                                            }
                                                                                            100% {
                                                                                                transform: translate(-50%, -9px) scale(1);
                                                                                                opacity: 0;
                                                                                            }
                                                                                        }
                                                                                        /* แก้วกาแฟขาวนวลอ่านง่ายทั้งโหมดสว่าง/มืด */
                                                                                        
                                                                                        #topnav .coffee-ico .cup {
                                                                                            position: absolute;
                                                                                            bottom: 0;
                                                                                            left: 50%;
                                                                                            width: 14px;
                                                                                            height: 9px;
                                                                                            background: #fff;
                                                                                            border-radius: 0 0 5px 5px;
                                                                                            transform: translateX(-50%);
                                                                                            box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
                                                                                        }
                                                                                        
                                                                                        html.dark #topnav .coffee-ico .cup {
                                                                                            background: #f7f7f7;
                                                                                        }
                                                                                        
                                                                                        #topnav .coffee-ico .cup::before {
                                                                                            content: "";
                                                                                            position: absolute;
                                                                                            right: -5px;
                                                                                            top: 2px;
                                                                                            width: 6px;
                                                                                            height: 5px;
                                                                                            border: 2px solid #fff;
                                                                                            border-radius: 50%;
                                                                                        }
                                                                                        
                                                                                        html.dark #topnav .coffee-ico .cup::before {
                                                                                            border-color: #f7f7f7;
                                                                                        }
                                                                                        /* ข้อความให้พอดีความสูงเมนู */
                                                                                        
                                                                                        #topnav .nav-coffee-pill .txt {
                                                                                            font-size: .95rem;
                                                                                        }
                                                                                        /* ถ้าอยากให้ “นิ่ง” ตอน hover (ลดกวนสายตา) */
                                                                                        
                                                                                        #topnav .nav-coffee-pill:hover .coffee-ico {
                                                                                            animation: none;
                                                                                        }
                                                                                        /* เคารพผู้ใช้ที่ไม่ต้องการแอนิเมชัน */
                                                                                        
                                                                                        @media (prefers-reduced-motion: reduce) {
                                                                                            #topnav .coffee-ico {
                                                                                                animation: none
                                                                                            }
                                                                                            #topnav .coffee-ico .steam {
                                                                                                animation: none
                                                                                            }
                                                                                            #topnav .nav-coffee-pill {
                                                                                                transition: none
                                                                                            }
                                                                                        }
                                                                                        /* === Override สีปุ่มกาแฟเป็นโทนส้มแดง === */
                                                                                        
                                                                                        #topnav .nav-coffee-pill {
                                                                                            --pill-fg: #ffffff;
                                                                                            /* สีตัวอักษร */
                                                                                            background: linear-gradient(180deg, #ff7a00, #ff3d3d);
                                                                                            /* ส้ม -> แดง */
                                                                                            color: var(--pill-fg);
                                                                                            box-shadow: 0 8px 20px rgba(255, 94, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
                                                                                        }
                                                                                        
                                                                                        #topnav .nav-coffee-pill:hover {
                                                                                            filter: saturate(112%);
                                                                                            box-shadow: 0 10px 24px rgba(255, 61, 61, .34), inset 0 0 0 1px rgba(255, 255, 255, .1);
                                                                                        }
                                                                                        
                                                                                        #topnav .nav-coffee-pill:focus-visible {
                                                                                            box-shadow: 0 10px 24px rgba(255, 61, 61, .34), 0 0 0 3px #fff6, 0 0 0 6px rgba(255, 122, 0, .45);
                                                                                        }
                                                                                        /* โหมดมืด — คุมคอนทราสต์ให้อ่านง่าย */
                                                                                        
                                                                                        html.dark #topnav .nav-coffee-pill {
                                                                                            background: linear-gradient(180deg, #ff8a32, #ff4b4b);
                                                                                            color: #fff;
                                                                                        }
                                                                                        /* ปรับไอคอนให้กลืนกับพื้นหลังใหม่เล็กน้อย */
                                                                                        
                                                                                        #topnav .coffee-ico .steam {
                                                                                            opacity: .5;
                                                                                        }
                                                                                        
                                                                                        #topnav .coffee-ico .cup {
                                                                                            background: #fff;
                                                                                            box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
                                                                                        }
                                                                                        
                                                                                        html.dark #topnav .coffee-ico .cup {
                                                                                            background: #f7f7f7;
                                                                                        }
                                                                                        
                                                                                        #thaiNote {
                                                                                            padding: .5rem .75rem;
                                                                                            border-radius: .5rem;
                                                                                            background: #fff7ed;
                                                                                            /* โทนส้มอ่อน */
                                                                                            border: 1px solid #ffe0c2;
                                                                                            color: #7a4d15;
                                                                                        }
                                                                                        
                                                                                        html.dark #thaiNote {
                                                                                            background: #2b221a;
                                                                                            border-color: #4a3624;
                                                                                            color: #f7d8b0;
                                                                                        }
                                                                                        /* ทำให้ลิงก์ใต้ช่องค้นหา ใช้สีเหมือนข้อความปกติ */
                                                                                        
                                                                                        #thaiNote a {
                                                                                            color: inherit !important;
                                                                                            /* ใช้สีตาม parent */
                                                                                            text-decoration: none;
                                                                                            /* ไม่ขีดเส้นใต้ */
                                                                                        }
                                                                                        
                                                                                        #thaiNote a:hover {
                                                                                            text-decoration: underline;
                                                                                            /* hover แล้วค่อยขีดเส้นใต้ */
                                                                                        }
                                                                                        /* Container */
                                                                                        
                                                                                        .spth-header {
                                                                                            position: sticky;
                                                                                            top: 0;
                                                                                            z-index: 1030;
                                                                                            background: var(--spth-bg, #fff);
                                                                                            border-bottom: 1px solid rgba(0, 0, 0, .06)
                                                                                        }
                                                                                        
                                                                                        .spth-container {
                                                                                            max-width: 1200px;
                                                                                            margin: 0 auto;
                                                                                            padding: 0 12px
                                                                                        }
                                                                                        
                                                                                        .spth-bar {
                                                                                            display: flex;
                                                                                            align-items: center;
                                                                                            justify-content: space-between;
                                                                                            gap: 12px;
                                                                                            min-height: 56px
                                                                                        }
                                                                                        /* Brand */
                                                                                        
                                                                                        .spth-brand-link {
                                                                                            display: flex;
                                                                                            align-items: center;
                                                                                            gap: 8px;
                                                                                            text-decoration: none
                                                                                        }
                                                                                        
                                                                                        .spth-brand-logo {
                                                                                            width: 24px;
                                                                                            height: 24px;
                                                                                            border-radius: 6px
                                                                                        }
                                                                                        
                                                                                        .spth-brand-text {
                                                                                            font-weight: 700
                                                                                        }
                                                                                        /* Nav */
                                                                                        
                                                                                        .spth-nav {
                                                                                            list-style: none;
                                                                                            margin: 0;
                                                                                            padding: 0;
                                                                                            display: flex;
                                                                                            gap: 12px;
                                                                                            flex-wrap: wrap
                                                                                        }
                                                                                        
                                                                                        .spth-nav a {
                                                                                            display: inline-block;
                                                                                            padding: 6px 10px;
                                                                                            text-decoration: none;
                                                                                            border-radius: 8px
                                                                                        }
                                                                                        
                                                                                        .spth-nav a:hover {
                                                                                            background: rgba(0, 0, 0, .06)
                                                                                        }
                                                                                        
                                                                                        .spth-coffee {
                                                                                            font-weight: 600
                                                                                        }
                                                                                        /* Actions */
                                                                                        
                                                                                        .spth-actions {
                                                                                            display: flex;
                                                                                            align-items: center;
                                                                                            gap: 10px
                                                                                        }
                                                                                        /* Hamburger */
                                                                                        
                                                                                        .spth-hamburger {
                                                                                            display: inline-flex;
                                                                                            flex-direction: column;
                                                                                            gap: 4px;
                                                                                            width: 36px;
                                                                                            height: 32px;
                                                                                            padding: 6px;
                                                                                            border: 1px solid rgba(0, 0, 0, .15);
                                                                                            border-radius: 8px;
                                                                                            background: #fff
                                                                                        }
                                                                                        
                                                                                        .spth-hamburger span {
                                                                                            display: block;
                                                                                            height: 2px;
                                                                                            background: currentColor;
                                                                                            border-radius: 2px
                                                                                        }
                                                                                        /* Drawer + overlay (mobile) */
                                                                                        
                                                                                        .spth-drawer {
                                                                                            position: fixed;
                                                                                            top: 0;
                                                                                            right: -280px;
                                                                                            width: 280px;
                                                                                            height: 100dvh;
                                                                                            background: var(--spth-bg, #fff);
                                                                                            box-shadow: -8px 0 24px rgba(0, 0, 0, .14);
                                                                                            transition: right .25s ease;
                                                                                            z-index: 1050;
                                                                                            display: flex;
                                                                                            flex-direction: column
                                                                                        }
                                                                                        
                                                                                        .spth-drawer.open {
                                                                                            right: 0
                                                                                        }
                                                                                        
                                                                                        .spth-drawer-head {
                                                                                            display: flex;
                                                                                            align-items: center;
                                                                                            justify-content: space-between;
                                                                                            padding: 12px 14px;
                                                                                            border-bottom: 1px solid rgba(0, 0, 0, .06);
                                                                                            font-weight: 600
                                                                                        }
                                                                                        
                                                                                        .spth-drawer-close {
                                                                                            background: none;
                                                                                            border: 0;
                                                                                            font-size: 18px;
                                                                                            line-height: 1
                                                                                        }
                                                                                        
                                                                                        .spth-drawer-body {
                                                                                            padding: 12px 14px
                                                                                        }
                                                                                        
                                                                                        .spth-drawer .spth-nav {
                                                                                            flex-direction: column;
                                                                                            gap: 4px
                                                                                        }
                                                                                        
                                                                                        .spth-drawer .spth-nav a {
                                                                                            padding: 10px 12px
                                                                                        }
                                                                                        /* Overlay */
                                                                                        
                                                                                        .spth-overlay {
                                                                                            position: fixed;
                                                                                            inset: 0;
                                                                                            background: rgba(0, 0, 0, .35);
                                                                                            z-index: 1040
                                                                                        }
                                                                                        /* Responsive: ซ่อน/แสดง */
                                                                                        
                                                                                        @media (min-width: 992px) {
                                                                                            .spth-hamburger {
                                                                                                display: none
                                                                                            }
                                                                                            .spth-drawer,
                                                                                            .spth-overlay {
                                                                                                display: none
                                                                                            }
                                                                                            .spth-nav-desktop {
                                                                                                display: block
                                                                                            }
                                                                                        }
                                                                                        
                                                                                        @media (max-width: 991.98px) {
                                                                                            .spth-nav-desktop {
                                                                                                display: none
                                                                                            }
                                                                                            .spth-auth.d-none.d-lg-flex {
                                                                                                display: none !important
                                                                                            }
                                                                                        }
                                                                                        /* Dark mode base (ถ้าคุณมีโหมดมืดอยู่แล้ว ปรับตัวแปรนี้แทน) */
                                                                                        
                                                                                        html.dark .spth-header {
                                                                                            --spth-bg: #0f1115;
                                                                                            color: #e5e7eb;
                                                                                            border-color: rgba(255, 255, 255, .08)
                                                                                        }
                                                                                        
                                                                                        html.dark .spth-hamburger {
                                                                                            background: #0f1115;
                                                                                            border-color: rgba(255, 255, 255, .2)
                                                                                        }
                                                                                        
                                                                                        html.dark .spth-nav a:hover {
                                                                                            background: rgba(255, 255, 255, .08)
                                                                                        }
                                                                                        
                                                                                        html.dark .spth-drawer {
                                                                                            background: #0f1115
                                                                                        }
                                                                                        /* ปุ่มเมนู: วงรีฟ้า ข้อความขาว */
                                                                                        
                                                                                        .spth-nav a.nav-link {
                                                                                            background: #2563eb;
                                                                                            /* ฟ้า */
                                                                                            color: #fff !important;
                                                                                            border-radius: 9999px;
                                                                                            /* วงรี */
                                                                                            padding: 8px 14px;
                                                                                            line-height: 1;
                                                                                        }
                                                                                        
                                                                                        .spth-nav a.nav-link:hover {
                                                                                            filter: brightness(0.95);
                                                                                        }
                                                                                        
                                                                                        .spth-nav a.nav-link.wave-flag {
                                                                                            position: relative;
                                                                                        }
                                                                                        /* เผื่อเอฟเฟกต์ธงของคุณ */
                                                                                        /* Drawer ใช้สไตล์เดียวกัน */
                                                                                        
                                                                                        .spth-drawer .spth-nav a.nav-link {
                                                                                            display: block;
                                                                                        }
                                                                                        /* โหมดมืด */
                                                                                        
                                                                                        html.dark .spth-nav a.nav-link {
                                                                                            background: #1d4ed8;
                                                                                            color: #fff !important;
                                                                                        }
                                                                                        /* เมนูปกติ: โปร่งใส */
                                                                                        
                                                                                        .spth-nav a.nav-link {
                                                                                            padding: 8px 12px;
                                                                                            border-radius: 9999px;
                                                                                            /* วงรี */
                                                                                            text-decoration: none;
                                                                                            line-height: 1;
                                                                                            transition: background .2s ease, color .2s ease;
                                                                                        }
                                                                                        /* hover เบา ๆ */
                                                                                        
                                                                                        .spth-nav a.nav-link:hover {
                                                                                            background: rgba(0, 0, 0, .06);
                                                                                        }
                                                                                        /* ตัวที่กำลังใช้งาน: ทำเป็น pill ชัดขึ้น */
                                                                                        
                                                                                        .spth-nav a.nav-link.active {
                                                                                            background: rgba(0, 0, 0, .10);
                                                                                            font-weight: 600;
                                                                                        }
                                                                                        /* โหมดมืด */
                                                                                        
                                                                                        html.dark .spth-nav a.nav-link:hover {
                                                                                            background: rgba(255, 255, 255, .08);
                                                                                        }
                                                                                        
                                                                                        html.dark .spth-nav a.nav-link.active {
                                                                                            background: rgba(255, 255, 255, .12);
                                                                                        }
                                                                                        /* รีเซ็ตลิงก์เมนูทั้งหมดให้โปร่งใส (ทั้งบนหัวและใน drawer) */
                                                                                        
                                                                                        .spth-header .spth-nav.nav.topnav.topnav-mini>li>a.nav-link,
                                                                                        .spth-drawer .spth-nav.nav.topnav.topnav-mini>li>a.nav-link {
                                                                                            background: transparent !important;
                                                                                            color: inherit !important;
                                                                                            border-radius: 9999px;
                                                                                            /* pill */
                                                                                            padding: 8px 12px;
                                                                                            line-height: 1;
                                                                                            transition: background .2s ease, color .2s ease;
                                                                                        }
                                                                                        /* hover เบา ๆ */
                                                                                        
                                                                                        .spth-header .spth-nav.nav.topnav.topnav-mini>li>a.nav-link:hover,
                                                                                        .spth-drawer .spth-nav.nav.topnav.topnav-mini>li>a.nav-link:hover {
                                                                                            background: rgba(0, 0, 0, .06) !important;
                                                                                        }
                                                                                        /* ตัวที่กำลังใช้งานเท่านั้นให้เป็น pill สีเทา */
                                                                                        
                                                                                        .spth-header .spth-nav.nav.topnav.topnav-mini>li>a.nav-link.active,
                                                                                        .spth-drawer .spth-nav.nav.topnav.topnav-mini>li>a.nav-link.active {
                                                                                            background: rgba(0, 0, 0, .10) !important;
                                                                                            font-weight: 600;
                                                                                        }
                                                                                        /* โหมดมืด */
                                                                                        
                                                                                        html.dark .spth-header .spth-nav.nav.topnav.topnav-mini>li>a.nav-link:hover,
                                                                                        html.dark .spth-drawer .spth-nav.nav.topnav.topnav-mini>li>a.nav-link:hover {
                                                                                            background: rgba(255, 255, 255, .08) !important;
                                                                                        }
                                                                                        
                                                                                        html.dark .spth-header .spth-nav.nav.topnav.topnav-mini>li>a.nav-link.active,
                                                                                        html.dark .spth-drawer .spth-nav.nav.topnav.topnav-mini>li>a.nav-link.active {
                                                                                            background: rgba(255, 255, 255, .12) !important;
                                                                                        }
                                                                                        /* กันคลาสพิเศษที่เคยย้อมสี (เช่น wave-flag, coffee) ไม่ให้ฟ้าเมื่อไม่ active */
                                                                                        
                                                                                        .spth-header .spth-nav a.wave-flag:not(.active),
                                                                                        .spth-drawer .spth-nav a.wave-flag:not(.active),
                                                                                        .spth-header .spth-nav a.spth-coffee:not(.active),
                                                                                        .spth-drawer .spth-nav a.spth-coffee:not(.active) {
                                                                                            background: transparent !important;
                                                                                        }
                                                                                        /* ===== Active nav: ชัดขึ้นด้วยสี accent + เส้นขอบ ===== */
                                                                                        
                                                                                         :root {
                                                                                            --spth-accent: #e60012;
                                                                                            --spth-accent-text: #7f0014;
                                                                                            --spth-accent-bg: rgba(230, 0, 18, .18);
                                                                                            --spth-accent-border: rgba(230, 0, 18, .55);
                                                                                        }
                                                                                        
                                                                                        html.dark {
                                                                                            --spth-accent: #ff6b6b;
                                                                                            --spth-accent-text: #ffd8d8;
                                                                                            --spth-accent-bg: rgba(255, 107, 107, .28);
                                                                                            --spth-accent-border: rgba(255, 170, 170, .6);
                                                                                        }
                                                                                        /* ปกติ */
                                                                                        
                                                                                        .spth-header .spth-nav.nav.topnav.topnav-mini>li>a.nav-link,
                                                                                        .spth-drawer .spth-nav.nav.topnav.topnav-mini>li>a.nav-link {
                                                                                            background: transparent !important;
                                                                                            color: inherit !important;
                                                                                            border-radius: 9999px;
                                                                                            padding: 8px 12px;
                                                                                            line-height: 1;
                                                                                            transition: background .2s, color .2s, box-shadow .2s, outline-color .2s;
                                                                                        }
                                                                                        /* hover เบาๆ */
                                                                                        
                                                                                        .spth-header .spth-nav.nav.topnav.topnav-mini>li>a.nav-link:hover,
                                                                                        .spth-drawer .spth-nav.nav.topnav.topnav-mini>li>a.nav-link:hover {
                                                                                            background: rgba(0, 0, 0, .06) !important;
                                                                                        }
                                                                                        
                                                                                        html.dark .spth-header .spth-nav.nav.topnav.topnav-mini>li>a.nav-link:hover,
                                                                                        html.dark .spth-drawer .spth-nav.nav.topnav.topnav-mini>li>a.nav-link:hover {
                                                                                            background: rgba(255, 255, 255, .08) !important;
                                                                                        }
                                                                                        /* ✅ ตัวที่ใช้งานอยู่: ชัดขึ้น */
                                                                                        
                                                                                        .spth-header .spth-nav.nav.topnav.topnav-mini>li>a.nav-link.active,
                                                                                        .spth-drawer .spth-nav.nav.topnav.topnav-mini>li>a.nav-link.active {
                                                                                            background: var(--spth-accent-bg) !important;
                                                                                            color: var(--spth-accent-text) !important;
                                                                                            font-weight: 700;
                                                                                            outline: 1.5px solid var(--spth-accent-border);
                                                                                            box-shadow: 0 0 0 2px color-mix(in hsl, var(--spth-accent) 30%, transparent);
                                                                                        }
                                                                                        /* เข้าถึงด้วยคีย์บอร์ดให้เด่นขึ้น */
                                                                                        
                                                                                        .spth-header .spth-nav a.nav-link:focus-visible,
                                                                                        .spth-drawer .spth-nav a.nav-link:focus-visible {
                                                                                            outline: 2px solid var(--spth-accent);
                                                                                            box-shadow: 0 0 0 4px color-mix(in hsl, var(--spth-accent) 30%, transparent);
                                                                                        }
                                                                                        /* ===== Hamburger contrast fix ===== */
                                                                                        
                                                                                         :root {
                                                                                            --spth-ham-fg: #111827;
                                                                                            /* สีเส้น 3 ขีด (light) */
                                                                                            --spth-ham-bg: #ffffff;
                                                                                            /* พื้นหลังปุ่ม (light) */
                                                                                            --spth-ham-border: rgba(0, 0, 0, .22);
                                                                                            /* เส้นขอบ (light) */
                                                                                            --spth-ham-hover: rgba(0, 0, 0, .06);
                                                                                            /* hover (light) */
                                                                                        }
                                                                                        
                                                                                        html.dark {
                                                                                            --spth-ham-fg: #f8fafc;
                                                                                            /* สีเส้น 3 ขีด (dark) */
                                                                                            --spth-ham-bg: #111827;
                                                                                            /* พื้นหลังปุ่ม (dark) */
                                                                                            --spth-ham-border: rgba(255, 255, 255, .35);
                                                                                            /* เส้นขอบ (dark) */
                                                                                            --spth-ham-hover: rgba(255, 255, 255, .12);
                                                                                            /* hover (dark) */
                                                                                        }
                                                                                        /* ปุ่ม hamburger */
                                                                                        
                                                                                        .spth-hamburger {
                                                                                            color: var(--spth-ham-fg);
                                                                                            background: var(--spth-ham-bg);
                                                                                            border-color: var(--spth-ham-border);
                                                                                        }
                                                                                        
                                                                                        .spth-hamburger span {
                                                                                            background: currentColor;
                                                                                            /* ให้ 3 ขีด ใช้สีเดียวกับตัวปุ่ม */
                                                                                        }
                                                                                        
                                                                                        .spth-hamburger:hover {
                                                                                            background: var(--spth-ham-hover);
                                                                                        }
                                                                                        /* ตอนเปิดเมนู ให้เด่นขึ้นอีกนิด */
                                                                                        
                                                                                        .spth-hamburger[aria-expanded="true"] {
                                                                                            outline: 2px solid color-mix(in hsl, var(--spth-ham-fg) 40%, transparent);
                                                                                            box-shadow: 0 0 0 4px color-mix(in hsl, var(--spth-ham-fg) 18%, transparent);
                                                                                        }