:root{
    --vk-h:            var(--brand-rgb, 93, 63, 211);
    --vk-accent:       var(--brand, #5D3FD3);
    --vk-accent-lt:    var(--brand-light, #7d63dc);
    --vk-accent-dp:    var(--brand-dark, #452e9c);
    --vk-accent-soft:  rgba(var(--vk-h), .12);
    --vk-accent-faint: rgba(var(--vk-h), .07);
    --vk-accent-line:  rgba(var(--vk-h), .32);
    --vk-accent-grad:  linear-gradient(180deg, var(--vk-accent-lt) 0%, var(--vk-accent-dp) 100%);

    --vk-glow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 18px -14px rgba(0, 0, 0, .50);
    --vk-glow:    0 0 0 1px rgba(var(--vk-h), .24), 0 6px 16px -14px rgba(var(--vk-h), .30);
    --vk-glow-lg: 0 2px 6px rgba(0, 0, 0, .30), 0 18px 40px -24px rgba(0, 0, 0, .58);

    --vk-lift:    0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px -16px rgba(0, 0, 0, .55);
    --vk-lift-lg: 0 2px 6px rgba(0, 0, 0, .32), 0 22px 48px -26px rgba(0, 0, 0, .62);
    --vk-accent-halo: 0 4px 14px -10px rgba(var(--vk-h), .55), 0 1px 2px rgba(0, 0, 0, .26);

    --vk-r-lg: 18px;
    --vk-r:    14px;
    --vk-r-sm: 10px;
    --vk-green: #22c55e;
    --vk-red:   #ef4444;
    --vk-amber: #f59e0b;

    --vk-bg:          #0a0a0c;
    --vk-bg-2:        #0e0e11;
    --vk-surface:     #141417;
    --vk-surface-2:   #1a1a1f;
    --vk-surface-3:   #212127;
    --vk-input:       #101013;
    --vk-glass:       rgba(11, 11, 13, .86);
    --vk-glass-2:     rgba(22, 22, 26, .96);
    --vk-line:        rgba(255, 255, 255, .10);
    --vk-line-soft:   rgba(255, 255, 255, .065);
    --vk-line-strong: rgba(255, 255, 255, .20);
    --vk-text:        #f2f2f4;
    --vk-dim:         #b4b4bd;
    --vk-mute:        #88888f;
    --vk-shadow:      0 1px 2px rgba(0, 0, 0, .30), 0 12px 28px -20px rgba(0, 0, 0, .55);
    --vk-shadow-lg:   0 2px 6px rgba(0, 0, 0, .28), 0 28px 60px -32px rgba(0, 0, 0, .65);

    --vk-glass-float:  rgba(13, 13, 18, .62);
    --vk-glass-card:   rgba(20, 20, 27, .60);
    --vk-glass-raise:  rgba(31, 31, 41, .66);
    --vk-glass-line:   rgba(255, 255, 255, .10);
    --vk-glass-line-2: rgba(255, 255, 255, .07);
    --vk-glass-accent: rgba(var(--vk-h), .26);
    --vk-glass-hi:     inset 0 1px 0 rgba(255, 255, 255, .07);
    --vk-glass-hi-lg:  inset 0 1px 0 rgba(255, 255, 255, .12);
    --vk-glass-blur:   saturate(160%) blur(20px);
    --vk-glass-blur-sm: saturate(150%) blur(12px);
    --vk-glass-shadow: 0 26px 64px -36px rgba(0, 0, 0, .92);
    --vk-glass-input:  rgba(0, 0, 0, .30);
    --vk-glass-nav:     rgba(15, 15, 20, .70);
    --vk-glass-capsule: rgba(255, 255, 255, .045);
    --vk-nav-h:         68px;

    --vk-ambient:
        radial-gradient(900px 520px at 6% -10%, rgba(var(--vk-h), .07), transparent 62%),
        radial-gradient(820px 540px at 98% 0%, rgba(var(--vk-h), .05), transparent 64%),
        radial-gradient(1300px 760px at 50% 114%, rgba(var(--vk-h), .05), transparent 66%),
        radial-gradient(1200px 540px at 50% -12%, rgba(255, 255, 255, .030), transparent 62%);
    --vk-glass-sheen: linear-gradient(112deg, rgba(255, 255, 255, .030) 0%, transparent 38%, transparent 62%, rgba(var(--vk-h), .040) 100%);

    --vk-card:        var(--vk-surface);
    --vk-card-2:      var(--vk-surface-2);
    --vk-inset:       var(--vk-input);
    --vk-violet:      var(--vk-accent);
    --vk-violet-lt:   var(--vk-accent-lt);
    --vk-violet-dp:   var(--vk-accent-dp);
    --vk-violet-ink:  var(--vk-accent-dp);
    --vk-glow-soft:   var(--vk-glow-sm);
    --vk-glow-strong: var(--vk-glow-lg);
    --vk-grad-violet: var(--vk-accent-grad);
    --vk-grad-card:   var(--vk-surface);
    --vk-void:        #050506;
}

html[data-theme="light"]{
    --vk-bg:          #f4f4f6;
    --vk-bg-2:        #ffffff;
    --vk-surface:     #ffffff;
    --vk-surface-2:   #fafafb;
    --vk-surface-3:   #f0f0f3;
    --vk-input:       #ffffff;
    --vk-glass:       rgba(255, 255, 255, .88);
    --vk-glass-2:     rgba(255, 255, 255, .97);
    --vk-line:        rgba(15, 23, 42, .12);
    --vk-line-soft:   rgba(15, 23, 42, .08);
    --vk-line-strong: rgba(15, 23, 42, .24);
    --vk-text:        #16161c;
    --vk-dim:         #4c4c57;
    --vk-mute:        #77777f;
    --vk-shadow:      0 1px 2px rgba(15, 23, 42, .05), 0 12px 28px -22px rgba(15, 23, 42, .20);
    --vk-shadow-lg:   0 2px 6px rgba(15, 23, 42, .06), 0 28px 60px -34px rgba(15, 23, 42, .26);
    --vk-accent-soft:  rgba(var(--vk-h), .10);
    --vk-accent-faint: rgba(var(--vk-h), .06);
    --vk-glow-sm: 0 1px 2px rgba(15, 23, 42, .07), 0 8px 18px -14px rgba(15, 23, 42, .18);
    --vk-glow:    0 0 0 1px rgba(var(--vk-h), .24), 0 6px 16px -14px rgba(var(--vk-h), .22);
    --vk-glow-lg: 0 2px 6px rgba(15, 23, 42, .08), 0 18px 40px -26px rgba(15, 23, 42, .22);
    --vk-lift:    0 1px 2px rgba(15, 23, 42, .06), 0 10px 24px -18px rgba(15, 23, 42, .20);
    --vk-lift-lg: 0 2px 6px rgba(15, 23, 42, .07), 0 22px 48px -28px rgba(15, 23, 42, .24);
    --vk-accent-halo: 0 4px 14px -10px rgba(var(--vk-h), .40), 0 1px 2px rgba(15, 23, 42, .06);

    --vk-glass-float:  rgba(255, 255, 255, .72);
    --vk-glass-card:   rgba(255, 255, 255, .68);
    --vk-glass-raise:  rgba(255, 255, 255, .84);
    --vk-glass-line:   rgba(15, 23, 42, .10);
    --vk-glass-line-2: rgba(15, 23, 42, .07);
    --vk-glass-hi:     inset 0 1px 0 rgba(255, 255, 255, .90);
    --vk-glass-hi-lg:  inset 0 1px 0 rgba(255, 255, 255, .95);
    --vk-glass-shadow: 0 22px 56px -36px rgba(15, 23, 42, .42);
    --vk-glass-input:  rgba(255, 255, 255, .72);
    --vk-glass-nav:     rgba(255, 255, 255, .78);
    --vk-glass-capsule: rgba(15, 23, 42, .05);
    --vk-ambient:
        radial-gradient(900px 520px at 6% -10%, rgba(var(--vk-h), .045), transparent 62%),
        radial-gradient(820px 540px at 98% 0%, rgba(var(--vk-h), .032), transparent 64%),
        radial-gradient(1300px 760px at 50% 114%, rgba(var(--vk-h), .032), transparent 66%);
    --vk-glass-sheen: linear-gradient(112deg, rgba(255, 255, 255, .45) 0%, transparent 40%, transparent 60%, rgba(var(--vk-h), .035) 100%);
}

body{
    background-color: var(--vk-bg) !important;
    background-image: var(--vk-ambient) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--vk-text);
}
body::before{
    content: "";
    position: fixed;
    inset: -18vh -12vw auto -12vw;
    height: 78vh;
    pointer-events: none;
    z-index: -1;
    opacity: .28;
    background:
        var(--vk-glass-sheen),
        radial-gradient(560px 420px at 78% 28%, rgba(var(--vk-h), .07), transparent 70%),
        radial-gradient(420px 320px at 16% 74%, rgba(var(--vk-h), .05), transparent 72%);
    filter: blur(40px) saturate(120%);
}
html[data-theme="light"] body::before{ opacity: .22; }
@media (max-width: 767.98px){
    body::before{ filter: blur(26px) saturate(115%); opacity: .22; }
}
.text-muted{ color: var(--vk-mute) !important; }
hr{ border-color: var(--vk-line-soft) !important; }
/* สีลิงก์ตามธีม — ต้องเว้นลิงก์ที่ทำหน้าที่เป็นปุ่ม/คอมโพเนนต์
   ไม่เช่นนั้น html[data-theme="light"] a (specificity 0,1,1) จะทับสีของปุ่ม (0,1,0) เสมอ
   ผลคือในโหมดสว่างข้อความปุ่มกลายเป็นสีม่วงบนพื้นม่วง เช่น .qb-btn-solid{color:#fff}
   (ปุ่ม “สั่งซื้อเกมพาส” ในหน้าคิว) มองไม่เห็นข้อความ */
a{ color: var(--vk-accent-lt); }
a:hover{ color: var(--vk-accent); }
/* ใช้ :where() เพื่อให้ specificity ของกฎนี้เป็น (0,0,1) เท่ากันกับ a{color:...} ด้านบน
   ถ้าปล่อยให้สูงกว่า (เดิมเป็น html[data-theme="light"] a:not(...) = 0,3,2)
   สีลิงก์จะไปทับสีของคอมโพเนนต์ที่ทำจาก <a> เสมอ เช่น ปุ่ม .qb-btn-solid
   แถบเลขหน้า .fk-pager a.active หรือการ์ดสินค้าที่มีพื้นหลังเป็นสีแบรนด์
   ทำให้ตัวอักษรสีเดียวกันกับพื้นหลังและมองไม่เห็นในโหมดสว่าง */
:where(html[data-theme="light"]) a{ color: var(--vk-accent); }
html:not([data-theme="light"]) a:not([class*="btn"]):not([role="button"]):hover{ color: var(--vk-accent-lt); }
::selection{ background: rgba(var(--vk-h), .30); color: #fff; }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--vk-bg-2); }
::-webkit-scrollbar-thumb{
    background: var(--vk-line-strong);
    border-radius: 99px;
    border: 2px solid var(--vk-bg-2);
}
::-webkit-scrollbar-thumb:hover{ background: rgba(var(--vk-h), .70); }

.site-nav{
    background: var(--vk-glass) !important;
    background-image: none !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    border-bottom: 0 !important;
    box-shadow: 0 18px 44px -34px rgba(0, 0, 0, .72) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    transition: background-color .25s ease, box-shadow .25s ease;
}

.brand-logo{
    width: 34px !important;
    height: 34px !important;
    border-radius: 0 !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform .22s ease, opacity .22s ease;
}
.navbar-brand:hover .brand-logo{ transform: translateY(-1px) scale(1.03); opacity: .92; }
.brand-text{
    color: var(--vk-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
}
.brand-accent{ color: var(--vk-accent) !important; }

.nav-capsule-list{
    background: var(--vk-surface-3) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 5px 7px !important;
    gap: 4px !important;
    box-shadow: none !important;
}
html[data-theme="light"] .nav-capsule-list{
    background: #f0f0f3 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
.site-nav .nav-capsule-list .nav-pill{
    padding: 8px 17px !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    color: var(--vk-dim) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    letter-spacing: .1px;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
                box-shadow .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.site-nav .nav-capsule-list .nav-pill:hover{
    color: var(--vk-text) !important;
    background: var(--vk-glass-raise) !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}
.site-nav .nav-capsule-list .nav-pill.active{
    color: #fff !important;
    background: var(--vk-accent) !important;
    background-origin: border-box !important;
    border-color: transparent !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .26) !important;
}
.site-nav .nav-capsule-list .nav-pill.active:hover{ filter: brightness(1.07); }
.site-nav .nav-capsule-list .nav-pill:focus-visible{
    outline: 2px solid rgba(var(--vk-h), .55);
    outline-offset: 2px;
}
.site-nav .navbar-toggler{
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line) !important;
    border-radius: 11px !important;
    color: var(--vk-dim) !important;
    padding: 8px 11px !important;
    transition: border-color .2s ease, box-shadow .25s ease, color .2s ease;
}
.site-nav .navbar-toggler:hover{
    color: var(--vk-text) !important;
    border-color: var(--vk-accent-line) !important;
    box-shadow: var(--vk-glow-sm);
}
.site-nav .navbar-toggler:focus{ box-shadow: 0 0 0 3px rgba(var(--vk-h), .22) !important; }

.theme-toggle{
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-dim) !important;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
                box-shadow .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.theme-toggle:hover{
    color: var(--vk-text) !important;
    border-color: var(--vk-line-strong) !important;
    transform: translateY(-1px);
    box-shadow: var(--vk-glow-sm);
}
.wallet-pill{
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
    border-radius: 999px !important;
    padding: 8px 15px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    transition: border-color .2s ease, box-shadow .25s ease;
}
.wallet-pill i{ color: var(--vk-accent) !important; }
.wallet-pill:hover{ border-color: var(--vk-accent-line) !important; box-shadow: var(--vk-glow-sm); }
.avatar-btn{
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: var(--vk-accent-grad) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: var(--vk-accent-halo) !important;
    transition: transform .25s cubic-bezier(.2,.8,.3,1), filter .2s ease, box-shadow .25s ease;
}
.avatar-btn:hover{ transform: translateY(-1px); filter: brightness(1.07); box-shadow: var(--vk-glow-lg) !important; }
.btn-register{
    display: inline-flex;
    align-items: center;
    height: 40px;
    background: var(--vk-accent-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 13.5px;
    box-shadow: var(--vk-accent-halo) !important;
    transition: transform .25s cubic-bezier(.2,.8,.3,1), filter .2s ease;
}
.btn-register:hover{ transform: translateY(-1px); filter: brightness(1.07); color: #fff !important; }
.login-btn{
    display: inline-flex;
    align-items: center;
    height: 40px;
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
    border-radius: 999px !important;
    font-weight: 600;
    font-size: 13.5px;
    transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.login-btn:hover{
    border-color: var(--vk-accent-line) !important;
    color: var(--vk-text) !important;
    transform: translateY(-1px);
    box-shadow: var(--vk-glow-sm);
}

@media (max-width: 991.98px){
    .site-nav .navbar-collapse{
        margin-top: 10px;
        padding: 12px !important;
        background: var(--vk-surface) !important;
        background-image: none !important;
        border: 1px solid var(--vk-line) !important;
        border-radius: var(--vk-r) !important;
        box-shadow: var(--vk-shadow-lg) !important;
    }
    .site-nav .nav-capsule-list{
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 4px !important;
        border-radius: 0 !important;
    }
    .site-nav .nav-capsule-list .nav-pill{
        background: var(--vk-surface-3) !important;
        border: 1px solid var(--vk-line-soft) !important;
        color: var(--vk-dim) !important;
        padding: 11px 12px !important;
        font-size: 13.5px !important;
    }
    .site-nav .nav-capsule-list .nav-pill.active{
        background: var(--vk-accent) !important;
        border-color: transparent !important;
        color: #fff !important;
    }
    .site-nav .navbar-collapse > ul.navbar-nav.ms-auto{
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--vk-line-soft) !important;
        gap: 6px;
    }
    .site-nav .navbar-collapse .nav-item{ display: flex; align-items: center; }
    .wallet-pill-mobile{ padding: 7px 12px !important; font-size: 12.5px !important; }
    .site-nav .login-btn,
    .site-nav .btn-register{ width: 100%; justify-content: center; }
}

@media (min-width: 768px) and (max-width: 991.98px){
    .site-nav .nav-capsule-list{
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: auto !important;
        justify-content: center !important;
        margin: 0 !important;
        gap: 4px !important;
        padding: 5px 7px !important;
        background: var(--vk-surface-3) !important;
        border: 0 !important;
        border-radius: 999px !important;
    }
    html[data-theme="light"] .site-nav .nav-capsule-list{
        background: #ecedf2 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .site-nav .nav-capsule-list .nav-pill{
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 8px 15px !important;
        font-size: 13.5px !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
    .site-nav .nav-capsule-list .nav-pill:hover{
        background: var(--vk-glass-raise) !important;
        border-color: transparent !important;
    }
    .site-nav .nav-capsule-list .nav-pill.active{
        background: var(--vk-accent) !important;
        border-color: transparent !important;
        color: #fff !important;
    }
    .site-nav .navbar-collapse > ul.navbar-nav.ms-auto{
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--vk-line-soft) !important;
        gap: 8px !important;
    }
}

@media (max-width: 767.98px){
    .site-nav > .container{ flex-wrap: nowrap !important; gap: 8px; }
    .site-nav .navbar-brand{ margin-right: 8px !important; gap: 8px !important; min-width: 0; }
    .site-nav .brand-logo{ width: 32px !important; height: 32px !important; }
    .site-nav .brand-text{
        font-size: 17px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .site-nav .wallet-pill-mobile{ padding: 6px 11px !important; font-size: 12px !important; gap: 4px; }
    .site-nav .theme-toggle{ width: 36px !important; height: 36px !important; flex: 0 0 auto; }
    .site-nav > .container > .d-flex{ flex: 0 0 auto; gap: 6px !important; }
}

@media (max-width: 767.98px){
    .m-dock{
        background: var(--vk-glass) !important;
        backdrop-filter: blur(18px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
        border: 1px solid var(--vk-line) !important;
        border-radius: 22px !important;
        box-shadow: var(--vk-shadow-lg) !important;
    }
    .m-dock-item{
        color: var(--vk-mute) !important;
        border-radius: 14px;
        transition: color .2s ease, background-color .2s ease, transform .25s cubic-bezier(.2,.8,.3,1);
    }
    .m-dock-item:active{ transform: translateY(-1px); }
    .m-dock-item.m-dock-active,
    .m-dock-item.m-dock-active:hover,
    .m-dock-item.m-dock-active:focus,
    .m-dock-item.m-dock-active:visited{ color: var(--vk-accent) !important; }
    .m-dock-main{
        border-color: var(--vk-bg) !important;
        background: var(--vk-accent-grad) !important;
        box-shadow: var(--vk-accent-halo) !important;
    }
    .m-dock-logout{ color: var(--vk-mute) !important; }
    .m-dock-logout:hover,
    .m-dock-logout:focus{ color: #fca5a5 !important; }
}

.dropdown-menu{
    background: var(--vk-glass-2) !important;
    background-image: none !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border: 1px solid var(--vk-line) !important;
    border-radius: var(--vk-r) !important;
    color: var(--vk-text) !important;
    box-shadow: var(--vk-shadow-lg) !important;
}
.dropdown-item{ color: var(--vk-dim) !important; }
.dropdown-item:hover,
.dropdown-item:focus{
    background: var(--vk-accent-soft) !important;
    color: var(--vk-accent) !important;
}
.dropdown-divider{ border-color: var(--vk-line-soft) !important; }

.user-menu{ border-radius: var(--vk-r) !important; overflow: hidden; min-width: 244px; }
.user-menu-head{
    background: var(--vk-surface-3) !important;
    border-bottom: 1px solid var(--vk-line-soft);
}
.user-menu-head .fw-bold{ color: var(--vk-text) !important; }
.user-menu-balance{ color: var(--vk-text) !important; font-weight: 700; }
.user-menu-balance i{ color: var(--vk-accent) !important; }
.user-divider{ border-color: var(--vk-line-soft) !important; }
.user-menu-link{
    color: var(--vk-dim) !important;
    border-radius: var(--vk-r-sm);
    margin: 2px 6px;
    transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
}
.user-menu-link:hover{
    background: var(--vk-accent-soft) !important;
    color: var(--vk-accent) !important;
    padding-left: 1.25rem;
}
.user-menu-link i{ color: var(--vk-mute) !important; }
.user-menu-link:hover i{ color: var(--vk-accent) !important; }
.user-menu-logout{ color: #fca5a5 !important; }
.user-menu-logout i{ color: inherit !important; }
.user-menu-logout:hover{ background: rgba(239, 68, 68, .14) !important; color: #fecaca !important; }

.modal-content{
    background: var(--vk-surface) !important;
    background-image: none !important;
    border: 1px solid var(--vk-line) !important;
    border-radius: var(--vk-r-lg) !important;
    color: var(--vk-text) !important;
    box-shadow: var(--vk-shadow-lg) !important;
}
.modal-header,
.modal-footer{ border-color: var(--vk-line-soft) !important; }
.modal-title{ color: var(--vk-text) !important; }
.modal-backdrop.show{ background: #050506; opacity: .68; }
html:not([data-theme="light"]) .btn-close{ filter: invert(1) grayscale(1) brightness(2); }

.swal2-popup,
.swal2-toast{
    background: var(--vk-glass-2) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border: 1px solid var(--vk-line) !important;
    border-radius: var(--vk-r-lg) !important;
    color: var(--vk-text) !important;
    box-shadow: var(--vk-shadow-lg) !important;
}
.swal2-title,
.swal2-toast .swal2-title{ color: var(--vk-text) !important; }
.swal2-html-container{ color: var(--vk-dim) !important; }
.swal2-confirm{ background: var(--vk-accent-grad) !important; border-radius: var(--vk-r-sm) !important; }
.swal2-cancel{
    background: var(--vk-surface-3) !important;
    color: var(--vk-text) !important;
    border-radius: var(--vk-r-sm) !important;
}
.app-toast{
    background: var(--vk-glass-2) !important;
    border: 1px solid var(--vk-line) !important;
    border-radius: var(--vk-r) !important;
    color: var(--vk-text) !important;
    box-shadow: var(--vk-shadow-lg) !important;
}

.admin-card,
.card,
.acc-card,
.list-box,
.box-text,
.login-card,
.auth-card,
.activity-card,
.list-card,
.icon-card,
.rec-card,
.status-card,
.stock-cat-card,
.cat-id-card,
.card-shop-admin,
.stat-card-modern,
.stat-card-admin,
.topup-card,
.tp-card{
    background: var(--vk-surface) !important;
    background-image: none !important;
    border: 1px solid var(--vk-line-soft) !important;
    border-radius: var(--vk-r) !important;
    color: var(--vk-text) !important;
    box-shadow: var(--vk-shadow) !important;
}
.card:hover,
.activity-card:hover,
.list-card:hover,
.rec-card:hover,
.status-card:hover,
.stock-cat-card:hover,
.cat-id-card:hover,
.card-shop-admin:hover{
    border-color: var(--vk-line-strong) !important;
}
.card-head{ border-bottom: 1px solid var(--vk-line-soft) !important; }
.card-head h5{ color: var(--vk-text) !important; }
.card-head-sub{ color: var(--vk-mute) !important; }
.card-head-icon,
.mem-head-icon{
    background: var(--vk-accent-soft) !important;
    border: 1px solid var(--vk-accent-line) !important;
    color: var(--vk-accent) !important;
    border-radius: 12px !important;
}

.product-card,
.product-card-2,
.product-card-modern,
.category-card,
.cat-card,
.ref-card,
.qm-card,
.ro-card,
.idb-card{
    background: var(--vk-surface) !important;
    background-image: none !important;
    border: 1px solid var(--vk-line-soft) !important;
    border-radius: var(--vk-r) !important;
    color: var(--vk-text) !important;
    box-shadow: var(--vk-shadow) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.product-card:hover,
.product-card-2:hover,
.product-card-modern:hover,
.category-card:hover,
.cat-card:hover,
.ref-card:hover,
.qm-card:hover,
.ro-card:hover,
.idb-card:hover{
    transform: translateY(-4px);
    border-color: var(--vk-accent-line) !important;
    box-shadow: var(--vk-lift-lg) !important;
}
.cat-card-banner,
.cat-card-img,
.product-card-img,
.card-shop-admin-img,
.category-banner{ box-shadow: inset 0 0 0 1px var(--vk-line-soft); }
.cat-card-name,
.cat-card-title,
.card-shop-admin-title{ color: var(--vk-text) !important; }
.product-price,
.price-now,
.cat-card-price,
.cat-card-cur,
.tp-card-title,
.price,
.price-value,
.acc-stat-value{ color: var(--vk-accent) !important; }
.cat-card-old,
.cat-card-ref,
.cat-card-stock{ color: var(--vk-mute) !important; }
.cat-card-btn,
.product-card .btn-primary,
.product-card-2 .btn-primary,
.product-card-modern .btn-primary{
    background: var(--vk-accent-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--vk-accent-halo) !important;
}
.cat-card-btn-off{
    background: var(--vk-surface-3) !important;
    color: var(--vk-mute) !important;
    border: 1px solid var(--vk-line-soft) !important;
    box-shadow: none !important;
}
.badge-stock,
.stock-badge,
.cat-card-tag,
.cat-card-promo{
    background: var(--vk-accent-soft) !important;
    border: 1px solid var(--vk-accent-line) !important;
    color: var(--vk-accent) !important;
}

.hero-banners{
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line) !important;
    border-radius: var(--vk-r-lg) !important;
    box-shadow: var(--vk-shadow-lg) !important;
}
.hb-arrow{
    background: var(--vk-glass-2) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hb-arrow:hover{
    background: var(--vk-accent-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--vk-accent-halo) !important;
}
.hb-dot{ background: var(--vk-line-strong) !important; }
.hb-dot-active{
    background: var(--vk-accent-grad) !important;
    box-shadow: 0 0 0 2px rgba(var(--vk-h), .30) !important;
}

.stat-item{
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line-soft) !important;
    border-radius: var(--vk-r) !important;
}
.stat-item-value{ color: var(--vk-accent) !important; }
.stat-item-label,
.stat-item-unit{ color: var(--vk-mute) !important; }
.stat-item-icon{ color: var(--vk-accent) !important; }

.btn-primary,
.btn-success,
.btn-modern{
    background: var(--vk-accent-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--vk-accent-halo) !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-modern:hover{ filter: brightness(1.08); color: #fff !important; }

.btn-outline-light,
.btn-outline-secondary,
.btn-secondary,
.btn-dark{
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
    box-shadow: none !important;
}
.btn-outline-light:hover,
.btn-outline-secondary:hover,
.btn-secondary:hover,
.btn-dark:hover{
    background: var(--vk-surface-2) !important;
    border-color: var(--vk-line-strong) !important;
    color: var(--vk-text) !important;
}
.btn-danger,
.btn-outline-danger{
    background: rgba(239, 68, 68, .12) !important;
    border: 1px solid rgba(239, 68, 68, .30) !important;
    color: #fca5a5 !important;
    box-shadow: none !important;
}
html[data-theme="light"] .btn-danger,
html[data-theme="light"] .btn-outline-danger{ color: #b91c1c !important; }
.btn-danger:hover,
.btn-outline-danger:hover{ background: rgba(239, 68, 68, .20) !important; }
.btn-file{
    background: var(--vk-accent-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--vk-accent-halo) !important;
}
.btn-file:hover{ filter: brightness(1.08); color: #fff !important; }
.btn-file.dark{
    background: var(--vk-surface-3) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
    box-shadow: none !important;
}
.btn-file.dark:hover{ border-color: var(--vk-line-strong) !important; color: var(--vk-text) !important; }
.pay-box,
.pay-title,
.announce-tag-mini{
    background: var(--vk-surface-2) !important;
    border: 1px solid var(--vk-line-soft) !important;
    color: var(--vk-text) !important;
    border-radius: var(--vk-r-sm) !important;
}

.form-control,
.form-select,
.input-group-text,
.auth-field .form-control{
    background: var(--vk-input) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
    border-radius: var(--vk-r-sm) !important;
}
.form-control::placeholder,
.auth-field .form-control::placeholder{ color: var(--vk-mute) !important; }
.form-control:focus,
.form-select:focus,
.auth-field .form-control:focus{
    background: var(--vk-input) !important;
    border-color: var(--vk-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--vk-h), .20) !important;
    color: var(--vk-text) !important;
}
.form-label,
.auth-field .form-label{ color: var(--vk-dim) !important; }
.form-select option{ background: var(--vk-surface); color: var(--vk-text); }
.form-check-input{
    background-color: var(--vk-surface-3) !important;
    border-color: var(--vk-line-strong) !important;
}
.form-check-input:checked{
    background-color: var(--vk-accent) !important;
    border-color: var(--vk-accent) !important;
}
.vis-switch .slider,
.cat-switch .slider{ background: var(--vk-surface-3) !important; }
.vis-switch input:checked + .slider,
.cat-switch input:checked + .slider{
    background: var(--vk-accent) !important;
    box-shadow: var(--vk-glow-sm);
}

.badge.bg-success{
    background: rgba(34, 197, 94, .16) !important;
    border: 1px solid rgba(34, 197, 94, .34) !important;
    color: #86efac !important;
}
html[data-theme="light"] .badge.bg-success{ color: #15803d !important; }
.badge.bg-danger{
    background: rgba(239, 68, 68, .16) !important;
    border: 1px solid rgba(239, 68, 68, .34) !important;
    color: #fca5a5 !important;
}
html[data-theme="light"] .badge.bg-danger{ color: #b91c1c !important; }

/* ป้ายของหน้าแอดมิน (admin-modern.css: .badge-success ฯลฯ) — บูตสแตรปโหลดหลัง
   วิกตอเรีย-ไอเดนทิตี้ จึงทับสีข้อความด้วย .badge{color:#fff} เสมอ
   ทำให้ในโหมดสว่างเป็นตัวอักษรสีขาวบนพื้นโทนอ่อน (อ่านไม่ออก) */
html[data-theme="light"] .badge.badge-success{ color: #15803d !important; }
html[data-theme="light"] .badge.badge-warning{ color: #a16207 !important; }
html[data-theme="light"] .badge.badge-danger{ color: #b91c1c !important; }
html[data-theme="light"] .badge.badge-info{ color: #1d4ed8 !important; }
html[data-theme="light"] .badge.badge-purple{ color: #4c3ba8 !important; }

/* ===== Toast กลาง (views/partials/footer.ejs) =====
   โครง (.app-toast) ถูกเปลี่ยนเป็นพื้นกระจกสว่างในโหมดสว่างแล้ว
   แต่ข้อความ/ปุ่มปิดยังฮาร์ดโค้ดเป็นสีขาวจาก style.css จึงจมหายไปทั้งใบ */
html[data-theme="light"] .app-toast-text{ color: var(--vk-text) !important; }
html[data-theme="light"] .app-toast-close{ color: var(--vk-mute) !important; }
html[data-theme="light"] .app-toast-close:hover{
    color: var(--vk-text) !important;
    background: rgba(15, 23, 42, .07) !important;
}
.badge.bg-secondary{
    background: var(--vk-surface-3) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-dim) !important;
}
.badge.bg-primary,
.badge.bg-info,
.st-badge{
    background: var(--vk-accent-soft) !important;
    border: 1px solid var(--vk-accent-line) !important;
    color: var(--vk-accent) !important;
}
.chip,
.tag,
.pill,
.btn-pill{
    background: var(--vk-surface-3) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-dim) !important;
}
.btn-pill.active,
.chip.active{
    background: var(--vk-accent-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}

table.table,
.admin-table{
    color: var(--vk-text) !important;
    border-color: var(--vk-line-soft) !important;
}
table.table thead th,
.admin-table th,
.admin-main table th{
    background: var(--vk-surface-3) !important;
    color: var(--vk-dim) !important;
    border-color: var(--vk-line) !important;
    font-weight: 600;
}
table.table td,
.admin-table td,
.admin-main table td{ border-color: var(--vk-line-soft) !important; }
table.table tbody tr:hover,
.admin-table tr:hover td,
.admin-main table tbody tr:hover{ background: var(--vk-surface-2) !important; }
.admin-table-wrapper{ border-radius: var(--vk-r-sm); }
.page-link{
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-dim) !important;
}
.page-item.active .page-link{
    background: var(--vk-accent-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    background: var(--vk-input) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
    border-radius: var(--vk-r-sm) !important;
}

.section-head h1,
.section-head h2,
.section-head h3,
.section-head h4,
.section-head h5,
.page-title,
.admin-title,
.admin-pagehead h1,
.admin-pagehead h2{ color: var(--vk-text) !important; letter-spacing: -.2px; }
.page-subtitle,
.admin-subtitle,
.admin-breadcrumb{ color: var(--vk-mute) !important; }
.section-head h1::before,
.section-head h2::before,
.section-head h3::before,
.section-head h4::before{
    content: "";
    display: inline-block;
    width: 3px;
    height: .82em;
    margin-right: 9px;
    vertical-align: -.08em;
    border-radius: 99px;
    background: var(--vk-accent-grad);
    box-shadow: 0 0 8px -2px rgba(var(--vk-h), .30);
}
.vk-eyebrow{
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vk-accent);
}

.skel{ background: var(--vk-surface-3) !important; }
.skel::after{
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent) !important;
}
html[data-theme="light"] .skel::after{
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .06), transparent) !important;
}
.skel-card,
.skel-banner{
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line-soft) !important;
    border-radius: var(--vk-r) !important;
}
.skel-msg{ color: var(--vk-mute) !important; }

body.admin-panel{
    background-color: var(--vk-bg) !important;
    background-image: var(--vk-ambient) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--vk-text);
}
.admin-main{
    background-color: var(--vk-bg) !important;
    background-image: var(--vk-ambient) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
.admin-panel,
.admin-content{ background: transparent !important; background-image: none !important; }

.admin-sidebar{
    background: var(--vk-glass) !important;
    background-image: none !important;
    border-right: 1px solid var(--vk-line-soft) !important;
    box-shadow: var(--vk-shadow) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.sidebar-logo{ border-bottom: 1px solid var(--vk-line-soft) !important; }
.sidebar-logo img{
    border-radius: 11px;
    box-shadow: 0 0 0 1px var(--vk-line);
}
.sidebar-logo-text{ color: var(--vk-text) !important; }
.sidebar-logo-text span{ color: var(--vk-accent) !important; }
.sidebar-search{ border-bottom: 1px solid var(--vk-line-soft) !important; }
.sidebar-search input{
    background: var(--vk-input) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
    border-radius: var(--vk-r-sm) !important;
}
.sidebar-search input:focus{
    border-color: var(--vk-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--vk-h), .18) !important;
}
.sidebar-search i{ color: var(--vk-mute) !important; }
.sidebar-section-title{ color: var(--vk-mute) !important; letter-spacing: .13em; }
.sidebar-nav::-webkit-scrollbar{ width: 6px; }
.sidebar-link{
    margin: 2px 10px !important;
    border-left: 0 !important;
    border-radius: 10px !important;
    color: var(--vk-dim) !important;
    transition: background-color .18s ease, color .18s ease;
}
.sidebar-link:hover{
    background: var(--vk-surface-3) !important;
    color: var(--vk-text) !important;
}
.sidebar-link.active{
    background: var(--vk-accent-grad) !important;
    color: #fff !important;
    box-shadow: var(--vk-accent-halo) !important;
}
.sidebar-link.active i{ color: #fff !important; }
.sidebar-avatar{
    background: var(--vk-accent-grad) !important;
    box-shadow: var(--vk-accent-halo);
}
.sidebar-user-name{ color: var(--vk-text) !important; }
.sidebar-logout{ color: var(--vk-mute) !important; }
.sidebar-logout:hover{ color: #fca5a5 !important; background: rgba(239, 68, 68, .12) !important; }
.sidebar-overlay.show{ background: rgba(5, 5, 6, .62) !important; backdrop-filter: blur(2px); }

.admin-header{
    background: var(--vk-glass) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border-bottom: 1px solid var(--vk-line-soft) !important;
    box-shadow: var(--vk-shadow) !important;
}
.header-btn{
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-dim) !important;
}
.header-btn:hover{
    color: var(--vk-text) !important;
    border-color: var(--vk-accent-line) !important;
    box-shadow: var(--vk-glow-sm);
}
.header-burger{ color: var(--vk-dim) !important; }
.header-user-avatar{
    background: var(--vk-accent-grad) !important;
    box-shadow: var(--vk-accent-halo);
}
.header-user-name{ color: var(--vk-text) !important; }
.breadcrumb a{ color: var(--vk-mute) !important; }
.breadcrumb a:hover{ color: var(--vk-accent) !important; }
.breadcrumb .current{ color: var(--vk-text) !important; }

.stat-card{
    background: var(--vk-surface) !important;
    background-image: none !important;
    border: 1px solid var(--vk-line-soft) !important;
    border-radius: var(--vk-r) !important;
    box-shadow: var(--vk-shadow) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.stat-card:hover{
    transform: translateY(-3px);
    border-color: var(--vk-accent-line) !important;
    box-shadow: var(--vk-lift-lg) !important;
}
.stat-card-icon{
    background: var(--vk-accent-soft) !important;
    border: 1px solid var(--vk-accent-line) !important;
    color: var(--vk-accent) !important;
    border-radius: 12px !important;
}
.stat-card-value{ color: var(--vk-text) !important; }
.stat-card-value span{ color: var(--vk-accent) !important; }
.stat-card-label{ color: var(--vk-mute) !important; }

.admin-tabs{ border-bottom-color: var(--vk-line-soft) !important; }
.admin-tab{ border-radius: 10px 10px 0 0; color: var(--vk-mute) !important; }
.admin-tab:hover{ color: var(--vk-text) !important; background: var(--vk-surface-3); }
.admin-tab.active{
    color: #fff !important;
    border-bottom-color: transparent !important;
    background: var(--vk-accent-grad) !important;
    box-shadow: var(--vk-accent-halo);
}

.admin-btn-primary{
    background: var(--vk-accent-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--vk-accent-halo) !important;
}
.admin-btn-primary:hover{ filter: brightness(1.08); color: #fff !important; }
.admin-btn-secondary{
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
}
.admin-btn-secondary:hover{
    background: var(--vk-surface-2) !important;
    border-color: var(--vk-line-strong) !important;
    color: var(--vk-text) !important;
}
.admin-btn-ghost{ color: var(--vk-dim) !important; }
.admin-btn-ghost:hover{ color: var(--vk-accent) !important; background: var(--vk-accent-soft) !important; }

.admin-card-header,
.admin-card-body{ border-color: var(--vk-line-soft) !important; }
.admin-card-title{ color: var(--vk-text) !important; }
.od-value{ color: var(--vk-text) !important; }
.od-label{ color: var(--vk-mute) !important; }
.od-row{ border-color: var(--vk-line-soft) !important; }

.admin-toolbar{
    background: var(--vk-surface-2) !important;
    border: 1px solid var(--vk-line-soft) !important;
    border-radius: var(--vk-r-sm) !important;
}
.admin-search input,
.admin-select{
    background: var(--vk-input) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
    border-radius: var(--vk-r-sm) !important;
}
.admin-search input:focus,
.admin-select:focus{
    border-color: var(--vk-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--vk-h), .18) !important;
}
.admin-search i{ color: var(--vk-mute) !important; }

.admin-toggle-slider{
    background: var(--vk-surface-3) !important;
    border: 1px solid var(--vk-line) !important;
}
.admin-toggle input:checked + .admin-toggle-slider{
    background: var(--vk-accent) !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 1px rgba(var(--vk-h), .35), 0 6px 18px -8px rgba(var(--vk-h), .95) !important;
}

.admin-empty-icon{
    background: var(--vk-surface-3) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-accent) !important;
}
.admin-empty-title{ color: var(--vk-text) !important; }
.admin-empty-text{ color: var(--vk-mute) !important; }

.vk-glow        { box-shadow: var(--vk-glow-lg) !important; }
.vk-glow-strong { box-shadow: var(--vk-glow-lg) !important; }
.vk-grad        { background: var(--vk-accent-grad) !important; color: #fff !important; }
.vk-text-violet { color: var(--vk-accent) !important; }

:root{
    --admin-bg:            var(--vk-bg);
    --admin-bg-secondary:  var(--vk-surface);
    --admin-bg-card:       var(--vk-surface);
    --admin-bg-hover:      var(--vk-surface-2);
    --admin-border:        var(--vk-line-soft);
    --admin-border-hover:  var(--vk-line-strong);
    --admin-text:          var(--vk-text);
    --admin-text-secondary:var(--vk-dim);
    --admin-text-muted:    var(--vk-mute);
    --admin-shadow:        var(--vk-shadow);
    --admin-shadow-sm:     var(--vk-shadow);
    --admin-accent:        var(--vk-accent);
    --admin-accent-hover:  var(--vk-accent-dp);
    --admin-accent-glow:   rgba(var(--vk-h), .15);
}

html[data-theme="light"] .site-nav::after{ display: none; }
html[data-theme="light"] .m-dock-item.m-dock-active,
html[data-theme="light"] .m-dock-item.m-dock-active:hover,
html[data-theme="light"] .m-dock-item.m-dock-active:focus{ color: var(--vk-accent) !important; }

html[data-theme="light"] body.admin-panel .admin-header{
    background: var(--vk-glass) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--vk-line-soft) !important;
}
html[data-theme="light"] body.admin-panel .admin-sidebar{
    background: var(--vk-surface) !important;
    border-right: 1px solid var(--vk-line-soft) !important;
}
html[data-theme="light"] body.admin-panel .admin-main,
html[data-theme="light"] body.admin-panel .admin-content{
    background: var(--vk-bg) !important;
    background-image: none !important;
}

html[data-theme="light"],
html[data-theme="light"] body{ color: var(--vk-text) !important; }

html[data-theme="light"] .site-nav{
    background: var(--vk-glass) !important;
    background-image: none !important;
    border-bottom: 0 !important;
}
html[data-theme="light"] .nav-capsule-list{
    background: #f0f0f3 !important;
}

html[data-theme="light"] body.ds-active .ds-tile-link,
html[data-theme="light"] body.ds-active .ds-tile-link i{ color: var(--vk-mute) !important; }
html[data-theme="light"] body.ds-active .ds-tile-link code{
    color: var(--vk-accent-dp) !important;
    background: var(--vk-accent-faint) !important;
    border-color: var(--vk-accent-line) !important;
}
html[data-theme="light"] body.ds-active .ds-tile-media-actions .ds-btn,
html[data-theme="light"] body.ds-active .ds-thumb-edit{ color: #fff !important; }

html[data-theme="light"] .text-white:not(.btn):not(.badge){ color: var(--vk-text) !important; }
html[data-theme="light"] .text-white-50:not(.btn):not(.badge){ color: var(--vk-mute) !important; }

html[data-theme="light"] .text-muted,
html[data-theme="light"] body .text-muted,
html[data-theme="light"] .text-body-secondary{ color: var(--vk-mute) !important; }

html[data-theme="light"] [style*="#fde68a"],
html[data-theme="light"] [style*="#fcd34d"]{ color: #92400e !important; }
html[data-theme="light"] [style*="#fbbf24"]{ color: #b45309 !important; }
html[data-theme="light"] [style*="#86efac"]{ color: #15803d !important; }
html[data-theme="light"] [style*="#fca5a5"]{ color: #b91c1c !important; }
html[data-theme="light"] .wst-state.is-dirty,
html[data-theme="light"] .qb-reset-hi,
html[data-theme="light"] .ds-badge.is-amber,
html[data-theme="light"] .ds-card-icon.is-amber,
html[data-theme="light"] .ds-stat-icon.is-amber{ color: #92400e !important; }
html[data-theme="light"] .wst-state.is-saved,
html[data-theme="light"] .ds-badge.is-on,
html[data-theme="light"] .ds-stat-icon.is-green,
html[data-theme="light"] .ds-card-icon.is-green,
html[data-theme="light"] .wst-pm-icon.is-pp{ color: #15803d !important; }
html[data-theme="light"] .ds-btn-danger,
html[data-theme="light"] .ds-modal-x:hover,
html[data-theme="light"] .wst-pm-icon.is-tm,
html[data-theme="light"] .wst-page .btn-file.dark{ color: #b91c1c !important; }
html[data-theme="light"] .wst-pm-icon.is-bank{ color: #0369a1 !important; }

html[data-theme="light"] .popup-preview,
html[data-theme="light"] .pp-card,
html[data-theme="light"] .hero-banners,
html[data-theme="light"] .hero-slide{ color: #f5f3ff; }
html[data-theme="light"] .hero-banners .text-white,
html[data-theme="light"] .hero-banners .text-white-50,
html[data-theme="light"] .popup-preview .text-white,
html[data-theme="light"] .popup-preview .text-white-50{ color: #fff !important; }
html[data-theme="light"] .hero-banners{
    box-shadow: var(--vk-shadow-lg) !important;
}
html[data-theme="light"] .admin-sidebar{
    background: #ffffff !important;
    box-shadow: 0 20px 50px -40px rgba(15, 23, 42, .35) !important;
}
html[data-theme="light"] .m-dock{
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 18px 40px -26px rgba(15, 23, 42, .45) !important;
}
html[data-theme="light"] .avatar-btn,
html[data-theme="light"] .sidebar-avatar,
html[data-theme="light"] .header-user-avatar,
html[data-theme="light"] .btn-register,
html[data-theme="light"] .admin-btn-primary,
html[data-theme="light"] .btn-file,
html[data-theme="light"] .swal2-confirm{ color: #fff !important; }

html[data-theme="light"] .btn-register,
html[data-theme="light"] .avatar-btn{
    background-color: transparent !important;
    background-image: var(--vk-accent-grad) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 10px 22px -18px rgba(15, 23, 42, .28) !important;
}
html[data-theme="light"] .btn-register:hover,
html[data-theme="light"] .avatar-btn:hover{
    background-color: transparent !important;
    background-image: var(--vk-accent-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    filter: brightness(1.07);
}
html[data-theme="light"] .login-btn{
    background-color: var(--vk-surface) !important;
    background-image: none !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
    box-shadow: none !important;
}
html[data-theme="light"] .login-btn:hover{
    border-color: var(--vk-accent-line) !important;
    background-color: var(--vk-surface) !important;
    color: var(--vk-text) !important;
    box-shadow: var(--vk-glow-sm) !important;
}

html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus{
    border-color: var(--vk-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--vk-h), .18) !important;
}
html[data-theme="light"] .tp-input:focus,
html[data-theme="light"] .tp-method.active,
html[data-theme="light"] .hp-search .dataTables_filter input:focus{
    border-color: var(--vk-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--vk-h), .16) !important;
}
html[data-theme="light"] .stat-item-value,
html[data-theme="light"] .cat-pill i,
html[data-theme="light"] .cat-badge i,
html[data-theme="light"] .idb-pill i,
html[data-theme="light"] .acc-menu-item i,
html[data-theme="light"] .tp-eyebrow{ color: var(--vk-accent) !important; }


.vk-glass{
    background: var(--vk-glass-card) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk-glass-blur-sm) !important;
    backdrop-filter: var(--vk-glass-blur-sm) !important;
    border: 1px solid var(--vk-glass-line) !important;
    border-radius: var(--vk-r) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
    color: var(--vk-text) !important;
}
.vk-glass-float{
    background: var(--vk-glass-float) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk-glass-blur) !important;
    backdrop-filter: var(--vk-glass-blur) !important;
    border: 1px solid var(--vk-glass-line) !important;
    border-radius: var(--vk-r-lg) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi-lg) !important;
    color: var(--vk-text) !important;
}

.navbar.site-nav{
    background: var(--vk-glass-nav, rgba(15, 15, 20, .70)) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    border: none !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    top: 0 !important;
    min-height: var(--vk-nav-h, 68px);
    box-shadow: 0 18px 44px -34px rgba(0, 0, 0, .72) !important;
    transition: background-color .25s ease, box-shadow .25s ease;
}
.site-nav::after{ display: none !important; }
.navbar.site-nav > .container{
    min-height: var(--vk-nav-h, 68px);
    align-items: center;
    gap: 14px;
}

@media (min-width: 992px){
    .site-nav #navbarNav{
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 12px;
    }
    .site-nav #navbarNav > .nav-capsule-list{
        grid-column: 1;
        justify-self: center;
        min-width: 0;
        max-width: 100%;
    }
    .site-nav #navbarNav > ul.navbar-nav.ms-auto{
        grid-column: 2;
        justify-self: end;
    }
    .site-nav .navbar-brand{ flex: 0 1 auto !important; }
}

@media (min-width: 992px){
    .site-nav .nav-capsule-list{
        background: var(--vk-glass-capsule, rgba(255, 255, 255, .045)) !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        padding: 5px 7px !important;
        gap: 4px !important;
    }
    html[data-theme="light"] .site-nav .nav-capsule-list{
        background: var(--vk-glass-capsule) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .site-nav .nav-capsule-list .nav-pill{
        padding: 8px 16px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        border-radius: 999px !important;
        color: var(--vk-dim) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
        transition: color .18s ease, background-color .18s ease;
    }
    .site-nav .nav-capsule-list .nav-pill:hover{
        color: var(--vk-text) !important;
        background: var(--vk-glass-raise) !important;
        border-color: transparent !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .site-nav .nav-capsule-list .nav-pill.active,
    .site-nav .nav-capsule-list .nav-pill.active:hover{
        color: #fff !important;
        background: var(--vk-accent-grad) !important;
        background-origin: border-box !important;
        background-clip: border-box !important;
        background-repeat: no-repeat !important;
        border-color: transparent !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .26) !important;
        filter: none !important;
    }
    .site-nav .nav-capsule-list .nav-pill:focus-visible{
        outline: 2px solid rgba(var(--vk-h), .45);
        outline-offset: 2px;
    }
}

.site-nav .theme-toggle{
    width: 38px !important;
    height: 38px !important;
    background: transparent !important;
    border: 1px solid var(--vk-glass-line-2) !important;
    color: var(--vk-dim) !important;
    box-shadow: none !important;
}
.site-nav .theme-toggle:hover{
    color: var(--vk-text) !important;
    border-color: var(--vk-line-strong) !important;
    background: var(--vk-glass-raise) !important;
    transform: none !important;
    box-shadow: none !important;
}
.site-nav .wallet-pill{
    background: transparent !important;
    border: 1px solid var(--vk-glass-line-2) !important;
    box-shadow: none !important;
}
.site-nav .login-btn{
    height: 38px !important;
    background: transparent !important;
    border: 1px solid var(--vk-glass-line) !important;
    color: var(--vk-text) !important;
    box-shadow: none !important;
}
.site-nav .login-btn:hover{
    background: var(--vk-glass-raise) !important;
    border-color: var(--vk-line-strong) !important;
    color: var(--vk-text) !important;
    transform: none !important;
    box-shadow: none !important;
}
.site-nav .btn-register{
    height: 38px !important;
    background: var(--vk-accent-grad) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: var(--vk-accent-halo) !important;
}
.site-nav .btn-register:hover{
    filter: brightness(1.06);
    transform: none !important;
    box-shadow: 0 0 0 1px rgba(var(--vk-h), .26), 0 10px 24px -18px rgba(var(--vk-h), .50) !important;
}
.site-nav .avatar-btn{
    box-shadow: var(--vk-accent-halo) !important;
}
.site-nav .avatar-btn:hover{
    transform: none !important;
    filter: brightness(1.06);
    box-shadow: 0 0 0 1px rgba(var(--vk-h), .26), 0 10px 24px -18px rgba(var(--vk-h), .50) !important;
}

.announce-bar{
    background: var(--vk-glass-float) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk-glass-blur) !important;
    backdrop-filter: var(--vk-glass-blur) !important;
    border: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}
html:not([data-theme="light"]) .announce-bar{
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}
.m-dock{
    background: var(--vk-glass-float) !important;
    -webkit-backdrop-filter: var(--vk-glass-blur) !important;
    backdrop-filter: var(--vk-glass-blur) !important;
    border: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi-lg) !important;
}
body.admin-panel .admin-header,
.admin-header{
    background: var(--vk-glass-float) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk-glass-blur) !important;
    backdrop-filter: var(--vk-glass-blur) !important;
    border-bottom: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}
body.admin-panel .admin-sidebar,
.admin-sidebar{
    background: var(--vk-glass-float) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk-glass-blur) !important;
    backdrop-filter: var(--vk-glass-blur) !important;
    border-right: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}
.sidebar-logo{ border-bottom: 1px solid var(--vk-glass-line-2) !important; }
.sidebar-search,
.mem-search{
    background: var(--vk-glass-input) !important;
    border: 1px solid var(--vk-glass-line) !important;
    color: var(--vk-mute) !important;
}
.sidebar-search input,
.mem-search input{
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--vk-text) !important;
}
.sidebar-search input:focus,
.mem-search input:focus{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.sidebar-search i,
.mem-search i{ color: var(--vk-mute) !important; }
.sidebar-search{ border-bottom: 1px solid var(--vk-glass-line-2) !important; }

.dropdown-menu,
.user-menu{
    background: var(--vk-glass-float) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk-glass-blur) !important;
    backdrop-filter: var(--vk-glass-blur) !important;
    border: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}
.modal-content,
.ds-modal-card,
.swal2-popup,
.swal2-toast,
.app-toast{
    background: var(--vk-glass-float) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk-glass-blur) !important;
    backdrop-filter: var(--vk-glass-blur) !important;
    border: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi-lg) !important;
}
.modal-header,
.modal-footer,
.user-menu-head{ border-color: var(--vk-glass-line-2) !important; }
.user-menu-head{ background: var(--vk-glass-raise) !important; }

.admin-card,
.card,
.acc-card,
.acc-side,
.acc-stat,
.list-box,
.box-text,
.login-card,
.auth-card,
.activity-card,
.list-card,
.icon-card,
.rec-card,
.status-card,
.stock-cat-card,
.cat-id-card,
.card-shop-admin,
.stat-card-modern,
.stat-card-admin,
.stat-card,
.stat-item,
.topup-card,
.tp-card,
.ds-card,
.ds-stat,
.hero-banners{
    background: var(--vk-glass-card) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk-glass-blur-sm) !important;
    backdrop-filter: var(--vk-glass-blur-sm) !important;
    border: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}
.product-card,
.product-card-2,
.product-card-modern,
.category-card,
.cat-card,
.ref-card,
.qm-card,
.ro-card,
.idb-card{
    background: var(--vk-glass-card) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk-glass-blur-sm) !important;
    backdrop-filter: var(--vk-glass-blur-sm) !important;
    border: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}
.product-card:hover,
.product-card-2:hover,
.product-card-modern:hover,
.category-card:hover,
.cat-card:hover,
.ref-card:hover,
.qm-card:hover,
.ro-card:hover,
.idb-card:hover,
.stat-card:hover,
.card:hover,
.ds-card:hover{
    border-color: var(--vk-glass-accent) !important;
    box-shadow: var(--vk-lift-lg), var(--vk-glass-hi) !important;
}

.qm-grid > .qm-card{
    width: 100%;
    min-width: 0;
}
.card-head,
.ds-card-head{ border-bottom: 1px solid var(--vk-glass-line-2) !important; }
.popup-preview,
.pp-card{
    background: rgba(16, 16, 23, .72) !important;
    background-image: none !important;
    -webkit-backdrop-filter: var(--vk-glass-blur-sm) !important;
    backdrop-filter: var(--vk-glass-blur-sm) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}

.form-control,
.form-select,
.admin-search input,
.qb-search input,
.dataTables_filter input,
.ds-input{
    background: var(--vk-glass-input) !important;
    border: 1px solid var(--vk-glass-line) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.form-control:focus,
.form-select:focus,
.admin-search input:focus,
.qb-search input:focus,
.dataTables_filter input:focus,
.ds-input:focus{
    background: var(--vk-glass-input) !important;
    border-color: var(--vk-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--vk-h), .20) !important;
}

html[data-theme="light"] main{ background-color: transparent !important; }

html[data-theme="light"] .site-nav{
    background: var(--vk-glass-nav, rgba(255, 255, 255, .78)) !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 40px -34px rgba(15, 23, 42, .38) !important;
}
html[data-theme="light"] body.admin-panel .admin-header{
    background: var(--vk-glass-float) !important;
    background-image: none !important;
    border-color: var(--vk-glass-line) !important;
}
html[data-theme="light"] .admin-sidebar,
html[data-theme="light"] body.admin-panel .admin-sidebar{
    background: var(--vk-glass-float) !important;
    background-image: none !important;
    border-right: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}
html[data-theme="light"] .admin-header,
html[data-theme="light"] body.admin-panel .admin-header{
    background: var(--vk-glass-float) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}
html[data-theme="light"] .m-dock{
    background: var(--vk-glass-float) !important;
    border: 1px solid var(--vk-glass-line) !important;
}
html[data-theme="light"] .nav-capsule-list{
    background: var(--vk-glass-capsule, rgba(15, 23, 42, .035)) !important;
    border: 0 !important;
    box-shadow: none !important;
}
html[data-theme="light"] .announce-bar{
    background: var(--vk-glass-float) !important;
    background-image: none !important;
    border: 1px solid var(--vk-glass-line) !important;
}
html[data-theme="light"] body.admin-panel .admin-main,
html[data-theme="light"] body.admin-panel .admin-content{
    background: transparent !important;
    background-image: none !important;
}
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] .admin-search input,
html[data-theme="light"] .qb-search input,
html[data-theme="light"] .dataTables_filter input,
html[data-theme="light"] .ds-input,
html[data-theme="light"] .admin-toolbar .form-control,
html[data-theme="light"] .admin-toolbar .form-select{
    background: var(--vk-glass-input) !important;
    border-color: var(--vk-glass-line) !important;
}
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .admin-search input:focus,
html[data-theme="light"] .qb-search input:focus,
html[data-theme="light"] .dataTables_filter input:focus,
html[data-theme="light"] .ds-input:focus,
html[data-theme="light"] .admin-toolbar .form-control:focus,
html[data-theme="light"] .admin-toolbar .form-select:focus{
    background: var(--vk-glass-input) !important;
    border-color: var(--vk-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--vk-h), .20) !important;
}
html[data-theme="light"] .sidebar-search,
html[data-theme="light"] .mem-search{
    background: var(--vk-glass-input) !important;
    border: 1px solid var(--vk-glass-line) !important;
    color: var(--vk-mute) !important;
}

/* ===== ฟอร์มหลังบ้าน (style.css: .admin-main .form-label ฯลฯ) =====
   สีของฟอร์มถูกฮาร์ดโค้ดไว้สำหรับธีมมืด (ตัวอักษรสีอ่อน)
   ในธีมสว่างจึงกลืนกับพื้นขาวทั้งหมด — รวมถึงช่องอัปโหลด“Url รูปสินค้า” */
html[data-theme="light"] .admin-main .form-label,
html[data-theme="light"] .admin-main .admin-card label,
html[data-theme="light"] .admin-main .form-label small{
    color: #2c2c37 !important;
}
html[data-theme="light"] .admin-main .admin-card .fs-5{ color: var(--vk-text) !important; }

/* ช่องอัปโหลดรูป (style.css: .upload-zone) — พื้นเข้มในธีมมืด พอธีมสว่างต้องกลับเป็นพื้นอ่อน */
html[data-theme="light"] .upload-zone{
    background: #fafafb !important;
    border-color: rgba(15, 23, 42, .20) !important;
}
html[data-theme="light"] .upload-zone:hover{ background: #f4f4f6 !important; }
html[data-theme="light"] .upload-zone .uz-icon{ color: #8b8b96 !important; }
html[data-theme="light"] .upload-zone .uz-text{ color: #3f3f4d !important; }
html[data-theme="light"] .upload-zone .uz-hint{ color: #6b6b78 !important; }

/* ป้ายสถานะที่เขียนสีลงใน style="" ตรง ๆ (admin/edit/product.ejs, admin/add/*.ejs) */
html[data-theme="light"] .badge[style*="--ds-accent-lt"],
html[data-theme="light"] .badge[style*="34,197,94"]{ color: #15803d !important; }
html[data-theme="light"] .badge[style*="107,114,128"],
html[data-theme="light"] .badge[style*="156,163,175"]{ color: #3f3f52 !important; }
html[data-theme="light"] .admin-header{ color: var(--vk-text) !important; }
html[data-theme="light"] .admin-card,
html[data-theme="light"] .card,
html[data-theme="light"] .acc-card,
html[data-theme="light"] .acc-side,
html[data-theme="light"] .acc-stat,
html[data-theme="light"] .list-box,
html[data-theme="light"] .box-text,
html[data-theme="light"] .login-card,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .activity-card,
html[data-theme="light"] .list-card,
html[data-theme="light"] .icon-card,
html[data-theme="light"] .rec-card,
html[data-theme="light"] .status-card,
html[data-theme="light"] .stock-cat-card,
html[data-theme="light"] .cat-id-card,
html[data-theme="light"] .card-shop-admin,
html[data-theme="light"] .stat-card-modern,
html[data-theme="light"] .stat-card-admin,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .stat-item,
html[data-theme="light"] .topup-card,
html[data-theme="light"] .tp-card,
html[data-theme="light"] .ds-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .product-card-2,
html[data-theme="light"] .product-card-modern,
html[data-theme="light"] .category-card,
html[data-theme="light"] .cat-card,
html[data-theme="light"] .ref-card,
html[data-theme="light"] .qm-card,
html[data-theme="light"] .ro-card,
html[data-theme="light"] .idb-card{
    background: var(--vk-glass-card) !important;
    background-image: none !important;
    border: 1px solid var(--vk-glass-line) !important;
    box-shadow: var(--vk-glass-shadow), var(--vk-glass-hi) !important;
}
html[data-theme="light"] .product-card:hover,
html[data-theme="light"] .product-card-2:hover,
html[data-theme="light"] .product-card-modern:hover,
html[data-theme="light"] .category-card:hover,
html[data-theme="light"] .cat-card:hover,
html[data-theme="light"] .ref-card:hover,
html[data-theme="light"] .qm-card:hover,
html[data-theme="light"] .ro-card:hover,
html[data-theme="light"] .idb-card:hover,
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .card:hover,
html[data-theme="light"] .ds-card:hover{
    border-color: var(--vk-glass-accent) !important;
    box-shadow: var(--vk-lift-lg), var(--vk-glass-hi) !important;
}

@media (prefers-reduced-motion: reduce){
    body::before{ filter: none; opacity: .45; }
    .product-card:hover,
    .category-card:hover,
    .cat-card:hover,
    .ref-card:hover,
    .qm-card:hover,
    .ro-card:hover,
    .idb-card:hover,
    .stat-card:hover{ transform: none; }
}


.btn-register,
.site-nav .btn-register,
.site-nav .avatar-btn,
.product-card .product-button,
.product-card .product-button:active{
    box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 22px -18px rgba(0, 0, 0, .60) !important;
}
html[data-theme="light"] .btn-register,
html[data-theme="light"] .avatar-btn{
    box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 10px 22px -18px rgba(15, 23, 42, .28) !important;
}
.btn-register:hover,
.product-card .product-button:hover{
    box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 12px 26px -18px rgba(var(--vk-h), .38) !important;
}
.site-nav .btn-register:hover{
    box-shadow: 0 8px 20px -16px rgba(var(--vk-h), .40) !important;
}

.hb-dot-active{
    background: var(--vk-accent-grad) !important;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .55) !important;
}
.announce-tag{
    box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 18px -14px rgba(0, 0, 0, .55) !important;
}
.cat-type-chip{
    color: var(--vk-dim) !important;
    background: var(--vk-surface-3) !important;
    border-color: var(--vk-line) !important;
}
html[data-theme="light"] .cat-type-chip{
    color: #55555e !important;
    background: #f2f2f6 !important;
    border-color: rgba(15, 23, 42, .12) !important;
}
html[data-theme="light"] .idb-count,
html[data-theme="light"] .cat-badge{
    background: #f2f2f6 !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    color: #45454f !important;
}
.ro-card{ border-color: var(--vk-glass-line) !important; }
html[data-theme="light"] .ro-card{ border-color: var(--vk-glass-line) !important; }
.admin-toolbar .toolbar-count{
    background: var(--vk-surface-3) !important;
    border: 1px solid var(--vk-line) !important;
    color: var(--vk-text) !important;
}


.admin-card,
.card,
.acc-card,
.acc-side,
.acc-stat,
.list-box,
.box-text,
.login-card,
.auth-card,
.activity-card,
.list-card,
.icon-card,
.rec-card,
.status-card,
.stock-cat-card,
.cat-id-card,
.card-shop-admin,
.stat-card-modern,
.stat-card-admin,
.stat-card,
.stat-item,
.topup-card,
.tp-card,
.ds-card,
.ds-stat,
.hero-banners,
.product-card,
.product-card-2,
.product-card-modern,
.category-card,
.cat-card,
.ref-card,
.qm-card,
.ro-card,
.idb-card{
    background: var(--vk-surface) !important;
    background-image: none !important;
    border: 1px solid var(--vk-glass-line) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 14px 32px -26px rgba(0, 0, 0, .82) !important;
}
html[data-theme="light"] .admin-card,
html[data-theme="light"] .card,
html[data-theme="light"] .acc-card,
html[data-theme="light"] .acc-side,
html[data-theme="light"] .acc-stat,
html[data-theme="light"] .list-box,
html[data-theme="light"] .box-text,
html[data-theme="light"] .login-card,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .activity-card,
html[data-theme="light"] .list-card,
html[data-theme="light"] .icon-card,
html[data-theme="light"] .rec-card,
html[data-theme="light"] .status-card,
html[data-theme="light"] .stock-cat-card,
html[data-theme="light"] .cat-id-card,
html[data-theme="light"] .card-shop-admin,
html[data-theme="light"] .stat-card-modern,
html[data-theme="light"] .stat-card-admin,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .stat-item,
html[data-theme="light"] .topup-card,
html[data-theme="light"] .tp-card,
html[data-theme="light"] .ds-card,
html[data-theme="light"] .ds-stat,
html[data-theme="light"] .hero-banners,
html[data-theme="light"] .product-card,
html[data-theme="light"] .product-card-2,
html[data-theme="light"] .product-card-modern,
html[data-theme="light"] .category-card,
html[data-theme="light"] .cat-card,
html[data-theme="light"] .ref-card,
html[data-theme="light"] .qm-card,
html[data-theme="light"] .ro-card,
html[data-theme="light"] .idb-card{
    background: var(--vk-surface) !important;
    background-image: none !important;
    border: 1px solid var(--vk-glass-line) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 30px -26px rgba(15, 23, 42, .22) !important;
}

.product-card:hover,
.product-card-2:hover,
.product-card-modern:hover,
.category-card:hover,
.cat-card:hover,
.ref-card:hover,
.qm-card:hover,
.ro-card:hover,
.idb-card:hover,
.stat-card:hover,
.card:hover,
.ds-card:hover,
.ds-stat:hover{
    border-color: var(--vk-line-strong) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .30), 0 24px 48px -28px rgba(0, 0, 0, .80) !important;
}
html[data-theme="light"] .product-card:hover,
html[data-theme="light"] .product-card-2:hover,
html[data-theme="light"] .product-card-modern:hover,
html[data-theme="light"] .category-card:hover,
html[data-theme="light"] .cat-card:hover,
html[data-theme="light"] .ref-card:hover,
html[data-theme="light"] .qm-card:hover,
html[data-theme="light"] .ro-card:hover,
html[data-theme="light"] .idb-card:hover,
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .card:hover,
html[data-theme="light"] .ds-card:hover,
html[data-theme="light"] .ds-stat:hover{
    border-color: var(--vk-line-strong) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .07), 0 22px 44px -28px rgba(15, 23, 42, .22) !important;
}

.cat-card-banner,
.cat-card-img,
.product-card-img,
.card-shop-admin-img,
.category-banner,
.category-banner-img,
.product-card .product-image,
.product-card-2 .product-image,
.product-card-modern .product-image{
    box-shadow: none !important;
}
.product-card .product-image,
.product-card-2 .product-image,
.product-card-modern .product-image{
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
}

.card-head,
.ds-card-head{
    border-bottom: 0 !important;
    border-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
}
.admin-card-header{
    border-bottom: 0 !important;
    border-top: 0 !important;
}
.ds-sec-label::after,
.section-divider,
.section-line{
    display: none !important;
}

.category-head,
.category-head *,
.cat-head{
    background: transparent !important;
    background-image: none !important;
}
.category-head{
    border: 0 !important;
    border-top: 0 !important;
}
.cat-badge{
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--vk-line-soft) !important;
    color: var(--vk-text) !important;
}
html[data-theme="light"] .cat-badge{
    background: rgba(15, 23, 42, .045) !important;
    border-color: rgba(15, 23, 42, .10) !important;
    color: var(--vk-text) !important;
}

.stat-card{
    background: var(--vk-surface) !important;
    background-image: none !important;
}
.stat-card-icon,
.stat-card-icon.success,
.stat-card-icon.warning,
.stat-card-icon.danger,
.stat-card-icon.info,
.card-head-icon,
.mem-head-icon{
    background: rgba(255, 255, 255, .05) !important;
    background-image: none !important;
    border: 1px solid var(--vk-line-soft) !important;
    box-shadow: none !important;
}
.stat-card-icon,
.card-head-icon,
.mem-head-icon{ color: var(--vk-mute) !important; }
.stat-card-icon.success{ color: #4ade80 !important; }
.stat-card-icon.warning{ color: #fbbf24 !important; }
.stat-card-icon.danger{ color: #f87171 !important; }
.stat-card-icon.info{ color: #60a5fa !important; }
html[data-theme="light"] .stat-card-icon,
html[data-theme="light"] .stat-card-icon.success,
html[data-theme="light"] .stat-card-icon.warning,
html[data-theme="light"] .stat-card-icon.danger,
html[data-theme="light"] .stat-card-icon.info,
html[data-theme="light"] .card-head-icon,
html[data-theme="light"] .mem-head-icon{
    background: rgba(15, 23, 42, .04) !important;
    border-color: rgba(15, 23, 42, .09) !important;
}
html[data-theme="light"] .stat-card-icon{ color: #6b6b78 !important; }
.stat-card-value span{ color: var(--vk-mute) !important; }

.badge.bg-primary,
.badge.bg-info,
.st-badge,
.badge-stock,
.stock-badge,
.cat-card-tag,
.cat-card-promo,
.cat-type-chip{
    background: var(--vk-surface-3) !important;
    background-image: none !important;
    border: 1px solid var(--vk-line-soft) !important;
}
html[data-theme="light"] .badge.bg-primary,
html[data-theme="light"] .badge.bg-info,
html[data-theme="light"] .st-badge,
html[data-theme="light"] .badge-stock,
html[data-theme="light"] .stock-badge,
html[data-theme="light"] .cat-card-tag,
html[data-theme="light"] .cat-card-promo,
html[data-theme="light"] .cat-type-chip{
    background: rgba(15, 23, 42, .045) !important;
    border-color: rgba(15, 23, 42, .10) !important;
}

.header-user-avatar,
.sidebar-avatar{
    box-shadow: 0 1px 3px rgba(0, 0, 0, .40) !important;
}
.sidebar-logo img{
    box-shadow: none !important;
    border: 0 !important;
}

.stock-badge,
.cat-card-tag,
.cat-card-promo,
.badge-stock,
.st-badge,
.cat-type-chip,
.card-head-icon,
.mem-head-icon,
.stat-card-icon{ border-color: var(--vk-line-soft) !important; }
.ro-card,
.ro-card:hover{ border-color: var(--vk-glass-line) !important; }
html[data-theme="light"] .ro-card,
html[data-theme="light"] .ro-card:hover{ border-color: var(--vk-glass-line) !important; }

.stat-item-wm{
    color: var(--vk-accent-lt) !important;
    opacity: 1 !important;
    filter: none !important;
}
html[data-theme="light"] .stat-item-wm{
    color: var(--vk-accent) !important;
    opacity: 1 !important;
    filter: none !important;
}
.stat-item:hover{ border-color: var(--vk-line-strong) !important; }
html[data-theme="light"] .stat-item:hover{ border-color: var(--vk-line-strong) !important; }

.section-head::after,
.section-head::before{ display: none !important; }
.section-head{
    border: 0 !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 14px !important;
}
.section-title::after,
.section-title::before{ display: none !important; }

.sidebar-logo{ border-bottom: 0 !important; }
.idb-count{
    background: var(--vk-surface-3) !important;
    background-image: none !important;
    border: 1px solid var(--vk-line-soft) !important;
    color: var(--vk-text) !important;
}
html[data-theme="light"] .idb-count{
    background: rgba(15, 23, 42, .045) !important;
    border-color: rgba(15, 23, 42, .10) !important;
    color: var(--vk-text) !important;
}

.admin-sidebar,
.admin-header,
body.admin-panel .admin-sidebar,
body.admin-panel .admin-header{
    box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 12px 30px -26px rgba(0, 0, 0, .85) !important;
}
html[data-theme="light"] .admin-sidebar,
html[data-theme="light"] .admin-header,
html[data-theme="light"] body.admin-panel .admin-sidebar,
html[data-theme="light"] body.admin-panel .admin-header{
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 28px -26px rgba(15, 23, 42, .22) !important;
}

.site-nav::before,
.site-nav::after,
.navbar.site-nav::before,
.navbar.site-nav::after{
    content: none !important;
    display: none !important;
    height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
.nav-pill::after,
.nav-pill.active::after,
.site-nav .nav-capsule-list .nav-pill::after,
.site-nav .nav-capsule-list .nav-pill.active::after{
    content: none !important;
    display: none !important;
    height: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
html[data-theme="light"] .nav-pill::after,
html[data-theme="light"] .nav-pill.active::after{
    content: none !important;
    display: none !important;
    height: 0 !important;
}


.vis-switch .slider{
    width: 44px !important;
    height: 24px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    background: var(--vk-surface-3, #212127) !important;
    border: 1px solid var(--vk-line, rgba(255, 255, 255, .10)) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22) !important;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
.vis-switch .slider::after{
    content: "";
    position: absolute;
    top: 2px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--vk-mute, #8a8a95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px -3px rgba(0, 0, 0, .35);
    transition: transform .24s cubic-bezier(.2, .9, .25, 1), background .2s ease, box-shadow .2s ease;
}
.vis-switch input{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    display: block !important;
    z-index: 2;
    cursor: pointer;
}

.vis-switch input:checked + .slider{
    background: var(--vk-accent-grad, linear-gradient(180deg, var(--vk-accent-lt) 0%, var(--vk-accent-dp) 100%)) !important;
    border-color: rgba(var(--vk-h, 93, 63, 211), .55) !important;
    box-shadow: var(--vk-accent-halo, 0 4px 14px -10px rgba(93, 63, 211, .55), 0 1px 2px rgba(0, 0, 0, .26)), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}
.vis-switch input:checked + .slider::after{
    transform: translateX(18px);
    background: #fff;
}

.vis-switch:hover .slider{
    border-color: var(--vk-line-strong, rgba(255, 255, 255, .20)) !important;
}
.vis-switch:hover input:checked + .slider{
    filter: brightness(1.08);
    border-color: rgba(var(--vk-h, 93, 63, 211), .70) !important;
}
.vis-switch input:focus-visible + .slider{
    box-shadow: 0 0 0 3px var(--vk-accent-faint, rgba(93, 63, 211, .07)), 0 0 0 1px var(--vk-accent-line, rgba(93, 63, 211, .32)) !important;
}
.vis-switch:active .slider::after{ transform: scale(.92); }
.vis-switch:active input:checked + .slider::after{ transform: translateX(18px) scale(.92); }
.vis-switch input:disabled + .slider{ opacity: .5 !important; cursor: not-allowed; }

html[data-theme="light"] .vis-switch .slider{
    background: rgba(15, 23, 42, .10) !important;
    border-color: var(--vk-line, rgba(15, 23, 42, .12)) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06) !important;
}
html[data-theme="light"] .vis-switch .slider::after{
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .22), 0 2px 6px -3px rgba(15, 23, 42, .20);
}
html[data-theme="light"] .vis-switch input:checked + .slider{
    background: var(--vk-accent-grad, linear-gradient(180deg, var(--vk-accent-lt) 0%, var(--vk-accent-dp) 100%)) !important;
    border-color: rgba(var(--vk-h, 93, 63, 211), .55) !important;
    box-shadow: var(--vk-accent-halo, 0 4px 14px -10px rgba(93, 63, 211, .55), 0 1px 2px rgba(0, 0, 0, .18)), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
html[data-theme="light"] .vis-switch:hover input:checked + .slider{
    filter: none;
    border-color: rgba(var(--vk-h, 93, 63, 211), .60) !important;
}

.form-switch .form-check-input{
    width: 44px !important;
    height: 24px !important;
    margin-top: .05rem !important;
    border-radius: 999px !important;
    background-color: var(--vk-surface-3, #212127) !important;
    border: 1px solid var(--vk-line, rgba(255, 255, 255, .10)) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    background-size: 18px 18px !important;
    background-position: left 3px center !important;
    background-repeat: no-repeat !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22) !important;
    cursor: pointer;
    transition: background-color .2s ease, background-position .24s cubic-bezier(.2, .9, .25, 1), border-color .2s ease, box-shadow .2s ease;
}
.form-switch .form-check-input:checked{
    background-color: var(--vk-accent, #5D3FD3) !important;
    border-color: rgba(var(--vk-h, 93, 63, 211), .55) !important;
    background-position: right 3px center !important;
    box-shadow: var(--vk-accent-halo, 0 4px 14px -10px rgba(93, 63, 211, .55), 0 1px 2px rgba(0, 0, 0, .26)) !important;
}
.form-switch .form-check-input:focus{
    border-color: var(--vk-accent-line, rgba(93, 63, 211, .32)) !important;
    box-shadow: 0 0 0 3px var(--vk-accent-faint, rgba(93, 63, 211, .07)), 0 0 0 1px var(--vk-accent-line, rgba(93, 63, 211, .32)) !important;
}
.form-switch .form-check-input:disabled{ opacity: .5 !important; }
html[data-theme="light"] .form-switch .form-check-input{
    background-color: rgba(15, 23, 42, .10) !important;
    border-color: var(--vk-line, rgba(15, 23, 42, .12)) !important;
}
html[data-theme="light"] .form-switch .form-check-input:checked{
    background-color: var(--vk-accent, #5D3FD3) !important;
    border-color: rgba(var(--vk-h, 93, 63, 211), .60) !important;
}

.tp-pagehead{ display: flex; align-items: center; min-width: 0; }
.tp-pagehead-text{ min-width: 0; }
.tp-pagehead-text h4{ color: var(--vk-text); letter-spacing: .2px; }
.tp-pagehead-text .small{ color: var(--vk-mute) !important; }

.tp-container{ max-width: 960px !important; }
.tp-card{
    max-width: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.tp-detail{
    max-width: 860px; margin: 16px auto 0;
    background: var(--vk-surface);
    border: 1px solid var(--vk-line-soft);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--vk-shadow);
}

.tp-methods{
    grid-template-columns: repeat(var(--tp-cols, 3), minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    align-items: stretch;
}
.tp-methods.tp-cols-3{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.tp-methods.tp-cols-2{ max-width: 860px !important; }

.tp-method{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 13px !important;
    row-gap: 0 !important;
    text-align: left !important;
    padding: 15px 14px !important;
    border-radius: 16px !important;
    border: 1px solid var(--vk-line-soft, rgba(255, 255, 255, .065)) !important;
    background: var(--vk-surface, #141417) !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.tp-method:hover{
    border-color: var(--vk-line-strong, rgba(255, 255, 255, .20)) !important;
    background: var(--vk-surface-2, #1a1a1f) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--vk-lift) !important;
}
.tp-method.active{
    border-color: var(--vk-accent-line, rgba(93, 63, 211, .32)) !important;
    background: var(--vk-surface, #141417) !important;
    background-image: linear-gradient(180deg, var(--vk-accent-faint, rgba(93, 63, 211, .07)) 0%, transparent 62%) !important;
    box-shadow: var(--vk-shadow) !important;
}
.tp-method:focus-visible{
    outline: none !important;
    border-color: var(--vk-accent-line, rgba(93, 63, 211, .32)) !important;
    box-shadow: 0 0 0 3px var(--vk-accent-faint, rgba(93, 63, 211, .07)) !important;
}

.tp-icon{
    grid-column: 1 !important; grid-row: 1 !important;
    width: 48px !important; height: 48px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    font-size: 20px !important;
    flex: 0 0 auto !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, .10);
}
.tp-icon-angpao{ box-shadow: none !important; }
.tp-icon-bank{ box-shadow: none !important; }
.tp-icon-qr{ box-shadow: none !important; }
.tp-icon.has-img{
    width: 48px !important; height: 48px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    background: var(--vk-surface-3, #212127) !important;
    border: 1px solid var(--vk-line-soft, rgba(255, 255, 255, .065)) !important;
    overflow: hidden !important;
}
.tp-icon.has-img img{ width: 100%; height: 100%; object-fit: contain !important; padding: 4px; display: block; }

.tp-method-info{ grid-column: 2 !important; grid-row: 1 !important; min-width: 0; text-align: left; }
.tp-name{
    color: var(--vk-text, #f2f2f4) !important;
    font-size: 14.5px !important; font-weight: 700 !important;
    line-height: 1.35 !important; margin: 0 0 3px !important;
}
.tp-desc{
    color: var(--vk-mute, #88888f) !important;
    font-size: 12px !important; line-height: 1.5 !important;
    min-height: 0 !important; margin: 0 !important;
}
.tp-fee{
    margin-top: 8px !important;
    padding: 3px 9px !important;
    font-size: 11px !important; font-weight: 600 !important;
    background: rgba(34, 197, 94, .10) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, .22) !important;
}

.tp-badge{
    grid-column: 3 !important; grid-row: 1 !important;
    position: static !important; top: auto !important; right: auto !important;
    align-self: start !important; justify-self: end !important;
    padding: 3px 9px !important;
    font-size: 10.5px !important; font-weight: 700 !important;
    border: 1px solid transparent;
    box-shadow: none !important;
}
.tp-badge-hot{
    background: var(--vk-accent-soft, rgba(93, 63, 211, .12)) !important;
    color: var(--vk-accent-lt, #7d63dc) !important;
    border-color: var(--vk-accent-line, rgba(93, 63, 211, .32)) !important;
    box-shadow: none !important;
}
.tp-badge-auto{
    background: rgba(255, 255, 255, .05) !important;
    color: var(--vk-dim, #b4b4bd) !important;
    border-color: var(--vk-line-soft, rgba(255, 255, 255, .065)) !important;
}
.tp-badge-soon{
    background: rgba(255, 255, 255, .04) !important;
    color: var(--vk-mute, #88888f) !important;
    border-color: var(--vk-line-soft, rgba(255, 255, 255, .065)) !important;
}

.tp-radio{
    display: flex !important;
    position: absolute !important;
    left: auto !important; right: 13px !important;
    top: auto !important; bottom: 13px !important;
    width: 22px !important; height: 22px !important;
    margin: 0 !important;
    transform: none !important;
    border: 1px solid var(--vk-line-strong, rgba(255, 255, 255, .20)) !important;
    background: transparent !important;
    opacity: 0 !important;
    transition: opacity .18s ease, background .18s ease, border-color .18s ease !important;
}
.tp-radio i{ opacity: 0 !important; font-size: 11px !important; }
.tp-method.active .tp-radio{
    opacity: 1 !important;
    border: 1px solid rgba(var(--vk-h, 93, 63, 211), .55) !important;
    background: var(--vk-accent-grad, linear-gradient(180deg, #755cda 0%, #4a32a9 100%)) !important;
}
.tp-method.active .tp-radio i{ opacity: 1 !important; }

.tp-detail .tp-form{ max-width: none !important; margin: 0 !important; }
.tp-detail .tp-form + .tp-form,
.tp-detail .tp-form + .tp-banner,
.tp-detail .tp-banner + .tp-form{ margin-top: 14px !important; }
.tp-detail .tp-banner{
    max-width: none !important;
    margin: 0 0 14px !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.tp-detail .tp-banner img{ display: block; width: 100%; height: auto; border-radius: 12px; }
.tp-detail .tp-link-label{ color: var(--vk-dim, #b4b4bd) !important; }
.tp-detail .tp-input{
    background: var(--vk-input, #101013) !important;
    border: 1px solid var(--vk-line-soft, rgba(255, 255, 255, .065)) !important;
    border-radius: 12px !important;
    color: var(--vk-text, #f2f2f4) !important;
    padding: 12px 14px !important;
}
.tp-detail .tp-input:focus{
    border-color: var(--vk-accent-line, rgba(93, 63, 211, .32)) !important;
    box-shadow: 0 0 0 3px var(--vk-accent-faint, rgba(93, 63, 211, .07)) !important;
}
.tp-detail .tp-input::placeholder{ color: var(--vk-mute, #88888f) !important; }
.tp-detail .tp-btn{
    border-radius: 12px !important;
    box-shadow: var(--vk-accent-halo) !important;
}
.tp-detail .tp-btn:hover{ filter: brightness(1.07); }

html[data-theme="light"] .tp-container{ max-width: 960px !important; }
html[data-theme="light"] .tp-card{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html[data-theme="light"] .tp-detail{
    background: #ffffff !important;
    border-color: #ececf2 !important;
    box-shadow: 0 14px 34px -28px rgba(23, 23, 28, .32) !important;
}
html[data-theme="light"] .tp-method{
    background: #ffffff !important;
    background-image: none !important;
    border-color: #e8e8ef !important;
    box-shadow: none !important;
}
html[data-theme="light"] .tp-method:hover{
    border-color: #cfcada !important;
    box-shadow: 0 10px 24px -18px rgba(23, 23, 28, .34) !important;
}
html[data-theme="light"] .tp-method.active{
    background: #ffffff !important;
    background-image: linear-gradient(180deg, rgba(93, 63, 211, .05) 0%, transparent 62%) !important;
    border-color: var(--vk-accent-line) !important;
    box-shadow: 0 12px 28px -22px rgba(23, 23, 28, .32) !important;
}
html[data-theme="light"] .tp-radio{
    border-color: #cfd2da !important;
    background: transparent !important;
}
html[data-theme="light"] .tp-method.active .tp-radio{
    border-color: rgba(var(--vk-h), .55) !important;
    background: var(--vk-accent-grad) !important;
}
html[data-theme="light"] .tp-name{ color: #17171c !important; }
html[data-theme="light"] .tp-desc{ color: #6b6b76 !important; }
html[data-theme="light"] .tp-fee{
    background: #eafaf1 !important;
    color: #059669 !important;
    border-color: rgba(5, 150, 105, .22) !important;
}
html[data-theme="light"] .tp-badge-hot{
    background: rgba(93, 63, 211, .10) !important;
    color: var(--vk-accent) !important;
    border-color: var(--vk-accent-line) !important;
}
html[data-theme="light"] .tp-badge-auto{
    background: #f2f2f7 !important;
    color: #5c5c66 !important;
    border-color: #e4e4ec !important;
}
html[data-theme="light"] .tp-badge-soon{
    background: #f2f2f7 !important;
    color: #6b6b76 !important;
    border-color: #e4e4ec !important;
}
html[data-theme="light"] .tp-icon.has-img{
    background: #f7f7fa !important;
    border-color: #e8e8ef !important;
}
html[data-theme="light"] .tp-detail .tp-input{
    background: #fbfbfd !important;
    border-color: #e4e4ec !important;
    color: #17171c !important;
}

@media (max-width: 1199.98px){
    .tp-methods.tp-cols-3{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767.98px){
    .tp-methods,
    .tp-methods.tp-cols-2,
    .tp-methods.tp-cols-3{ grid-template-columns: 1fr !important; }
    .tp-method{ padding: 13px !important; column-gap: 12px !important; }
    .tp-icon, .tp-icon.has-img{ width: 44px !important; height: 44px !important; border-radius: 12px !important; font-size: 18px !important; }
    .tp-radio{ right: 12px !important; bottom: 12px !important; width: 20px !important; height: 20px !important; }
    .tp-badge{ font-size: 10px !important; }
    .tp-detail{ padding: 14px; border-radius: 16px; }
}

:root{
    --vk-queue-line: rgba(158, 152, 176, .26);
}
html[data-theme="light"]{
    --vk-queue-line: rgba(124, 118, 142, .34);
}

.btn.vk-queue-btn{
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: auto !important;
    padding: 6px 13px 6px 11px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: .1px;
    border-radius: 11px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    color: var(--vk-dim) !important;
    background: var(--vk-glass-card) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    border: 1px solid var(--vk-queue-line) !important;
    box-shadow: none !important;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
                box-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}
.btn.vk-queue-btn:hover{
    color: var(--vk-text) !important;
    background: var(--vk-glass-raise) !important;
    border-color: rgba(var(--vk-h), .42) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--vk-lift) !important;
}
.btn.vk-queue-btn:active,
.btn.vk-queue-btn.active{
    color: #fff !important;
    background: var(--vk-accent-grad) !important;
    border-color: transparent !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .26) !important;
    transform: none !important;
}
.btn.vk-queue-btn:focus-visible{
    outline: 2px solid rgba(var(--vk-h), .55) !important;
    outline-offset: 2px !important;
}

.btn.vk-queue-btn .vk-qb-dot{
    flex: 0 0 auto;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--vk-accent);
    box-shadow: none;
    transition: background-color .2s ease;
}
.btn.vk-queue-btn:active .vk-qb-dot,
.btn.vk-queue-btn.active .vk-qb-dot{
    background: #fff !important;
}

.btn.vk-queue-btn .vk-qb-ico{
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
    color: var(--vk-accent-lt);
    transition: color .2s ease;
}
.btn.vk-queue-btn:hover .vk-qb-ico{ color: var(--vk-accent) !important; }
.btn.vk-queue-btn:active .vk-qb-ico,
.btn.vk-queue-btn.active .vk-qb-ico{
    color: #fff !important;
}

.btn.vk-queue-btn .vk-qb-text{ flex: 0 0 auto; }

@media (max-width: 575.98px){
    .btn.vk-queue-btn{ padding: 6px 11px 6px 10px !important; gap: 6px !important; font-size: 12.5px !important; }
    .btn.vk-queue-btn .vk-qb-ico{ font-size: 12px; }
}
.tp-container{ max-width: 1080px !important; }

.tp-chan-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 980px;
    margin: 0 auto;
}
.tp-chan{
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: var(--vk-surface);
    border: 1px solid var(--vk-line-soft);
    border-radius: var(--vk-r-lg);
    box-shadow: var(--vk-shadow);
    transition: border-color .2s ease, background-color .2s ease,
                transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
a.tp-chan:hover, a.tp-chan:focus-visible{
    border-color: var(--vk-line-strong);
    background: var(--vk-surface-2);
    transform: translateY(-3px);
    box-shadow: var(--vk-lift-lg);
    outline: none;
    color: inherit;
}
.tp-chan-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tp-chan .tp-icon,
.tp-chan .tp-icon.has-img{
    width: 54px !important; height: 54px !important;
    border-radius: 15px !important; font-size: 22px !important;
}
.tp-chan .tp-badge-hot{ border-color: var(--vk-line-soft) !important; }
.tp-chan-name{
    color: var(--vk-text);
    font-size: 16.5px; font-weight: 800; letter-spacing: .1px; line-height: 1.35;
}
.tp-chan-desc{ color: var(--vk-mute); font-size: 12.5px; line-height: 1.6; }
.tp-chan-foot{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 3px;
}
.tp-chan .tp-fee{ margin-top: 0 !important; }
.tp-fee.is-wait{
    background: rgba(245, 158, 11, .10) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, .22) !important;
}
.tp-chan-go{
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11.5px; color: var(--vk-dim);
    background: var(--vk-surface-3);
    border: 1px solid var(--vk-line-soft);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
a.tp-chan:hover .tp-chan-go{ background: var(--vk-accent); color: #fff; transform: translateX(2px); }
button.tp-chan{ font: inherit; cursor: pointer; }
.tp-chan.is-soon{ opacity: .72; box-shadow: none; cursor: not-allowed; }
.tp-chan.is-soon:hover{ transform: none; background: var(--vk-surface); border-color: var(--vk-line-soft); box-shadow: none; }

.tp-crumb{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    max-width: 1120px; margin: 0 auto 14px;
}
.tp-back{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px; border-radius: 11px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: var(--vk-dim);
    background: var(--vk-surface);
    border: 1px solid var(--vk-line-soft);
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.tp-back:hover{ color: var(--vk-text); background: var(--vk-surface-2); border-color: var(--vk-line-strong); }
.tp-back i{ font-size: 11px; }
.tp-chip{
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 0; padding: 6px 12px 6px 7px; border-radius: 999px;
    background: var(--vk-glass-card);
    -webkit-backdrop-filter: var(--vk-glass-blur-sm);
    backdrop-filter: var(--vk-glass-blur-sm);
    border: 1px solid var(--vk-glass-line);
}
.tp-chip .tp-badge-hot{ border-color: var(--vk-glass-line) !important; }
.tp-chip-ico{
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; overflow: hidden;
    background: var(--vk-surface-3);
    border: 1px solid var(--vk-line-soft);
}
.tp-chip-ico img{ width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }
.tp-chip-name{
    color: var(--vk-text); font-size: 13.5px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tp-stage{
    display: grid;
    grid-template-columns: minmax(0, 1.86fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    max-width: none;
    margin: 0 auto;
}

.tp-guide{
    min-width: 0; padding: 14px;
    background: var(--vk-surface);
    border: 1px solid var(--vk-line-soft);
    border-radius: var(--vk-r-lg);
    box-shadow: var(--vk-shadow);
}
.tp-guide-head{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}
.tp-guide-title{
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0; color: var(--vk-text);
    font-size: 13.5px; font-weight: 700;
}
.tp-guide-title i{ color: var(--vk-accent-lt); font-size: 13px; }
.tp-guide-count{
    color: var(--vk-mute); font-size: 12px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tp-guide-view{
    position: relative;
    height: clamp(240px, 42vh, 430px);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background: var(--vk-input);
    border: 1px solid var(--vk-line-soft);
    border-radius: var(--vk-r);
}
.tp-guide-view > img{
    display: block; width: 100%; height: 100%;
    object-fit: contain; object-position: center;
}
.tp-guide-nav{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; color: var(--vk-text); cursor: pointer;
    background: var(--vk-glass-float);
    -webkit-backdrop-filter: var(--vk-glass-blur-sm);
    backdrop-filter: var(--vk-glass-blur-sm);
    border: 1px solid var(--vk-glass-line);
    transition: background-color .18s ease, color .18s ease;
}
.tp-guide-nav:hover{ background: var(--vk-glass-raise); }
.tp-guide-nav.is-prev{ left: 10px; }
.tp-guide-nav.is-next{ right: 10px; }
.tp-guide-empty{
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    color: var(--vk-mute); font-size: 12.5px; text-align: center; padding: 0 18px;
}
.tp-guide-empty i{ font-size: 26px; color: var(--vk-dim); }
.tp-guide-thumbs{
    display: flex; gap: 8px; margin-top: 10px;
    overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: thin;
}
.tp-thumb{
    flex: 0 0 auto; width: 68px; height: 50px;
    padding: 0; border-radius: 9px; overflow: hidden;
    background: var(--vk-input);
    border: 1px solid var(--vk-line-soft);
    opacity: .55; cursor: pointer;
    transition: opacity .18s ease, border-color .18s ease;
}
.tp-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-thumb:hover{ opacity: .85; }
.tp-thumb.active{ opacity: 1; border-color: var(--vk-line-strong); }

.tp-panel{
    position: sticky;
    top: calc(var(--vk-nav-h, 68px) + 14px);
    min-width: 0; max-width: none; margin: 0; padding: 18px;
    display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 12px;
    background: var(--vk-surface);
    border: 1px solid var(--vk-line-soft);
    border-radius: var(--vk-r-lg);
    box-shadow: var(--vk-shadow);
}
.tp-panel-head{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.tp-panel-title{
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0; color: var(--vk-text);
    font-size: 14.5px; font-weight: 700;
}
.tp-panel-title i{ color: var(--vk-accent-lt); font-size: 13px; }
.tp-panel-label{ margin: 0; color: var(--vk-dim); font-size: 12.5px; font-weight: 600; }
.tp-panel-meta{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.tp-panel-meta .tp-fee{ margin-top: 0 !important; }
.tp-panel-note{
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0; padding: 9px 11px;
    color: var(--vk-mute); font-size: 11.5px; line-height: 1.6;
    background: var(--vk-input);
    border: 1px solid var(--vk-line-soft);
    border-radius: 11px;
}
.tp-panel-note i{ margin-top: 2px; color: var(--vk-dim); }
.tp-panel-promo{
    border-radius: 12px; overflow: hidden;
    background: var(--vk-input);
    border: 1px solid var(--vk-line-soft);
}
.tp-panel-promo img{ display: block; width: 100%; height: auto; }
.tp-panel .tp-help{
    background: var(--vk-surface-2) !important;
    color: var(--vk-dim) !important;
    border: 1px solid var(--vk-line-soft) !important;
    box-shadow: none !important;
}
.tp-panel .tp-help:hover{ background: var(--vk-surface-3) !important; color: var(--vk-text) !important; }
.tp-panel .tp-form{
    display: flex; flex-direction: column; align-items: stretch;
    gap: 12px; width: 100%;
    max-width: none !important; margin: 0 !important;
}
.tp-panel .tp-form[hidden]{ display: none; }
.tp-panel .tp-input{
    width: 100%;
    background: var(--vk-input) !important;
    border: 1px solid var(--vk-line-soft) !important;
    border-radius: 12px !important;
    color: var(--vk-text) !important;
    padding: 12px 14px !important;
}
.tp-panel .tp-input::placeholder{ color: var(--vk-mute) !important; }
.tp-panel .tp-input:focus{
    border-color: var(--vk-line-strong) !important;
    box-shadow: 0 0 0 3px var(--vk-accent-faint) !important;
    outline: none;
}
.tp-panel .tp-btn{
    width: 100%;
    background: var(--vk-accent-grad) !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: var(--vk-lift) !important;
}
.tp-panel .tp-btn:hover{ filter: brightness(1.06); box-shadow: var(--vk-accent-halo) !important; }
.tp-panel .tp-btn:disabled{
    opacity: .5; cursor: not-allowed;
    filter: none; box-shadow: none !important;
}
.tp-amount{
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px;
    background: var(--vk-input);
    border: 1px solid var(--vk-line-soft);
    border-radius: 12px;
}
.tp-amount .tp-input{
    flex: 1 1 auto; padding: 12px 0 !important;
    background: transparent !important; border: 0 !important;
}
.tp-amount .tp-input:focus{ box-shadow: none !important; }
.tp-amount-prefix{
    flex: 0 0 auto;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--vk-dim) !important;
    font-size: 15px; font-weight: 700;
}
.tp-panel .tp-amount-hint{ margin: 0 !important; color: var(--vk-mute) !important; font-size: 12px; }
.tp-bank-info{
    display: flex; flex-direction: column;
    border: 1px solid var(--vk-line-soft);
    border-radius: 12px; overflow: hidden;
}
.tp-bank-row{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 12px;
    font-size: 12.5px; color: var(--vk-mute);
    background: var(--vk-input);
}
.tp-bank-row + .tp-bank-row{ border-top: 1px solid var(--vk-line-soft); }
.tp-bank-row b{ color: var(--vk-text); font-weight: 700; }

.tp-status{
    margin-top: 0 !important;
    background: var(--vk-input) !important;
    border: 1px solid var(--vk-line-soft) !important;
    border-radius: var(--vk-r) !important;
}
.tp-status-spin{
    border-color: rgba(255, 255, 255, .12) !important;
    border-top-color: var(--vk-accent-lt) !important;
}
.tp-status-title{ color: var(--vk-text) !important; }
.tp-status-sub{ color: var(--vk-mute) !important; }

.tp-qr-box{
    margin-top: 0 !important;
    background: var(--vk-input) !important;
    border: 1px solid var(--vk-line-soft) !important;
    border-radius: var(--vk-r) !important;
    padding: 18px !important;
}
.tp-qr-title{ color: var(--vk-text) !important; font-size: 14px !important; }
.tp-qr-sub{ color: var(--vk-accent-lt) !important; font-size: 22px !important; }
.tp-qr-img-wrap{ box-shadow: var(--vk-shadow) !important; }
.tp-qr-status{ color: var(--vk-dim) !important; margin: 14px 0 4px !important; font-size: 13px !important; }
.tp-qr-status.ok{ color: #4ade80 !important; }
.tp-qr-status.err{ color: #f87171 !important; }
.tp-qr-cancel{
    background: var(--vk-surface-2) !important;
    border: 1px solid var(--vk-line-soft) !important;
    color: var(--vk-dim) !important;
}
.tp-qr-cancel:hover{ border-color: var(--vk-line-strong) !important; color: var(--vk-text) !important; }

.tp-modal{
    background: var(--vk-surface) !important;
    border: 1px solid var(--vk-line-soft) !important;
    box-shadow: var(--vk-shadow-lg) !important;
}
.tp-modal-title{ color: var(--vk-text) !important; }
.tp-modal-close{ color: var(--vk-mute) !important; }
.tp-modal-close:hover{ color: var(--vk-text) !important; background: var(--vk-surface-3) !important; }
.tp-step-num{ background: var(--vk-accent-grad) !important; }
.tp-step-text{ color: var(--vk-dim) !important; }
.tp-step-text b{ color: var(--vk-text) !important; }

html[data-theme="light"] .tp-container{ max-width: 1080px !important; }
html[data-theme="light"] .tp-chan{
    background: #ffffff; border-color: #e8e8ef;
    box-shadow: 0 14px 32px -28px rgba(23, 23, 28, .30);
}
html[data-theme="light"] a.tp-chan:hover{
    background: #ffffff; border-color: #cfcada;
    box-shadow: 0 18px 38px -30px rgba(23, 23, 28, .34);
}
html[data-theme="light"] .tp-chan-name{ color: #17171c; }
html[data-theme="light"] .tp-chan-desc{ color: #6b6b76; }
html[data-theme="light"] .tp-chan-go{ background: #f2f2f7; color: #5c5c66; border-color: #e4e4ec; }
html[data-theme="light"] .tp-chan .tp-badge-hot{ border-color: #e4e4ec !important; }
html[data-theme="light"] .tp-chan.is-soon:hover{ background: #ffffff; border-color: #e8e8ef; }
html[data-theme="light"] .tp-guide{
    background: #ffffff; border-color: #ececf2;
    box-shadow: 0 14px 34px -28px rgba(23, 23, 28, .32);
}
html[data-theme="light"] .tp-panel{
    background: #ffffff !important; border-color: #ececf2 !important;
    box-shadow: 0 14px 34px -28px rgba(23, 23, 28, .32) !important;
}
html[data-theme="light"] .tp-guide-title,
html[data-theme="light"] .tp-panel-title,
html[data-theme="light"] .tp-chip-name,
html[data-theme="light"] .tp-bank-row b{ color: #17171c !important; }
html[data-theme="light"] .tp-guide-count,
html[data-theme="light"] .tp-panel-label{ color: #6b6b76; }
html[data-theme="light"] .tp-bank-row{ color: #6b6b76 !important; }
html[data-theme="light"] .tp-guide-view,
html[data-theme="light"] .tp-amount,
html[data-theme="light"] .tp-bank-row,
html[data-theme="light"] .tp-panel-note,
html[data-theme="light"] .tp-panel-promo,
html[data-theme="light"] .tp-thumb,
html[data-theme="light"] .tp-chip-ico{ background: #fbfbfd !important; border-color: #e8e8ef !important; }
html[data-theme="light"] .tp-bank-row + .tp-bank-row{ border-top-color: #ececf2 !important; }
html[data-theme="light"] .tp-panel .tp-input{
    background: #fbfbfd !important; border-color: #e4e4ec !important; color: #17171c !important;
}
html[data-theme="light"] .tp-panel .tp-input::placeholder{ color: #9a9aa3 !important; }
html[data-theme="light"] .tp-amount .tp-input{ background: transparent !important; border: 0 !important; }
html[data-theme="light"] .tp-panel .tp-help{
    background: #f4f4f7 !important; color: #4c4c57 !important; border-color: #e4e4ec !important;
}
html[data-theme="light"] .tp-back{ background: #ffffff; border-color: #e8e8ef; color: #4c4c57; }
html[data-theme="light"] .tp-back:hover{ background: #ffffff; border-color: #cfcada; color: #17171c; }
html[data-theme="light"] .tp-chip{ background: rgba(255, 255, 255, .82); border-color: rgba(15, 23, 42, .10); }
html[data-theme="light"] .tp-guide-nav{
    background: rgba(255, 255, 255, .86); color: #17171c; border-color: rgba(15, 23, 42, .10);
}
html[data-theme="light"] .tp-status{
    background: #fbfbfd !important; border-color: #e8e8ef !important;
}
html[data-theme="light"] .tp-status-title{ color: #17171c !important; }
html[data-theme="light"] .tp-status-sub{ color: #6b6b76 !important; }
html[data-theme="light"] .tp-status-spin{
    border-color: rgba(15, 23, 42, .10) !important;
    border-top-color: var(--vk-accent) !important;
}
html[data-theme="light"] .tp-qr-box{
    background: #fbfbfd !important; border-color: #e8e8ef !important;
}
html[data-theme="light"] .tp-qr-title{ color: #17171c !important; }
html[data-theme="light"] .tp-qr-sub{ color: var(--vk-accent) !important; }
html[data-theme="light"] .tp-qr-status{ color: #4c4c57 !important; }
html[data-theme="light"] .tp-qr-cancel{ background: #f4f4f7 !important; border-color: #e4e4ec !important; color: #4c4c57 !important; }
html[data-theme="light"] .tp-modal{ background: #ffffff !important; border-color: #ececf2 !important; }
html[data-theme="light"] .tp-modal-title{ color: #17171c !important; }
html[data-theme="light"] .tp-step-text{ color: #4c4c57 !important; }
html[data-theme="light"] .tp-step-text b{ color: #17171c !important; }
html[data-theme="light"] .tp-fee.is-wait{
    background: #fff7e6 !important; color: #b45309 !important; border-color: rgba(180, 83, 9, .22) !important;
}

@media (max-width: 991.98px){
    .tp-stage{ grid-template-columns: 1fr; }
    .tp-panel{ position: static; top: auto; order: 2; }
    .tp-guide{ order: 1; }
    .tp-guide-view{ height: clamp(220px, 40vh, 360px); }
}
@media (max-width: 767.98px){
    .tp-chan-grid{ grid-template-columns: 1fr; gap: 12px; }
    .tp-chan{ padding: 15px; }
    .tp-chan .tp-icon,
    .tp-chan .tp-icon.has-img{
        width: 48px !important; height: 48px !important;
        border-radius: 13px !important; font-size: 19px !important;
    }
    .tp-chan-name{ font-size: 15.5px; }
    .tp-guide{ padding: 12px; }
    .tp-guide-view{ height: clamp(200px, 34vh, 300px); }
    .tp-panel{ padding: 15px; }
    .tp-crumb{ margin-bottom: 12px; }
    .tp-guide-nav{ width: 30px; height: 30px; font-size: 11.5px; }
}
@media (max-width: 575.98px){
    .tp-thumb{ width: 58px; height: 44px; }
    .tp-chip{ padding: 5px 10px 5px 6px; gap: 8px; }
    .tp-chip-name{ font-size: 12.5px; }
}
/* ==========================================================================
   §25b  เติมเงิน — ลดความเรืองแสง (ตามข้อกำหนดดีไซน์)
   ตรวจด้วย tmp/vk_topup_glow.py (ม่วง = rgba ที่ b>r>g และ b-g>28 ตอน resting)
   เดิมขอบของ "ป้ายในชิปช่องทาง" อ้างสีเน้นของแบรนด์ → ตอนนี้ใช้เส้นกลางแทน
   ยังคงความม่วงไว้ที่พื้นจาง + สีตัวอักษร/ไอคอน ซึ่งไม่ใช่ "glow"
   ========================================================================== */
html[data-theme="light"] .tp-chip .tp-badge-hot{ border-color: var(--vk-glass-line) !important; }
/* ==========================================================================
   §25c  เติมเงิน (หน้ารายละเอียดช่องทาง) — โครงตาม Reference
   ซ้าย = การ์ดรูปวิธีการเติมเงิน + หัวข้อ + ขั้นตอน | ขวา = การ์ดกรอกข้อมูล
   Container 1140px · ซ้าย ~65% / ขวา ~35% · gap 22px · โทนเดิมทั้ง 2 ธีม
   ========================================================================== */
.tp-container.tp-container-detail,
html[data-theme="light"] .tp-container.tp-container-detail{ max-width: 1140px !important; }

/* รูปหลัก: รักษาอัตราส่วน (object-fit: contain) + กดดูขนาดใหญ่ได้ */
.tp-guide-view > img{ cursor: zoom-in; }
.tp-guide-zoom{
    position: absolute; top: 10px; right: 10px;
    width: 33px; height: 33px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--vk-text); cursor: pointer;
    background: var(--vk-glass-float);
    -webkit-backdrop-filter: var(--vk-glass-blur-sm);
    backdrop-filter: var(--vk-glass-blur-sm);
    border: 1px solid var(--vk-glass-line);
    transition: background-color .18s ease;
}
.tp-guide-zoom:hover{ background: var(--vk-glass-raise); }

/* ตัวนับรูปย้ายไปอยู่บนรูป (มุมขวาล่าง) */
.tp-guide-view .tp-guide-count{
    position: absolute; bottom: 10px; right: 10px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--vk-glass-float);
    -webkit-backdrop-filter: var(--vk-glass-blur-sm);
    backdrop-filter: var(--vk-glass-blur-sm);
    border: 1px solid var(--vk-glass-line);
    color: var(--vk-text); font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ใต้รูป: หัวข้อ "วิธีการเติมเงิน" + ขั้นตอน */
.tp-guide-body{
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--vk-line-soft);
}
.tp-guide-body .tp-guide-title{ font-size: 14.5px; }
.tp-guide-steps{
    list-style: none; margin: 12px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.tp-guide-steps .tp-step{ margin: 0; align-items: flex-start; }
.tp-guide-steps .tp-step-num{
    flex: 0 0 24px; width: 24px; height: 24px; font-size: 12px;
    box-shadow: none;
}
.tp-guide-steps .tp-step-text{
    margin: 0; color: var(--vk-dim) !important;
    font-size: 13px; line-height: 1.6;
}
.tp-guide-steps .tp-step-text b{ color: var(--vk-text) !important; }
.tp-guide-note{
    display: flex; align-items: flex-start; gap: 8px;
    margin: 12px 0 0; padding: 11px 13px;
    background: var(--vk-surface-2); border: 1px solid var(--vk-line-soft);
    border-radius: var(--vk-r-sm);
    color: var(--vk-dim); font-size: 12.5px; line-height: 1.55;
}
.tp-guide-note i{ margin-top: 2px; color: var(--vk-dim); }

/* ปุ่มหลักการ์ดขวา: เต็มความกว้างของ panel และอยู่ท้ายการ์ด */
.tp-panel .tp-btn{ margin-top: auto; }
@media (min-width: 992px){
    .tp-guide-view{ height: clamp(240px, 38vh, 420px); }
    .tp-panel{ min-height: 500px; }
}

/* Lightbox ดูรูปขนาดใหญ่ (ใช้โครง .tp-modal-overlay เดิมของเว็บ) */
.tp-lightbox{ background: rgba(6, 6, 8, .84) !important; z-index: 100050; }
.tp-lightbox img{
    max-width: min(1100px, 92vw); max-height: 86vh;
    width: auto; height: auto; display: block;
    object-fit: contain;
    border-radius: var(--vk-r);
    border: 1px solid var(--vk-glass-line);
    box-shadow: var(--vk-shadow-lg);
    cursor: zoom-out;
}
.tp-lightbox-close{
    position: absolute; top: 18px; right: 20px;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer;
    background: var(--vk-glass-float); color: var(--vk-text);
    -webkit-backdrop-filter: var(--vk-glass-blur-sm);
    backdrop-filter: var(--vk-glass-blur-sm);
    border: 1px solid var(--vk-glass-line);
}
.tp-lightbox-close:hover{ background: var(--vk-glass-raise); }

html[data-theme="light"] .tp-lightbox{ background: rgba(15, 23, 42, .62) !important; }
html[data-theme="light"] .tp-lightbox img{ border-color: rgba(255, 255, 255, .28); }
html[data-theme="light"] .tp-lightbox-close,
html[data-theme="light"] .tp-guide-zoom{
    background: rgba(255, 255, 255, .88); color: #17171c; border-color: rgba(15, 23, 42, .10);
}
html[data-theme="light"] .tp-lightbox-close:hover,
html[data-theme="light"] .tp-guide-zoom:hover{ background: #ffffff; }
html[data-theme="light"] .tp-guide-view .tp-guide-count{
    background: rgba(255, 255, 255, .88); color: #33333c; border-color: rgba(15, 23, 42, .10);
}
html[data-theme="light"] .tp-guide-body{ border-top-color: #ececf2; }
html[data-theme="light"] .tp-guide-note{
    background: #fbfbfd !important; border-color: #e8e8ef !important; color: #4c4c57 !important;
}
html[data-theme="light"] .tp-guide-note i{ color: #6b6b76 !important; }

/* แท็บเล็ต/จอกลาง: ปรับสัดส่วนและระยะห่างให้พอดี */
@media (max-width: 1199.98px){
    .tp-stage{ grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 991.98px){
    .tp-stage{ grid-template-columns: 1fr; gap: 16px; }
    .tp-guide-body{ margin-top: 12px; padding-top: 12px; }
    .tp-panel{ min-height: 0; }
}
@media (max-width: 575.98px){
    .tp-guide-zoom{ width: 30px; height: 30px; }
    .tp-lightbox img{ border-radius: var(--vk-r-sm); }
    .tp-lightbox-close{ top: 12px; right: 12px; width: 36px; height: 36px; }
}
/* ==========================================================================
   §27  เติมเงิน — เลย์เอาต์เฉพาะของ Victoria Kaitan (v2)
   แทนที่เลย์เอาต์เดิมทั้งชุด (การ์ดกริด 2 คอลัมน์ + หน้ารายละเอียดซ้าย/ขวา)
   โครงใหม่: (1) หน้าเลือกช่องทาง = การ์ดใบเดียว บรรจุ "แถวตัวเลือก" คั่นด้วยเส้นบาง
             (2) หน้ารายละเอียด  = คอลัมน์เดียว → แถบทำรายการด้านบน แล้ว "วิธีเติมเงิน" ต่อท้าย
   ใช้คลาสเดิม (.tp-panel/.tp-input/.tp-btn/.tp-guide*) เพื่อไม่แตะ id/ฟังก์ชันในไฟล์ ejs
   กติกา: พื้นทึบ + ขอบบางชั้นเดียว + เงานุ่ม · ไม่มี glow ตอน resting · ทุกอย่างยังดึงจากข้อมูลเดิม
   ========================================================================== */

/* ---------- 1) หน้าเลือกช่องทาง: การ์ดเดียว + เส้นคั่นบาง ๆ ---------- */
.tp-v2 .tp-list{
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--vk-surface);
    border: 1px solid var(--vk-line);
    border-radius: var(--vk-r-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 26px 52px -38px rgba(0, 0, 0, .92);
}
html[data-theme="light"] .tp-v2 .tp-list{
    background: #ffffff;
    border-color: #e8e8ef;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 48px -36px rgba(15, 23, 42, .22);
}

.tp-v2 .tp-list .tp-chan{
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto auto;
    grid-template-areas: "ico main meta go";
    align-items: center;
    column-gap: 14px; row-gap: 4px;
    padding: 14px 18px;
    text-align: left; text-decoration: none; color: inherit;
    background: transparent;
    background-image: none !important;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .2s ease;
}
.tp-v2 .tp-list .tp-chan + .tp-chan{ border-top: 1px solid var(--vk-line-soft); }
html[data-theme="light"] .tp-v2 .tp-list .tp-chan + .tp-chan{ border-top-color: #ececf2; }

/* แถบสีแบรนด์ตอน hover (เจ้าของภาษาเดียวกับหัวเพจ) */
.tp-v2 .tp-list .tp-chan::before{
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--vk-accent);
    transform: scaleY(0);
    transition: transform .24s cubic-bezier(.2, .8, .3, 1);
}
a.tp-chan:hover::before, a.tp-chan:focus-visible::before{ transform: scaleY(1); }

.tp-v2 .tp-list .tp-chan-ico{ grid-area: ico; display: inline-flex; }
.tp-v2 .tp-list .tp-chan-main{
    grid-area: main; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.tp-v2 .tp-list .tp-chan-meta{
    grid-area: meta;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    justify-content: flex-end;
}
.tp-v2 .tp-list .tp-chan-go{ grid-area: go; }

/* ขนาดไอคอน/ตัวอักษรของแถว (แทนค่าการ์ดเดิม) */
.tp-v2 .tp-icon,
.tp-v2 .tp-icon.has-img{
    flex: 0 0 46px !important;
    width: 46px !important; height: 46px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    font-size: 19px !important;
}
.tp-v2 .tp-chan-name{
    color: var(--vk-text) !important;
    font-size: 15px !important; font-weight: 700 !important;
    letter-spacing: .1px; line-height: 1.35;
}
.tp-v2 .tp-chan-desc{
    color: var(--vk-mute) !important;
    font-size: 12.5px !important; line-height: 1.55;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-v2 .tp-fee{ margin-top: 0 !important; padding: 3px 10px !important; }
.tp-v2 .tp-fee i{ font-size: 6px; }
.tp-v2 .tp-list .tp-badge{ padding: 3px 10px !important; align-self: center; }

/* hover/focus ของแถว: เปลี่ยนพื้นเบา ๆ + ลูกศรขยับ (ไม่ยกการ์ด ไม่มีเงาเพิ่ม) */
.tp-v2 .tp-list a.tp-chan:hover,
.tp-v2 .tp-list a.tp-chan:focus-visible{
    background: var(--vk-surface-2) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none;
    color: inherit;
}
html[data-theme="light"] .tp-v2 .tp-list a.tp-chan:hover,
html[data-theme="light"] .tp-v2 .tp-list a.tp-chan:focus-visible{ background: #fafafb !important; }
.tp-v2 .tp-list .tp-chan.is-soon{ opacity: .62; }
.tp-v2 .tp-list .tp-chan.is-soon:hover{ background: transparent !important; transform: none !important; }

/* ---------- 2) หน้ารายละเอียด: แถบบนแบบเบา ---------- */
.tp-v2 .tp-bar{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin: 0 0 12px;
}
.tp-v2 .tp-back{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 0 !important;
    background: transparent !important; background-image: none !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    color: var(--vk-mute) !important;
    font-size: 12.5px !important; font-weight: 600 !important;
}
.tp-v2 .tp-back:hover{ color: var(--vk-text) !important; background: transparent !important; }
.tp-v2 .tp-back i{ font-size: 10.5px; transition: transform .2s ease; }
.tp-v2 .tp-back:hover i{ transform: translateX(-2px); }
.tp-v2 .tp-chip{ padding: 5px 12px 5px 6px !important; gap: 9px !important; }
.tp-v2 .tp-chip-ico{ width: 26px !important; height: 26px !important; border-radius: 9px !important; }

/* ---------- 3) แถบทำรายการ (การ์ดใบเดียว แนวเดียว) ---------- */
.tp-v2 .tp-stage{
    display: flex; flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-width: none !important;
}
.tp-v2 .tp-panel{
    position: static !important; top: auto !important;
    display: flex !important; flex-direction: column; align-items: stretch !important;
    gap: 0 !important;
    min-height: 0 !important;
    order: 1;
    max-width: none !important; margin: 0 !important;
    padding: 16px 18px !important;
    background: var(--vk-surface) !important;
    background-image: none !important;
    border: 1px solid var(--vk-line) !important;
    border-radius: var(--vk-r-lg) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 24px 46px -36px rgba(0, 0, 0, .9) !important;
}
html[data-theme="light"] .tp-v2 .tp-panel{
    background: #ffffff !important;
    border-color: #e8e8ef !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 46px -36px rgba(15, 23, 42, .2) !important;
}
.tp-v2 .tp-panel-head{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    margin: 0 0 12px;
}
.tp-v2 .tp-panel-title{ font-size: 14px !important; }
.tp-v2 .tp-panel-title i{ font-size: 12.5px; }
.tp-v2 .tp-panel-label{
    margin: 0 0 7px !important;
    color: var(--vk-dim) !important;
    font-size: 12px !important; font-weight: 600 !important;
}

/* ช่องกรอกเต็มบรรทัด แล้วปุ่มหลักเต็มความกว้างของช่องปุ่มในบรรทัดถัดไป */
.tp-v2 .tp-field{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px; align-items: center;
}
.tp-v2 .tp-field.is-single,
.tp-v2 .tp-field.is-amount{ grid-template-columns: minmax(0, 1fr); }
.tp-v2 .tp-panel .tp-input{ padding: 13px 15px !important; border-radius: 12px !important; }
/* ช่องจำนวนเงิน: คุมความกว้างให้กะทัดรัด ไม่ยืดเต็มการ์ด */
.tp-v2 .tp-amount{ max-width: 260px; border-radius: 12px !important; }
.tp-v2 .tp-amount-hint{ max-width: 260px; }

/* ปุ่มหลักของการ์ดทำรายการ — ปุ่มจริง (สูง 44px · ขอบมน 11px · ข้อความกลางปุ่ม)
   สีตามธีมผ่าน --vk-accent-grad (ม่วงตามแบรนด์) · hover/active เบา ๆ ไม่เรืองแสง */
.tp-v2 .tp-panel .tp-btn{
    width: 100% !important;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 22px !important;
    margin: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center;
    font-size: 15px !important; font-weight: 700 !important;
    line-height: 1; letter-spacing: .2px;
    color: #fff !important;
    background: var(--vk-accent-grad) !important;
    background-image: var(--vk-accent-grad) !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: var(--vk-lift) !important;
    transition: filter .18s ease, box-shadow .18s ease, transform .1s ease;
}
.tp-v2 .tp-panel .tp-btn:hover:not(:disabled){
    filter: brightness(1.07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 26px -18px rgba(0, 0, 0, .60),
                0 4px 14px -10px rgba(var(--vk-h), .45) !important;
}
.tp-v2 .tp-panel .tp-btn:active:not(:disabled){
    transform: translateY(1px);
    filter: brightness(.96);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .40) !important;
}
.tp-v2 .tp-panel .tp-btn:focus-visible{ outline: 2px solid var(--vk-accent-line); outline-offset: 2px; }
.tp-v2 .tp-panel .tp-btn:disabled{ opacity: .5; filter: none; box-shadow: none !important; }
html[data-theme="light"] .tp-v2 .tp-panel .tp-btn:hover:not(:disabled){
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 12px 26px -18px rgba(15, 23, 42, .28),
                0 4px 14px -10px rgba(var(--vk-h), .38) !important;
}
html[data-theme="light"] .tp-v2 .tp-panel .tp-btn:active:not(:disabled){
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12) !important;
}

/* คำอธิบายใต้ช่องกรอก: ข้อความล้วน ไม่มีกรอบซ้อน */
.tp-v2 .tp-panel-note{
    margin: 12px 0 0 !important;
    padding: 0 !important;
    background: transparent !important; background-image: none !important;
    border: 0 !important;
    color: var(--vk-mute) !important;
    font-size: 12px !important; line-height: 1.6 !important;
    max-width: 860px;
}
.tp-v2 .tp-panel-note i{ color: var(--vk-dim) !important; }
.tp-v2 .tp-amount{ border-radius: 12px !important; }
.tp-v2 .tp-amount-hint{ margin: 8px 0 0 !important; }
.tp-v2 .tp-bank-info{ max-width: 520px; }
.tp-v2 .tp-status{ margin-top: 14px !important; }
.tp-v2 .tp-qr-box{ max-width: 420px; margin-top: 14px !important; }

/* ---------- 4) ส่วน "วิธีการเติมเงิน": ขั้นตอนซ้าย + รูปขนาดพอดี ขวา ---------- */
.tp-v2 .tp-guide{
    order: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "body view" "body thumbs";
    gap: 12px 26px;
    align-items: start;
    min-width: 0;
    padding: 18px 0 0 !important;
    background: transparent !important; background-image: none !important;
    border: 0 !important;
    border-top: 1px solid var(--vk-line-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html[data-theme="light"] .tp-v2 .tp-guide{
    background: transparent !important;
    border-top-color: #ececf2 !important;
    box-shadow: none !important;
}
.tp-v2 .tp-guide.no-rail{ grid-template-areas: "body view"; }
.tp-v2 .tp-guide-view{
    grid-area: view;
    height: auto !important;
    aspect-ratio: 4 / 3;
    max-height: 300px;
    border-radius: var(--vk-r) !important;
    background: var(--vk-input) !important;
    border: 1px solid var(--vk-line-soft) !important;
}
html[data-theme="light"] .tp-v2 .tp-guide-view{
    background: #fbfbfd !important; border-color: #e8e8ef !important;
}
/* ไม่มีรูป: แสดงเป็นกล่องเตี้ย ๆ (ไม่จองพื้นที่สี่เหลี่ยมใหญ่ เพราะไม่มีอะไรจะแสดง) */
.tp-v2 .tp-guide.no-img .tp-guide-view{
    aspect-ratio: auto; max-height: none; min-height: 132px;
}
.tp-v2 .tp-guide.no-img .tp-guide-empty{ padding: 0 14px; }
.tp-v2 .tp-guide-thumbs{ grid-area: thumbs; }
.tp-v2 .tp-guide-body{
    grid-area: body; min-width: 0;
    margin: 0 !important; padding: 0 !important; border-top: 0 !important;
}
.tp-v2 .tp-guide-body .tp-guide-title{ font-size: 14px !important; }
.tp-v2 .tp-guide-body .tp-guide-title i{ font-size: 12.5px; }
.tp-v2 .tp-guide-steps{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    margin: 14px 0 0 !important;
    padding: 0 !important;
}
.tp-v2 .tp-guide-steps .tp-step{
    margin: 0 !important;
    gap: 10px; align-items: flex-start;
}
.tp-v2 .tp-guide-steps .tp-step-num{
    flex: 0 0 24px !important; width: 24px !important; height: 24px !important;
    font-size: 12px !important; box-shadow: none !important;
}
.tp-v2 .tp-guide-steps .tp-step-text{
    margin: 0;
    color: var(--vk-dim) !important;
    font-size: 13px !important; line-height: 1.6 !important;
}
.tp-v2 .tp-guide-note{ max-width: 620px; }

/* ---------- 5) Responsive: แท็บเล็ต/มือถือ ---------- */
@media (max-width: 1199.98px){
    .tp-v2 .tp-guide{ grid-template-columns: minmax(0, 1fr) 330px; gap: 12px 20px; }
}
@media (max-width: 991.98px){
    .tp-v2 .tp-guide{
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "view" "thumbs" "body";
        gap: 12px;
    }
    .tp-v2 .tp-guide.no-rail{ grid-template-areas: "view" "body"; }
    .tp-v2 .tp-guide-view{ aspect-ratio: 16 / 9; max-height: none; }
    .tp-v2 .tp-panel{ min-height: 0 !important; }
}
@media (max-width: 767.98px){
    .tp-v2 .tp-field{ grid-template-columns: minmax(0, 1fr); }
    .tp-v2 .tp-field.is-single{ grid-template-columns: minmax(0, 1fr); }
    .tp-v2 .tp-field.is-amount{ grid-template-columns: minmax(0, 1fr); }
    .tp-v2 .tp-panel-note{ max-width: none; }
    .tp-v2 .tp-panel .tp-btn{ width: 100% !important; }
    .tp-v2 .tp-panel{ padding: 15px !important; }
    .tp-v2 .tp-guide{ padding-top: 14px !important; }
    .tp-v2 .tp-guide-steps{ grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tp-v2 .tp-guide-view{ aspect-ratio: 4 / 3; max-height: none; }
    .tp-v2 .tp-list .tp-chan{
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas: "ico main go" "ico meta meta";
        column-gap: 12px; row-gap: 6px;
        padding: 13px 14px;
    }
    .tp-v2 .tp-list .tp-chan-meta{ justify-content: flex-start; }
    .tp-v2 .tp-icon,
    .tp-v2 .tp-icon.has-img{
        flex: 0 0 44px !important;
        width: 44px !important; height: 44px !important;
        border-radius: 13px !important; font-size: 18px !important;
    }
    .tp-v2 .tp-chan-name{ font-size: 14.5px !important; }
    .tp-v2 .tp-chan-desc{ font-size: 12px !important; }
    .tp-v2 .tp-chan-go{ width: 28px; height: 28px; font-size: 11px; }
}
@media (max-width: 575.98px){
    .tp-v2 .tp-fee{ padding: 2px 8px !important; font-size: 10.5px !important; }
    .tp-v2 .tp-list .tp-badge{ padding: 2px 8px !important; font-size: 10px !important; }
    .tp-v2 .tp-bar{ margin-bottom: 10px; }
    .tp-v2 .tp-chip-name{ font-size: 12.5px; }
}

/* ==========================================================================
   §28  เติมเงิน — ปรับสัดส่วนให้สมส่วน
   เดิมแถวตัวเลือกยืดเต็มคอนเทนเนอร์ 1320px ทำให้ข้อมูลซ้าย–ขวาห่างกันเกินไป
   แก้: คุมคอลัมน์กลางของหน้าเติมเงินไว้ที่ 880px + จัดกลุ่มข้อมูลในแถวใหม่
        (ไอคอน | ชื่อ + ป้าย / คำอธิบาย | ค่าธรรมเนียม + ลูกศร) ให้อ่านเป็นก้อนเดียว
   ========================================================================== */
main.tp-wrap > .container.container-wide{ max-width: 880px !important; }

.tp-v2 .tp-list .tp-chan{
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas: "ico main meta";
    column-gap: 13px; row-gap: 4px;
    padding: 14px 18px;
}
.tp-v2 .tp-list .tp-chan-main{
    grid-area: main;
    display: flex; flex-direction: column; gap: 3px;
}
.tp-v2 .tp-list .tp-chan-head{
    display: flex; align-items: center; gap: 8px; min-width: 0;
}
.tp-v2 .tp-list .tp-chan-name{
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-v2 .tp-list .tp-badge{ flex: 0 0 auto; align-self: center; }
.tp-v2 .tp-list .tp-chan-meta{
    grid-area: meta;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.tp-v2 .tp-list .tp-chan-go{ flex: 0 0 auto; }
.tp-v2 .tp-list .tp-chan-desc{ max-width: 62ch; }

/* หน้าช่องทาง: สัดส่วนรูปวิธีเติมเงินให้รับกับคอลัมน์ที่แคบลง */
.tp-v2 .tp-guide{ grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 991.98px){
    .tp-v2 .tp-guide{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px){
    .tp-v2 .tp-list .tp-chan{
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-areas: "ico main" "ico meta";
        row-gap: 7px; padding: 12px 13px;
    }
    .tp-v2 .tp-list .tp-chan-meta{ justify-content: flex-start; }
}