/* ==========================================================================
   Victoria Kaitan — Living Design Layer 2026
   --------------------------------------------------------------------------
   ชั้นดีไซน์ใหม่ที่โหลด "เป็นไฟล์สุดท้าย" ของทุกหน้า
   หลักการ:
     1) ไม่แตะ logic/โครงสร้าง HTML — ปรับเฉพาะ presentation
     2) ใช้ระบบตัวแปรเดิม (--vk-*, --brand, --buy-btn, Bootstrap) เป็นฐาน
        แล้วเขียนทับค่า เพื่อให้ทั้งเว็บเปลี่ยนพร้อมกันโดยไม่ต้องแก้ทีละหน้า
     3) โทนสีของเว็บถูกกำหนดจากหลังบ้านโทนเดียว (web_config.site_theme)
        → html[data-theme="dark"] | html[data-theme="light"]
     4) Glassmorphism แบบพอดี: พื้นทึบเกือบทั้งหมด + กระจกเฉพาะชั้นลอย
        (nav / modal / popup) ลด glow/neon ที่มากเกินไป
     5) ภาษาดีไซน์อ้างอิงสไตล์ร้านเกมสมัยใหม่: พื้นเข้มเกือบดำ (#070807),
        เส้นขอบบาง rgba(255,255,255,.08), การ์ดมุมโค้ง 16–20px,
        เงาซ้อนแบบ inset highlight + soft drop, ตัวอักษร LINE Seed Sans TH
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root,
html[data-theme="dark"]{
    /* พื้นผิว */
    --vk2-bg:            #070807;
    --vk2-bg-soft:       #0a0c0b;
    --vk2-surface:       #0e100f;
    --vk2-surface-2:     #141716;
    --vk2-surface-3:     #1a1e1c;
    --vk2-inset:         #0a0c0b;

    /* เส้นขอบ */
    --vk2-line:          rgba(255, 255, 255, .075);
    --vk2-line-2:        rgba(255, 255, 255, .13);
    --vk2-line-3:        rgba(255, 255, 255, .22);

    /* ตัวอักษร */
    --vk2-text:          #ededed;
    --vk2-dim:           rgba(237, 237, 237, .72);
    --vk2-mute:          rgba(237, 237, 237, .52);

    /* เงา/ความลึก */
    --vk2-hi:            inset 0 1px 0 rgba(255, 255, 255, .055);
    --vk2-hi-2:          inset 0 1px 0 rgba(255, 255, 255, .09);
    --vk2-shadow-sm:     0 1px 2px rgba(0, 0, 0, .45);
    --vk2-shadow:        0 1px 2px rgba(0, 0, 0, .45), 0 14px 34px -26px rgba(0, 0, 0, .78);
    --vk2-shadow-lg:     0 2px 6px rgba(0, 0, 0, .45), 0 30px 64px -34px rgba(0, 0, 0, .86);

    /* กระจก (ใช้เฉพาะชั้นลอย) */
    --vk2-glass:         rgba(11, 13, 12, .72);
    --vk2-glass-2:       rgba(14, 17, 16, .82);
    --vk2-blur:          saturate(150%) blur(18px);

    /* พื้นหลัง ambient รอบหน้า */
    --vk2-ambient-1:     rgba(41, 230, 178, .055);
    --vk2-ambient-2:     rgba(var(--brand-rgb, 93, 63, 211), .07);

    /* สีสถานะ */
    --vk2-ok:            #34d399;
    --vk2-warn:          #fbbf24;
    --vk2-danger:        #f87171;
    --vk2-info:          #38bdf8;

    color-scheme: dark;
}

html[data-theme="light"]{
    --vk2-bg:            #f4f5f6;
    --vk2-bg-soft:       #eef0f2;
    --vk2-surface:       #ffffff;
    --vk2-surface-2:     #f7f8f9;
    --vk2-surface-3:     #eef0f2;
    --vk2-inset:         #f4f5f6;

    --vk2-line:          rgba(9, 12, 11, .10);
    --vk2-line-2:        rgba(9, 12, 11, .17);
    --vk2-line-3:        rgba(9, 12, 11, .30);

    --vk2-text:          #0f1211;
    --vk2-dim:           #454d4a;
    --vk2-mute:          #6c7370;

    --vk2-hi:            inset 0 1px 0 rgba(255, 255, 255, .9);
    --vk2-hi-2:          inset 0 1px 0 rgba(255, 255, 255, .95);
    --vk2-shadow-sm:     0 1px 2px rgba(9, 12, 11, .06);
    --vk2-shadow:        0 1px 2px rgba(9, 12, 11, .05), 0 14px 30px -26px rgba(9, 12, 11, .22);
    --vk2-shadow-lg:     0 2px 6px rgba(9, 12, 11, .06), 0 26px 54px -34px rgba(9, 12, 11, .26);

    --vk2-glass:         rgba(255, 255, 255, .78);
    --vk2-glass-2:       rgba(255, 255, 255, .88);

    --vk2-ambient-1:     rgba(41, 230, 178, .10);
    --vk2-ambient-2:     rgba(var(--brand-rgb, 93, 63, 211), .08);

    --vk2-ok:            #059669;
    --vk2-warn:          #b45309;
    --vk2-danger:        #dc2626;
    --vk2-info:          #0369a1;

    color-scheme: light;
}

/* ผูกค่ากับระบบเดิม (ทั้งเว็บใช้ตัวแปรชุดนี้อยู่แล้ว → เปลี่ยนพร้อมกันทุกหน้า) */
:root,
html[data-theme="dark"],
html[data-theme="light"]{
    --vk-r-lg: 20px;
    --vk-r:    16px;
    --vk-r-sm: 12px;
    --vk-pill: 999px;
}

html[data-theme="dark"]{
    --vk-bg:          var(--vk2-bg);
    --vk-void:        #050605;
    --vk-surface:     var(--vk2-surface);
    --vk-surface-2:   var(--vk2-surface-2);
    --vk-surface-3:   var(--vk2-surface-3);
    --vk-input:       var(--vk2-inset);
    --vk-line:        var(--vk2-line);
    --vk-line-soft:   rgba(255, 255, 255, .05);
    --vk-line-strong: var(--vk2-line-3);
    --vk-text:        var(--vk2-text);
    --vk-dim:         var(--vk2-dim);
    --vk-mute:        var(--vk2-mute);
    --vk-shadow:      var(--vk2-shadow-sm);
    --vk-shadow-lg:   var(--vk2-shadow-lg);
    --vk-lift:        var(--vk2-shadow-sm);
    --vk-lift-lg:     var(--vk2-shadow);
    --vk-glass:           rgba(12, 14, 13, .88);
    --vk-glass-float:     var(--vk2-glass);
    --vk-glass-card:      var(--vk2-glass-2);
    --vk-glass-raise:     rgba(20, 23, 22, .90);
    --vk-glass-line:      var(--vk2-line);
    --vk-glass-hi:        var(--vk2-hi);
    --vk-glass-hi-lg:     var(--vk2-hi-2);
    --vk-glass-shadow:    var(--vk2-shadow-lg);
    --vk-glass-input:     rgba(0, 0, 0, .32);
    --vk-glass-nav:       var(--vk2-glass);
    --vk-glass-capsule:   rgba(255, 255, 255, .05);
    --vk-glass-blur:      var(--vk2-blur);
    --vk-glass-blur-sm:   saturate(140%) blur(12px);
    --vk-inset:           var(--vk2-inset);
    --vk-card:            var(--vk2-surface);
}

html[data-theme="light"]{
    --vk-bg:          var(--vk2-bg);
    --vk-void:        #ffffff;
    --vk-surface:     var(--vk2-surface);
    --vk-surface-2:   var(--vk2-surface-2);
    --vk-surface-3:   var(--vk2-surface-3);
    --vk-input:       var(--vk2-surface);
    --vk-line:        var(--vk2-line);
    --vk-line-soft:   rgba(9, 12, 11, .07);
    --vk-line-strong: var(--vk2-line-3);
    --vk-text:        var(--vk2-text);
    --vk-dim:         var(--vk2-dim);
    --vk-mute:        var(--vk2-mute);
    --vk-shadow:      var(--vk2-shadow-sm);
    --vk-shadow-lg:   var(--vk2-shadow-lg);
    --vk-lift:        var(--vk2-shadow-sm);
    --vk-lift-lg:     var(--vk2-shadow);
    --vk-glass:           rgba(255, 255, 255, .90);
    --vk-glass-float:     var(--vk2-glass);
    --vk-glass-card:      rgba(255, 255, 255, .86);
    --vk-glass-raise:     #ffffff;
    --vk-glass-line:      var(--vk2-line);
    --vk-glass-hi:        var(--vk2-hi);
    --vk-glass-hi-lg:     var(--vk2-hi-2);
    --vk-glass-shadow:    var(--vk2-shadow-lg);
    --vk-glass-input:     rgba(255, 255, 255, .80);
    --vk-glass-nav:       var(--vk2-glass);
    --vk-glass-capsule:   rgba(9, 12, 11, .05);
    --vk-glass-blur:      var(--vk2-blur);
    --vk-glass-blur-sm:   saturate(140%) blur(12px);
    --vk-inset:           var(--vk2-inset);
    --vk-card:            var(--vk2-surface);
}

/* -------------------------------------------------------------------- BASE */
html, body{
    background-color: var(--vk2-bg);
    color: var(--vk2-text);
}
body{
    font-family: "LINE Seed Sans TH", "LINE Seed Sans", "Noto Sans Thai", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html[data-theme="dark"] body{
    background-image:
        radial-gradient(1100px 520px at 12% -8%, var(--vk2-ambient-2), transparent 62%),
        radial-gradient(880px 460px at 92% 4%, var(--vk2-ambient-1), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
html[data-theme="light"] body{
    background-image:
        radial-gradient(1000px 480px at 12% -10%, var(--vk2-ambient-2), transparent 62%),
        radial-gradient(820px 420px at 92% 2%, var(--vk2-ambient-1), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

main{ background: transparent; }

::selection{ background: rgba(var(--brand-rgb, 93, 63, 211), .30); color: var(--vk2-text); }

/* สกรอลบาร์แบบบาง ไม่รบกวนสายตา */
*{ scrollbar-color: var(--vk2-line-3) transparent; scrollbar-width: thin; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
    background: var(--vk2-line-2);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{ background: var(--vk2-line-3); background-clip: content-box; }

/* ระยะขอบ/ความกว้างเนื้อหาให้หายใจเท่ากันทุกหน้า */
.container-wide{ max-width: 1240px; }
.container, .container-wide, .container-fluid{ padding-left: 18px; padding-right: 18px; }
section.mt-5{ margin-top: 40px !important; }
section.mt-4{ margin-top: 30px !important; }

/* หัวข้อหมวด (section-head) — ใช้ร่วมเกือบทุกหน้า */
.section-head{
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 14px; margin-bottom: 14px;
}
.section-head h1, .section-head h2, .section-head h3, .section-head h4, .section-head h5{
    color: var(--vk2-text);
    letter-spacing: -.3px;
    font-weight: 800;
}
.section-head .text-muted, .text-muted, .text-body-secondary{ color: var(--vk2-mute) !important; }
h1, h2, h3, h4, h5, h6{ color: var(--vk2-text); }
hr{ border-color: var(--vk2-line); opacity: 1; }

/* -------------------------------------------------------------------- NAV */
.navbar.site-nav, .site-nav{
    background: var(--vk2-glass) !important;
    -webkit-backdrop-filter: var(--vk2-blur);
            backdrop-filter: var(--vk2-blur);
    border-bottom: 1px solid var(--vk2-line) !important;
    box-shadow: none;
    min-height: 64px;
}
.site-nav::after{ display: none !important; }              /* ตัดเส้นไล่สีเดิม */
.site-nav .brand-logo{
    border-radius: 12px;
    background: var(--vk2-surface-2);
    border: 1px solid var(--vk2-line);
    padding: 3px;
    object-fit: contain;
}
.site-nav .brand-text{
    font-size: 17px; font-weight: 800; letter-spacing: -.3px;
    color: var(--vk2-text);
}
.site-nav .brand-accent{ color: var(--vk-accent, var(--brand)); }

/* เมนูหลัก: capsule เดียว + pill ที่เลือกเป็นสีแบรนด์แบบนุ่ม */
.nav-capsule-list{
    background: var(--vk-glass-capsule) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: var(--vk-pill) !important;
    padding: 4px !important;
    gap: 2px;
}
.nav-pill{
    padding: 8px 16px !important;
    border-radius: var(--vk-pill) !important;
    color: var(--vk2-dim) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: 1px solid transparent;
}
.nav-pill:hover{ color: var(--vk2-text) !important; background: var(--vk2-surface-2) !important; }
.nav-pill.active{
    color: #fff !important;
    background: var(--vk-accent-grad, var(--brand)) !important;
    background-origin: border-box !important;
    border-color: transparent !important;
    box-shadow: var(--vk2-shadow-sm);
}
.navbar-nav .nav-item{ margin: 0; }

/* กระเป๋าเงิน / ปุ่มบัญชี / ปุ่มเข้าสู่ระบบ–สมัคร */
.wallet-pill{
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 14px;
    border-radius: var(--vk-pill);
    background: var(--vk2-surface-2);
    border: 1px solid var(--vk2-line);
    color: var(--vk2-text) !important;
    font-size: 12.5px; font-weight: 700;
}
.wallet-pill i{ color: var(--vk2-ok); }
.avatar-btn{
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--vk-accent-grad, var(--brand));
    border: 1px solid var(--vk2-line-2);
    color: #fff; font-weight: 800; font-size: 14px;
    box-shadow: var(--vk2-shadow-sm);
}
.avatar-btn:hover{ filter: brightness(1.06); }
.login-btn{
    display: inline-flex; align-items: center; height: 38px;
    padding: 0 16px; border-radius: var(--vk-pill);
    background: var(--vk2-surface-2); border: 1px solid var(--vk2-line-2);
    color: var(--vk2-text) !important; font-size: 12.5px; font-weight: 700;
}
.login-btn:hover{ background: var(--vk2-surface-3); border-color: var(--vk2-line-3); }
.btn-register{
    display: inline-flex; align-items: center; height: 38px;
    padding: 0 18px; border-radius: var(--vk-pill);
    background: var(--vk-accent-grad, var(--brand));
    border: 1px solid var(--vk2-line-2);
    color: #fff !important; font-size: 12.5px; font-weight: 800;
    text-decoration: none;
    box-shadow: var(--vk2-shadow-sm);
}
.btn-register:hover{ color: #fff !important; filter: brightness(1.07); }
.navbar-toggler{
    border-radius: 12px; border-color: var(--vk2-line-2) !important;
    padding: 6px 9px;
}
.navbar-toggler:focus{ box-shadow: 0 0 0 3px var(--vk-accent-faint, rgba(var(--brand-rgb), .12)); }

/* dropdown เมนูผู้ใช้ */
.dropdown-menu.user-menu,
.dropdown-menu{
    background: var(--vk2-glass-2);
    -webkit-backdrop-filter: var(--vk2-blur);
            backdrop-filter: var(--vk2-blur);
    border: 1px solid var(--vk2-line);
    border-radius: 16px;
    box-shadow: var(--vk2-shadow-lg);
    padding: 6px;
    min-width: 235px;
}
.dropdown-item, .user-menu-link{
    border-radius: 10px;
    color: var(--vk2-dim) !important;
    font-size: 13px;
    padding: 9px 11px;
}
.dropdown-item:hover, .user-menu-link:hover{
    background: var(--vk2-surface-2) !important;
    color: var(--vk2-text) !important;
}
.dropdown-item i, .user-menu-link i{ color: var(--vk-accent, var(--brand)); width: 18px; text-align: center; }
.user-menu-head{ padding: 10px 12px 6px; }
.user-menu-head p{ color: var(--vk2-text); font-size: 13px; }
.user-menu-balance{
    margin: 2px 6px; padding: 9px 11px;
    border-radius: 10px;
    background: var(--vk2-surface-2);
    color: var(--vk2-text); font-weight: 700; font-size: 13px;
}
.user-divider{ margin: 6px 2px; border-color: var(--vk2-line); }
.user-menu-logout{ color: var(--vk2-danger) !important; }
.user-menu-logout i{ color: var(--vk2-danger) !important; }

/* แถบประกาศ + แบนเนอร์ */
.announce-bar{
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0 4px; padding: 11px 14px;
    border-radius: 16px;
    background: var(--vk2-surface);
    border: 1px solid var(--vk2-line);
    box-shadow: var(--vk2-shadow-sm);
}
.announce-bar .announce-text{ color: var(--vk2-dim); font-size: 13px; }
.announce-tag{
    border-radius: var(--vk-pill) !important;
    padding: 5px 12px !important;
    font-size: 11px !important; font-weight: 800;
    box-shadow: none !important;
    display: inline-flex; align-items: center; gap: 6px;
}
.hero-banners{
    margin-top: 16px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--vk2-line);
    background: var(--vk2-surface);
    box-shadow: var(--vk2-shadow);
}
.hb-slide img{ border-radius: 21px; }

/* ------------------------------------------------------------------ BUTTON */
.btn{ border-radius: 12px; font-weight: 700; font-size: 13.5px; }
.btn-primary, .btn-success, .btn-brand{
    background: var(--vk-accent-grad, var(--brand)) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: #fff !important;
    box-shadow: var(--vk2-shadow-sm);
}
.btn-primary:hover, .btn-success:hover, .btn-brand:hover{ filter: brightness(1.07); }
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-dark{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: var(--vk2-text) !important;
}
.btn-danger{ background: rgba(239, 68, 68, .14) !important; border: 1px solid rgba(239, 68, 68, .34) !important; color: var(--vk2-danger) !important; }
.btn-outline-primary{
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .07)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .32)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
}

/* -------------------------------------------------------------------- FORM */
.form-control, .form-select, textarea.form-control{
    background-color: var(--vk2-inset) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
    font-size: 13.5px;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.form-control::placeholder{ color: var(--vk2-mute) !important; }
.form-control:hover, .form-select:hover{ border-color: var(--vk2-line-2) !important; }
.form-control:focus, .form-select:focus{
    border-color: var(--vk-accent, var(--brand)) !important;
    box-shadow: 0 0 0 3px var(--vk-accent-faint, rgba(var(--brand-rgb), .12)) !important;
}
.form-label, label{ color: var(--vk2-dim); font-size: 12.5px; font-weight: 600; }
.form-check-input{
    background-color: var(--vk2-inset);
    border-color: var(--vk2-line-2);
}
.form-check-input:checked{ background-color: var(--vk-accent, var(--brand)); border-color: var(--vk-accent, var(--brand)); }
.form-text, .form-control:disabled{ color: var(--vk2-mute); }
.input-group-text{
    background: var(--vk2-surface-2); border-color: var(--vk2-line);
    color: var(--vk2-dim);
}

/* -------------------------------------------------------------------- CARD */
/* การ์ดสินค้า — มุมโค้ง 18px, เส้นบาง, ยกตัวด้วยเงา ไม่มี glow ตอน resting */
.product-card{
    background: var(--vk2-surface) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 42%) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm) !important;
    padding: 14px !important;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{
    border-color: rgba(var(--brand-rgb, 93, 63, 211), .42) !important;
    transform: translateY(-2px);
    box-shadow: var(--vk2-hi), var(--vk2-shadow) !important;
}
.product-card .product-image{
    border-radius: 14px !important;
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line);
}
.product-card .product-title{ color: var(--vk2-text) !important; font-size: 16px !important; font-weight: 700 !important; }
.product-card .product-description{ color: var(--vk2-mute) !important; font-size: 12.5px !important; }
.product-card .price{
    color: var(--vk2-text) !important;
    font-size: 20px !important; font-weight: 800 !important;
    display: inline-flex; align-items: baseline; gap: 4px;
}
.product-card .price small, .product-card .price span.unit{ color: var(--vk2-mute); }
.product-card .price-old{ color: var(--vk2-mute) !important; font-size: 12.5px !important; }
.product-card .status, .product-card .stock, .product-card .product-tag{
    border-radius: var(--vk-pill) !important;
    padding: 4px 10px !important;
    font-size: 10.5px !important; font-weight: 800;
    border: 1px solid var(--vk2-line-2);
    background: rgba(0, 0, 0, .55) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff !important;
}
.product-card .product-button, .product-card a.product-button, .buy-btn{
    height: 46px !important;
    border-radius: 13px !important;
    background: var(--vk-accent-grad, var(--brand)) !important;
    background-origin: border-box !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: #fff !important;
    font-size: 14px !important; font-weight: 800 !important;
    box-shadow: var(--vk2-shadow-sm);
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none;
}
.product-card .product-button:hover{ filter: brightness(1.07); }
.product-card .product-button:disabled{ filter: grayscale(.4) brightness(.9); }

/* การ์ดล่าสุด (ro-*) การ์ดหมวด (cat-*) การ์ดเมนูลัด (qm-*) สถิติ (stat-*) */
.ro-card, .ro-card-2{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--vk2-shadow-sm) !important;
}
.ro-card:hover{ border-color: var(--vk2-line-2) !important; }
.ro-title{ color: var(--vk2-text) !important; font-size: 13.5px !important; font-weight: 700; }
.ro-buyer, .ro-date{ color: var(--vk2-mute) !important; font-size: 12px; }
.ro-qty{ color: var(--vk2-dim) !important; }
.ro-badge{
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .07)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .3)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
    border-radius: var(--vk-pill) !important;
    font-size: 10px !important; font-weight: 800;
}

.cat-card{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm);
    transition: border-color .18s ease, transform .18s ease;
}
.cat-card:hover{ border-color: rgba(var(--brand-rgb, 93, 63, 211), .40) !important; transform: translateY(-2px); }
.cat-card-num{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    color: var(--vk2-dim) !important;
    border-radius: 10px !important;
}
.cat-count-badge{
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .08)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .28)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
    border-radius: var(--vk-pill) !important;
}
.cat-banner-tag{
    background: rgba(0, 0, 0, .55) !important;
    border: 1px solid var(--vk2-line-2) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: var(--vk-pill) !important;
}

.qm-card{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm);
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}
.qm-card:hover{ border-color: rgba(var(--brand-rgb, 93, 63, 211), .40) !important; transform: translateY(-2px); }
.qm-empty{ color: var(--vk2-mute) !important; }

.stat-item{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm);
}
.stat-item:hover{ border-color: var(--vk2-line-2) !important; }
.stat-item-label{ color: var(--vk2-mute) !important; font-size: 12px !important; letter-spacing: .2px; }
.stat-item-value{ color: var(--vk2-text) !important; font-weight: 800 !important; }
.stat-item-unit{ color: var(--vk2-mute) !important; font-weight: 600; }
.stat-item-wm{ color: var(--vk2-line-2) !important; }

/* การ์ดกลางที่ใช้ซ้ำในหน้าผู้ใช้/แอดมิน */
.acc-card, .allh-card, .tp-card, .idb-card, .pd-frame, .farm-card, .qb-card, .wst-card, .ds-card{
    border-radius: 18px !important;
    border: 1px solid var(--vk2-line) !important;
    background: var(--vk2-surface) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%) !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm) !important;
}
.acc-card-head, .allh-card-head, .idb-card-head, .card-head{
    border-color: var(--vk2-line) !important;
    background: transparent !important;
}
.card-head h5, .acc-card-title, .allh-card-title{ color: var(--vk2-text) !important; font-weight: 800; letter-spacing: -.2px; }
.acc-card-sub, .allh-card-sub, .card-head-sub{ color: var(--vk2-mute) !important; }
.acc-card-icon, .card-head-icon{
    border-radius: 12px !important;
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .07)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .28)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
}
.acc-stat, .acc-stat-info, .tp-step{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 14px !important;
}
.acc-stat-label, .acc-stat-info, .tp-step-text{ color: var(--vk2-mute) !important; }
.acc-stat-value{ color: var(--vk2-text) !important; font-weight: 800; }
.tp-step-num{
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .08)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .3)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
    border-radius: 50% !important;
}

/* ------------------------------------------------------------------- TABLE */
.table{ color: var(--vk2-dim); border-color: var(--vk2-line); --bs-table-bg: transparent; }
.table > :not(caption) > * > *{ border-color: var(--vk2-line) !important; background: transparent; }
.table thead th, table.dataTable thead th{
    background: var(--vk2-surface-2) !important;
    color: var(--vk2-mute) !important;
    font-size: 12px; font-weight: 700; letter-spacing: .3px;
    border-bottom: 1px solid var(--vk2-line) !important;
    text-transform: none;
}
.table tbody td{ color: var(--vk2-text); font-size: 13px; }
.table-hover tbody tr:hover > *{ background: var(--vk2-surface-2) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    background: var(--vk2-inset); border: 1px solid var(--vk2-line);
    border-radius: 10px; color: var(--vk2-text); padding: 6px 10px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{ color: var(--vk2-mute); font-size: 12.5px; }
.page-link{
    background: var(--vk2-surface-2); border-color: var(--vk2-line);
    color: var(--vk2-dim); border-radius: 10px !important; margin: 0 2px;
}
.page-item.active .page-link{ background: var(--vk-accent, var(--brand)); border-color: transparent; color: #fff; }

/* ------------------------------------------------------------------- MODAL */
.modal-content{
    background: var(--vk2-glass-2) !important;
    -webkit-backdrop-filter: var(--vk2-blur); backdrop-filter: var(--vk2-blur);
    border: 1px solid var(--vk2-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--vk2-shadow-lg) !important;
    color: var(--vk2-text);
}
.modal-header, .modal-footer{ border-color: var(--vk2-line) !important; }
.modal-title{ font-weight: 800; letter-spacing: -.2px; }
.btn-close{ filter: var(--vk2-close-filter, invert(1) grayscale(1) brightness(1.6)); opacity: .7; }
.modal-backdrop.show{ opacity: .62; }

.swal2-popup{
    background: var(--vk2-glass-2) !important;
    -webkit-backdrop-filter: var(--vk2-blur); backdrop-filter: var(--vk2-blur);
    border: 1px solid var(--vk2-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--vk2-shadow-lg) !important;
    color: var(--vk2-text) !important;
}
.swal2-title{ color: var(--vk2-text) !important; font-size: 18px !important; font-weight: 800 !important; }
.swal2-html-container{ color: var(--vk2-dim) !important; font-size: 13.5px !important; }
.swal2-confirm, .swal2-styled.swal2-confirm{
    background: var(--vk-accent-grad, var(--brand)) !important;
    border-radius: 12px !important; font-weight: 700 !important;
    box-shadow: var(--vk2-shadow-sm) !important;
}
.swal2-cancel, .swal2-styled.swal2-cancel{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: var(--vk2-text) !important;
    border-radius: 12px !important; font-weight: 700 !important;
}

/* แจ้งเตือนลอย (toast) */
.app-toast, .auth-toast{
    background: var(--vk2-glass-2) !important;
    -webkit-backdrop-filter: var(--vk2-blur); backdrop-filter: var(--vk2-blur);
    border: 1px solid var(--vk2-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--vk2-shadow-lg) !important;
    color: var(--vk2-text) !important;
}

/* ------------------------------------------------------------- BADGE/CHIP */
.badge{
    border-radius: var(--vk-pill) !important;
    font-weight: 700;
    padding: 5px 10px;
    border: 1px solid var(--vk2-line-2);
    background: var(--vk2-surface-2);
    color: var(--vk2-dim) !important;
}
.badge.bg-success, .badge.badge-success, .badge.bg-green{ background: rgba(52, 211, 153, .14) !important; border-color: rgba(52, 211, 153, .34) !important; color: var(--vk2-ok) !important; }
.badge.bg-warning, .badge.badge-warning{ background: rgba(251, 191, 36, .14) !important; border-color: rgba(251, 191, 36, .34) !important; color: var(--vk2-warn) !important; }
.badge.bg-danger, .badge.badge-danger{ background: rgba(248, 113, 113, .14) !important; border-color: rgba(248, 113, 113, .34) !important; color: var(--vk2-danger) !important; }
.badge.bg-info, .badge.badge-info{ background: rgba(56, 189, 248, .14) !important; border-color: rgba(56, 189, 248, .34) !important; color: var(--vk2-info) !important; }
.badge.bg-primary, .badge.badge-purple{ background: var(--vk-accent-faint, rgba(var(--brand-rgb), .08)) !important; border-color: var(--vk-accent-line, rgba(var(--brand-rgb), .3)) !important; color: var(--vk-accent-lt, var(--brand)) !important; }

/* ลิงก์/ข้อความช่วย */
a{ color: var(--vk-accent-lt, var(--brand)); }
a:hover{ color: var(--vk-accent, var(--brand)); }
.text-white{ color: var(--vk2-text) !important; }
.text-white-50, .opacity-75{ color: var(--vk2-mute) !important; }
small, .small{ font-size: 12px; }

/* ============================================================ COMPONENT SET
   กลุ่มคอมโพเนนต์ที่ใช้ซ้ำในหลายหน้า (การ์ดร้านค้า/ไอดี, เติมเงิน, บัญชี,
   ประวัติ, ป๊อปอัป) ปรับให้ใช้ผิว/เส้น/มุมเดียวกันกับส่วนอื่นทั้งเว็บ
   ========================================================================= */

/* การ์ดร้านค้า / รายการไอดี (idb-*) */
.idb-card{
    background: var(--vk2-surface) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm) !important;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}
.idb-card:hover{ border-color: rgba(var(--brand-rgb, 93, 63, 211), .40) !important; transform: translateY(-2px); }
.idb-banner{ background: var(--vk2-surface-2) !important; }
.idb-banner img{ border-radius: 0; }
.idb-fallback{ color: var(--vk2-line-3) !important; }
.idb-overlay{ background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .62) 100%) !important; }
.idb-name{ color: var(--vk2-text) !important; font-weight: 700; }
.idb-sub{ color: var(--vk2-mute) !important; }
.idb-count, .idb-pill{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: var(--vk-pill) !important;
    color: var(--vk2-dim) !important;
    font-size: 11.5px; font-weight: 700;
}
.idb-text-title{ color: var(--vk2-text) !important; }
.idb-text-small{ color: var(--vk2-mute) !important; }
.idb-head{ border-color: var(--vk2-line) !important; }

.empty-box{
    background: var(--vk2-surface) !important;
    border: 1px dashed var(--vk2-line-2) !important;
    border-radius: 18px !important;
    color: var(--vk2-mute) !important;
    padding: 26px 20px !important;
}

.btn-pill{ border-radius: var(--vk-pill) !important; }
.btn-sm{ font-size: 12.5px; }
.vk-queue-btn{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: var(--vk2-text) !important;
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 7px;
}
.vk-queue-btn:hover{ border-color: var(--vk-accent-line, rgba(var(--brand-rgb), .35)) !important; color: var(--vk2-text) !important; }

/* เติมเงิน (tp-*) */
.tp-container, .tp-wrap{ color: var(--vk2-text); }
.tp-panel, .tp-card, .tp-methods, .tp-form, .tp-why{
    background: var(--vk2-surface) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm) !important;
}
.tp-title, .tp-card-title, .tp-panel-title, .tp-name, .tp-why-title{ color: var(--vk2-text) !important; font-weight: 800; letter-spacing: -.2px; }
.tp-sub, .tp-desc, .tp-panel-sub, .tp-why-desc, .tp-help, .tp-fee, .tp-eyebrow{ color: var(--vk2-mute) !important; }
.tp-card-ico, .tp-panel-icon, .tp-icon, .tp-xi{
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .07)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .28)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
    border-radius: 14px !important;
}
.tp-method{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 16px !important;
}
.tp-method:hover, .tp-method.is-active{ border-color: var(--vk-accent-line, rgba(var(--brand-rgb), .38)) !important; }
.tp-badge{
    border-radius: var(--vk-pill) !important;
    background: var(--vk2-surface-3) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: var(--vk2-dim) !important;
    font-weight: 800;
}
.tp-badge-hot{ background: rgba(248, 113, 113, .14) !important; border-color: rgba(248, 113, 113, .34) !important; color: var(--vk2-danger) !important; }
.tp-badge-auto{ background: rgba(52, 211, 153, .14) !important; border-color: rgba(52, 211, 153, .34) !important; color: var(--vk2-ok) !important; }
.tp-input, .tp-amt-input{
    background: var(--vk2-inset) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
}
.tp-pay-btn, .tp-btn{
    border-radius: 13px !important;
    background: var(--vk-accent-grad, var(--brand)) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: #fff !important;
    font-weight: 800;
    box-shadow: var(--vk2-shadow-sm);
}
.tp-banner, .tp-qr-box, .tp-qr-img-wrap{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
}
.tp-status, .tp-qr-status{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 14px !important;
    color: var(--vk2-dim) !important;
}
.tp-status-title, .tp-qr-title{ color: var(--vk2-text) !important; font-weight: 800; }
.tp-status-sub, .tp-qr-sub{ color: var(--vk2-mute) !important; }
.tp-modal-overlay{ background: rgba(2, 3, 3, .62) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tp-modal{
    background: var(--vk2-glass-2) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--vk2-shadow-lg) !important;
}

/* ประวัติ/ธุรกรรม (allh-*) */
.allh-tabs, .allh-tab{
    border-radius: var(--vk-pill) !important;
}
.allh-tab{ color: var(--vk2-mute) !important; }
.allh-tab.active{ color: #fff !important; background: var(--vk-accent-grad, var(--brand)) !important; }
.allh-row{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 16px !important;
}
.allh-info .allh-type{ color: var(--vk2-text) !important; font-weight: 700; }
.allh-amt-in{ color: var(--vk2-ok) !important; }
.allh-amt-out{ color: var(--vk2-danger) !important; }
.allh-amt-none, .allh-qty{ color: var(--vk2-mute) !important; }
.allh-status{
    border-radius: var(--vk-pill) !important;
    border: 1px solid var(--vk2-line-2) !important;
    background: var(--vk2-surface-2) !important;
    color: var(--vk2-dim) !important;
    font-weight: 700;
}
.allh-status-ok{ background: rgba(52, 211, 153, .14) !important; border-color: rgba(52, 211, 153, .34) !important; color: var(--vk2-ok) !important; }
.allh-status-wait{ background: rgba(251, 191, 36, .14) !important; border-color: rgba(251, 191, 36, .34) !important; color: var(--vk2-warn) !important; }
.allh-status-bad{ background: rgba(248, 113, 113, .14) !important; border-color: rgba(248, 113, 113, .34) !important; color: var(--vk2-danger) !important; }

/* บัญชีผู้ใช้ (acc-*) */
.acc-menu{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
}
.acc-menu-item{ color: var(--vk2-dim) !important; border-radius: 12px !important; }
.acc-menu-item:hover{ background: var(--vk2-surface-2) !important; color: var(--vk2-text) !important; }
.acc-menu-item.active{ background: var(--vk-accent-faint, rgba(var(--brand-rgb), .08)) !important; color: var(--vk-accent-lt, var(--brand)) !important; }
.acc-menu-title, .acc-name, .acc-label{ color: var(--vk2-text) !important; }
.acc-hint, .acc-field .acc-hint{ color: var(--vk2-mute) !important; }
.acc-input{
    background: var(--vk2-inset) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
}
.acc-save{
    background: var(--vk-accent-grad, var(--brand)) !important;
    border: 1px solid var(--vk2-line-2) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 800;
}
.acc-avatar{
    border: 1px solid var(--vk2-line-2) !important;
    background: var(--vk-accent-grad, var(--brand)) !important;
    color: #fff !important;
    border-radius: 50% !important;
}
.acc-rank{
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .08)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .3)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
    border-radius: var(--vk-pill) !important;
}
.acc-st-ok{ color: var(--vk2-ok) !important; }
.acc-st-wait{ color: var(--vk2-warn) !important; }
.acc-st-bad{ color: var(--vk2-danger) !important; }
.acc-table thead th{ background: var(--vk2-surface-2) !important; color: var(--vk2-mute) !important; }
.acc-table tbody td{ color: var(--vk2-text) !important; border-color: var(--vk2-line) !important; }
.acc-code, .acc-code-user, .acc-code-pass{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
}

/* ป๊อปอัปประกาศ (app-popup-*) */
.app-popup-overlay{ background: rgba(2, 3, 3, .68) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.app-popup{
    background: var(--vk2-glass-2) !important;
    -webkit-backdrop-filter: var(--vk2-blur); backdrop-filter: var(--vk2-blur);
    border: 1px solid var(--vk2-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--vk2-shadow-lg) !important;
    overflow: hidden;
}
.app-popup-media{ background: var(--vk2-surface-2) !important; }
.app-popup-title{ color: var(--vk2-text) !important; font-weight: 800; }
.app-popup-text{ color: var(--vk2-dim) !important; }
.app-popup-cta{
    background: var(--vk-accent-grad, var(--brand)) !important;
    border-radius: var(--vk-pill) !important;
    color: #fff !important; font-weight: 800;
}
.app-popup-skip, .app-popup-close{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line-2) !important;
    border-radius: var(--vk-pill) !important;
    color: var(--vk2-dim) !important;
}
.app-popup-close{ border-radius: 50% !important; }

/* รายการล่าสุด (ro-*) ส่วนที่เหลือ */
.ro-thumb, .ro-fallback{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 14px !important;
    color: var(--vk2-mute) !important;
}
.ro-qty-badge{
    background: rgba(0, 0, 0, .62) !important;
    border: 1px solid var(--vk2-line-2) !important;
    border-radius: var(--vk-pill) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ro-avatar{
    background: var(--vk-accent-grad, var(--brand)) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: #fff !important;
    border-radius: 50% !important;
}
.ro-price{ color: var(--vk2-text) !important; font-weight: 800; }
.ro-name, .ro-user{ color: var(--vk2-dim) !important; }
.ro-bottom, .ro-top{ border-color: var(--vk2-line) !important; }
.ro-marquee{ mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }

/* ------------------------------------------------------------------ FOOTER */
body > footer, footer{
    margin-top: 56px;
    padding: 30px 0 26px;
    border-top: 1px solid var(--vk2-line);
    background: transparent;
    color: var(--vk2-mute);
    font-size: 12.5px;
}
.footer-link{
    color: var(--vk2-dim) !important;
    text-decoration: none;
    border-bottom: 1px dashed var(--vk2-line-2);
}
.footer-link:hover{ color: var(--vk2-text) !important; }
.site-footer, footer.site-footer{
    margin-top: 56px;
    padding: 34px 0 30px;
    border-top: 1px solid var(--vk2-line);
    background: transparent;
    color: var(--vk2-mute);
}
.site-footer a{ color: var(--vk2-dim); text-decoration: none; }
.site-footer a:hover{ color: var(--vk2-text); }

/* ------------------------------------------------------------------ MOBILE */
@media (max-width: 991.98px){
    .navbar-collapse{
        margin-top: 10px;
        padding: 10px;
        border-radius: 18px;
        background: var(--vk2-glass-2);
        -webkit-backdrop-filter: var(--vk2-blur); backdrop-filter: var(--vk2-blur);
        border: 1px solid var(--vk2-line);
        box-shadow: var(--vk2-shadow);
    }
    .nav-capsule-list{ background: transparent !important; border-color: transparent !important; padding: 0 !important; }
    .nav-pill{ padding: 10px 14px !important; }
    .nav-item{ margin: 2px 0; }
}
@media (max-width: 575.98px){
    .container, .container-wide{ padding-left: 14px; padding-right: 14px; }
    .announce-bar{ border-radius: 14px; }
    .product-card{ border-radius: 16px !important; padding: 12px !important; }
}

/* ============================================================== PAGE SHELLS
   เปลือกหน้า/ช่องกรอกที่เดิมกำหนดสีเข้มตายตัวไว้ใน CSS ชุดเก่า
   (หน้าเหล่านี้ไม่มีคลาส Bootstrap กํากับ) → ดึงกลับมาใช้สีชุดเดียวกันทั้งเว็บ
   ========================================================================= */
main.acc-wrap, main.acc-main, .acc-container, main.pay-wrap, .pay-box{
    background: transparent !important;
}
.acc-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.acc-main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.acc-card input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.acc-input input, input.acc-input, .inpu-box .form-control, .auth-field .form-control{
    background: var(--vk2-inset) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
    box-shadow: none !important;
}
.acc-wrap input:focus, .acc-main input:focus, .acc-card input:focus, input.acc-input:focus{
    border-color: var(--vk-accent, var(--brand)) !important;
    box-shadow: 0 0 0 3px var(--vk-accent-faint, rgba(var(--brand-rgb), .12)) !important;
}
/* ตารางในหน้าบัญชี: ห้ามแถบสลับสีเดิมทับ */
.acc-table tbody tr:nth-child(even) td{ background: var(--vk2-surface-2) !important; }
.acc-table tbody tr:hover td,
.acc-table tbody tr:nth-child(even):hover td{ background: var(--vk2-surface-3) !important; }
.acc-side, .acc-card{ background: var(--vk2-surface) !important; }
.upload-zone{
    background: var(--vk2-surface-2) !important;
    border: 1px dashed var(--vk2-line-2) !important;
    border-radius: 16px !important;
    color: var(--vk2-mute) !important;
}
.upload-zone:hover{ border-color: var(--vk-accent-line, rgba(var(--brand-rgb), .4)) !important; background: var(--vk2-surface-3) !important; }
.tp-disabled{ background: var(--vk2-surface-2) !important; border: 1px solid var(--vk2-line) !important; border-radius: 16px !important; }
.pay-box{ border: 1px solid var(--vk2-line) !important; border-radius: 18px !important; }

/* หน้ารายละเอียดสินค้าเกมพาส (detail-*) */
.detail-footnote, .detail-desc-box, .detail-cover{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 16px !important;
    color: var(--vk2-dim) !important;
}
.detail-title{ color: var(--vk2-text) !important; }
.detail-sub, .detail-desc-line, .detail-old{ color: var(--vk2-mute) !important; }
.detail-price{ color: var(--vk2-text) !important; font-weight: 800; }
.detail-desc-title{ color: var(--vk2-text) !important; }
.detail-status{ border-radius: var(--vk-pill) !important; }

/* หน้ารายการไอดี / ประวัติไอดี (idh-*) */
.idh-row, .idh-summary, .idh-price-box, .idh-metric, .idh-cred{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 16px !important;
}
.idh-title, .idh-metric-value, .idh-price{ color: var(--vk2-text) !important; }
.idh-meta, .idh-metric-label, .idh-count, .idh-num{ color: var(--vk2-mute) !important; }
.idh-thumb{ background: var(--vk2-surface-2) !important; border: 1px solid var(--vk2-line) !important; border-radius: 12px !important; }
.idh-tag, .idh-qty-badge{
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .08)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .28)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
    border-radius: var(--vk-pill) !important;
}
.idh-search input, .idh-select{
    background: var(--vk2-inset) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
}
.idh-cred-user, .idh-cred-pass, .idh-cred-body, .idh-cred-text{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    color: var(--vk2-text) !important;
    border-radius: 12px !important;
}
.idh-empty{
    background: var(--vk2-surface-2) !important;
    border: 1px dashed var(--vk2-line-2) !important;
    border-radius: 16px !important;
    color: var(--vk2-mute) !important;
}

/* ---- ฟาร์ม (farm-*) : สไตล์อยู่ในไฟล์วิว จึงต้องเขียนทับตรง ---- */
.farm-card, .farm-table-wrap, .farm-panel{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm) !important;
}
.farm-chip{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    color: var(--vk2-dim) !important;
    border-radius: var(--vk-pill) !important;
}
.farm-chip span, .farm-field label, .farm-muted, .farm-steps-list li{ color: var(--vk2-mute) !important; }
.farm-input, .farm-field input, .farm-field select, .farm-field textarea{
    background: var(--vk2-inset) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
}
.farm-table thead th{
    background: var(--vk2-surface-2) !important;
    color: var(--vk2-mute) !important;
    border-color: var(--vk2-line) !important;
}
.farm-table tbody td{ color: var(--vk2-text) !important; border-color: var(--vk2-line) !important; }
.farm-table tbody tr:hover{ background: var(--vk2-surface-2) !important; }
.farm-btn, .farm-btn-primary{
    background: var(--vk-accent-grad, var(--brand)) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: #fff !important; border-radius: 12px !important; font-weight: 700;
}
.farm-btn-ghost{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: var(--vk2-text) !important; border-radius: 12px !important;
}

/* ---- ตารางคิว (qp-*/qb-*) : สไตล์อยู่ในไฟล์วิว ---- */
.qb-card, .qb-stat, .qb-reset, .qb-search{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm) !important;
}
.qb-head, .qb-foot{ border-color: var(--vk2-line) !important; }
.qb-ico{
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .08)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .28)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
    border-radius: 14px !important;
}
.qb-title, .qb-stat-val{ color: var(--vk2-text) !important; }
.qb-sub, .qb-time, .qb-stat-top, .qb-stat-foot, .qb-stat-val small{ color: var(--vk2-mute) !important; }
.qb-table thead th{ background: var(--vk2-surface-2) !important; color: var(--vk2-mute) !important; }
.qb-table tbody td{ color: var(--vk2-text) !important; border-color: var(--vk2-line) !important; }
.qb-search input{
    background: var(--vk2-inset) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
}
.vkq-shell, .vkq-page{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm) !important;
}
.vkq-head{ border-color: var(--vk2-line) !important; }
.vkq-title{ color: var(--vk2-text) !important; }
.vkq-sub{ color: var(--vk2-mute) !important; }

/* ---- แอดมิน DS (สไตล์อยู่ใน partial/admin_ds.ejs) ---- */
.ds-input, .ds-textarea, .ds-select{
    background: var(--vk2-inset) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
}
.ds-input:focus, .ds-textarea:focus, .ds-select:focus{
    background: var(--vk2-inset) !important;
    border-color: var(--vk-accent, var(--brand)) !important;
    box-shadow: 0 0 0 3px var(--vk-accent-faint, rgba(var(--brand-rgb), .12)) !important;
}
.ds-select option{ background: var(--vk2-surface-2) !important; color: var(--vk2-text) !important; }
.ds-card, .ds-tile, .ds-item, .ds-empty, .ds-modal-card{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
}
.ds-item{ border-radius: 14px !important; }
.ds-item:hover{ background: var(--vk2-surface-2) !important; }
.ds-card-title, .ds-title, .ds-item-title, .ds-tile-name, .ds-stat-value, .ds-modal-title{ color: var(--vk2-text) !important; }
.ds-label, .ds-sub, .ds-empty-title, .ds-legend, .ds-switch-title{ color: var(--vk2-dim) !important; }
.ds-modal-foot{ background: var(--vk2-surface-2) !important; }
.ds-table thead th{ background: var(--vk2-surface-2) !important; color: var(--vk2-mute) !important; }
.ds-table tbody td{ color: var(--vk2-text) !important; border-color: var(--vk2-line) !important; }

/* ---- หน้ารายละเอียดสต็อกไอดี (pd-*) : สไตล์อยู่ในไฟล์วิว ---- */
.pd-page .pd-frame, .pd-frame{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow) !important;
}
.pd-label{ color: var(--vk2-mute) !important; }
.pd-value, .pd-title{ color: var(--vk2-text) !important; }
.pd-price-band{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 14px !important;
}
.pd-step, .pd-qty-input{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line-2) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
}
.pd-buy{
    background: var(--vk-accent-grad, var(--brand)) !important;
    border: 1px solid transparent !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    border-radius: 14px !important;
    color: #fff !important; font-weight: 800;
}
.pd-buy:disabled{ background: var(--vk2-surface-3) !important; color: var(--vk2-mute) !important; }
/* #buyBtn (style.css) ตั้ง background ด้วย shorthand !important ซึ่งรีเซ็ต origin/repeat ทำให้ gradient วนซ้ำในขอบล่างเป็นเส้นขาว */
#buyBtn.pd-buy{ background-origin: border-box !important; background-clip: border-box !important; background-repeat: no-repeat !important; }

/* ลดการเคลื่อนไหวสำหรับผู้ใช้ที่ตั้งค่าระบบไว้ */
@media (prefers-reduced-motion: reduce){
    .product-card, .cat-card, .qm-card, .stat-item, .btn, .nav-pill{ transition: none !important; }
}

/* ============================================================== ADMIN SHELL
   หลังบ้านใช้ตัวแปร --ds-* ซึ่งดึงค่าต่อจาก --vk-* อยู่แล้ว → สี/โทนเปลี่ยนตาม
   อัตโนมัติ ส่วนนี้ปรับผิว/เส้น/มุม ของเปลือกหลังบ้านให้เข้าชุดกับหน้าบ้าน
   (ไม่แตะโครงสร้างเมนู/ตาราง/ฟอร์ม เพื่อไม่ให้กระทบการใช้งานของแอดมิน)
   ========================================================================= */
body.admin-panel{ background: var(--vk2-bg) !important; }

/* admin-modern.css ตั้งกฎด้วย body.admin-panel .x !important → ต้องเพิ่มความจำเพาะให้เท่ากัน */
body.admin-panel .admin-header{
    background: var(--vk2-glass) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk2-blur) !important; backdrop-filter: var(--vk2-blur) !important;
    border-bottom: 1px solid var(--vk2-line) !important;
    box-shadow: none !important;
}
body.admin-panel .admin-sidebar{
    background: var(--vk2-surface) !important;
    border-right: 1px solid var(--vk2-line) !important;
    box-shadow: none !important;
}
body.admin-panel .admin-main,
body.admin-panel .admin-content{
    background: transparent !important;
    background-image: none !important;
}
.sidebar-logo-text{ color: var(--vk2-text) !important; font-weight: 800; }
.sidebar-section-title{
    color: var(--vk2-mute) !important;
    font-size: 11px !important; letter-spacing: .6px;
}
.sidebar-search, .admin-search{
    background: transparent !important;
    border: 0 !important;
}
.sidebar-search input, .admin-search input{
    background: var(--vk2-inset) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
}
body.admin-panel .sidebar-link{
    border-radius: 12px !important;
    color: var(--vk2-dim) !important;
    font-weight: 600;
}
body.admin-panel .sidebar-link:hover{ background: var(--vk2-surface-2) !important; color: var(--vk2-text) !important; }
body.admin-panel .sidebar-link.active{
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .09)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .28));
}

.page-header{ margin-bottom: 20px; }
.page-title, .admin-card-title, .ds-title, .ds-card-title, .stat-card-value, .admin-modal-title{
    color: var(--vk2-text) !important;
}
.page-title{ letter-spacing: -.4px; font-weight: 800; }
.page-subtitle, .admin-card-sub, .stat-card-label, .stat-card-sub{ color: var(--vk2-mute) !important; }

.admin-card, .stat-card, .admin-panel{
    background: var(--vk2-surface) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vk2-hi), var(--vk2-shadow-sm) !important;
}
.stat-card:hover{ border-color: var(--vk2-line-2) !important; }
.admin-card-header, .admin-card-footer{ border-color: var(--vk2-line) !important; background: transparent !important; }
.stat-card-icon{
    background: var(--vk-accent-faint, rgba(var(--brand-rgb), .08)) !important;
    border: 1px solid var(--vk-accent-line, rgba(var(--brand-rgb), .26)) !important;
    color: var(--vk-accent-lt, var(--brand)) !important;
    border-radius: 14px !important;
}

.admin-table-wrapper{ border-radius: 16px !important; border: 1px solid var(--vk2-line) !important; }
.admin-table thead th{
    background: var(--vk2-surface-2) !important;
    color: var(--vk2-mute) !important;
    border-color: var(--vk2-line) !important;
    font-size: 12px; font-weight: 700;
}
.admin-table tbody td{ color: var(--vk2-text) !important; border-color: var(--vk2-line) !important; }
.admin-table tbody tr:hover td{ background: var(--vk2-surface-2) !important; }

.admin-input, .admin-select, .admin-textarea{
    background: var(--vk2-inset) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 12px !important;
    color: var(--vk2-text) !important;
}
.admin-input:focus, .admin-select:focus, .admin-textarea:focus{
    border-color: var(--vk-accent, var(--brand)) !important;
    box-shadow: 0 0 0 3px var(--vk-accent-faint, rgba(var(--brand-rgb), .12)) !important;
}
.admin-label, .admin-form-group label{ color: var(--vk2-dim) !important; }

.admin-btn{ border-radius: 12px !important; font-weight: 700; }
.admin-btn-primary{
    background: var(--vk-accent-grad, var(--brand)) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: #fff !important;
}
.admin-btn-secondary, .admin-btn-ghost{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line-2) !important;
    color: var(--vk2-text) !important;
}
.admin-btn-danger{ background: rgba(248, 113, 113, .14) !important; border: 1px solid rgba(248, 113, 113, .34) !important; color: var(--vk2-danger) !important; }
.admin-tabs, .admin-tab{ border-radius: 12px !important; }
.admin-tab{ color: var(--vk2-mute) !important; }
.admin-tab.active{ color: #fff !important; background: var(--vk-accent-grad, var(--brand)) !important; }
.admin-modal-overlay{ background: rgba(2, 3, 3, .62) !important; }
.admin-modal{
    background: var(--vk2-glass-2) !important;
    -webkit-backdrop-filter: var(--vk2-blur); backdrop-filter: var(--vk2-blur);
    border: 1px solid var(--vk2-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--vk2-shadow-lg) !important;
}
.admin-modal-header, .admin-modal-footer{ border-color: var(--vk2-line) !important; }
.admin-empty{
    background: var(--vk2-surface-2) !important;
    border: 1px dashed var(--vk2-line-2) !important;
    border-radius: 16px !important;
}
.admin-toolbar, .admin-dropdown-menu{
    background: var(--vk2-surface) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 16px !important;
}
.admin-dropdown-item{ color: var(--vk2-dim) !important; border-radius: 10px !important; }
.admin-dropdown-item:hover{ background: var(--vk2-surface-2) !important; color: var(--vk2-text) !important; }
.admin-toggle-slider{ background: var(--vk2-line-2) !important; }
.admin-pagination a, .admin-page-btn{
    background: var(--vk2-surface-2) !important;
    border: 1px solid var(--vk2-line) !important;
    border-radius: 10px !important;
    color: var(--vk2-dim) !important;
}
.admin-pagination a.active, .admin-page-btn.active{ background: var(--vk-accent, var(--brand)) !important; color: #fff !important; border-color: transparent !important; }

/* โหมดสว่าง: ปุ่ม/ป้ายที่เดิมบังคับตัวอักษรขาว ให้กลับมาอ่านออก */
html[data-theme="light"] .btn-register,
html[data-theme="light"] .avatar-btn,
html[data-theme="light"] .admin-btn-primary,
html[data-theme="light"] .nav-pill.active,
html[data-theme="light"] .product-card .product-button{
    color: #fff !important;
}
html[data-theme="light"] .btn-close{ filter: invert(1) grayscale(1) brightness(.35); }

/* โหมดสว่าง: สีแบรนด์ที่ตั้งจากหลังบ้านถูกใช้เป็น "สีตัวอักษร" ในหลายจุด
   บนพื้นขาวแล้วอ่านยาก → เข้มขึ้นโดยยังคงเฉดสีเดิมของร้าน (color-mix)
   (สีปุ่มที่ตัวอักษรขาวไม่ได้รับผลกระทบ เพราะยังเป็นไล่สีเข้มอยู่แล้ว) */
html[data-theme="light"]{
    --vk-accent:    color-mix(in srgb, var(--brand, #5D3FD3) 58%, #0b0f0e);
    --vk-accent-lt: color-mix(in srgb, var(--brand, #5D3FD3) 46%, #0b0f0e);
    --vk-accent-dp: color-mix(in srgb, var(--brand-dark, #452e9c) 62%, #0b0f0e);
}
/* พื้น "สีแบรนด์ทึบ" สำหรับข้อความตัวอักษรสีขาว (เช่น ปุ่ม/ชิปที่เลือกอยู่)
   โหมดมืดใช้เฉดแบรนด์เข้มลงเพื่อให้ตัวอักษรขาวอ่านชัด (เดิมขาวบนเขียวสว่าง = 2.28)
   โหมดสว่างใช้เฉดเข้มกว่าอีกขั้น ให้เข้าชุดกับตัวอักษรแบรนด์ที่เข้มขึ้นด้านบน */
html[data-theme="dark"],
:root{
    --vk-accent-on: color-mix(in srgb, var(--brand, #5D3FD3) 54%, #05070a);
}
html[data-theme="light"]{
    --vk-accent-on: color-mix(in srgb, var(--brand, #5D3FD3) 42%, #06090b);
}
html[data-theme="light"] .tp-step-num{
    background: var(--vk-accent-grad, var(--brand)) !important;
    border-color: transparent !important;
    color: #fff !important;
}
html[data-theme="light"] .site-nav .brand-accent{ color: var(--vk-accent-dp, var(--brand)) !important; }
html[data-theme="light"] .ro-badge,
html[data-theme="light"] .cat-count-badge,
html[data-theme="light"] .idh-tag,
html[data-theme="light"] .idh-qty-badge,
html[data-theme="light"] .acc-rank{
    color: var(--vk-accent-dp, var(--brand)) !important;
}
html[data-theme="light"] .app-popup-overlay,
html[data-theme="light"] .admin-modal-overlay{ background: rgba(15, 23, 42, .42) !important; }

/* ==========================================================================
   A11Y PATCH — แก้เฉพาะ "ความอ่านชัด" (สี/คอนทราสต์) ที่ตรวจพบด้วยการวัดจริง
   วัดด้วย contrast ratio (WCAG): ข้อความปกติ ≥ 4.5, ข้อความใหญ่/ไอคอน ≥ 3
   ไม่แตะโครงสร้าง HTML, ไม่แตะ logic, ไม่แตะชื่อคลาสหรือฟังก์ชันใด ๆ
   ========================================================================== */

/* 0) กันปุ่มสลับธีมเดิมที่อาจค้างอยู่ในแคชของเบราว์เซอร์ผู้ใช้ (ยกเลิกระบบนั้นแล้ว) */
.theme-toggle{ display: none !important; }

/* 0.05) สีแบรนด์ที่ถูกใช้เป็น "ตัวอักษร/ไอคอน" บนพื้นเข้ม
   ร้านนี้อาจตั้งสีแบรนด์เป็นเฉดเข้ม (เช่นม่วง #5D3FD3) ซึ่งบนพื้นดำให้คอนทราสต์เพียง ~2.8
   → โหมดมืดใช้เฉดแบรนด์ผสมขาวเฉพาะ "งานตัวอักษร" (ไม่แตะงานพื้นปุ่มที่ต้องมีตัวอักษรขาว)
   --vk-accent-lt ถูกใช้เป็นสีตัวอักษรเท่านั้น (ตรวจทั้งไฟล์) จึงปรับได้อย่างปลอดภัย */
html[data-theme="dark"],
html:not([data-theme="light"]){
    --vk-accent-tx: color-mix(in srgb, var(--brand, #5D3FD3) 58%, #ffffff);
    --vk-accent-lt: color-mix(in srgb, var(--brand-light, #7d63dc) 62%, #ffffff);
}
html[data-theme="dark"] .vkl-name span,
html[data-theme="dark"] .vka-brand-word span,
html:not([data-theme="light"]) .vkl-name span,
html:not([data-theme="light"]) .vka-brand-word span{
    color: var(--vk-accent-tx, var(--vk-accent, var(--brand))) !important;
}
html[data-theme="dark"] .dropdown-item i,
html[data-theme="dark"] .user-menu-link i{
    color: var(--vk-accent-tx, var(--vk-accent, var(--brand))) !important;
}

/* 0.1) ชื่อร้านท่อนท้าย (.brand-accent) ใช้ "สีแบรนด์ดิบ" ของร้านเป็นสีตัวอักษร
   ถ้าสีแบรนด์เป็นเฉดเข้ม (เช่นม่วง #5D3FD3) บนพื้นเข้มจะอ่านยาก (วัดได้ 2.89)
   → ในโหมดมืดใช้เฉดแบรนด์ผสมขาวให้สว่างพอ (≈ 7) , โหมดสว่างคงสีเข้มตามเดิม */
html[data-theme="dark"] .brand-accent,
html[data-theme="dark"] .site-nav .brand-accent,
html:not([data-theme="light"]) .brand-accent{
    color: color-mix(in srgb, var(--brand-accent, var(--brand, #5D3FD3)) 55%, #ffffff) !important;
}
html[data-theme="light"] .brand-accent,
html[data-theme="light"] .site-nav .brand-accent{
    color: var(--vk-accent-dp, var(--brand-accent, var(--brand))) !important;
}

/* 1) ตัวอักษรสีเทาจางในโหมดสว่าง
      เดิม --vk2-mute #6c7370 บนพื้นขาว = 4.25 และ --ds-mute #7b7b90 = 4.14
      → เข้มขึ้นเป็น #565d5a / #5b5b70 (≈ 5.9 – 6.4) ยังคงลำดับชั้นของสีเดิม */
html[data-theme="light"]{
    --vk2-mute: #565d5a;
    --vk2-dim:  #3d4442;
}
html[data-theme="light"] body.ds-active{
    --ds-mute: #5b5b70 !important;
    --ds-dim:  #474a5e !important;
}
html[data-theme="light"] .ds-stat-label,
html[data-theme="light"] .ds-card-sub,
html[data-theme="light"] .ds-switch-desc,
html[data-theme="light"] .ds-hint,
html[data-theme="light"] .ds-empty-text,
html[data-theme="light"] .ds-legend{ color: #565d5a !important; }

/* 2) ตาราง DataTables (ประวัติการซื้อ/เติมเงิน) — เดิม 3.42 บนพื้นขาว */
html[data-theme="light"] .dataTables_wrapper .dataTables_info,
html[data-theme="light"] .dataTables_wrapper .dataTables_paginate,
html[data-theme="light"] .dataTables_wrapper .dataTables_length label,
html[data-theme="light"] .dataTables_wrapper .dataTables_filter label{ color: #525a57 !important; }
html[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button{ color: #525a57 !important; }
html[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{ color: #8b9198 !important; }

/* 3) ชิป/แท็บ "รายการที่เลือกอยู่" — โหมดสว่างเดิมได้พื้นเทาอ่อนอ่อนมากแต่ตัวอักษรขาว
      (คำนวณได้ 1.0 = มองไม่เห็น) → ใช้พื้นแบรนด์เข้ม + ตัวอักษรขาว (≈ 7 – 9) */
html[data-theme="light"] .ac-chip.active,
html[data-theme="light"] .fk-tab.active,
html[data-theme="light"] .ac-chip.active:hover,
html[data-theme="light"] .fk-tab.active:hover{
    background: var(--vk-accent-on, var(--vk-accent, var(--brand))) !important;
    border-color: var(--vk-accent-on, var(--vk-accent, var(--brand))) !important;
    color: #fff !important;
}
html[data-theme="dark"] .ac-chip.active,
html[data-theme="dark"] .fk-tab.active,
html[data-theme="dark"] .ac-chip.active:hover,
html[data-theme="dark"] .fk-tab.active:hover{
    background: var(--vk-accent-on, var(--vk-accent, var(--brand))) !important;
    border-color: var(--vk-accent-on, var(--vk-accent, var(--brand))) !important;
    color: #fff !important;
}

/* ตัวนับในแท็บ เดิม opacity .8 ทำให้คอนทราสต์ตก — ใช้สีเต็ม */
.fk-tab .n,
.ac-chip .n{ opacity: 1 !important; }
/* ปุ่มหน้า (pagination) ที่เลือกอยู่ใช้พื้นแบรนด์ทึบเช่นเดียวกัน */
.page-item.active .page-link{
    background: var(--vk-accent-on, var(--vk-accent, var(--brand))) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* 4) โหมดสว่าง: ป้าย/โค้ด/ป้ายมืด ที่เดิมอ่านยากบนพื้นขาว */
html[data-theme="light"] code,
html[data-theme="light"] kbd,
html[data-theme="light"] .fk-ref,
html[data-theme="light"] .ds-code{ color: #5b21b6 !important; }
html[data-theme="light"] .badge.bg-dark,
html[data-theme="light"] .badge.text-bg-dark,
html[data-theme="light"] [class*="badge"].bg-dark{ color: #fff !important; }
/* ป้ายหมายเลขที่วางทับ "พื้นย่อส่วนสีเข้ม" (ds-tile-media) การ์ดสินค้า/หมวดหมู่
   ในโหมดสว่างตัวอักษรต้องเป็นเฉดสว่างเสมอ (เดิมเป็นเฉดที่เข้มขึ้นตามธีม → วัดได้ 2.83)
   จำกัดขอบเขตไว้แค่ป้ายบนพื้นเข้ม เพื่อไม่กระทบป้ายที่อยู่บนพื้นขาว */
html[data-theme="light"] .ds-tile-media .ds-badge.is-violet,
html[data-theme="light"] .ds-tile-media .ds-badge-num,
html[data-theme="dark"] .ds-tile-media .ds-badge.is-violet,
html[data-theme="dark"] .ds-tile-media .ds-badge-num{
    background: rgba(var(--brand-rgb, 93, 63, 211), .24) !important;
    border-color: rgba(var(--brand-rgb, 93, 63, 211), .42) !important;
    color: #bdf5cf !important;
}
/* ปุ่มโทนอ่อน (soft) และป้าย ที่ใช้ var(--ds-accent-lt) เป็นสีตัวอักษรบนพื้นอ่อน
   ต้องเข้มในโหมดสว่างเพื่อให้อ่านชัด */
html[data-theme="light"] .ds-btn-soft{
    background: rgba(var(--brand-rgb, 93, 63, 211), .10) !important;
    border-color: rgba(var(--brand-rgb, 93, 63, 211), .26) !important;
    color: var(--vk-accent-dp, var(--brand)) !important;
}
html[data-theme="light"] .ds-btn-soft:hover{ color: #0f1211 !important; background: rgba(var(--brand-rgb, 93, 63, 211), .18) !important; }

/* ==========================================================================
   Navbar auth: ปุ่มเข้าสู่ระบบ/สมัครสมาชิกจัดกลุ่มให้ระยะห่างสมดุล
   ========================================================================== */
.nav-auth{ display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Login popup (vkm-*): กดปุ่มเข้าสู่ระบบบนหน้าอื่นจะเปิดป็อปอัป
   หน้า /login เดิมยังใช้งานได้ตามปกติ
   ========================================================================== */
body.vkm-open{ overflow: hidden; }
.vkm-backdrop{
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(3, 3, 6, .62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: vkmFade .18s ease;
}
.vkm-backdrop[hidden]{ display: none; }
@keyframes vkmFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes vkmPop{ from{ opacity: 0; transform: translateY(8px) scale(.98); } to{ opacity: 1; transform: none; } }
.vkm-dialog{
    position: relative; width: 100%; max-width: 400px;
    padding: 30px 28px 24px;
    border-radius: 22px;
    background: #0d0d10;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
    color: #f4f4f6;
    animation: vkmPop .22s cubic-bezier(.2, .8, .3, 1);
}
html[data-theme="light"] .vkm-dialog{ background: #ffffff; border-color: rgba(15, 23, 42, .10); color: #16161d; }
.vkm-close{
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border: 0; border-radius: 10px;
    background: transparent; color: inherit; opacity: .6; cursor: pointer;
}
.vkm-close:hover{ opacity: 1; background: rgba(127, 127, 140, .14); }
.vkm-tabs{ display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
html[data-theme="light"] .vkm-tabs{ background: rgba(15, 23, 42, .05); }
.vkm-tab{
    flex: 1; text-align: center; padding: 9px 10px; border-radius: 9px;
    font-size: 13px; font-weight: 700; color: inherit; text-decoration: none; opacity: .6;
}
.vkm-tab:not(.is-active):hover{ opacity: .9; color: inherit; }
.vkm-tab.is-active{ background: #f4f4f6; color: #0d0d10; opacity: 1; }
html[data-theme="light"] .vkm-tab.is-active{ background: #ffffff; color: #16161d; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.vkm-title{ margin: 26px 0 0; font-size: 20px; font-weight: 800; text-align: center; color: inherit; }
.vkm-sub{ margin: 6px 0 20px; font-size: 13px; text-align: center; opacity: .6; }
.vkm-field{ position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.vkm-ico{ position: absolute; left: 15px; font-size: 13px; opacity: .5; pointer-events: none; }
.vkm-field input{
    width: 100%; height: 48px; padding: 0 44px 0 40px;
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04); color: inherit;
    font-size: 14px; outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
html[data-theme="light"] .vkm-field input{ border-color: rgba(15, 23, 42, .14); background: #f7f7fa; }
.vkm-field input:focus{ border-color: var(--vk-accent-lt, #7d63dc); box-shadow: 0 0 0 3px rgba(125, 99, 220, .18); }
.vkm-field input::placeholder{ opacity: .45; }
.vkm-eye{
    position: absolute; right: 8px;
    width: 32px; height: 32px; border: 0; border-radius: 9px;
    background: transparent; color: inherit; opacity: .55; cursor: pointer;
}
.vkm-eye:hover{ opacity: 1; }
.vkm-remember{ display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; font-size: 12.5px; opacity: .75; cursor: pointer; }
.vkm-submit{
    width: 100%; height: 48px; border: 0; border-radius: 12px;
    background: #f4f4f6; color: #0d0d10;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: filter .18s ease, opacity .18s ease;
}
html[data-theme="light"] .vkm-submit{ background: #16161d; color: #ffffff; }
.vkm-submit:hover{ filter: brightness(.96); }
.vkm-submit:disabled{ opacity: .6; cursor: not-allowed; }
.vkm-foot{ margin: 18px 0 0; text-align: center; font-size: 13px; opacity: .7; }
.vkm-foot a{ color: var(--vk-accent-lt, #a78bfa); font-weight: 700; text-decoration: none; }
@media (max-width: 560px){
    .vkm-dialog{ padding: 26px 20px 20px; border-radius: 20px; }
}

/* ==========================================================================
   ไอคอนการ์ดสถิติ: คืนสีตามประเภท (ไม่ให้ซ้อนทับเป็นสีเทา)
   ========================================================================== */
.stat-card .stat-card-icon{ color: var(--vk-accent-lt, var(--brand)) !important; }
.stat-card .stat-card-icon.success{ color: #4ade80 !important; }
.stat-card .stat-card-icon.warning{ color: #fbbf24 !important; }
.stat-card .stat-card-icon.danger{ color: #f87171 !important; }
.stat-card .stat-card-icon.info{ color: #60a5fa !important; }

/* ข้อความลิขสิทธิ์ท้ายเว็บ: ตัวเล็กลง */
.vk-foot-copy{ font-size: 11.5px !important; line-height: 1.5; letter-spacing: .1px; }

/* ==========================================================================
   Navbar: "เกาะลอย" มุมโค้ง (แนวมุมมองแบบ switchhub) — ทุกขนาดจอ
   - ลอยห่างขอบจอ · กรอบครบสี่ด้าน · พื้นหลังเบลอ · เงาชัด
   - เมนูที่ไม่เลือก = ข้อความล้วน (ไม่มีพื้น/กรอบซ้อน) · ที่เลือก = แคปซูลสีแบรนด์
   มือถือ/แท็บเล็ตก็เป็นเกาะลอยเช่นกัน (โลโก้ + กระเป๋าเงิน + ปุ่มเมนู)
   Side Drawer (mobile_drawer.ejs) ไม่ถูกแตะจากบล็อกนี้
   ========================================================================== */
/* หมายเหตุ: victoria-identity.css บังคับ `margin: 0 !important` / `border: none !important` /
   `border-radius: 0 !important` / `top: 0 !important` ให้ .navbar.site-nav (แถบติดขอบจอ)
   จึงต้องเขียนทับด้วย !important ที่นี่ และโร่มือถือบรรทัดนี้ต้องมี selector ระดับ
   `html[data-theme="light"]` ด้วย เพราะกฎโหมดสว่างของ identity (1684) มี specificity สูงกว่า
   มิฉะนั้นโหมดสว่างจะกลับเป็นแถบติดขอบจอ (เหลี่ยม ไม่มีกรอบ) ต่างจากโหมดมืด
   .navbar.site-nav เป็น position: sticky → top/margin ทำให้ลอยห่างขอบบนตอนเลื่อนหน้า */
.navbar.site-nav,
html[data-theme="light"] .navbar.site-nav{
    top: 10px !important;
    max-width: min(1440px, calc(100% - 24px));
    margin: 10px auto 4px !important;
    border-radius: 20px !important;
    border: 1px solid var(--vk2-line) !important;
}
.navbar.site-nav{
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 20px 44px -34px rgba(0, 0, 0, .95) !important;
}
html[data-theme="light"] .navbar.site-nav{
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 20px 44px -36px rgba(15, 23, 42, .30) !important;
}
/* มือถือ/แท็บเล็ต: เกาะแคบลง + ระยะขอบในแน่นพอให้โลโก้/กระเป๋า/ปุ่มเมนูอยู่ครบ */
@media (max-width: 991.98px){
    .navbar.site-nav,
    html[data-theme="light"] .navbar.site-nav{
        max-width: calc(100% - 16px);
        margin: 8px auto 2px !important;
        border-radius: 18px !important;
    }
    .navbar.site-nav > .container{
        gap: 6px;
        padding-left: 12px;
        padding-right: 10px;
    }
}
@media (min-width: 992px){
    /* ตัดกรอบแคปซูลด้านในออก: ให้เมนูวางบนพื้นเกาะตรง ๆ ไม่ซ้อนกรอบ 2 ชั้น */
    .navbar.site-nav .nav-capsule-list{
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    html[data-theme="light"] .navbar.site-nav .nav-capsule-list{ background: transparent !important; }
    .navbar.site-nav .nav-capsule-list .nav-pill{ padding: 9px 16px !important; }
    .navbar.site-nav .nav-capsule-list .nav-pill:hover{ background: rgba(127, 127, 140, .14) !important; }
}

/* ==========================================================================
   ไอคอนน้ำลายในการ์ดสถิติ (หน้าแรก) — ย้อมสีแบรนด์
   --------------------------------------------------------------------------
   เดิมเป็นสีเส้นเทา (--vk2-line-2 = ขาว 13%) ทำให้ไอคอนดูจืดและกลืนกับการ์ด
   เปลี่ยนมาใช้สีที่แอดมินตั้งไว้ (--brand) แบบจาง พอให้เห็นเป็นไอคอนมีสี
   แต่ยังเป็น "ลายน้ำ" ไม่แย่งความสนใจจากตัวเลข
   ใช้ !important + เขียน selector ของโหมดสว่างเอง เพราะไฟล์นี้โหลดเป็นไฟล์สุดท้าย
   และมีกฎโหมดสว่างเดิมใน style.css ที่ความจำเพาะสูงกว่าถ้าไม่ระบุธีม
   ========================================================================== */
.stat-item-wm{
    color: rgba(var(--brand-rgb, 34, 197, 94), .5) !important;
}
html[data-theme="light"] .stat-item-wm{
    color: rgba(var(--brand-rgb, 34, 197, 94), .55) !important;
}

/* ==========================================================================
   โมดัลเข้าสู่ระบบ/สมัครสมาชิก — แท็บกดได้จริง + สลับแผงในโมดัลเดียว
   --------------------------------------------------------------------------
   .vkm-tab เดิมถูกออกแบบให้ใช้กับ <span>/<a> พอเปลี่ยนเป็น <button> (เพื่อให้
   สลับแผงได้โดยไม่เปลี่ยนหน้า) ต้องล้างสไตล์ปุ่มของเบราว์เซอร์ออกก่อน
   ไม่งั้นฟอนต์และความสูงของแท็บจะไม่เท่าของเดิม
   .vkm-pane[hidden] บังคับให้ซ่อนแน่นอน ไม่ให้กฎอื่นเขียนทับ
   ========================================================================== */
.vkm-pane[hidden]{ display: none !important; }
.vkm-tab{
    border: 0;
    background: transparent;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}
.vkm-tab:focus-visible{ outline: 2px solid var(--vk-accent-lt, #7d63dc); outline-offset: 2px; }

/* ==========================================================================
   หน้าร้านค้าเกมพาส (/shop/menu) — แถวละ 2 การ์ด เหมือนหน้าร้านค้าไอดี
   --------------------------------------------------------------------------
   คอลัมน์/ระยะห่าง/ขนาดตัวอักษร ใช้ค่าชุดเดียวกับหน้า /stock (ไม่ทับซ้อน)
   ต่างกันแค่ "สัดส่วนรูปปก": หน้า /stock รูปเป็นแบนเนอร์ที่ออกแบบมาแล้ว
   แต่รูปร้านเกมพาสเป็นภาพถ่ายที่อัตราส่วนไม่เท่ากัน → ถ้าปล่อยให้รูปกำหนดความสูง
   การ์ดในแถวเดียวกันจะสูงไม่เท่ากัน  จึงล็อกสัดส่วน 1640/450 ให้ทุกใบเท่ากัน
   (ภาพถูกครอปกลางภาพด้วย object-fit: cover)
   แก้เฉพาะหน้านี้ผ่านคลาส .idb-list--gp — ไฟล์นี้โหลดสุดท้ายจึงใส่ !important
   ========================================================================== */
.idb-list--gp .idb-banner{
    aspect-ratio: 1640 / 450 !important;
    min-height: 0 !important;
}
.idb-list--gp .idb-banner img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ==========================================================================
   ปิดแถบเมนูล่างของมือถือ (.m-dock) ตามที่ตกลงกัน
   --------------------------------------------------------------------------
   แถบนี้อยู่ใน partials/footer.ejs — ตอนนี้ลบออกจาก HTML แล้ว กฎนี้กันหน้าเก่า
   ที่ค้างในแคชเบราว์เซอร์ไว้ชั่วคราว (ยังมี markup เดิมแต่ CSS ใหม่)
   และที่สำคัญ: style.css เคยตั้ง body{padding-bottom: 92/96px} ทุกจุด
   เพื่อเว้นที่ให้แถบนี้ ถ้าไม่คืนค่า หน้าจะเหลือช่องว่างท้ายหน้าลอย ๆ
   (ตรวจแล้วว่าทุกกฎ padding-bottom ให้ body อยู่ในบล็อกของ .m-dock ทั้งหมด)
   ========================================================================== */
@media (max-width: 767.98px){
    .m-dock{ display: none !important; }
    body{ padding-bottom: 0 !important; }
}

/* ==========================================================================
   หน้า /account — การ์ดสถิติ (ยอดเงินคงเหลือ / ยอดเติมทั้งหมด) ต้องเต็มความกว้าง
   ให้กรอบเสมอกับการ์ด "เปลี่ยนรหัสผ่าน" ที่อยู่ด้านล่าง
   --------------------------------------------------------------------------
   style.css ตั้ง .acc-stats{ grid-template-columns: repeat(3, 1fr) } ไว้ตั้งแต่
   ตอนที่หน้านี้มี 3 การ์ด แต่ปัจจุบันมีแค่ 2 ใบ (ดู views/user/account.ejs)
   ผลคือ 2 ใบกินพื้นที่แค่ 2/3 ของคอลัมน์ เหลือช่องว่างด้านขวา ~254px ที่ 1440px
   กรอบจึงไม่ตรงกับการ์ดล่างที่เต็มความกว้าง (ชัดเจนตอนกรอบการ์ดถูกตัดครึ่ง)

   หน้า /history/all มีคลาส .allh-stats ของตัวเอง (4 คอลัมน์) จึงยกเว้นไว้ด้วย
   :not(.allh-stats) กันไม่ให้กฎนี้ไปทับ และจำกัดเฉพาะจอ >900px เพราะต่ำกว่านั้น
   style.css สลับเป็นคอลัมน์เดียวอยู่แล้ว (กรอบตรงกันอยู่แล้ว)
   ========================================================================== */
@media (min-width: 901px){
    .acc-stats:not(.allh-stats){
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}