/* =========================================================================
   Cyber Neon Theme  —  tmshop
   ไฟล์ override ธีมเว็บให้ทันสมัย สะอาด ไม่รก
   โหลดต่อท้ายสุด (หลัง bootstrap / second.css / option.css) เพื่อ override
   ไม่แตะไฟล์ / logic เดิม — ลบไฟล์นี้ออกได้เพื่อกลับสู่ธีมเก่าทันที
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* palette จากธีม Cyber Neon */
    --neon-primary: #00D2FF;   /* ฟ้า neon */
    --neon-secondary: #F59E0B; /* ส้ม */
    --neon-tertiary: #0070F3;  /* น้ำเงิน */

    /* พื้นหลัง / พื้นผิว */
    --bg-base: #0A0E17;        /* ดำน้ำเงินเข้ม */
    --bg-elevated: #111726;    /* การ์ด ระดับ 1 */
    --bg-elevated-2: #161D2E;  /* การ์ด ระดับ 2 / hover */
    --bg-input: #10151F;

    /* เส้นขอบ / ตัวอักษร */
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --tx-primary: #E8ECF4;
    --tx-muted: #9AA4B8;
    --tx-faint: #6B7488;

    --radius: 16px;
    --radius-sm: 12px;

    /* override ตัวแปรของธีมเดิมให้ใช้พาเลตต์ใหม่ */
    --main: var(--neon-primary) !important;
    --sub: var(--neon-secondary) !important;
    --sub-opa-50: rgba(0, 210, 255, 0.45) !important;
    --sub-opa-25: rgba(0, 210, 255, 0.22) !important;
}

/* ---------- Base / Typography ---------------------------------------- */
body {
    background: var(--bg-base) !important;
    background-image:
        radial-gradient(1200px 600px at 85% -10%, rgba(0, 210, 255, 0.10), transparent 60%),
        radial-gradient(1000px 500px at 0% 0%, rgba(0, 112, 243, 0.10), transparent 55%) !important;
    background-attachment: fixed !important;
    color: var(--tx-primary);
    font-family: 'Plus Jakarta Sans', 'Kanit', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* body ใช้ font ทั่วไป แต่คงคลาส kanit ของ FontAwesome ไว้ */
body, body p, body span:not([class*="fa-"]), body a, body button, body input,
body td, body th, body label, body small {
    font-family: 'Plus Jakarta Sans', 'Kanit', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.text-strongest, .fw-bolder, .h5, .h4 {
    font-family: 'Sora', 'Kanit', sans-serif !important;
    letter-spacing: -0.01em;
}

/* ---------- Navbar ---------------------------------------------------- */
.navbar,
nav.navbar {
    position: relative;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    z-index: 5;
}
/* เส้นขอบล่างเรืองแสงไล่สี วิ่งช้า ๆ ให้เข้าธีม entertainment */
.navbar::after,
nav.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--neon-primary) 20%,
        var(--neon-secondary) 50%,
        var(--neon-tertiary) 80%,
        transparent 100%);
    background-size: 200% 100%;
    opacity: .85;
    animation: navGlowLine 6s linear infinite;
}
@keyframes navGlowLine {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
.navbar .container-sm,
.navbar .container {
    background-color: transparent !important;
}
/* กันไม่ให้ inline #080808 บน container ทำให้แถบทึบตัน */
.navbar [style*="background-color:#080808"],
.navbar [style*="background-color: #080808"] {
    background-color: transparent !important;
}
.navbar .nav-link {
    position: relative;
    color: var(--tx-muted) !important;
    transition: color .25s ease, text-shadow .25s ease;
    border-radius: 10px;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
/* ขีดใต้เรืองแสงตอน hover/active */
.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--tx-primary) !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
    transform: scaleX(1);
}
/* Mobile: offcanvas เป็นเมนูสไลด์ -> คงพื้นทึบเพื่ออ่านได้ */
.offcanvas.text-bg-dark {
    background-color: var(--bg-base) !important;
    border-left: 1px solid var(--line);
}
/* Desktop (>=992px, navbar-expand-lg): offcanvas กางเป็น inline ในแถบ
   -> ทำให้โปร่งใส ไม่มีแถบดำหลังเมนู */
@media (min-width: 992px) {
    .navbar-expand-lg .offcanvas,
    .navbar-expand-lg .offcanvas.text-bg-dark {
        background-color: transparent !important;
        background-image: none !important;
        border-left: none !important;
    }
    .navbar-expand-lg .offcanvas .offcanvas-body {
        background-color: transparent !important;
    }
}
.dropdown-menu-dark,
.dropdown-menu[style*="2a2a2a"],
.dropdown-menu[style*="2a2a2a".] {
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
}

/* ปุ่ม login / register ใน navbar */
.btn-log {
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--line) !important;
}
.btn-log:hover {
    background-color: rgba(0, 210, 255, 0.14) !important;
    border-color: var(--neon-primary) !important;
}

/* ---------- Cards / surfaces ----------------------------------------- */
/* การ์ดสินค้า และกล่องต่าง ๆ ที่ hardcode พื้นดำ */
.card-anim-main,
[style*="background-color:#000000"],
[style*="background-color:#000"],
[style*="background-color: #000000"],
[style*="background-color: #000"] {
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
}
.card-anim-main {
    border-radius: var(--radius) !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card-anim-main:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 210, 255, 0.35) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}
.box-shop {
    background-color: var(--bg-elevated) !important;
    box-shadow: inset 0 1px 0 var(--line) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius) !important;
}
.content {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
}
.content:hover {
    border: 1px solid rgba(0, 210, 255, 0.5) !important;
}

/* modal */
.modal-content {
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    color: var(--tx-primary);
}
.modal-header {
    border-bottom: 1px solid var(--line) !important;
}
.modal-footer {
    border-top: 1px solid var(--line) !important;
}
.bg_c { background-color: var(--bg-elevated) !important; }

/* กล่องพื้นดำต่าง ๆ (ประกาศ ฯลฯ) */
[style*="background-color:#151517"],
[style*="background-color:#181717"],
[style*="background-color:#080808"],
[style*="background-color:#111111"],
[style*="background-color: #111111"] {
    background-color: var(--bg-elevated) !important;
}
.bg-new-dark { background-color: var(--bg-elevated) !important; }
.border-pro,
.border-spe { background: var(--bg-elevated) !important; border: 1px solid var(--line) !important; }

/* ---------- Buttons -------------------------------------------------- */
/* ปุ่มหลัก (สั่งซื้อ ฯลฯ) */
.bg-cus,
.shopbtn,
#shop-btn,
#shop-btnX {
    background: linear-gradient(135deg, var(--neon-primary) 0%, var(--neon-tertiary) 100%) !important;
    border: none !important;
    color: #04202B !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bg-cus:hover,
.shopbtn:hover,
#shop-btn:hover {
    filter: brightness(1.05) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 210, 255, 0.3) !important;
    color: #04202B !important;
}
.bg-cus_1 { border-radius: var(--radius-sm) !important; }

/* ปุ่มรอง */
.btn-outline-dark {
    border-color: var(--line-strong) !important;
    color: var(--tx-muted) !important;
    border-radius: var(--radius-sm) !important;
    transition: all .2s ease;
}
.btn-outline-dark:hover {
    background-color: var(--bg-elevated-2) !important;
    color: var(--tx-primary) !important;
    border-color: var(--neon-primary) !important;
}
.btn-dark {
    background-color: var(--bg-elevated-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
}
.btn-primary {
    background: linear-gradient(135deg, var(--neon-primary) 0%, var(--neon-tertiary) 100%) !important;
    border: none !important;
    color: #04202B !important;
    border-radius: var(--radius-sm) !important;
}

/* ---------- Accents / text ------------------------------------------- */
.text-main { color: var(--neon-primary) !important; }
.text-sec  { color: var(--neon-secondary) !important; }
.bg-main   { background-color: var(--neon-primary) !important; }
.bg-main-gra,
.btn-or-gra {
    background: linear-gradient(90deg, var(--neon-primary) 0%, var(--neon-tertiary) 100%) !important;
}

/* ตัวเลขราคา (ทองเดิม) -> ส้ม secondary */
strong[style*="color:#f0ab0c"],
strong[style*="color: #f0ab0c"],
[style*="color:#ffae00"] {
    color: var(--neon-secondary) !important;
}

/* ป้าย "พร้อมจำหน่าย" (ส้มทึบ) ให้เข้าธีม */
[style*="background-color: #ff9e00"],
[style*="background-color:#ff9e00"] {
    background-color: rgba(245, 158, 11, 0.18) !important;
    color: var(--neon-secondary) !important;
}

/* หัวข้อ gradient เดิม (แดง-ส้ม) -> ฟ้า-ส้ม */
#font-color-cs,
.tblu,
.ttcolor,
.tbbg:hover {
    background: linear-gradient(to right, var(--neon-primary) 0%, var(--neon-secondary) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.bgcolor {
    background: linear-gradient(to right, var(--neon-primary) 0%, var(--neon-secondary) 100%) !important;
}

/* ---------- Inputs / marquee ----------------------------------------- */
.form-control {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--line) !important;
    color: var(--tx-primary) !important;
    border-radius: var(--radius-sm) !important;
}
.form-control:focus {
    border-color: var(--neon-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.15) !important;
    background-color: var(--bg-input) !important;
}
.form-control::placeholder { color: var(--tx-faint) !important; }

.input-group-text {
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--line) !important;
    color: var(--tx-muted) !important;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
marquee.form-control {
    background: var(--bg-elevated) !important;
    color: var(--tx-muted) !important;
}

/* ---------- Footer / misc -------------------------------------------- */
.bg-back {
    background-color: rgba(10, 14, 23, 0.85) !important;
    border-top: 1px solid var(--line);
    backdrop-filter: blur(10px);
}
hr {
    border-top: 1px solid var(--line) !important;
    opacity: 1;
}
.dropdown-item {
    color: var(--tx-primary) !important;
    border-radius: 8px;
}
.dropdown-item:hover {
    background-color: var(--bg-elevated-2) !important;
    color: var(--neon-primary) !important;
}

/* ป้ายเล็ก ๆ ที่เคยเป็นสีเขียวสด ให้กลืนกับธีม */
[style*="background-color:#BBFFA3"] {
    background-color: rgba(0, 210, 255, 0.15) !important;
    color: var(--neon-primary) !important;
}

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
    background: var(--bg-elevated-2);
    border-radius: 8px;
    border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: #24304a; }

/* การ์ด glow เดิมให้ใช้ neon primary */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 12px 0 var(--sub-opa-50); }
    40%, 60% { box-shadow: 0 0 26px 6px var(--sub-opa-25); }
}

/* ---------- Announcement bar (แถบประกาศ) ----------------------------- */
.announce-bar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px;
    overflow: hidden;
}
.announce-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--neon-primary);
    background: rgba(0, 210, 255, 0.12);
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 10px;
    white-space: nowrap;
}
.announce-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon-primary);
    box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.6);
    animation: announce-pulse 1.8s infinite;
}
@keyframes announce-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(0, 210, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); }
}
.announce-text {
    flex: 1 1 auto;
    align-self: center;
    color: var(--tx-muted) !important;
    font-size: 13px;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

/* ---------- Category cards (หมวดหมู่แนะนำ) ---------------------------- */
.cat-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    text-decoration: none;
    background: var(--bg-elevated);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 210, 255, 0.4);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.cat-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.cat-card:hover .cat-card-img { transform: scale(1.06); }

/* placeholder เมื่อหมวดหมู่ไม่มีรูป */
.cat-card-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: rgba(0, 210, 255, 0.55);
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(0, 112, 243, 0.28), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(245, 158, 11, 0.18), transparent 55%),
        var(--bg-elevated-2);
}

/* overlay ชื่อหมวด (อ่านได้เสมอ ไม่ใช่โชว์ตอน hover) */
.cat-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(to top, rgba(10, 14, 23, 0.92) 0%, rgba(10, 14, 23, 0.55) 55%, transparent 100%);
}
.cat-card-name {
    font-family: 'Sora', 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--tx-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.cat-card-des {
    font-size: 12px;
    color: var(--tx-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================================
   ANIMATED BACKGROUND  —  Entertainment vibe (ทั้งระบบ)
   เลเยอร์พื้นหลังเคลื่อนไหว: ออโรร่าแสงไล่สี + ประกายลอย + เส้นสแกนเบา ๆ
   ทั้งหมดเป็น CSS ล้วน, position:fixed, pointer-events:none จึงไม่บังการคลิก
   และอยู่หลังเนื้อหาเสมอ (z-index ต่ำ)
   ========================================================================= */

/* ให้เนื้อหาทั้งหมดลอยเหนือเลเยอร์พื้นหลัง */
body > * { position: relative; z-index: 1; }

/* พื้นฐาน body: ไล่โทนเข้มลึกให้แสงเด่นขึ้น */
body {
    position: relative;
    overflow-x: hidden;
}

/* ---------- เลเยอร์ 1: ออโรร่าแสงไล่สีเคลื่อนไหว ---------------------- */
.fx-bg,
body::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 45% at 18% 22%, rgba(0, 210, 255, 0.22), transparent 60%),
        radial-gradient(42% 50% at 82% 18%, rgba(0, 112, 243, 0.20), transparent 62%),
        radial-gradient(45% 55% at 70% 88%, rgba(245, 158, 11, 0.16), transparent 60%),
        radial-gradient(40% 45% at 12% 82%, rgba(124, 58, 237, 0.18), transparent 60%);
    filter: blur(40px) saturate(120%);
    animation: fxAurora 26s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes fxAurora {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1);    opacity: .9; }
    25%  { transform: translate3d(2%, 1%, 0)  scale(1.08); opacity: 1; }
    50%  { transform: translate3d(3%, 3%, 0)  scale(1.04); opacity: .85; }
    75%  { transform: translate3d(-2%, 2%, 0) scale(1.1);  opacity: 1; }
    100% { transform: translate3d(1%, -3%, 0) scale(1.02); opacity: .92; }
}

/* ---------- เลเยอร์ 2: ประกายแสงลอยขึ้น (particles) ------------------- */
/* เม็ดกระจายทั่วทั้งจอ (บน-กลาง-ล่าง) แล้วเลื่อนขึ้นต่อเนื่องแบบไม่มีช่วงว่าง
   ใช้ background-size สูงกว่าจอ + repeat เพื่อให้เม็ดวนไม่ขาดตอน */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 5% 8%,   rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(2px 2px at 18% 22%, rgba(0, 210, 255, 0.9),   transparent),
        radial-gradient(1.5px 1.5px at 32% 12%, rgba(245, 158, 11, 0.85), transparent),
        radial-gradient(2px 2px at 45% 30%, rgba(255, 255, 255, 0.8),  transparent),
        radial-gradient(1.5px 1.5px at 58% 16%, rgba(0, 210, 255, 0.85), transparent),
        radial-gradient(2px 2px at 72% 26%, rgba(124, 58, 237, 0.9),   transparent),
        radial-gradient(1.5px 1.5px at 85% 10%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(2px 2px at 95% 24%, rgba(245, 158, 11, 0.85),  transparent),
        radial-gradient(1.5px 1.5px at 10% 42%, rgba(0, 210, 255, 0.8), transparent),
        radial-gradient(2px 2px at 25% 52%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.5px 1.5px at 40% 46%, rgba(124, 58, 237, 0.8), transparent),
        radial-gradient(2px 2px at 55% 58%, rgba(0, 210, 255, 0.85),   transparent),
        radial-gradient(1.5px 1.5px at 68% 48%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 80% 56%, rgba(245, 158, 11, 0.8),   transparent),
        radial-gradient(1.5px 1.5px at 92% 44%, rgba(0, 210, 255, 0.8), transparent),
        radial-gradient(2px 2px at 8% 74%,  rgba(255, 255, 255, 0.9),  transparent),
        radial-gradient(1.5px 1.5px at 22% 84%, rgba(0, 210, 255, 0.8), transparent),
        radial-gradient(2px 2px at 38% 78%, rgba(124, 58, 237, 0.9),   transparent),
        radial-gradient(1.5px 1.5px at 52% 88%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(2px 2px at 66% 72%, rgba(245, 158, 11, 0.85),  transparent),
        radial-gradient(1.5px 1.5px at 78% 86%, rgba(0, 210, 255, 0.85), transparent),
        radial-gradient(2px 2px at 90% 76%, rgba(255, 255, 255, 0.8),  transparent),
        radial-gradient(1.5px 1.5px at 48% 66%, rgba(0, 210, 255, 0.7), transparent),
        radial-gradient(2px 2px at 15% 62%, rgba(245, 158, 11, 0.75),  transparent);
    background-repeat: repeat;
    background-size: 100% 60%;
    animation: fxParticles 22s linear infinite;
    will-change: transform;
    opacity: .9;
}

@keyframes fxParticles {
    0%   { background-position: 0 0; }
    100% { background-position: 0 -120%; }
}

/* ---------- ปิดอนิเมชันให้ผู้ที่ตั้งค่า reduce motion ----------------- */
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after { animation: none; }
}

/* =========================================================================
   PREMIUM UI POLISH  —  ส่วนเสริมความสวยงาม (v2)
   เพิ่มต่อท้ายเท่านั้น ไม่แตะ HTML / PHP / logic ใด ๆ
   ลบบล็อกนี้ทั้งก้อนออกได้ เพื่อกลับสู่ดีไซน์ก่อนหน้าทันที
   อ้างอิงคลาสจริงจาก page/simple.php และ index.php
   ========================================================================= */

/* ---------- 1) หัวข้อ section (h2.h5.fw-bolder) --------------------------
   เพิ่มแถบ accent เรืองแสงด้านหน้าหัวข้อ ให้ดูมีลำดับชั้น ไม่ลอย ๆ       */
.container-sm h2.h5.fw-bolder,
.container h2.h5.fw-bolder {
    position: relative;
    padding-left: 14px;
    line-height: 1.2;
}
.container-sm h2.h5.fw-bolder::before,
.container h2.h5.fw-bolder::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.05em;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--neon-primary), var(--neon-tertiary));
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.55);
}

/* ปุ่ม "ดูเพิ่มเติม" (inline style ส้มเดิม) -> pill โปร่งเข้าธีม neon */
a.btn.btn-outline-dark[href="?page=shop"] {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: var(--neon-secondary) !important;
    letter-spacing: 0.02em;
    transition: all .2s ease;
}
a.btn.btn-outline-dark[href="?page=shop"]:hover {
    background-color: rgba(245, 158, 11, 0.22) !important;
    border-color: var(--neon-secondary) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
    transform: translateY(-1px);
}

/* ---------- 2) การ์ดสินค้า (.card-anim-main) ----------------------------
   ยกระดับเป็น glass card: พื้นโปร่งเบลอ + ขอบเรืองแสง hover + เงานุ่ม     */
.card-anim-main {
    background: linear-gradient(160deg, rgba(22, 29, 46, 0.92), rgba(17, 23, 38, 0.92)) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
    position: relative;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
/* แถบไล่สีบางบนสุดของการ์ด ให้รู้สึกพรีเมียม */
.card-anim-main::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
    opacity: 0;
    transition: opacity .28s ease;
    z-index: 2;
}
.card-anim-main:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 210, 255, 0.4) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(0, 210, 255, 0.25) inset !important;
}
.card-anim-main:hover::before { opacity: 1; }

/* รูปสินค้าใน TOP: ซูมนุ่ม ๆ ตอน hover การ์ด */
.card-anim-main .top-card-img,
.card-anim-main .view.overlay img {
    transition: transform .45s ease;
}
.card-anim-main:hover .top-card-img,
.card-anim-main:hover .view.overlay img {
    transform: scale(1.05);
}

/* ชื่อสินค้าให้คมขึ้นเล็กน้อย */
.card-anim-main .text-strongest {
    color: var(--tx-primary) !important;
}

/* ---------- 3) ป้ายราคา / สถานะ ให้เป็น pill คม ------------------------- */
/* ป้าย "พร้อมจำหน่าย" / "x รายการ" (ส้มทึบเดิม) */
.card-anim-main p[style*="background-color: #ff9e00"],
.card-anim-main p[style*="background-color:#ff9e00"] {
    background: rgba(245, 158, 11, 0.16) !important;
    color: var(--neon-secondary) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}
/* ป้าย "สินค้าหมด" (แดงเดิม) */
.card-anim-main p[style*="color:#e81313"],
.card-anim-main p[style*="color: #e81313"] {
    background: rgba(232, 19, 19, 0.14) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(232, 19, 19, 0.32) !important;
    font-weight: 600 !important;
}

/* ---------- 4) Carousel แบนเนอร์ --------------------------------------- */
#carouselExampleControls,
.carousel.slide {
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.carousel-inner { border-radius: 20px !important; }
.carousel-item img {
    border-radius: 20px !important;
}
/* ปุ่ม prev/next ให้เป็นวงกลม glass ดูดีขึ้น */
.carousel-control-prev,
.carousel-control-next {
    width: 8%;
    opacity: 0;
    transition: opacity .3s ease;
}
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next { opacity: 1; }
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(10, 14, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    background-size: 45% 45%;
    backdrop-filter: blur(4px);
    transition: background-color .2s ease, border-color .2s ease;
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 210, 255, 0.25);
    border-color: var(--neon-primary);
}

/* ---------- 5) แถบประกาศ ให้ดูมีมิติขึ้น ------------------------------- */
.announce-bar {
    background: linear-gradient(135deg, rgba(22, 29, 46, 0.95), rgba(16, 21, 31, 0.95)) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(0, 210, 255, 0.06) inset !important;
}

/* ---------- 6) ปุ่มสั่งซื้อ (.bg-cus) ให้เด่นและพรีเมียมขึ้น ------------ */
.bg-cus {
    background: linear-gradient(135deg, var(--neon-secondary) 0%, #ff7a00 100%) !important;
    color: #1a0e00 !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.bg-cus:hover {
    filter: brightness(1.06) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4) !important;
    background: linear-gradient(135deg, #ffbe3d 0%, #ff8a1f 100%) !important;
    color: #1a0e00 !important;
}

/* ---------- 7) การ์ดหมวดหมู่ .cat-card เพิ่มความลึก -------------------- */
.cat-card {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}
.cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(0, 210, 255, 0) inset;
    transition: box-shadow .3s ease;
    pointer-events: none;
}
.cat-card:hover::after {
    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.35) inset;
}

/* =========================================================================
   PREMIUM LAYOUT POLISH  —  Section "หมวดหมู่ / แนะนำสำหรับคุณ" (v3)
   ปรับเฉพาะการจัดวาง + ความสวยงาม ผ่าน CSS ล้วน
   ไม่แตะ HTML / PHP / logic — ลบบล็อกนี้ออกได้เพื่อกลับสภาพเดิม
   selector อ้างอิงโครงสร้างจริงใน page/simple.php
   ========================================================================= */

/* ---------- หัวข้อ section (แถว h2 + ปุ่มดูเพิ่มเติม) --------------------
   จัด baseline ให้ชิดกันสวยงาม ไม่ลอย + เพิ่มเส้นคั่นบาง ๆ ใต้หัวข้อ      */
.container-sm[data-aos="fade-left"] .d-flex.justify-content-between {
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    position: relative;
}
/* เส้น accent สั้น ๆ เรืองแสงใต้หัวข้อ (ทับเส้น border ด้านซ้าย) */
.container-sm[data-aos="fade-left"] .d-flex.justify-content-between::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

/* ขยายหัวข้อให้เด่นสมดุลกับแบนเนอร์ใหญ่ */
.container-sm[data-aos="fade-left"] h2.h5.fw-bolder {
    font-size: 1.4rem !important;
    letter-spacing: -0.01em;
}
/* คำบรรยายใต้หัวข้อ ("แนะนำ") ให้เป็น subtitle ที่อ่านสบายตา */
.container-sm[data-aos="fade-left"] .text-lg-start > p {
    margin-top: 2px !important;
    font-size: 12.5px !important;
    color: var(--tx-muted) !important;
    letter-spacing: 0.02em;
}

/* กลุ่มขวา (ดูเพิ่มเติม / แนะนำสำหรับคุณ) จัดชิดขวาให้อ่านเป็นบรรทัดเดียว */
.container-sm[data-aos="fade-left"] .d-flex.justify-content-between .m-1 {
    align-self: flex-end;
    text-align: right;
}
.container-sm[data-aos="fade-left"] .d-flex.justify-content-between .m-1 p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    font-size: 12.5px;
    color: var(--tx-muted) !important;
    white-space: nowrap;
}

/* ---------- การ์ดหมวดหมู่คู่ (.cat-card) จังหวะและมิติ ------------------ */
/* เพิ่มระยะห่างระหว่างการ์ดให้หายใจได้ + ปรับสัดส่วนให้สมส่วนขึ้น */
.container-sm[data-aos="fade-left"] + .container-sm .row,
.container-sm .row:has(> .col-6 > a.cat-card) {
    row-gap: 6px;
}
.col-6 > a.cat-card,
.col-lg-6 > a.cat-card {
    aspect-ratio: 16 / 8;
    border-radius: 20px;
    border: 1px solid var(--line-strong);
}
/* ไล่แสงมุมบนของการ์ดให้ดูมีวอลุ่ม (ไม่บังภาพ) */
a.cat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255,255,255,0.08), transparent 40%);
    z-index: 1;
    pointer-events: none;
    opacity: .9;
}
/* ยกการ์ดลอย + เรืองขอบ neon ตอน hover ให้ชัดขึ้นกว่าเดิม */
.col-6 > a.cat-card:hover,
.col-lg-6 > a.cat-card:hover {
    transform: translateY(-6px) scale(1.008);
    border-color: rgba(0, 210, 255, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55),
                0 0 22px rgba(0, 210, 255, 0.22);
}

/* ---------- ระยะห่างรวมของ section ให้เป็นจังหวะเดียวกัน ---------------- */
.container-sm[data-aos="fade-left"] {
    margin-top: 0.5rem !important;
}

/* ---------- responsive: จอเล็กให้หัวข้ออ่านง่ายขึ้น -------------------- */
@media (max-width: 575.98px) {
    .container-sm[data-aos="fade-left"] .d-flex.justify-content-between {
        align-items: center;
    }
    .container-sm[data-aos="fade-left"] h2.h5.fw-bolder {
        font-size: 1.15rem !important;
    }
    .col-6 > a.cat-card,
    .col-lg-6 > a.cat-card {
        aspect-ratio: 16 / 9;
        border-radius: 14px;
    }
}

/* =========================================================================
   LUXE CARD + ANIME SILHOUETTE  —  (v4)
   ทำให้การ์ดสินค้าดูหรูหรา นุ่มนวล ไม่แข็ง + เงา silhouette ผู้หญิง (CSS ล้วน)
   ไม่แตะ HTML / PHP / logic — ลบบล็อกนี้ออกได้เพื่อกลับสภาพเดิม
   selector อ้างอิงจริง: .card-anim-main (การ์ดสินค้าใน page/simple.php)
   ========================================================================= */

/* ---------- 1) ตัวการ์ดให้นุ่มนวลหรูหราขึ้น --------------------------- */
.card-anim-main {
    /* พื้นการ์ดไล่เฉดลึกแบบ soft ไม่แบน */
    background:
        radial-gradient(130% 90% at 100% 0%, rgba(0, 210, 255, 0.06), transparent 45%),
        radial-gradient(120% 90% at 0% 100%, rgba(124, 58, 237, 0.07), transparent 48%),
        linear-gradient(160deg, rgba(24, 31, 49, 0.94), rgba(15, 20, 33, 0.96)) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 20px !important;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.42),
        0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
    transition:
        transform .4s cubic-bezier(.2, .7, .2, 1),
        border-color .4s ease,
        box-shadow .4s ease !important;
}
.card-anim-main:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(0, 210, 255, 0.38) !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 26px rgba(0, 210, 255, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

/* ---------- 2) แสงกวาด (sheen) นุ่ม ๆ ตอน hover — หรู ไม่รก ------------- */
.card-anim-main .view.overlay {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
}
.card-anim-main .view.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.13) 50%,
        transparent 100%);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}
.card-anim-main:hover .view.overlay::after {
    animation: cardSheen 1.1s ease forwards;
}
@keyframes cardSheen {
    0%   { left: -60%; opacity: 0; }
    18%  { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

/* ---------- 3) เงา SILHOUETTE ผู้หญิง (มุมขวาล่างการ์ด) ----------------
   เป็น inline SVG โครงร่างผู้หญิงผมยาว วางจาง ๆ เรืองแสง ไม่บังเนื้อหา
   ใช้ ::after ของตัวการ์ด — pointer-events:none จึงคลิกทะลุได้ปกติ         */
.card-anim-main {
    position: relative;
    isolation: isolate;
}
.card-anim-main::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 0;
    width: 86px;
    height: 150px;
    z-index: 0;              /* อยู่หลังเนื้อหาการ์ด */
    pointer-events: none;
    opacity: 0.10;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    /* silhouette ผู้หญิงผมยาว (โครงร่างมินิมอล) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 210'%3E%3Cpath fill='%2300D2FF' d='M60 6c-10 0-17 7-18 16-1 6 0 11 2 15-4 2-7 6-8 11-2 8-2 17-1 24-3 8-6 17-6 26 0 5 3 8 7 9-2 8-3 17-3 26 0 4 2 7 5 9-3 10-4 21-4 32h12c1-11 2-21 5-30 2 8 3 17 3 26h10c0-12-1-24-4-35 3-2 5-5 5-9 0-9-1-18-3-26 4-1 7-4 7-9 0-9-3-18-6-26 4-1 7-4 7-9 0-8-1-16-3-23-1-5-4-9-8-11 2-4 3-9 2-15C77 13 70 6 60 6z'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.45));
    transition: opacity .45s ease, transform .45s ease, filter .45s ease;
    transform: translateY(6px);
}
.card-anim-main:hover::after {
    opacity: 0.22;
    transform: translateY(0);
    filter: drop-shadow(0 0 16px rgba(0, 210, 255, 0.6));
}

/* กันไม่ให้ silhouette เด่นเกินบนจอเล็ก */
@media (max-width: 575.98px) {
    .card-anim-main::after {
        width: 60px;
        height: 108px;
        opacity: 0.08;
    }
    .card-anim-main:hover::after { opacity: 0.16; }
}

/* ---------- 4) ให้เนื้อหาการ์ดลอยเหนือ silhouette เสมอ ------------------ */
.card-anim-main > .p-0,
.card-anim-main .card-body,
.card-anim-main .view.overlay {
    position: relative;
    z-index: 1;
}

/* =========================================================================
   BRAND MASCOT  —  ตัวละครมาสคอต TM24 (tm24c.png) ประดับหน้าเว็บ (v5)
   วางลอยเป็น decoration มุมล่างซ้าย ไม่ทับการ์ดสินค้า / ไม่แตะ HTML/logic
   ใช้ mask ไล่ขอบให้พื้นขาวจางกลืนไปกับพื้นหลัง (ไม่ต้องลบ bg)
   ลบบล็อกนี้ออกได้เพื่อเอามาสคอตออก
   ========================================================================= */

/* ปิด silhouette CSS เดิม (v4) เพราะเปลี่ยนมาใช้รูปมาสคอตจริงแทน */
.card-anim-main::after {
    content: none !important;
}

/* ---------- มาสคอตลอยมุมล่างขวาของหน้าจอ ------------------------------
   ผูกกับ html::before เพราะ html ไม่มี filter/transform มากวน
   position:fixed จึงยึดกับ viewport จริง -> ลอยติดหน้าจอตลอดทุก scroll
   (footer .bg-back มี backdrop-filter จึงใช้ไม่ได้ ทำให้เพี้ยนมาก่อน)     */
html::before {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    width: 170px;
    height: 280px;
    z-index: 3;                 /* เหนือพื้นหลัง fx แต่ต่ำกว่าโมดัล/นาฟบาร์ */
    pointer-events: none;       /* คลิกทะลุได้ ไม่บังปุ่ม */
    background-image: url("../../assets/img/tm24c.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    /* รูปต้นฉบับพื้นหลังโปร่งอยู่แล้ว จึงไม่ใช้ mask/glow ที่ทำให้ดูมีฝ้า */
    opacity: 1;
    animation: mascotFloat 6s ease-in-out infinite;
    will-change: transform;
}
@keyframes mascotFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* จอเล็กกว่า 992px: ย่อมาสคอตให้เล็กลง วางมุมล่างขวา ไม่บังเนื้อหา
   (pointer-events:none อยู่แล้ว จึงคลิกทะลุได้ ไม่กันการกดปุ่ม) */
@media (max-width: 991.98px) {
    html::before {
        display: block;
        width: 96px;
        height: 165px;
        opacity: 0.85;
    }
}
/* จอเล็กมาก (มือถือแนวตั้ง) ย่อลงอีกนิดกันเกะกะ */
@media (max-width: 480px) {
    html::before {
        width: 78px;
        height: 135px;
        opacity: 0.8;
    }
}

/* =========================================================================
   SPACE THEME CARD  —  การ์ดสินค้าธีมอวกาศ (v6)
   ปรับเฉพาะ "การ์ดสินค้า" (.card-anim-main) ให้เป็นห้วงอวกาศ เนบิวลา + ดาว
   CSS ล้วน ไม่แตะ HTML / PHP / logic — ลบบล็อกนี้ออกเพื่อกลับดีไซน์ v4
   override ต่อท้ายจึงมีผลทับพื้นการ์ดเดิม (hover/sheen เดิมยังทำงาน)
   ========================================================================= */

.card-anim-main {
    /* พื้นห้วงอวกาศลึก + เนบิวลาสองมุม (น้ำเงิน-ม่วง) */
    background:
        radial-gradient(80% 60% at 15% 12%, rgba(0, 150, 255, 0.16), transparent 55%),
        radial-gradient(75% 65% at 88% 20%, rgba(168, 85, 247, 0.18), transparent 55%),
        radial-gradient(90% 70% at 70% 100%, rgba(217, 70, 239, 0.10), transparent 60%),
        linear-gradient(165deg, #0b1024 0%, #0a0d1c 55%, #070912 100%) !important;
    border: 1px solid rgba(120, 140, 220, 0.14) !important;
    border-radius: 20px !important;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* ---------- ชั้นดาว: จุดดาวระยิบระยับกระจายในการ์ด (subtle) ------------ */
.card-anim-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.1px 1.1px at 28% 42%, rgba(180,220,255,0.8), transparent),
        radial-gradient(1.3px 1.3px at 46% 22%, rgba(255,255,255,0.75), transparent),
        radial-gradient(1px 1px at 62% 52%, rgba(200,180,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 78% 30%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 88% 62%, rgba(160,210,255,0.75), transparent),
        radial-gradient(1.2px 1.2px at 20% 74%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 54% 82%, rgba(210,190,255,0.7), transparent),
        radial-gradient(1.3px 1.3px at 84% 88%, rgba(255,255,255,0.75), transparent);
    background-repeat: no-repeat;
    /* เดิม v4 ใช้ ::before เป็นแถบไล่สีบนสุด — คงเส้นบนไว้ด้วย box-shadow แทน */
    opacity: 0.9;
    animation: cardTwinkle 4.5s ease-in-out infinite;
}
@keyframes cardTwinkle {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* เส้นไล่สี cosmic บนสุดของการ์ด (แทนแถบเดิมของ v4 ที่ ::before ถูกใช้ทำดาว) */
.card-anim-main {
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(120, 160, 255, 0.25) !important;
}

/* hover: ขอบเรือง cosmic + ยกลอย (เสริมจาก v4) */
.card-anim-main:hover {
    border-color: rgba(140, 120, 255, 0.5) !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 0 26px rgba(120, 90, 255, 0.28),
        inset 0 2px 0 rgba(150, 180, 255, 0.35) !important;
}
.card-anim-main:hover::before {
    animation-duration: 2.2s;   /* ดาวกะพริบไวขึ้นเล็กน้อยตอน hover */
}

/* ให้เนื้อหาการ์ดอยู่เหนือชั้นดาวเสมอ */
.card-anim-main > .p-0,
.card-anim-main .card-body,
.card-anim-main .view.overlay,
.card-anim-main center {
    position: relative;
    z-index: 1;
}

/* ปิดดาวบนจอเล็กมาก เพื่อความเบา */
@media (max-width: 575.98px) {
    .card-anim-main::before { opacity: 0.5; animation: none; }
}

/* =========================================================================
   NAV DISABLED  —  เมนูที่ปิดชั่วคราว (เติมเงิน/ร้านค้า/แอพพรีเมียม) (v7)
   ทำให้ดูเป็นเมนูที่กดไม่ได้ + ป้าย "เร็วๆ นี้"
   ลบบล็อกนี้ + คืน href เดิมใน index.php เพื่อเปิดใช้กลับ
   ========================================================================= */
.navbar .nav-link.nav-disabled {
    color: var(--tx-faint) !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    pointer-events: auto;      /* ยังให้ hover ขึ้น cursor ห้ามได้ แต่ onclick=return false กันการนำทาง */
}
.navbar .nav-link.nav-disabled:hover {
    color: var(--tx-faint) !important;
    text-shadow: none !important;
}
/* ปิดขีดใต้เรืองแสงของเมนูที่ disabled */
.navbar .nav-link.nav-disabled::after {
    display: none !important;
}
.nav-soon {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    padding: 2px 6px;
    border-radius: 999px;
    color: var(--neon-secondary);
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.3);
    letter-spacing: 0.02em;
}

/* =========================================================================
   POINTER-EVENTS GUARD  —  กันเลเยอร์ตกแต่งบังการคลิก (v8, เก็บกวาดแล้ว)
   พื้นหลัง fx (aurora/particles) + มาสคอต เป็น decoration ต้องคลิกทะลุได้เสมอ
   (ส่วนแก้ dropdown เดิมถูกลบออกแล้ว เพราะเมนูหลังบ้านเปลี่ยนเป็นลิงก์ตรง)
   ========================================================================= */
body::before, body::after, html::before {
    pointer-events: none !important;
}

/* =========================================================================
   BRAND PICKER POLISH  —  การ์ดเลือกแบรนด์แอพพรีเมียม ให้ดูพรีเมียม (v9)
   ปรับ .home-brand-card (หน้าโฮม) + .brand-card (หน้า premiumapp)
   CSS ล้วน override ให้สวยขึ้น ไม่แตะ HTML/logic
   ========================================================================= */

/* ----- การ์ดแบรนด์ (ใช้ร่วมทั้ง 2 หน้า) ----- */
.home-brand-card,
.brand-card {
    position: relative;
    gap: 10px !important;
    padding: 10px 10px 16px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: linear-gradient(165deg, rgba(26,33,52,0.95), rgba(13,18,30,0.97)) !important;
    box-shadow: 0 8px 26px rgba(0,0,0,0.4) !important;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease !important;
}
/* แถบไล่สีบนสุดของการ์ด โผล่ตอน hover */
.home-brand-card::before,
.brand-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00D2FF, #7c3aed, #F59E0B);
    opacity: 0;
    transition: opacity .3s ease;
}
.home-brand-card:hover,
.brand-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(0,210,255,0.45) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 22px rgba(0,210,255,0.16) !important;
}
.home-brand-card:hover::before,
.brand-card:hover::before { opacity: 1; }

/* ----- โลโก้/รูปแบรนด์: รูปใหญ่เต็มการ์ด ไม่มีกรอบซ้อน ----- */
.home-brand-thumb,
.brand-thumb {
    width: 100% !important;
    height: 120px !important;
    border-radius: 14px !important;
    object-fit: cover !important;        /* รูปเต็มกรอบ สวยไม่มีขอบว่าง */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: transform .35s ease;
}
/* placeholder (แบรนด์ที่ไม่มีรูป) ให้เต็มการ์ดเหมือนกัน */
.home-brand-thumb-ph,
.brand-thumb-ph {
    width: 100% !important;
    height: 120px !important;
    border-radius: 14px !important;
    font-size: 40px !important;
    background: radial-gradient(120% 120% at 0% 0%, rgba(0,112,243,.3), transparent 55%), #10151f !important;
    border: none !important;
}
.home-brand-card:hover .home-brand-thumb,
.brand-card:hover .brand-thumb {
    transform: scale(1.04);
}

/* ----- ชื่อแบรนด์ + ป้ายจำนวน ----- */
.home-brand-name,
.brand-name {
    font-family: 'Sora','Kanit',sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em;
    color: #F3F6FC !important;
}
.home-brand-count,
.brand-count {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px !important;
    color: #00D2FF !important;
    background: rgba(0,210,255,0.10);
    border: 1px solid rgba(0,210,255,0.22);
}

/* ----- ระยะห่าง section ให้การ์ดหายใจ ----- */
.row.g-2 > [class*="col-"],
.row.g-3 > [class*="col-"] { margin-bottom: 6px; }