/* Avoid a brief false hover/focus highlight while the header finishes its first layout. */
body[data-nav-booting="1"] #nav-original :is(.desktop-menu>.nav-item>.nav-link,.mobile-main-menu .nav-link,.mobile-service-submenu-v21 a,.service-item,.service-all):not(.active):is(:hover,:focus:not(:focus-visible)){color:var(--font_main)!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;filter:none!important;transform:none!important}
body[data-nav-booting="1"] #nav-original :is(.desktop-menu>.nav-item>.nav-link,.mobile-main-menu .nav-link,.mobile-service-submenu-v21 a,.service-item,.service-all):not(.active):is(:hover,:focus:not(:focus-visible)) i{color:inherit!important;filter:none!important;transform:none!important}
#nav-original{position:relative;z-index:1030;margin:8px auto!important;width:min(1180px,calc(100% - 18px));border:1px solid color-mix(in srgb,var(--sub) 24%,var(--bg_border));border-radius:18px;background:color-mix(in srgb,var(--bg_main) 94%,transparent)!important;box-shadow:0 10px 30px rgba(0,0,0,.09)}#nav-original .navbar-brand img{max-height:40px;object-fit:contain}#nav-original .desktop-menu{gap:3px}#nav-original .desktop-menu>.nav-item>.nav-link{min-height:42px;padding:9px 11px!important;border-radius:12px;font-weight:650}#nav-original .member-profile-trigger{border-radius:14px!important;background:color-mix(in srgb,var(--sub) 10%,var(--bg_sub))!important}#offcanvasDarkNavbar .mobile-main-menu .nav-link{display:flex;align-items:center;min-height:45px;margin-bottom:5px;padding:10px 12px!important;border-radius:12px;background:color-mix(in srgb,var(--sub) 7%,transparent)}
body[data-menu-head-style="2"] #nav-original{border-color:color-mix(in srgb,#fff 16%,var(--bg_border));background:linear-gradient(135deg,color-mix(in srgb,var(--bg_main) 68%,transparent),color-mix(in srgb,var(--bg_sub) 58%,transparent))!important;backdrop-filter:blur(20px) saturate(150%);box-shadow:0 14px 38px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.09)}body[data-menu-head-style="2"] #nav-original .nav-link:is(:hover,.active){background:color-mix(in srgb,var(--main) 14%,transparent)!important}body[data-menu-head-style="2"] #offcanvasDarkNavbar{background:color-mix(in srgb,var(--bg_main) 78%,transparent)!important;backdrop-filter:blur(24px)}
body[data-menu-head-style="3"] #nav-original{border-color:color-mix(in srgb,var(--main) 45%,var(--sub));background:linear-gradient(110deg,color-mix(in srgb,var(--sub) 14%,var(--bg_main)),var(--bg_main),color-mix(in srgb,var(--main) 12%,var(--bg_main)))!important;box-shadow:0 0 22px color-mix(in srgb,var(--main) 16%,transparent),inset 0 -2px color-mix(in srgb,var(--sub) 28%,transparent)}body[data-menu-head-style="3"] #nav-original .desktop-menu>.nav-item>.nav-link{border:1px solid transparent}body[data-menu-head-style="3"] #nav-original .desktop-menu>.nav-item>.nav-link:is(:hover,.active){border-color:color-mix(in srgb,var(--main) 55%,transparent);background:color-mix(in srgb,var(--main) 13%,var(--bg_sub))!important;box-shadow:inset 0 0 12px color-mix(in srgb,var(--main) 14%,transparent)}body[data-menu-head-style="3"] #offcanvasDarkNavbar .mobile-main-menu .nav-link{border-left:3px solid color-mix(in srgb,var(--main) 50%,transparent)}
body[data-menu-head-style="4"] #nav-original{border:0;background:transparent!important;box-shadow:none}body[data-menu-head-style="4"] #nav-original>.container-fluid{padding:8px 10px;border:1px solid var(--bg_border);border-radius:20px;background:var(--bg_main);box-shadow:0 10px 30px rgba(0,0,0,.09)}body[data-menu-head-style="4"] #nav-original .desktop-menu{padding:5px;border-radius:16px;background:var(--bg_sub)}body[data-menu-head-style="4"] #nav-original .desktop-menu>.nav-item>.nav-link{border-radius:999px}body[data-menu-head-style="4"] #nav-original .desktop-menu>.nav-item>.nav-link:is(:hover,.active){background:linear-gradient(110deg,var(--main),var(--sub))!important;color:#fff!important}body[data-menu-head-style="4"] #offcanvasDarkNavbar .mobile-main-menu{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}body[data-menu-head-style="4"] #offcanvasDarkNavbar .mobile-main-menu .nav-link{height:100%;margin:0;border:1px solid var(--bg_border);background:var(--bg_sub)}
.site-description-footer{overflow:hidden}.site-description-footer a{text-decoration:none}.site-description-footer .container{position:relative}.site-description-footer.footer-style-1{border-top:1px solid var(--bg_border)!important;background:var(--bg_main)!important}.site-description-footer.footer-style-2{border:0!important;background:transparent!important}.site-description-footer.footer-style-2>.container{border-top:1px solid var(--bg_border)}.site-description-footer.footer-style-3{margin-inline:auto;width:min(1180px,calc(100% - 18px));border:1px solid color-mix(in srgb,#fff 13%,var(--bg_border))!important;border-radius:24px 24px 0 0;background:linear-gradient(135deg,color-mix(in srgb,var(--bg_main) 68%,transparent),color-mix(in srgb,var(--bg_sub) 60%,transparent))!important;backdrop-filter:blur(20px);box-shadow:0 -12px 36px rgba(0,0,0,.12)}.site-description-footer.footer-style-4{border-top:1px solid color-mix(in srgb,var(--main) 48%,var(--sub))!important;background:linear-gradient(115deg,color-mix(in srgb,var(--sub) 14%,var(--bg_main)),var(--bg_main),color-mix(in srgb,var(--main) 13%,var(--bg_main)))!important;box-shadow:inset 0 2px color-mix(in srgb,var(--main) 20%,transparent)}.site-description-footer.footer-style-4:before{content:"";display:block;height:2px;background:linear-gradient(90deg,transparent,var(--main),var(--sub),var(--main),transparent);box-shadow:0 0 12px var(--main)}.site-description-footer.footer-style-5{border:0!important;background:var(--bg_sub)!important}.site-description-footer.footer-style-5>.container{margin-block:18px;padding:24px!important;border:1px solid var(--bg_border);border-radius:20px;background:var(--bg_main)}
@media(max-width:991.98px){#nav-original{width:calc(100% - 12px);margin:5px auto!important;border-radius:15px}#offcanvasDarkNavbar{border-left:1px solid var(--bg_border);background:var(--bg_main)}#offcanvasDarkNavbar .mobile-member-card{border:1px solid color-mix(in srgb,var(--sub) 22%,var(--bg_border));background:linear-gradient(135deg,color-mix(in srgb,var(--sub) 10%,var(--bg_main)),var(--bg_main))}.site-description-footer.footer-style-3{width:calc(100% - 12px)}.site-description-footer .row{text-align:left}.site-description-footer.footer-style-5>.container{margin:8px;padding:17px!important}}
body[data-mouse-style="4"],body[data-mouse-style="4"] *{cursor:var(--site-custom-cursor,auto)!important}
.site-click-effect,.site-click-effect:before,.site-click-effect:after{position:fixed;z-index:2147482999;left:0;top:0;width:12px;height:12px;pointer-events:none;border:.7px solid color-mix(in srgb,var(--main) 72%,transparent);border-radius:50%;box-shadow:0 0 5px color-mix(in srgb,var(--main) 22%,transparent);transform:translate(-50%,-50%) scale(.35);animation:siteMouseRipple .68s cubic-bezier(.16,.72,.24,1) forwards;will-change:transform,opacity}.site-click-effect:before,.site-click-effect:after{content:"";position:absolute;left:50%;top:50%;box-shadow:none}.site-click-effect:before{border-color:color-mix(in srgb,var(--sub) 55%,transparent);animation-delay:.055s}.site-click-effect:after{border-color:color-mix(in srgb,var(--main) 42%,transparent);animation-delay:.11s}
@keyframes siteMouseRipple{0%{opacity:.72;transform:translate(-50%,-50%) scale(.45)}55%{opacity:.34}100%{opacity:0;transform:translate(-50%,-50%) scale(2.25)}}
@media(pointer:coarse){body[data-mouse-style="4"],body[data-mouse-style="4"] *{cursor:auto!important}.site-click-effect{display:none!important}}@media(prefers-reduced-motion:reduce){.site-click-effect{display:none!important}}
#theme-pro-effect{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1001;mix-blend-mode:screen;opacity:.92;transform:translateZ(0)}
@media (prefers-reduced-motion:reduce){#theme-pro-effect{opacity:.55}}
/* ===== Professional main navigation ===== */
:root{--site-card-radius:16px;}
#nav-clone{display:none!important;}
#nav-original{
  background: rgba(255,255,255,0.96) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
#nav-original .nav-link{
  font-size:13px!important;
  font-weight:650!important;
  letter-spacing:.01em;
  border-radius:10px;
  padding:.46rem .62rem!important;
  transition:color .18s ease, background-color .18s ease, transform .18s ease;
}
#nav-original .nav-link:hover,
#nav-original .nav-link:focus{
  color:#0084ff!important;
  background:#0084ff14;
  transform:translateY(-1px);
}
#nav-original .navbar-toggler{
  border:0!important;
  border-radius:11px!important;
  padding:9px 11px!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:none!important;
}
#nav-original .navbar-toggler:active{transform:scale(.97)}
#nav-original .desktop-menu .nav-link i,
#offcanvasDarkNavbar .mobile-list-menu .list-btn i{
  transform-origin:center;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), filter .24s ease;
}
#nav-original .desktop-menu .nav-link:hover i,
#nav-original .desktop-menu .nav-link:focus i,
#offcanvasDarkNavbar .mobile-list-menu .list-btn:hover i,
#offcanvasDarkNavbar .mobile-list-menu .list-btn:active i{
  transform:translateY(-2px) rotate(-7deg) scale(1.12);
  filter:drop-shadow(0 4px 8px color-mix(in srgb, var(--main) 38%, transparent));
}
#nav-original .desktop-menu .nav-link.active,
#offcanvasDarkNavbar .mobile-list-menu .list-btn.active{
  color:var(--main)!important;
  background:color-mix(in srgb, var(--sub) 14%, transparent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sub) 22%, transparent);
}
#nav-original .desktop-menu .nav-link.active i,
#offcanvasDarkNavbar .mobile-list-menu .list-btn.active i{color:var(--main)!important;}


/* Compact, balanced primary header */
#nav-original{min-height:58px!important;padding:.3rem .65rem!important;}
#nav-original .navbar-brand{display:flex;align-items:center;margin-right:.65rem!important;padding:.15rem 0!important;}
#nav-original .navbar-brand img{height:38px!important;max-width:148px!important;object-fit:contain;}
#nav-original .desktop-menu{align-items:center!important;gap:2px;}
#nav-original .desktop-menu .nav-link{display:flex!important;align-items:center!important;gap:.42rem!important;white-space:nowrap;}
#nav-original .desktop-menu .nav-link i{font-size:1.18em!important;line-height:1!important;min-width:1.25em;text-align:center;}
#nav-original .navbar-toggler i,#nav-original .btn-search i{font-size:1.2em!important;}
#offcanvasDarkNavbar .mobile-list-menu .list-btn i{font-size:1.22em!important;min-width:1.35em;text-align:center;}
/* Icons should always read slightly larger than adjacent text. */
a i.fas,button i.fas,.nav-link i.fas,.dropdown-item i.fas,.list-btn i.fas{font-size:1.16em;}
@media (max-width:991.98px){
  #nav-original{min-height:54px!important;padding:.28rem .55rem!important;}
  #nav-original .navbar-brand img{height:34px!important;max-width:132px!important;}
}

/* cards use one radius site-wide */
.card,.box-light,.border-radius,.pay-card,.modal-content,.dropdown-menu{border-radius:var(--site-card-radius)!important;}

/* ===== Stable navigation layers ===== */
#nav-original{position:relative;z-index:1100!important;overflow:visible!important;isolation:auto!important;}
#nav-original .navbar-collapse,#nav-original .navbar-nav,#nav-original .nav-item.dropdown{overflow:visible!important;}
#nav-original .dropdown-menu{z-index:1120!important;}
#nav-original .dropdown-profile{z-index:1130!important;position:absolute!important;}
#app{position:relative;z-index:1!important;isolation:auto;}
.offcanvas{z-index:1500!important;}
.offcanvas-backdrop{z-index:1490!important;}
.modal-backdrop{z-index:1990!important;}
.modal{z-index:2000!important;}
.modal.show{display:block!important;}
#authModal.modal{z-index:2100!important;}
#authModal .modal-dialog{z-index:2101!important;}


@media (max-width:991.98px){
  #nav-original{
    position:sticky;
    top:0;
    z-index:1040;
    will-change:transform;
    transform:translate3d(0,0,0);
    transition:transform .18s ease-out;
    contain:layout paint style;
  }
  #nav-original.mobile-nav-hidden{transform:translate3d(0,-105%,0)}
  #offcanvasDarkNavbar{
    position:fixed!important;
    z-index:1200!important;
    width:min(86vw,340px)!important;
    margin-right:0!important;
    padding:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-left:1px solid rgba(255,255,255,.08)!important;
    background:rgba(255,255,255,.97)!important;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    box-shadow:-18px 0 45px rgba(0,0,0,.28);
  }
  #offcanvasDarkNavbar .offcanvas-header{padding:18px 18px 10px!important;margin:0!important;}
  #offcanvasDarkNavbar .offcanvas-body{display:flex!important;flex-direction:column!important;min-height:0!important;flex:1 1 auto!important;padding:8px 14px 22px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  #offcanvasDarkNavbar .desktop-menu{display:none!important;} /* desktop duplicate hidden; mobile-list-menu is used below */
  #offcanvasDarkNavbar .desktop-menu .nav-item{width:100%;}
  #offcanvasDarkNavbar .desktop-menu .nav-link{
    display:flex;align-items:center;gap:12px;width:100%;
    padding:12px 13px!important;border-radius:12px;
    font-size:14px!important;font-weight:650!important;
  }
  #offcanvasDarkNavbar .desktop-menu .nav-link i{width:22px;text-align:center;font-size:17px;}
  #offcanvasDarkNavbar .desktop-menu .nav-link:hover{transform:none;background:#0084ff18;}
  #offcanvasDarkNavbar .dropdown-menu{position:static!important;transform:none!important;margin:5px 0 8px!important;width:100%;box-shadow:none!important;}
  .mini-wallet-slim{display:none!important;}
}

/* =========================
   RAINBOW REWARD MENU
========================= */

.reward-rainbow:hover span,.reward-rainbow.active span,body[data-page="reward"] .reward-rainbow span{color:#111!important}
.reward-rainbow span{
    font-weight:700;

    background:linear-gradient(
        90deg,
        #ff004c,
        #ff8a00,
        #ffe600,
        #32ff00,
        #00e5ff,
        #246bff,
        #9b4dff,
        #ff00c8,
        #ff004c
    );

    background-size:300% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:rewardRainbow 4s linear infinite;
}

/* ให้ไอคอนเปลี่ยนสีไปด้วย */
.reward-rainbow i{
    color:#ff3d8d;

    animation:rewardIconRainbow 4s linear infinite;

    filter:drop-shadow(
        0 0 6px rgba(255,255,255,.25)
    );
}

@keyframes rewardRainbow{
    0%{
        background-position:0% 50%;
    }

    100%{
        background-position:300% 50%;
    }
}

@keyframes rewardIconRainbow{
    0%{
        color:#ff004c;
    }

    14%{
        color:#ff8a00;
    }

    28%{
        color:#ffe600;
    }

    42%{
        color:#32ff00;
    }

    56%{
        color:#00e5ff;
    }

    70%{
        color:#246bff;
    }

    84%{
        color:#9b4dff;
    }

    100%{
        color:#ff004c;
    }
}
/* =========================================
   SERVICES DROPDOWN
========================================= */

#nav-original .service-dropdown{
    min-width: 300px;
    max-width: 340px;

    padding: 8px;

    border-radius: 14px !important;

    overflow: hidden !important;
}


/* แต่ละเมนู */
#nav-original .service-item{
    display: flex !important;
    align-items: center !important;

    gap: 12px;

    min-height: 58px;

    padding: 9px 11px !important;

    margin-bottom: 3px;

    border-radius: 10px !important;

    white-space: normal !important;

    transition:
        background-color .18s ease,
        transform .18s ease;
}


/* ไอคอน */
#nav-original .service-icon{
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 19px !important;

    color: var(--main) !important;

    background:
        color-mix(
            in srgb,
            var(--main) 12%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--main) 20%,
            transparent
        );

    border-radius: 10px;

    transition:
        transform .2s ease,
        background-color .2s ease,
        color .2s ease;
}


/* กล่องข้อความ */
#nav-original .service-info{
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    line-height: 1.25;
}


/* ชื่อ */
#nav-original .service-name{
    display: block;

    margin: 0;

    font-size: 13px;

    font-weight: 700;

    color: var(--font_main);
}


/* รายละเอียด */
#nav-original .service-info small{
    display: block;

    margin-top: 3px;

    font-size: 10.5px;

    font-weight: 500;

    line-height: 1.35;

    color: var(--font_sub);

    opacity: .8;

    white-space: normal;

    overflow-wrap: anywhere;
}


/* hover */
#nav-original .service-item:hover{
    transform: translateX(2px);

    background:
        color-mix(
            in srgb,
            var(--main) 10%,
            transparent
        ) !important;
}


#nav-original .service-item:hover .service-icon{
    color: #fff !important;

    background: var(--main);

    transform: scale(1.06);
}


/* active SPA */
#nav-original .service-item.active{
    background:
        color-mix(
            in srgb,
            var(--main) 14%,
            transparent
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        color-mix(
            in srgb,
            var(--main) 25%,
            transparent
        );
}


#nav-original .service-item.active .service-icon{
    color: #fff !important;

    background: var(--main);
}


/* เมนูดูทั้งหมด */
#nav-original .service-all-wrap{
    margin-top: 6px;

    padding-top: 6px;

    border-top:
        1px solid rgba(255,255,255,.08);
}


#nav-original .service-all{
    display: flex !important;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px !important;

    border-radius: 9px !important;

    font-size: 12px;

    font-weight: 700;

    color: var(--main) !important;
}


#nav-original .service-all i{
    color: var(--main) !important;

    font-size: 15px !important;
}


#nav-original .service-all:hover{
    background:
        color-mix(
            in srgb,
            var(--main) 12%,
            transparent
        ) !important;
}
.mini-wallet-slim{
    padding:10px 12px;
    border-radius:14px;
    color:#fff;
}

/* แถวบน */
.wallet-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* ปุ่มด้านล่าง */
.wallet-actions{
    display:flex;
    gap:8px;
}

.wallet-btn{
    flex:1;
    justify-content:center;
    padding:8px;
    font-size:12px;
}


/* ซ้าย */
.wallet-left{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#fff;
}
.wallet-left img{
    width:36px;
    height:36px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #fff;
}
.user-name{
    font-size:13px;
    font-weight:700;
    line-height:1.1;
}
.user-rank{
    font-size:11px;
}

/* ขวา */
.wallet-right{
    text-align:right;
    line-height:1.1;
}
.money{
    font-weight:700;
    font-size:14px;
}
.bonus{
    font-size:12px;
    opacity:.9;
}
.wallet-actions{
    display:flex;
    gap:6px;
    margin-left:10px;
}

.wallet-btn{
    display:flex;
    align-items:center;
    gap:4px;
    padding:6px 8px;
    font-size:11px;
    border-radius:8px;
    text-decoration:none;
    color:#fff;
    white-space:nowrap;
}

.wallet-btn i{
    font-size:12px;
}

.wallet-guest{
    opacity:.95;
}

.wallet-guest .money{
    opacity:.6;
}

.wallet-guest .bonus{
    font-size:11px;
    opacity:.6;
}
/* MOBILE LIST MENU */
.mobile-list-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.list-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,1 );
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255,255,255,1);
    color: #fff;
    border-radius: 1vh;
    text-decoration: none;
    transition: 0.2s;
}

.list-btn i {
    font-size: 20px;
    color: #fff;
    min-width: 24px;
    text-align: center;
}

.list-btn span {
    font-size: 15px;
    font-weight: 600;
}

.list-btn:hover {
    color: color-mix(in srgb,var(--sub) 19%,transparent);
}

.offcanvas {
	background: rgba(255,255,255,1 );
	backdrop-filter: blur(10px);
}

/* ซ่อนเมนู desktop บน mobile */
/* ================================
   MOBILE MENU
================================ */
@media (max-width: 991.98px) {

    /* ซ่อนเมนู Desktop บน Mobile */
    .desktop-menu,
    .openSearchBtn {
        display: none !important;
    }

    #offcanvasDarkNavbar .mobile-list-menu {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 0 auto !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mobile-list-menu {
        gap: 7px !important;
        margin-top: 4px !important;
    }

    .mobile-list-menu .menu-title {
        display: none !important;
    }


    /* =================================
       MENU BUTTON
    ================================= */
    .mobile-list-menu .list-btn {
        position: relative;
        overflow: hidden;

        min-height: 48px;
        padding: 11px 13px !important;
        gap: 12px !important;

        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 12px !important;

        /* Glass */
        background: rgba(255,255,255,.045) !important;

        -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
        backdrop-filter: blur(12px) saturate(130%) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05),
            0 5px 18px rgba(0,0,0,.12) !important;

        transition:
            transform .22s cubic-bezier(.2,.8,.2,1),
            background .22s ease,
            border-color .22s ease,
            box-shadow .22s ease,
            color .22s ease !important;
    }


    /* แสงวิ่งผ่านปุ่ม */
    .mobile-list-menu .list-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;

        width: 70%;
        height: 100%;

        pointer-events: none;

        background: linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );

        transform: skewX(-18deg);
        transition: left .55s ease;
    }


    .mobile-list-menu .list-btn:hover::before,
    .mobile-list-menu .list-btn:active::before {
        left: 130%;
    }


    /* Hover / Active */
    .mobile-list-menu .list-btn:hover {
        transform: translateY(-1px);

        background:
            color-mix(
                in srgb,
                var(--main) 11%,
                rgba(255,255,255,.045)
            ) !important;

        border-color:
            color-mix(
                in srgb,
                var(--main) 35%,
                rgba(255,255,255,.08)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.07),
            0 7px 24px rgba(0,0,0,.18),
            0 0 14px color-mix(
                in srgb,
                var(--main) 12%,
                transparent
            ) !important;
    }


    .mobile-list-menu .list-btn:active {
        transform: scale(.975);

        background:
            color-mix(
                in srgb,
                var(--main) 17%,
                rgba(255,255,255,.045)
            ) !important;
    }


    /* Icon */
    .mobile-list-menu .list-btn i {
        position: relative;
        z-index: 1;

        font-size: 17px !important;
        width: 22px !important;

        color: #0084ff !important;

        transition:
            transform .22s ease,
            filter .22s ease !important;
    }

    .mobile-list-menu .list-btn:hover i {
        transform: scale(1.08);
        filter: drop-shadow(
            0 0 5px #0084ff        );
    }


    .mobile-list-menu .list-btn span {
        position: relative;
        z-index: 1;

        font-size: 14px !important;
        font-weight: 650 !important;

        transition: color .2s ease;
    }


    /* =================================
       WALLET BUTTON
    ================================= */
    .mobile-member-actions .wallet-btn {
        min-height: 40px;

        border-radius: 10px !important;
        font-weight: 650;

        justify-content: center;

        transition:
            transform .2s ease,
            box-shadow .2s ease,
            filter .2s ease !important;
    }

    .mobile-member-actions .wallet-btn:hover {
        transform: translateY(-1px);

        box-shadow:
            0 6px 18px color-mix(
                in srgb,
                var(--main) 20%,
                transparent
            ) !important;
    }

    .mobile-member-actions .wallet-btn:active {
        transform: scale(.97);
    }


    /* =================================
       PROFILE CARD
    ================================= */
    .mobile-profile-card {
        position: relative;
        overflow: hidden;

        padding: 12px;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--main) 18%,
                transparent
            );

        border-radius: 16px;

        background:
            linear-gradient(
                145deg,
                color-mix(
                    in srgb,
                    var(--main) 10%,
                    transparent
                ),
                rgba(255,255,255,.025)
            );

        /* Blur */
        -webkit-backdrop-filter:
            blur(14px) saturate(125%);

        backdrop-filter:
            blur(14px) saturate(125%);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05),
            0 12px 28px rgba(0,0,0,.14);

        transition:
            border-color .25s ease,
            box-shadow .25s ease,
            transform .25s ease;
    }

    .mobile-profile-card:hover {
        border-color:
            color-mix(
                in srgb,
                var(--main) 32%,
                transparent
            );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.07),
            0 16px 34px rgba(0,0,0,.2),
            0 0 20px color-mix(
                in srgb,
                var(--main) 10%,
                transparent
            );
    }


    /* =================================
       PROFILE USER
    ================================= */
    .mobile-profile-user {
        display: flex;
        align-items: center;
        gap: 10px;

        color: var(--font_main);
    }

    .mobile-profile-user > img {
        width: 48px;
        height: 48px;

        border-radius: 50%;
        object-fit: cover;

        border:
            2px solid
            color-mix(
                in srgb,
                var(--main) 55%,
                white
            );

        box-shadow:
            0 0 0 3px
            color-mix(
                in srgb,
                var(--main) 11%,
                transparent
            ),
            0 0 12px
            color-mix(
                in srgb,
                var(--main) 18%,
                transparent
            );

        transition:
            transform .25s ease,
            box-shadow .25s ease;
    }

    .mobile-profile-user:hover > img {
        transform: scale(1.04);

        box-shadow:
            0 0 0 3px
            color-mix(
                in srgb,
                var(--main) 15%,
                transparent
            ),
            0 0 18px
            color-mix(
                in srgb,
                var(--main) 30%,
                transparent
            );
    }


    /* =================================
       TITLE AURA
    ================================= */
    .mobile-title-aura {
        display: inline-flex;
        position: relative;
        overflow: hidden;

        padding: 3px 8px;
        margin-bottom: 3px;

        border-radius: 999px;

        font-size: 8px;
        font-weight: 700;

        color: var(--font_main);

        background:
            color-mix(
                in srgb,
                var(--main) 10%,
                var(--bg_main)
            );

        border:
            1px solid
            color-mix(
                in srgb,
                var(--main) 45%,
                transparent
            );

        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);

        box-shadow:
            0 0 10px
            color-mix(
                in srgb,
                var(--main) 24%,
                transparent
            );
    }


    /* แสงวิ่ง Title */
    .mobile-title-aura::after {
        content: "";

        position: absolute;
        top: 0;
        left: -100%;

        width: 60%;
        height: 100%;

        background: linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

        transform: skewX(-20deg);

        animation: mobileAuraShine 3.5s ease-in-out infinite;
    }


    @keyframes mobileAuraShine {
        0% {
            left: -100%;
        }

        45%,
        100% {
            left: 150%;
        }
    }


    /* =================================
       LEVEL
    ================================= */
    .mobile-level-row {
        display: flex;
        justify-content: space-between;

        font-size: 8px;
        color: var(--font_sub);

        margin-top: 3px;
    }

    .mobile-level-track {
        height: 5px;

        border-radius: 999px;
        overflow: hidden;

        background: rgba(255,255,255,.08);

        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    .mobile-level-track span {
        display: block;

        height: 100%;

        background:
            linear-gradient(
                90deg,
                var(--main),
                var(--sub)
            );

        box-shadow:
            0 0 8px var(--main);

        transition: width .5s ease;
    }


    /* =================================
       WALLET INFO
    ================================= */
    .mobile-profile-wallet {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 7px;

        margin-top: 10px;
    }

    .mobile-profile-wallet > div {
        position: relative;
        overflow: hidden;

        padding: 8px 9px;

        border-radius: 10px;

        background: rgba(255,255,255,.035);

        border:
            1px solid
            rgba(255,255,255,.055);

        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);

        transition:
            background .2s ease,
            border-color .2s ease,
            transform .2s ease;
    }

    .mobile-profile-wallet > div:hover {
        transform: translateY(-1px);

        background:
            color-mix(
                in srgb,
                var(--main) 7%,
                rgba(255,255,255,.035)
            );

        border-color:
            color-mix(
                in srgb,
                var(--main) 20%,
                rgba(255,255,255,.055)
            );
    }

    .mobile-profile-wallet small {
        display: block;

        font-size: 8px;
        color: var(--font_sub);
    }

    .mobile-profile-wallet strong {
        display: block;

        font-size: 12px;
        margin-top: 1px;
    }


    /* =================================
       OFFCANVAS BACKDROP
       ทำให้ "พื้นหลังด้านหลังเมนู" เบลอ
    ================================= */
    .offcanvas-backdrop {
        background-color: rgba(0,0,0,.38) !important;

        -webkit-backdrop-filter: blur(7px) saturate(115%) !important;
        backdrop-filter: blur(7px) saturate(115%) !important;
    }


    /* =================================
       OFFCANVAS ตัวเมนู
    ================================= */
    #offcanvasDarkNavbar {
        background:
            linear-gradient(
                145deg,
                color-mix(
                    in srgb,
                    var(--bg_main) 88%,
                    var(--main) 12%
                ),
                color-mix(
                    in srgb,
                    var(--bg_main) 94%,
                    transparent
                )
            ) !important;

        -webkit-backdrop-filter:
            blur(18px) saturate(135%) !important;

        backdrop-filter:
            blur(18px) saturate(135%) !important;

        box-shadow:
            10px 0 40px rgba(0,0,0,.25) !important;
    }
}


.member-profile-trigger-meta{display:flex;align-items:center;gap:7px;margin-left:8px}.member-profile-trigger-chip{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;background:color-mix(in srgb,var(--bg_sub) 76%,transparent);border:1px solid color-mix(in srgb,var(--main) 18%,transparent);font-size:12px;font-weight:700;color:var(--font_main);white-space:nowrap;min-height:32px}.member-profile-trigger-chip i{font-size:13px}.member-title-aura{position:relative;display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;overflow:hidden;border:1px solid color-mix(in srgb,var(--main) 45%,transparent);background:color-mix(in srgb,var(--main) 10%,var(--bg_main));box-shadow:0 0 10px color-mix(in srgb,var(--main) 24%,transparent);font-size:8px;font-weight:700;line-height:1.3}.member-title-aura:before,.mobile-title-aura:before{content:"";position:absolute;inset:-80%;background:conic-gradient(from 0deg,transparent 0 22%,var(--main) 32%,transparent 42% 72%,var(--sub) 82%,transparent 92%);animation:memberAuraSpin 3.2s linear infinite;opacity:.62}.member-title-aura span,.mobile-title-aura span{position:relative;z-index:1}@keyframes memberAuraSpin{to{transform:rotate(360deg)}}
.member-level-title-effect{display:inline-flex;align-items:center;gap:4px;color:var(--main)!important;font-weight:700;text-shadow:0 0 7px color-mix(in srgb,var(--main) 34%,transparent);animation:memberLevelTitleGlow 2.2s ease-in-out infinite;will-change:opacity,text-shadow}.member-level-title-effect .member-level-prefix{font-size:.82em;letter-spacing:.02em;opacity:.78}@keyframes memberLevelTitleGlow{0%,100%{opacity:.82;text-shadow:0 0 4px color-mix(in srgb,var(--main) 20%,transparent)}50%{opacity:1;text-shadow:0 0 10px color-mix(in srgb,var(--main) 58%,transparent)}}
/* ==================================================
   MOBILE OTHER SERVICES
================================================== */

#offcanvasDarkNavbar .mobile-service-toggle{
    min-height:50px;
}

#offcanvasDarkNavbar .mobile-service-main-icon{
    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 30px;

    border-radius:9px;

    color:var(--main);

    background:
        color-mix(
            in srgb,
            var(--main) 12%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--main) 22%,
            transparent
        );
}

#offcanvasDarkNavbar .mobile-service-main-icon i{
    color:var(--main)!important;
    font-size:15px!important;
}


/* submenu */
#offcanvasDarkNavbar .mobile-service-submenu{
    padding:
        5px 0
        5px 13px;
}


/* item */
#offcanvasDarkNavbar .mobile-service-item{
    display:flex;

    align-items:center;

    gap:11px;

    min-height:56px;

    margin:4px 0;

    padding:8px 10px;

    text-decoration:none;

    border-radius:11px;

    color:var(--font_main);

    border:
        1px solid
        rgba(255,255,255,.055);

    background:
        rgba(255,255,255,.025);

    transition:
        background-color .18s ease,
        transform .18s ease;
}


/* icon */
#offcanvasDarkNavbar .mobile-service-icon{
    width:36px;
    height:36px;

    flex:0 0 36px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:10px;

    color:var(--main);

    background:
        color-mix(
            in srgb,
            var(--main) 11%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--main) 20%,
            transparent
        );
}


#offcanvasDarkNavbar .mobile-service-icon i{
    color:var(--main)!important;

    width:auto!important;

    min-width:0!important;

    font-size:17px!important;
}


/* text */
#offcanvasDarkNavbar .mobile-service-content{
    min-width:0;

    display:flex;

    flex-direction:column;

    line-height:1.25;
}


#offcanvasDarkNavbar .mobile-service-content strong{
    color:var(--font_main);

    font-size:13px;

    font-weight:700;
}


#offcanvasDarkNavbar .mobile-service-content small{
    margin-top:2px;

    color:var(--font_sub);

    font-size:10px;

    font-weight:500;

    line-height:1.35;

    opacity:.75;

    white-space:normal;
}


/* hover */
#offcanvasDarkNavbar .mobile-service-item:hover,
#offcanvasDarkNavbar .mobile-service-item:active{

    transform:translateX(2px);

    background:
        color-mix(
            in srgb,
            var(--main) 10%,
            transparent
        );
}


#offcanvasDarkNavbar .mobile-service-item:hover
.mobile-service-icon,

#offcanvasDarkNavbar .mobile-service-item:active
.mobile-service-icon{

    background:var(--main);

    color:#fff;
}


#offcanvasDarkNavbar .mobile-service-item:hover
.mobile-service-icon i,

#offcanvasDarkNavbar .mobile-service-item:active
.mobile-service-icon i{

    color:#fff!important;
}


/* active SPA */
#offcanvasDarkNavbar .mobile-service-item.active{

    background:
        color-mix(
            in srgb,
            var(--main) 14%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(--main) 22%,
            transparent
        );
}


#offcanvasDarkNavbar .mobile-service-item.active
.mobile-service-icon{

    background:var(--main);
}


#offcanvasDarkNavbar .mobile-service-item.active
.mobile-service-icon i{

    color:#fff!important;
}


/* all services */
#offcanvasDarkNavbar .mobile-service-all{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:6px;

    padding:10px;

    border-top:
        1px solid rgba(255,255,255,.07);

    color:var(--main);

    font-size:11px;

    font-weight:700;

    text-decoration:none;
}


#offcanvasDarkNavbar .mobile-service-all i{

    color:var(--main)!important;

    font-size:14px!important;
}


/* arrow */
#offcanvasDarkNavbar .submenu-chevron{

    transition:
        transform .2s ease;
}


#offcanvasDarkNavbar
.mobile-service-toggle[aria-expanded="true"]
.submenu-chevron{

    transform:rotate(180deg);
}
/* Final navigation layer: keeps the existing layout while preventing legacy rules from colliding. */
#nav-original{
  --nav-line:color-mix(in srgb,var(--main) 16%,var(--bg_border));
  --nav-soft:color-mix(in srgb,var(--main) 10%,var(--bg_sub));
  position:sticky!important;top:0!important;z-index:1100!important;overflow:visible!important;
  min-height:62px!important;padding:7px 0!important;
  border:0!important;border-bottom:1px solid var(--nav-line)!important;
  background:color-mix(in srgb,var(--bg_main) 91%,transparent)!important;
  box-shadow:0 10px 32px rgba(0,0,0,.13)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
#nav-original>.container-fluid{
  width:min(94%,1380px)!important;max-width:1380px!important;margin:auto!important;padding:0 10px!important;
  display:flex!important;align-items:center!important;gap:12px!important;
}
#nav-original .navbar-brand{display:flex!important;align-items:center!important;gap:9px!important;flex:0 0 auto!important;margin:0 8px 0 0!important;padding:2px 0!important;}
#nav-original .navbar-brand img{display:block;height:42px!important;width:auto!important;max-width:122px!important;object-fit:contain!important;}
#nav-original .site-brand-name{font-size:17px!important;font-weight:700!important;white-space:nowrap;letter-spacing:.01em;}
#offcanvasDarkNavbar{--nav-line:color-mix(in srgb,var(--main) 16%,var(--bg_border));--nav-soft:color-mix(in srgb,var(--main) 10%,var(--bg_sub));border-color:var(--nav-line)!important;}
#offcanvasDarkNavbar .desktop-menu{align-items:center!important;gap:4px!important;margin:0!important;padding:0!important;}
#offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link{
  position:relative;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  min-height:41px!important;padding:8px 11px!important;border:1px solid transparent!important;border-radius:12px!important;
  color:var(--font_main)!important;font-size:12px!important;font-weight:700!important;white-space:nowrap;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
#offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link:not(.reward-rainbow):hover,
#offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link:not(.reward-rainbow):focus-visible{
  color:var(--main)!important;background:var(--nav-soft)!important;border-color:color-mix(in srgb,var(--main) 20%,transparent)!important;
  transform:translateY(-1px);box-shadow:0 7px 17px rgba(0,0,0,.07);
}
#offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link:not(.reward-rainbow).active{
  color:var(--main)!important;background:color-mix(in srgb,var(--main) 13%,var(--bg_sub))!important;
  border-color:color-mix(in srgb,var(--sub) 100%,transparent)!important;
}
#offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link i{transition:transform .2s ease,filter .2s ease!important;}
#offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link:hover i{transform:translateY(-1px) scale(1.08);filter:drop-shadow(0 4px 7px color-mix(in srgb,var(--main) 35%,transparent));}
#offcanvasDarkNavbar .desktop-menu .dropdown.show>.dropdown-toggle{color:var(--main)!important;background:var(--nav-soft)!important;border-color:color-mix(in srgb,var(--main) 28%,transparent)!important;}
#offcanvasDarkNavbar .service-dropdown{
  min-width:310px!important;padding:9px!important;margin-top:9px!important;border:1px solid var(--nav-line)!important;border-radius:17px!important;
  background:color-mix(in srgb,var(--bg_main) 97%,transparent)!important;box-shadow:0 20px 48px rgba(0,0,0,.24)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
#offcanvasDarkNavbar .service-item{min-height:55px;padding:9px 10px!important;border:1px solid transparent!important;border-radius:12px!important;}
#offcanvasDarkNavbar .service-item:hover,#offcanvasDarkNavbar .service-item.active{transform:translateX(2px);border-color:color-mix(in srgb,var(--main) 18%,transparent)!important;background:var(--nav-soft)!important;}
#nav-original .offcanvas-body>.navbar-nav.mb-2.mt-2{margin:0!important;display:flex!important;align-items:center!important;gap:8px!important;flex-direction:row!important;}
#nav-original .nav-search-item{margin:0!important;}
#nav-original .nav-search-icon{width:42px;height:42px;display:grid;place-items:center;padding:0!important;border:1px solid var(--nav-line)!important;border-radius:12px!important;color:var(--main)!important;background:color-mix(in srgb,var(--bg_sub) 84%,transparent)!important;transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;}
#nav-original .nav-checkin-icon{border:1px solid var(--nav-line)!important}
body[data-menu-head-style="3"] #nav-original .desktop-guest-actions>li:last-child>a{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;min-height:42px;padding:0 13px!important;line-height:1;border-radius:12px}
#nav-original .nav-search-icon:hover{transform:translateY(-1px);background:var(--nav-soft)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--main) 9%,transparent);}
#nav-original .nav-search-icon i{font-size:15px!important;}
#nav-original .nav-balance-compact{
  min-height:42px!important;padding:5px 6px 5px 9px!important;border:1px solid var(--nav-line)!important;border-radius:13px!important;
  background:color-mix(in srgb,var(--bg_sub) 84%,transparent)!important;box-shadow:none!important;
}
#nav-original .nav-balance-icon{background:var(--nav-soft)!important;}
#nav-original .nav-balance-info{min-width:86px!important;}
#nav-original .nav-balance-info strong{display:flex;align-items:baseline;gap:3px;margin:0!important;font-size:15px!important;line-height:1!important;}
#nav-original .nav-currency{color:var(--main)!important;font-size:16px;font-weight:700;}
#nav-original .nav-amount{color:var(--font_main)!important;font-size:15px;font-weight:700;letter-spacing:.01em;}
#nav-original .nav-balance-refresh{
  position:relative;overflow:hidden;width:22px!important;height:22px!important;min-width:22px!important;flex:0 0 22px!important;border:1px solid color-mix(in srgb,var(--main) 12%,transparent)!important;border-radius:7px!important;
  transition:background .18s ease,transform .18s ease,color .18s ease,box-shadow .18s ease!important;
}
#nav-original .nav-balance-refresh i{font-size:10px!important;}
#nav-original .nav-balance-refresh:hover{transform:rotate(12deg) scale(1.05)!important;background:color-mix(in srgb,var(--main) 18%,transparent)!important;}
#nav-original .nav-balance-refresh:active{transform:scale(.92)!important;}
#nav-original .nav-balance-refresh:disabled{opacity:1!important;cursor:wait;}
#nav-original .nav-balance-refresh.is-loading{color:#fff!important;background:var(--main)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--main) 12%,transparent)!important;}
#nav-original .nav-balance-refresh.is-loading i{animation:navWalletSpin .62s linear infinite!important;}
#nav-original .nav-balance-refresh.is-success{color:#fff!important;background:#20b26b!important;border-color:#20b26b!important;animation:navWalletDone .55s ease;}
@keyframes navWalletSpin{to{transform:rotate(360deg)}}
@keyframes navWalletDone{50%{transform:scale(1.12);box-shadow:0 0 0 6px rgba(32,178,107,.14)}}
#nav-original .member-profile-trigger.member-avatar-trigger{
  width:42px!important;height:42px!important;min-width:42px!important;margin:0!important;padding:3px!important;border-radius:50%!important;
  border:1px solid color-mix(in srgb,var(--main) 42%,transparent)!important;background:color-mix(in srgb,var(--main) 5%,transparent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--main) 8%,transparent)!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
}
#nav-original .member-profile-trigger.member-avatar-trigger:hover,
#nav-original .member-nav-compact.show .member-profile-trigger{transform:translateY(-1px);background:var(--nav-soft)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--main) 14%,transparent)!important;}
#nav-original .member-profile-trigger.member-avatar-trigger>img{width:34px!important;height:34px!important;min-width:34px!important;border-radius:50%!important;object-fit:cover!important;}
#nav-original .member-profile-menu{
  width:320px!important;max-width:calc(100vw - 24px)!important;margin-top:10px!important;padding:9px!important;overflow:hidden!important;
  border:1px solid var(--nav-line)!important;border-radius:18px!important;color:var(--font_main)!important;
  background:color-mix(in srgb,var(--bg_main) 97%,transparent)!important;box-shadow:0 24px 58px rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transform-origin:top right;
}
#nav-original .member-profile-menu.show{animation:memberMenuIn .18s cubic-bezier(.2,.8,.2,1);}
@keyframes memberMenuIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
#nav-original .member-profile-head{position:relative;padding:14px!important;border:1px solid color-mix(in srgb,var(--main) 15%,transparent);border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--main) 13%,var(--bg_sub)),var(--bg_sub));}
#nav-original .member-profile-user{display:flex!important;align-items:center!important;gap:12px!important;}
#nav-original .member-profile-avatar{width:50px!important;height:50px!important;flex:0 0 50px!important;border:2px solid color-mix(in srgb,var(--main) 70%,#fff)!important;}
#nav-original .member-profile-info{min-width:0!important;}
#nav-original .member-profile-name{font-size:15px!important;font-weight:700!important;letter-spacing:.01em;color:var(--font_main)!important;text-shadow:0 3px 12px rgba(0,0,0,.16);}
#nav-original .member-profile-rank .badge{padding:5px 8px!important;border-radius:999px!important;font-size:8px!important;letter-spacing:.02em;}
#nav-original .member-profile-menu .dropdown-divider{margin:8px 2px!important;border-color:color-mix(in srgb,var(--main) 12%,transparent)!important;opacity:1;}
#nav-original .member-profile-link{min-height:43px!important;padding:8px 10px!important;border:1px solid transparent!important;border-radius:11px!important;}
#nav-original .member-profile-link:hover{transform:translateX(2px)!important;border-color:color-mix(in srgb,var(--main) 16%,transparent)!important;background:var(--nav-soft)!important;}
#nav-original .member-profile-link.member-admin:hover{color:#61e89a!important;border-color:rgba(32,178,107,.32)!important;background:rgba(32,178,107,.14)!important;}
#nav-original .member-profile-link.member-admin:hover i{color:#fff!important;background:#20b26b!important;}
#nav-original .member-profile-link.member-logout:hover{color:#ff7075!important;border-color:rgba(220,53,69,.34)!important;background:rgba(220,53,69,.14)!important;}
#nav-original .member-profile-link.member-logout:hover i{color:#fff!important;background:#dc3545!important;}
#nav-original .member-profile-divider{margin:6px 3px!important;background:color-mix(in srgb,var(--main) 10%,transparent)!important;}
.search-modal-dialog{width:min(820px,calc(100% - 24px));margin-inline:auto;}
.search-modal-content{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--main) 24%,var(--bg_border))!important;border-radius:25px!important;background:color-mix(in srgb,var(--bg_main) 96%,transparent)!important;box-shadow:0 34px 95px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.025) inset!important;-webkit-backdrop-filter:blur(22px) saturate(135%);backdrop-filter:blur(22px) saturate(135%);}
.search-modal-content:before{content:"";position:absolute;z-index:0;width:410px;height:210px;right:-115px;top:-125px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--main) 34%,transparent),transparent 68%);filter:blur(18px);pointer-events:none;}
.search-modal-shell{position:relative;z-index:1;}
.modal-backdrop.search-modal-backdrop{background:rgba(2,4,10,.68)!important;opacity:1!important;-webkit-backdrop-filter:blur(11px) saturate(120%);backdrop-filter:blur(11px) saturate(120%);}
.search-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 23px 18px;border-bottom:1px solid color-mix(in srgb,var(--main) 12%,var(--bg_border));background:linear-gradient(120deg,color-mix(in srgb,var(--main) 8%,transparent),transparent 58%);}
.search-modal-heading{display:flex;align-items:center;gap:13px;min-width:0;}
.search-modal-heading-icon{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--main) 34%,transparent);border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--main),var(--sub));box-shadow:0 11px 25px color-mix(in srgb,var(--main) 24%,transparent);}
.search-modal-kicker{display:block;margin-bottom:2px;color:var(--main);font-size:8px;font-weight:700;letter-spacing:.15em;}
.search-modal-header h5{margin:0;color:var(--font_main);font-size:18px;font-weight:700;line-height:1.35;}
.search-modal-header p{margin:2px 0 0;color:var(--font_sub);font-size:10px;line-height:1.5;}
.search-modal-close{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;margin:0;padding:0;border:1px solid color-mix(in srgb,var(--font_sub) 17%,transparent);border-radius:12px;color:var(--font_sub);background:color-mix(in srgb,var(--bg_sub) 84%,transparent);transition:transform .18s ease,color .18s ease,background .18s ease,border-color .18s ease;}
.search-modal-close:hover{color:#fff;border-color:var(--main);background:var(--main);transform:rotate(5deg) scale(.96);}
.search-modal-body{padding:19px 22px 22px;}
.search-modal-input-wrap{position:relative;display:flex;align-items:center;min-height:58px;border:1px solid color-mix(in srgb,var(--main) 23%,var(--bg_border));border-radius:17px;background:color-mix(in srgb,var(--bg_sub) 88%,transparent);box-shadow:0 9px 26px rgba(0,0,0,.08),inset 0 1px rgba(255,255,255,.035);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.search-modal-input-wrap:focus-within{border-color:var(--main);background:var(--bg_sub);box-shadow:0 0 0 4px color-mix(in srgb,var(--main) 11%,transparent),0 13px 30px rgba(0,0,0,.12);}
.search-modal-input-icon{width:54px;flex:0 0 54px;display:grid;place-items:center;color:var(--main);font-size:17px;}
.search-modal-input-wrap .form-control{height:56px;min-width:0;padding:0 86px 0 0!important;border:0!important;border-radius:17px!important;outline:0!important;background:transparent!important;color:var(--font_main)!important;font-size:13px!important;box-shadow:none!important;}
.search-modal-input-wrap .form-control::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none;}
.search-modal-input-wrap .form-control::placeholder{color:var(--font_sub);opacity:.68;}
.search-modal-clear{position:absolute;right:13px;width:31px;height:31px;display:grid;place-items:center;padding:0;border:0;border-radius:9px;color:var(--font_sub);background:color-mix(in srgb,var(--font_sub) 8%,transparent);transition:.16s ease;}
.search-modal-clear:hover{color:var(--main);background:color-mix(in srgb,var(--main) 12%,transparent);}
.search-modal-spinner{position:absolute;right:18px;display:grid;place-items:center;color:var(--main);}
.search-modal-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 3px 10px;color:var(--font_sub);font-size:9px;}
.search-modal-meta>span{display:flex;align-items:center;gap:6px;color:var(--font_main);font-weight:700;}
.search-modal-meta i{color:var(--main);}
.search-modal-meta small{font-size:8px;}
.search-modal-results{max-height:min(52vh,430px)!important;margin:0!important;padding:3px 3px 0!important;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;}
.search-modal-results .result-item{min-height:72px;margin:0 0 8px!important;padding:9px!important;border:1px solid color-mix(in srgb,var(--font_sub) 10%,var(--bg_border))!important;border-radius:15px!important;background:color-mix(in srgb,var(--bg_sub) 66%,transparent);transition:opacity .24s ease,transform .24s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.search-modal-results .result-item:hover{border-color:color-mix(in srgb,var(--main) 40%,var(--bg_border))!important;background:color-mix(in srgb,var(--main) 8%,var(--bg_sub));box-shadow:0 9px 25px rgba(0,0,0,.09);transform:translateY(-1px);}
.search-modal-results .result-item.show{transform:translateY(0);}
.search-result-image{width:52px;height:52px;flex:0 0 52px;object-fit:cover;border:1px solid color-mix(in srgb,var(--main) 18%,var(--bg_border));border-radius:12px;background:var(--bg_main);}
.search-result-copy{min-width:0;flex:1;}
.search-result-name{overflow:hidden;color:var(--font_main);font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;}
.search-result-type{display:flex;align-items:center;gap:5px;margin-top:3px;color:var(--font_sub);font-size:9px;}
.search-modal-results .arrow{width:31px;height:31px;display:grid;place-items:center;margin-left:auto;border-radius:10px;color:var(--font_sub);background:color-mix(in srgb,var(--font_sub) 7%,transparent);transition:.18s ease;}
.search-modal-results .result-item:hover .arrow{color:#fff;background:var(--main);transform:translateX(2px);}
.search-empty-state{padding:36px 16px;text-align:center;color:var(--font_sub);}
.search-empty-icon{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 10px;border:1px solid color-mix(in srgb,var(--main) 20%,var(--bg_border));border-radius:17px;color:var(--main);background:color-mix(in srgb,var(--main) 8%,var(--bg_sub));font-size:20px;}
.search-empty-state strong{display:block;color:var(--font_main);font-size:12px;font-weight:700;}
.search-empty-state span{display:block;margin-top:3px;font-size:9px;}
@media(max-width:575.98px){
  .search-modal-dialog{width:calc(100% - 16px);margin:8px auto;align-items:flex-start;min-height:calc(100% - 16px);}
  .search-modal-content{margin-top:8vh;border-radius:21px!important;}
  .search-modal-header{padding:17px 16px 15px;}
  .search-modal-heading{gap:10px;}
  .search-modal-heading-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px;}
  .search-modal-header h5{font-size:15px;}
  .search-modal-header p{display:none;}
  .search-modal-body{padding:14px 14px 16px;}
  .search-modal-input-wrap{min-height:53px;border-radius:15px;}
  .search-modal-input-icon{width:47px;flex-basis:47px;}
  .search-modal-input-wrap .form-control{height:51px;padding-right:48px!important;font-size:11px!important;}
  .search-modal-meta{align-items:flex-start;}
  .search-modal-meta small{display:none;}
  .search-modal-results{max-height:54vh!important;}
}
@media(min-width:992px){
  #offcanvasDarkNavbar{position:static!important;visibility:visible!important;transform:none!important;width:auto!important;height:auto!important;flex:1 1 auto!important;display:flex!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;}
  #offcanvasDarkNavbar .offcanvas-header{display:none!important;}
  #offcanvasDarkNavbar .offcanvas-body{width:100%!important;padding:0!important;overflow:visible!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
  #offcanvasDarkNavbar .mobile-main-menu,#offcanvasDarkNavbar .mobile-member-actions{display:none!important;}
  #offcanvasDarkNavbar .desktop-menu{display:flex!important;flex:1 1 auto!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:center!important;}
}
@media(max-width:1199.98px) and (min-width:992px){
  #nav-original>.container-fluid{width:98%!important;gap:7px!important;}
  #nav-original .site-brand-name{display:none!important;}
  #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link{padding:8px 8px!important;font-size:11px!important;gap:5px!important;}
  #nav-original .openSearchBtn .form-control{min-width:130px!important;width:130px!important;}
}
@media(max-width:991.98px){
  #nav-original{min-height:56px!important;padding:7px 0!important;transition:transform .2s ease!important;}
  #nav-original.mobile-nav-hidden{transform:translate3d(0,-105%,0)!important;}
  #nav-original>.container-fluid{width:100%!important;max-width:none!important;padding:0 12px!important;justify-content:space-between!important;}
  #nav-original .navbar-brand img{height:38px!important;max-width:108px!important;}
  #nav-original .site-brand-name{font-size:12px!important;}
  #nav-original .navbar-toggler{width:39px!important;height:39px!important;display:inline-grid!important;place-items:center!important;margin:0!important;padding:0!important;border:1px solid var(--nav-line)!important;border-radius:11px!important;background:color-mix(in srgb,var(--bg_sub) 86%,transparent)!important;box-shadow:none!important;transition:transform .18s ease,background .18s ease!important;}
  #nav-original .navbar-toggler:hover,#nav-original .navbar-toggler:active{color:var(--main)!important;background:var(--nav-soft)!important;transform:scale(.96);}
  #offcanvasDarkNavbar{width:min(90vw,375px)!important;margin:0!important;padding:0!important;border:0!important;border-left:1px solid var(--nav-line)!important;background:color-mix(in srgb,var(--bg_main) 86%,transparent)!important;box-shadow:-22px 0 55px rgba(0,0,0,.28)!important;-webkit-backdrop-filter:blur(24px) saturate(135%)!important;backdrop-filter:blur(24px) saturate(135%)!important;transition:transform .18s cubic-bezier(.2,.8,.2,1)!important;}
  .offcanvas-backdrop{transition:opacity .18s ease!important;}
  #offcanvasDarkNavbar .offcanvas-header{min-height:66px!important;margin:0!important;padding:11px 15px!important;border-bottom:1px solid var(--nav-line)!important;background:color-mix(in srgb,var(--bg_sub) 58%,transparent)!important;}
  #offcanvasDarkNavbar .offcanvas-header img{height:40px!important;max-width:105px!important;object-fit:contain;}
  #offcanvasDarkNavbar .offcanvas-close-v21{width:34px;height:34px;display:grid;place-items:center;margin:0;padding:0;border:1px solid var(--nav-line);border-radius:10px;color:var(--font_main);background:var(--nav-soft);transition:.16s ease;}
  #offcanvasDarkNavbar .offcanvas-close-v21:hover{color:#fff;background:var(--main);transform:rotate(5deg);}
  #offcanvasDarkNavbar .offcanvas-body{display:block!important;padding:13px!important;overflow-x:hidden!important;overflow-y:auto!important;}
  #offcanvasDarkNavbar .desktop-menu,#nav-original .desktop-menu,#offcanvasDarkNavbar .mobile-list-menu{display:none!important;visibility:hidden!important;height:0!important;margin:0!important;overflow:hidden!important;}
  #offcanvasDarkNavbar .mobile-main-menu{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin:0!important;padding:0!important;}
  #offcanvasDarkNavbar .mobile-main-menu .nav-item{width:100%!important;margin:0!important;}
  #offcanvasDarkNavbar .mobile-main-menu .nav-link{width:100%!important;min-height:47px!important;margin:0!important;padding:10px 12px!important;display:flex!important;align-items:center!important;gap:10px!important;border:1px solid transparent!important;border-radius:13px!important;color:var(--font_main)!important;background:transparent!important;font-size:12px!important;font-weight:700!important;transition:background .18s ease,border-color .18s ease,transform .18s ease!important;}
  #offcanvasDarkNavbar .mobile-main-menu .nav-link:not(.reward-rainbow):hover,#offcanvasDarkNavbar .mobile-main-menu .nav-link:not(.reward-rainbow).active{color:var(--main)!important;background:var(--nav-soft)!important;border-color:color-mix(in srgb,var(--main) 23%,transparent)!important;transform:translateX(2px);}
  #offcanvasDarkNavbar .mobile-main-menu .nav-link i{width:25px!important;height:25px;display:grid;place-items:center;margin:0!important;border-radius:8px;background:color-mix(in srgb,var(--main) 9%,transparent);color:var(--main)!important;}
  #offcanvasDarkNavbar .mobile-member-actions{margin:0 0 12px!important;padding:0 0 12px!important;border:0!important;border-bottom:1px solid var(--nav-line)!important;}
  #offcanvasDarkNavbar .mobile-member-card{padding:12px;border:1px solid color-mix(in srgb,var(--main) 17%,transparent);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--sub) 13%,var(--bg_sub)),color-mix(in srgb,var(--bg_sub) 82%,transparent));box-shadow:0 12px 28px rgba(0,0,0,.10);}
  #offcanvasDarkNavbar .mobile-member-user{display:flex;align-items:center;gap:10px;}
  #offcanvasDarkNavbar .mobile-member-identity{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25;}
  #offcanvasDarkNavbar .mobile-member-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--font_main);font-size:13px;font-weight:700;}
  #offcanvasDarkNavbar .mobile-member-identity span{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--main);font-size:9px;font-weight:700;}
  #offcanvasDarkNavbar .mobile-balance-clean{flex:0 0 auto!important;min-width:0!important;gap:5px!important;padding:6px 7px!important;background:color-mix(in srgb,var(--bg_main) 58%,transparent)!important;border:1px solid color-mix(in srgb,var(--main) 13%,transparent)!important;border-radius:11px!important;}
  #offcanvasDarkNavbar .mobile-balance-clean .nav-balance-info{min-width:0!important;}
  #offcanvasDarkNavbar .mobile-balance-clean strong{font-size:13px!important;}
  #offcanvasDarkNavbar .mobile-balance-clean .nav-currency{font-size:14px!important;}
  #offcanvasDarkNavbar .mobile-balance-clean .nav-amount{font-size:13px!important;}
  #offcanvasDarkNavbar .mobile-level-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;font-size:9px;color:var(--font_sub);}
  #offcanvasDarkNavbar .mobile-level-row div{display:flex;align-items:center;gap:7px;min-width:0;}
  #offcanvasDarkNavbar .mobile-level-row span{padding:3px 6px;border-radius:999px;color:var(--main);background:color-mix(in srgb,var(--main) 10%,transparent);font-weight:700;}
  #offcanvasDarkNavbar .mobile-level-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--font_main);font-weight:700;}
  #offcanvasDarkNavbar .mobile-level-track{height:6px;margin-top:6px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--bg_main) 75%,transparent);}
  #offcanvasDarkNavbar .mobile-level-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sub),var(--main));box-shadow:0 0 12px color-mix(in srgb,var(--main) 45%,transparent);}
  #offcanvasDarkNavbar .mobile-member-buttons{display:flex;gap:7px;margin-top:8px;}
  #offcanvasDarkNavbar .mobile-avatar-only{width:44px!important;height:44px!important;flex:0 0 44px!important;}
  #offcanvasDarkNavbar .mobile-member-actions .wallet-btn{min-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px;border-radius:11px!important;font-weight:700!important;}
  #offcanvasDarkNavbar .mobile-admin-action{color:#61e89a!important;background:rgba(32,178,107,.08)!important;border:1px solid rgba(32,178,107,.16);}
  #offcanvasDarkNavbar .mobile-admin-action:hover{color:#fff!important;background:#20b26b!important;border-color:#20b26b!important;}
  #offcanvasDarkNavbar .mobile-logout-action{color:#ff7479!important;background:rgba(220,53,69,.08)!important;border:1px solid rgba(220,53,69,.16);}
  #offcanvasDarkNavbar .mobile-logout-action:hover{color:#fff!important;background:#dc3545!important;border-color:#dc3545!important;}
  #offcanvasDarkNavbar .mobile-guest-top .wallet-btn{width:100%!important;}
  #offcanvasDarkNavbar .mobile-service-toggle-v21{cursor:pointer;text-align:left;}
  #offcanvasDarkNavbar .mobile-service-group-v21{display:block!important;width:100%!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;}
  #offcanvasDarkNavbar .mobile-service-chevron-v21{width:auto!important;height:auto!important;margin-left:auto!important;background:transparent!important;transition:transform .18s ease!important;}
  #offcanvasDarkNavbar .mobile-service-toggle-v21[aria-expanded="true"] .mobile-service-chevron-v21{transform:rotate(180deg);}
  #offcanvasDarkNavbar .mobile-service-submenu-v21{margin:6px 0 3px 18px!important;padding:6px!important;border-left:1px solid color-mix(in srgb,var(--main) 25%,transparent);}
  #offcanvasDarkNavbar .mobile-service-submenu-v21.show{display:block!important;}
  #offcanvasDarkNavbar .mobile-service-submenu-v21 a{display:flex!important;align-items:center!important;gap:9px!important;width:100%!important;min-height:40px;padding:8px 10px!important;border:1px solid transparent;border-radius:10px;color:var(--font_sub)!important;text-decoration:none;font-size:10px;font-weight:700;transition:.16s ease;}
  #offcanvasDarkNavbar .mobile-service-submenu-v21 a:hover,#offcanvasDarkNavbar .mobile-service-submenu-v21 a.active{color:var(--font_main)!important;border-color:color-mix(in srgb,var(--main) 17%,transparent);background:var(--nav-soft);transform:translateX(2px);}
  #offcanvasDarkNavbar .mobile-service-submenu-v21 a i{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;color:var(--main);background:color-mix(in srgb,var(--main) 9%,transparent);}
  #offcanvasDarkNavbar .mobile-service-submenu-v21 .mobile-service-all-v21{margin-top:4px;color:var(--main)!important;background:color-mix(in srgb,var(--main) 7%,transparent);}
}
@media(prefers-reduced-motion:reduce){#nav-original *,#offcanvasDarkNavbar *{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
/* Authoritative per-style layout. This block follows the shared navbar layer so
   the selected structure cannot be pulled back toward the centre by defaults. */
@media(min-width:992px){
  /* Left menu: brand and menu form one left rail, all utilities end at the
     opposite viewport edge. */
  body[data-menu-head-style="5"] #nav-original>.container-fluid{
    display:flex!important;width:100%!important;max-width:none!important;margin:0!important;padding:0 16px!important;gap:5px!important
  }
  body[data-menu-head-style="5"] #nav-original .navbar-brand{flex:0 0 auto!important;margin:0 4px 0 0!important}
  body[data-menu-head-style="5"] #offcanvasDarkNavbar{
    display:flex!important;flex:1 1 0!important;width:auto!important;min-width:0!important;margin:0!important
  }
  body[data-menu-head-style="5"] #offcanvasDarkNavbar .offcanvas-body{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-width:0!important;gap:4px!important
  }
  body[data-menu-head-style="5"] #offcanvasDarkNavbar .desktop-menu{
    position:static!important;display:flex!important;flex:0 0 auto!important;justify-content:flex-start!important;
    width:auto!important;max-width:none!important;margin:0!important;padding:0!important;transform:none!important
  }
  body[data-menu-head-style="5"] #nav-original :is(.desktop-member-actions,.desktop-guest-actions){
    position:static!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;
    flex-wrap:nowrap!important;width:max-content!important;max-width:none!important;margin:0 0 0 auto!important;padding:0!important;gap:5px!important;
    transform:none!important
  }
  body[data-menu-head-style="5"] #nav-original :is(.desktop-member-actions,.desktop-guest-actions)>.nav-item{flex:0 0 auto!important;margin:0!important}
  body[data-menu-head-style="5"] #nav-original .member-nav-compact{display:flex!important;align-items:center!important;margin-left:0!important}

  /* Gaming menu: compact black command bar matching the supplied reference. */
  body[data-menu-head-style="6"] .site-topbar{
    height:34px!important;min-height:34px!important;border:0!important;border-bottom:1px solid color-mix(in srgb,var(--sub) 28%,#191919)!important;
    background:#050505!important;box-shadow:none!important
  }
  body[data-menu-head-style="6"] .site-topbar-inner{height:34px!important;min-height:34px!important;padding:0!important;background:transparent!important}
  body[data-menu-head-style="6"] .site-topbar-ticker-track{font-size:10px!important;font-weight:650!important}
  body[data-menu-head-style="6"] .site-topbar-ticker-track span:after{color:var(--main)!important;opacity:.85!important}
  body[data-menu-head-style="6"] #nav-original{
    position:sticky!important;top:0!important;width:100%!important;max-width:none!important;min-height:66px!important;margin:0!important;padding:0!important;
    border:0!important;border-bottom:1px solid color-mix(in srgb,var(--sub) 22%,#181818)!important;border-radius:0!important;clip-path:none!important;
    background:linear-gradient(90deg,#030304,color-mix(in srgb,var(--bg_main) 78%,#030304),#030304)!important;
    box-shadow:0 9px 24px rgba(0,0,0,.30)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
  body[data-menu-head-style="6"] #nav-original::before{content:none!important}
  body[data-menu-head-style="6"] #nav-original>.container-fluid{
    position:relative!important;display:flex!important;align-items:center!important;width:min(1320px,calc(100% - 32px))!important;max-width:1320px!important;
    min-height:66px!important;margin:0 auto!important;padding:0 8px!important;gap:12px!important
  }
  body[data-menu-head-style="6"] #nav-original .navbar-brand{
    position:relative!important;z-index:2!important;display:flex!important;flex:0 0 145px!important;justify-content:flex-start!important;
    width:145px!important;margin:0!important;padding:0!important;clip-path:none!important;transform:none!important
  }
  body[data-menu-head-style="6"] #nav-original .navbar-brand img{
    display:block!important;width:auto!important;max-width:105px!important;height:34px!important;max-height:34px!important;object-fit:contain!important
  }
  body[data-menu-head-style="6"] #nav-original .site-brand-name{display:none!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar{
    position:static!important;display:flex!important;flex:1 1 0!important;width:auto!important;min-width:0!important;height:auto!important;
    margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;clip-path:none!important;transform:none!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .offcanvas-body{
    position:static!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;width:100%!important;min-width:0!important;
    margin:0!important;padding:0!important;overflow:visible!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu{
    position:absolute!important;top:50%!important;left:50%!important;z-index:1!important;display:flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 auto!important;width:max-content!important;max-width:min(790px,58vw)!important;margin:0!important;padding:4px 7px!important;gap:1px!important;
    border:1px solid #242429!important;border-radius:999px!important;clip-path:none!important;
    background:#0a0a0d!important;box-shadow:inset 0 1px rgba(255,255,255,.025),0 7px 20px rgba(0,0,0,.22)!important;
    transform:translate(-50%,-50%)!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu>.nav-item{flex:0 0 auto!important;margin:0!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link{
    min-height:37px!important;margin:0!important;padding:7px 12px!important;gap:7px!important;border:1px solid transparent!important;border-radius:999px!important;
    clip-path:none!important;color:color-mix(in srgb,var(--font_main) 72%,#8d8d93)!important;background:transparent!important;box-shadow:none!important;
    font-size:12px!important;font-weight:600!important;transform:none!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link i{
    color:inherit!important;background:transparent!important;filter:none!important;transform:none!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link:is(:hover,.active){
    color:var(--font_main)!important;border-color:#35353b!important;
    background:linear-gradient(120deg,color-mix(in srgb,var(--main) 13%,#202024),#202024)!important;
    box-shadow:inset 0 0 12px color-mix(in srgb,var(--main) 7%,transparent)!important;transform:none!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link:is(:hover,.active) i{color:var(--main)!important}
  body[data-menu-head-style="6"] #nav-original :is(.desktop-member-actions,.desktop-guest-actions){
    position:relative!important;z-index:3!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;
    flex-wrap:nowrap!important;width:max-content!important;max-width:none!important;margin:0 0 0 auto!important;padding:0!important;gap:5px!important;
    clip-path:none!important;transform:none!important
  }
  body[data-menu-head-style="6"] #nav-original :is(.desktop-member-actions,.desktop-guest-actions)>.nav-item{flex:0 0 auto!important;margin:0!important}
  body[data-menu-head-style="6"] #nav-original :is(.nav-search-icon,.nav-checkin-icon,.site-language-toggle){
    width:37px!important;height:37px!important;min-width:37px!important;border:1px solid #25252a!important;border-radius:50%!important;
    color:var(--font_main)!important;background:#0b0b0e!important;box-shadow:none!important;clip-path:none!important;transform:none!important
  }
  body[data-menu-head-style="6"] #nav-original :is(.nav-search-icon,.nav-checkin-icon,.site-language-toggle):hover{
    border-color:color-mix(in srgb,var(--main) 65%,#25252a)!important;color:var(--main)!important;background:#111115!important;
    box-shadow:0 0 12px color-mix(in srgb,var(--main) 15%,transparent)!important
  }
  body[data-menu-head-style="6"] #nav-original .member-nav-compact{display:flex!important;align-items:center!important;margin:0!important;clip-path:none!important}
  body[data-menu-head-style="6"] #nav-original .member-profile-trigger.member-avatar-trigger{
    width:40px!important;height:40px!important;min-width:40px!important;border:1px solid color-mix(in srgb,var(--main) 55%,#2b2b30)!important;
    border-radius:50%!important;background:#0b0b0e!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--main) 7%,transparent)!important;clip-path:none!important
  }
  body[data-menu-head-style="6"] #nav-original .member-profile-trigger.member-avatar-trigger>img{
    top:50%!important;left:50%!important;width:32px!important;height:32px!important;min-width:32px!important;margin:0!important;
    border-radius:50%!important;object-position:center!important;transform:translate(-50%,-50%)!important
  }
  body[data-menu-head-style="6"] #nav-original .desktop-guest-actions .guest-contact-item,
  body[data-menu-head-style="6"] #nav-original .desktop-guest-actions .guest-register-link{display:none!important}
  body[data-menu-head-style="6"] #nav-original .guest-login-link{
    min-height:39px!important;padding:8px 19px!important;border:0!important;border-radius:999px!important;clip-path:none!important;
    color:#111!important;background:#fff!important;box-shadow:none!important;font-size:12px!important;font-weight:700!important;transform:none!important
  }
  body[data-menu-head-style="6"] #nav-original .guest-login-link i{color:#111!important}
  body[data-menu-head-style="6"] #nav-original .guest-login-link:hover{
    color:#fff!important;background:linear-gradient(115deg,var(--main),var(--sub))!important;box-shadow:0 0 17px color-mix(in srgb,var(--main) 24%,transparent)!important
  }
  body[data-menu-head-style="6"] #nav-original .guest-login-link:hover i{color:#fff!important}
}

@media(min-width:992px) and (max-width:1240px){
  body[data-menu-head-style="6"] #nav-original>.container-fluid{width:100%!important;padding-inline:10px!important}
  body[data-menu-head-style="6"] #nav-original .navbar-brand{flex-basis:92px!important;width:92px!important}
  body[data-menu-head-style="6"] #nav-original .navbar-brand img{max-width:82px!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu{max-width:59vw!important;padding-inline:4px!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link{padding-inline:7px!important;gap:4px!important;font-size:10px!important}
  body[data-menu-head-style="6"] #nav-original :is(.nav-search-icon,.nav-checkin-icon,.site-language-toggle){width:34px!important;height:34px!important;min-width:34px!important}
  body[data-menu-head-style="6"] #nav-original .nav-balance-compact{display:none!important}
}

/* V23: strict separated rails. No absolutely-positioned menu or utility rail,
   therefore the search/profile area can never sit beside or over the menu. */
@media(min-width:992px){
  body:is([data-menu-head-style="5"],[data-menu-head-style="6"]) #nav-original .mobile-nav-tools{display:none!important}

  /* Left aligned = menu at the beginning, utility/profile rail at the true end. */
  body[data-menu-head-style="5"] #offcanvasDarkNavbar .offcanvas-body{
    display:grid!important;grid-template-columns:max-content minmax(28px,1fr) max-content!important;
    align-items:center!important;width:100%!important;min-width:0!important;gap:10px!important
  }
  body[data-menu-head-style="5"] #offcanvasDarkNavbar .desktop-menu{
    grid-column:1!important;justify-self:start!important;align-self:center!important;display:flex!important;flex:none!important;
    width:max-content!important;max-width:none!important;margin:0!important
  }
  body[data-menu-head-style="5"] #nav-original :is(.desktop-member-actions,.desktop-guest-actions){
    grid-column:3!important;justify-self:end!important;align-self:center!important;display:flex!important;flex:none!important;
    width:max-content!important;max-width:none!important;margin:0!important
  }

  /* Gaming = three balanced regions like the reference, using site colours. */
  body[data-menu-head-style="6"] .site-topbar{
    border-bottom-color:color-mix(in srgb,var(--main) 35%,var(--bg_border))!important;
    background:linear-gradient(90deg,color-mix(in srgb,var(--main) 13%,var(--bg_main)),var(--bg_main),color-mix(in srgb,var(--sub) 13%,var(--bg_main)))!important;
    color:var(--font_main)!important
  }
  body[data-menu-head-style="6"] #nav-original{
    border-bottom-color:color-mix(in srgb,var(--sub) 32%,var(--bg_border))!important;
    background:linear-gradient(90deg,color-mix(in srgb,var(--main) 7%,var(--bg_main)),var(--bg_main) 50%,color-mix(in srgb,var(--sub) 7%,var(--bg_main)))!important;
    box-shadow:0 9px 24px color-mix(in srgb,#000 24%,transparent),inset 0 -1px color-mix(in srgb,var(--main) 11%,transparent)!important
  }
  body[data-menu-head-style="6"] #nav-original>.container-fluid{
    display:grid!important;grid-template-columns:minmax(145px,1fr) auto minmax(245px,1fr)!important;
    align-items:center!important;width:min(1380px,calc(100% - 28px))!important;max-width:1380px!important;
    min-height:66px!important;margin:0 auto!important;padding:0 8px!important;gap:16px!important
  }
  body[data-menu-head-style="6"] #nav-original .navbar-brand{
    grid-column:1!important;justify-self:start!important;align-self:center!important;display:flex!important;flex:none!important;
    width:auto!important;min-width:0!important;margin:0!important;gap:9px!important
  }
  body[data-menu-head-style="6"] #nav-original .site-brand-name{
    display:inline-flex!important;align-items:center!important;max-width:150px!important;overflow:hidden!important;
    color:var(--font_main)!important;font-size:17px!important;font-weight:700!important;line-height:1!important;
    text-overflow:ellipsis!important;white-space:nowrap!important
  }
  body[data-menu-head-style="6"] #nav-original .site-brand-name .brand-theme{color:var(--main)!important}
  body[data-menu-head-style="6"] :is(#nav-original,#site-topbar) i{
    font-family:"Font Awesome 6 Pro","Font Awesome 6 Free"!important;font-weight:300!important
  }
  body[data-menu-head-style="6"] #nav-original .nav-point-suffix{display:none!important}
  body[data-menu-head-style="6"] #nav-original .site-language-code{display:none!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar,
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .offcanvas-body{display:contents!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu{
    position:static!important;inset:auto!important;grid-column:2!important;justify-self:center!important;align-self:center!important;
    display:flex!important;flex:none!important;width:max-content!important;max-width:min(720px,55vw)!important;
    margin:0!important;padding:4px 7px!important;gap:1px!important;
    border-color:color-mix(in srgb,var(--font_main) 11%,var(--bg_border))!important;
    background:color-mix(in srgb,var(--bg_sub) 83%,var(--bg_main))!important;
    box-shadow:inset 0 1px color-mix(in srgb,var(--font_main) 4%,transparent),0 7px 20px rgba(0,0,0,.15)!important;
    transform:none!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link{
    color:var(--font_sub)!important;background:transparent!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link:is(:hover,.active){
    color:var(--font_main)!important;border-color:color-mix(in srgb,var(--main) 38%,var(--bg_border))!important;
    background:linear-gradient(115deg,color-mix(in srgb,var(--main) 22%,var(--bg_sub)),color-mix(in srgb,var(--sub) 17%,var(--bg_sub)))!important;
    box-shadow:inset 0 0 12px color-mix(in srgb,var(--main) 10%,transparent),0 0 11px color-mix(in srgb,var(--main) 10%,transparent)!important
  }
  body[data-menu-head-style="6"] #nav-original :is(.desktop-member-actions,.desktop-guest-actions){
    position:static!important;inset:auto!important;grid-column:3!important;justify-self:end!important;align-self:center!important;
    display:flex!important;flex:none!important;flex-wrap:nowrap!important;width:max-content!important;max-width:none!important;
    margin:0!important;padding:0!important;gap:5px!important;transform:none!important
  }
  body[data-menu-head-style="6"] #nav-original :is(.nav-search-icon,.nav-checkin-icon,.site-language-toggle){
    border-color:color-mix(in srgb,var(--main) 24%,var(--bg_border))!important;color:var(--main)!important;
    background:color-mix(in srgb,var(--bg_sub) 86%,var(--bg_main))!important
  }
  body[data-menu-head-style="6"] #nav-original :is(.nav-search-icon,.nav-checkin-icon,.site-language-toggle):hover{
    border-color:var(--main)!important;color:var(--font_main)!important;
    background:color-mix(in srgb,var(--main) 17%,var(--bg_sub))!important
  }
  body[data-menu-head-style="6"] #nav-original .member-profile-trigger.member-avatar-trigger{
    border-color:color-mix(in srgb,var(--main) 58%,var(--bg_border))!important;
    background:color-mix(in srgb,var(--main) 9%,var(--bg_sub))!important
  }
  body[data-menu-head-style="6"] #nav-original .guest-login-link{
    color:#fff!important;background:linear-gradient(115deg,var(--main),var(--sub))!important;
    box-shadow:0 7px 18px color-mix(in srgb,var(--main) 22%,transparent)!important
  }
  body[data-menu-head-style="6"] #nav-original .guest-login-link i{color:#fff!important}
}

@media(min-width:992px) and (max-width:1240px){
  body[data-menu-head-style="6"] #nav-original>.container-fluid{
    grid-template-columns:minmax(82px,.7fr) auto minmax(160px,.7fr)!important;gap:7px!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu{max-width:60vw!important;padding-inline:3px!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link{padding-inline:6px!important;font-size:9px!important}
}

/* Gaming uses the same clear, single-column mobile drawer as Basic. */
@media(max-width:991.98px){
  body[data-menu-head-style="6"] #nav-original{
    width:100%!important;max-width:none!important;margin:0!important;padding:7px 0!important;
    border:0!important;border-bottom:1px solid color-mix(in srgb,var(--main) 45%,var(--bg_border))!important;
    border-radius:0!important;clip-path:none!important;
    background:linear-gradient(110deg,color-mix(in srgb,var(--sub) 14%,var(--bg_main)),var(--bg_main),color-mix(in srgb,var(--main) 12%,var(--bg_main)))!important;
    box-shadow:0 10px 30px rgba(0,0,0,.09),inset 0 -2px color-mix(in srgb,var(--sub) 28%,transparent)!important
  }
  body[data-menu-head-style="6"] #nav-original>.container-fluid{
    display:flex!important;width:100%!important;max-width:none!important;min-height:50px!important;
    margin:0!important;padding:0 12px!important;justify-content:space-between!important;gap:8px!important
  }
  body[data-menu-head-style="6"] #nav-original .site-brand-name{display:inline-flex!important;font-size:12px!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar{
    right:0!important;left:auto!important;width:min(90vw,375px)!important;
    border:0!important;border-left:1px solid var(--nav-line)!important;border-radius:0!important;
    background:color-mix(in srgb,var(--bg_main) 86%,transparent)!important;clip-path:none!important;
    transform:translateX(100%)!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar.show{transform:none!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .offcanvas-body{display:block!important;padding:13px!important;overflow-y:auto!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .mobile-main-menu{
    display:grid!important;grid-template-columns:1fr!important;width:100%!important;margin:0!important;padding:0!important;gap:5px!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .mobile-main-menu .nav-item{width:100%!important;margin:0!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .mobile-main-menu .nav-link{
    width:100%!important;min-height:47px!important;margin:0!important;padding:10px 12px!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-direction:row!important;gap:10px!important;
    border:1px solid transparent!important;border-left:3px solid transparent!important;border-radius:9px!important;
    color:var(--font_main)!important;background:color-mix(in srgb,var(--bg_sub) 55%,transparent)!important;
    box-shadow:none!important;clip-path:none!important;transform:none!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .mobile-main-menu .nav-link:is(:hover,.active){
    color:var(--main)!important;border-left-color:var(--main)!important;
    background:color-mix(in srgb,var(--main) 10%,var(--bg_sub))!important;transform:none!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .mobile-main-menu .nav-link i{
    width:25px!important;height:25px!important;display:grid!important;place-items:center!important;margin:0!important;
    border-radius:8px!important;color:var(--main)!important;background:color-mix(in srgb,var(--main) 9%,transparent)!important
  }
  body[data-menu-head-style="6"] #offcanvasDarkNavbar :is(.mobile-member-card,.mobile-avatar-only){clip-path:none!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .mobile-member-card{border-radius:16px!important}
  body[data-menu-head-style="6"] #offcanvasDarkNavbar .mobile-avatar-only{border-radius:50%!important}
}
body[data-menu-head-style="5"] :is(#site-topbar,#nav-original),
body[data-menu-head-style="6"] :is(#site-topbar,#nav-original){visibility:visible!important}
/* ==================================================
   COMPACT MEMBER NAV — BALANCE + AVATAR ONLY
   ================================================== */
.member-nav-compact{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-left:6px;
}
.nav-balance-compact{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:5px 7px 5px 9px;
  border-radius:12px;
  background:color-mix(in srgb,var(--bg_sub) 78%,transparent);
  border:1px solid color-mix(in srgb,var(--main) 20%,transparent);
  color:var(--font_main);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.nav-balance-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  color:var(--main);
  background:color-mix(in srgb,var(--main) 12%,transparent);
}
.nav-balance-icon i{font-size:13px!important}
.nav-balance-info{
  display:flex;
  flex-direction:column;
  min-width:72px;
  line-height:1.05;
}
.nav-balance-info small{
  color:var(--font_sub);
  font-size:8px;
  font-weight:600;
}
.nav-balance-info strong{
  margin-top:3px;
  color:var(--font_main);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.nav-balance-refresh{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:8px;
  color:var(--main);
  background:color-mix(in srgb,var(--main) 10%,transparent);
  transition:background .16s ease,transform .16s ease;
}
.nav-balance-refresh:hover{
  background:color-mix(in srgb,var(--main) 18%,transparent);
  transform:scale(1.04);
}
.nav-balance-refresh.is-loading i{animation:balanceSpin .65s linear infinite}
@keyframes balanceSpin{to{transform:rotate(360deg)}}

.member-profile-trigger.member-avatar-trigger{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  padding:3px!important;
  margin:0!important;
  border-radius:50%!important;
  background:transparent!important;
  border:1px solid color-mix(in srgb,var(--main) 35%,transparent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--main) 8%,transparent);
}
.member-profile-trigger.member-avatar-trigger::after{display:none!important}
.member-profile-trigger.member-avatar-trigger>img{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  border:0!important;
  margin:0!important;
}
.member-profile-trigger.member-avatar-trigger .member-profile-trigger-name,
.member-profile-trigger.member-avatar-trigger .member-profile-trigger-meta{
  display:none!important;
}

.mobile-member-compact{
  display:flex;
  align-items:center;
  gap:9px;
}
.mobile-member-compact .nav-balance-compact{
  flex:1;
  min-width:0;
}
.mobile-avatar-only{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:block;
  padding:3px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--main) 35%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--main) 8%,transparent);
}
.mobile-avatar-only img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
@media(max-width:991.98px){
  .mobile-member-actions{
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:12px;
  }
  .nav-balance-info strong{font-size:13px}
}
[data-member-balance]{transition:color .2s ease,text-shadow .2s ease}.is-balance-updated{color:var(--main)!important;text-shadow:0 0 9px color-mix(in srgb,var(--main) 45%,transparent)}
.bottom-panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: 100%;
  max-width: 550px;
  padding-top: 6px;
  z-index: 1039;
  color: white;
  border-radius: 10px;
  pointer-events: auto;
  transition: transform 0.35s ease, opacity 0.25s ease;
  opacity: 1;
}


.bottom-panel.hide {
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
  pointer-events: none;
}



.wallet-header {
    display: flex;
    align-items: flex-start; /* ให้ทุกอย่างเริ่มจากด้านบน */
    padding: 0 8px;
    font-size: 70%;
    gap: 10px;
}

.wallet-header i {
    font-size: 22px;
    color: #00A3FF;
}

.wallet-header .info {
    flex: 1;
}

.wallet-header .info .title {
    font-size: 12px;
    font-weight: bold;
}

.wallet-header .balance {
    text-align: right;
    min-width: 90px;
}


    .wallet-stats {
      display: flex;
      justify-content: space-between;
      padding: 4px 8px 0;
      font-size: 70%;
    }

    .wallet-stats .item {
      text-align: center;
      flex: 1;
    }

    .wallet-stats i {
      display: block;
      font-size: 12px;
      color: #ccc;
      margin-bottom: 1px;
    }

    .wallet-stats .label {
      color: #aaa;
    }

    .wallet-button {
      display: block;
      width: 90%;
      margin: 8px auto 12px;
      padding: 6px;
      background-color: #00A3FF;
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 11px;
      font-weight: bold;
      text-align: center;
    }

    .wallet-button i {
      margin-right: 5px;
    }

    .footer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 4px 0;
    }

.footer-item {
  width: 100%;
  height: 100%;
  min-height: 48px; /* สำคัญมากสำหรับนิ้ว */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}


.footer-item i {
  font-size: 20px; /* ปรับขนาดไอคอนให้ใหญ่ขึ้น */
  margin-bottom: 4px; /* เพิ่มระยะห่างระหว่างไอคอนและตัวหนังสือ */
}

/* V12: ล็อกขนาดรูปโปรไฟล์ในเมนูกระเป๋าด้านล่าง ไม่ให้รูปจริงขยายตามขนาดไฟล์ */
.bottom-panel .footer-profile-avatar{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  max-width:20px!important;
  max-height:20px!important;
  display:block!important;
  object-fit:cover!important;
  border-radius:50%!important;
  margin:0 0 4px!important;
  flex:0 0 20px!important;
}

.footer-item div {
  font-size: 8px; /* ปรับขนาดตัวหนังสือให้เล็กลง */
}

.footer .footer-link {
  flex: 1;
  display: flex;
  text-decoration: none;
  height: 100%;
}

.hide-menu-btn {
    position: fixed;
    bottom: 120px;
    right: 0px;
    border-radius: 6px; /* มุมโค้งเล็กน้อย */
    border: none;
    background-color: rgba(255,255,255,1 ) !important;
	backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; /* ตัวหนังสือเล็กลง */
    z-index: 1039;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
    transition: 0.2s ease;
    padding: 0 5px; /* เว้นขอบด้านข้างเล็กน้อย */
    gap: 4px; /* ช่องว่างระหว่างไอคอนกับข้อความ */
	
}

.hide-menu-btn:active {
    transform: scale(0.95);
}



#openMenuBtn {
  position: fixed;
  bottom: 0;
  left: 50%;

  width: 100%;
  max-width: 550px;
  height: 22px;

  border-radius: 16px 16px 0 0;

  background-color: #0084ff;
  color: #212121;

  border: none;

  box-shadow: 0 -2px 10px rgba(0,0,0,0.35);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  font-size: 11px;
  font-weight: bold;

  z-index: 1039;
  cursor: pointer;

  transition: all 0.25s ease;

  transform: translateX(-50%) translateY(0);
  opacity: 0;
}
	
.profile-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-avatar-big {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000000;
    flex-shrink: 0;
}

.profile-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#openMenuBtn {
  opacity: 0;
}

#openMenuBtn.hide {
  opacity: 0;
  pointer-events: none;
}

#openMenuBtn.show {
  opacity: 1;
}

/* Auto-hide only: a collapsed wallet/menu leaves no reopen control behind.
   Scrolling upward restores the complete wallet/menu normally. */
#openMenuBtn {
  display: none !important;
}

.bottom-panel .bg-main {
	border-radius: 16px 16px 0 0;
}
.bottom-panel .bg-main:hover {
    animation: none;
    background: #0084ff;
    box-shadow:
        #0084ff 0px 0px 20px 1px;
}

/* ปิด hover สำหรับ bg-main ที่อยู่ใน footer */
.bottom-panel .footer .bg-main:hover,
.bottom-panel .footer .bg-main:hover {
    animation: smooth-color-run 4s ease-in-out infinite;
    background: linear-gradient(
        130deg,
        var(--main) 0%,
        var(--sub) 25%,
        var(--main) 50%,
        var(--sub) 75%,
        var(--main) 100%
    );
    background-size: 300% 100%;
    box-shadow: none;
}

/* V11 MOBILE BOTTOM NAV */
@media(max-width:991.98px){
.bottom-panel .footer-link{border-radius:13px;overflow:hidden;color:var(--font_sub)!important}
.bottom-panel .footer-link:active,.bottom-panel .footer-link:hover{background:color-mix(in srgb,var(--main) 14%,transparent)!important}
.bottom-panel .footer-item{min-height:56px!important;border-radius:13px}.bottom-panel .footer-item i{font-size:19px!important}.bottom-panel .footer-item div{font-size:9px!important;margin-top:2px}
.bottom-panel .footer-profile-avatar{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;max-width:22px!important;max-height:22px!important;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 10px rgba(255,255,255,.18);margin-bottom:2px!important}
.bottom-panel .footer-profile-name{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide-menu-btn{bottom:67px!important;background:color-mix(in srgb,var(--bg_main) 90%,transparent)!important;border:1px solid color-mix(in srgb,var(--main) 15%,transparent)!important}
}
body[data-wallet-style="0"] .bottom-panel,body[data-wallet-style="0"] #openMenuBtn{display:none!important}
body .bottom-panel .hide-menu-btn{position:absolute!important;top:-21px!important;right:9px!important;bottom:auto!important;width:auto!important;min-width:47px;height:24px;padding:0 9px!important;gap:0!important;border:1px solid color-mix(in srgb,var(--main) 32%,var(--bg_border))!important;border-bottom:0!important;border-radius:9px 9px 0 0!important;background:color-mix(in srgb,var(--bg_main) 94%,transparent)!important;box-shadow:0 -5px 13px rgba(0,0,0,.14)!important;backdrop-filter:blur(12px);transform:none!important}
body .bottom-panel .hide-menu-btn span{font-size:9px!important;line-height:1!important;color:var(--font_sub)!important}

/* 2: image navigation — basic layout with real image assets. */
body[data-wallet-style="2"] .bottom-panel{max-width:560px;padding:6px 9px 0}
body[data-wallet-style="2"] .bottom-panel .footer,
body[data-wallet-style="2"] .bottom-panel .footer:hover{gap:5px;min-height:70px;padding:7px!important;border:2px solid var(--main)!important;border-radius:20px 20px 0 0!important;background:var(--bg_main)!important;background-size:100% 100%!important;animation:none!important;box-shadow:0 -10px 30px rgba(0,0,0,.18),inset 0 1px color-mix(in srgb,var(--font_main) 10%,transparent)!important}
body[data-wallet-style="2"] .bottom-panel .footer-link{min-width:0;border-radius:14px!important;overflow:hidden!important}
body[data-wallet-style="2"] .bottom-panel .footer-item{position:relative;min-height:55px!important;padding:5px 3px!important;border:1px solid transparent;border-radius:14px!important;background:transparent;transition:transform .2s ease,background .2s ease,border-color .2s ease}
body[data-wallet-style="2"] .bottom-panel .footer-item i{display:none!important}
body[data-wallet-style="2"] .bottom-panel .footer-item:before{content:"";display:block;width:29px;height:29px;flex:0 0 29px;margin:0 0 3px;border-radius:9px;background-color:rgba(255,255,255,.13);background-repeat:no-repeat;background-position:center;background-size:68%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.17),0 4px 10px rgba(0,0,0,.13)}
body[data-wallet-style="2"] .bottom-panel .footer-link:nth-child(1) .footer-item:before{background-image:url('assets/icon/house.png')}
body[data-wallet-style="2"] .bottom-panel .footer-link:nth-child(2) .footer-item:before{background-image:url('assets/icon/wallet.png')}
body[data-wallet-style="2"] .bottom-panel .footer-link:nth-child(3) .footer-item:before{background-image:url('assets/icon/shopping-cart.png')}
body[data-wallet-style="2"] .bottom-panel .footer-link:nth-child(4) .footer-item:before{background-image:url('assets/icon/wheel.png')}
body[data-wallet-style="2"] .bottom-panel .footer-link:nth-child(5) .footer-item:before{content:none;display:none}
body[data-wallet-style="2"] .bottom-panel .footer-profile-avatar{display:block!important;width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important;max-width:29px!important;max-height:29px!important;flex:0 0 29px!important;margin:0 0 3px!important;border:0!important;border-radius:50%!important;object-fit:cover!important;box-shadow:none!important;transition:transform .2s ease,filter .2s ease}
body:not([data-wallet-style="2"]) .bottom-panel .footer-image-menu-guest-avatar{display:none!important}
body[data-wallet-style="2"] .bottom-panel .footer-link:nth-child(5):is(:hover,.is-active) .footer-profile-avatar{transform:scale(1.12);filter:none}
body[data-wallet-style="2"] .bottom-panel .footer-item div{max-width:72px;margin:0!important;color:var(--font_main)!important;font-size:9px!important;font-weight:700!important;line-height:1.15!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none}
body[data-wallet-style="2"] .bottom-panel .footer-link:is(:hover,.is-active) .footer-item{transform:none!important;border-color:color-mix(in srgb,var(--main) 28%,transparent);background:color-mix(in srgb,var(--main) 8%,transparent);box-shadow:none}
body[data-wallet-style="2"] .bottom-panel .footer-link:is(:hover,.is-active) .footer-item div{color:var(--main)!important}

/* 3: two controls on each side with the member profile floating at center. */
body[data-wallet-style="3"] .bottom-panel{bottom:0;max-width:580px;padding:30px 9px 0}
body[data-wallet-style="3"] .bottom-panel .footer,
body[data-wallet-style="3"] .bottom-panel .footer:hover{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 84px minmax(0,1fr) minmax(0,1fr);align-items:end;gap:5px;min-height:67px;padding:7px!important;border:1px solid color-mix(in srgb,#fff 16%,transparent);border-radius:22px 22px 0 0!important;background:linear-gradient(118deg,color-mix(in srgb,var(--main) 94%,#080b14),color-mix(in srgb,var(--sub) 91%,#080b14))!important;background-size:100% 100%!important;animation:none!important;box-shadow:0 -12px 38px color-mix(in srgb,var(--main) 21%,transparent),inset 0 1px rgba(255,255,255,.16)!important;overflow:visible}
body[data-wallet-style="3"] .bottom-panel .footer-link{min-width:0;height:53px;align-items:center;justify-content:center;border-radius:13px!important;overflow:visible!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(1){order:1}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(2){order:2}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5){order:3}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(3){order:4}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(4){order:5}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)) .footer-item{min-height:53px!important;padding:5px 2px!important;border:1px solid rgba(255,255,255,.13);border-radius:13px!important;background:rgba(255,255,255,.045);transition:transform .2s ease,background .2s ease}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)) .footer-item i{margin-bottom:4px;color:#fff!important;font-size:19px!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)) .footer-item div{max-width:62px;margin:0!important;color:#fff!important;font-size:8px!important;line-height:1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)):is(:hover,.is-active) .footer-item{transform:translateY(-2px);background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.4)}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5){position:relative;width:84px;height:91px;margin-top:-30px;align-self:end}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item{position:relative;width:84px!important;height:91px!important;min-width:84px!important;min-height:91px!important;padding:5px 4px 4px!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item:before{content:"";position:absolute;z-index:0;top:0;left:50%;width:68px;height:68px;transform:translateX(-50%);border:3px solid transparent;border-radius:50%;background:linear-gradient(var(--bg_main),var(--bg_main)) padding-box,linear-gradient(135deg,var(--main),var(--sub),var(--main)) border-box;box-shadow:0 0 0 4px color-mix(in srgb,var(--bg_main) 88%,transparent),0 0 21px color-mix(in srgb,var(--sub) 40%,transparent),0 9px 22px rgba(0,0,0,.3)}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item i{position:relative;z-index:2;display:grid!important;place-items:center;width:56px;height:56px;flex:0 0 56px;margin:6px auto 5px!important;border-radius:50%;background:linear-gradient(145deg,var(--main),var(--sub));color:#fff!important;font-size:21px!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-profile-avatar{position:relative;z-index:2;display:block!important;width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;max-width:56px!important;max-height:56px!important;flex:0 0 56px!important;margin:6px auto 5px!important;border:0!important;border-radius:50%!important;object-fit:cover!important;box-shadow:none!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item div{position:relative;z-index:2;width:82px;max-width:82px;margin:0!important;padding:3px 6px;border:1px solid rgba(255,255,255,.23);border-radius:999px;background:linear-gradient(105deg,var(--main),var(--sub));color:#fff!important;font-size:8px!important;font-weight:700!important;line-height:1.2!important;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 5px 13px rgba(0,0,0,.22)}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5):is(:hover,.is-active) .footer-item:before{filter:brightness(1.12);box-shadow:0 0 0 4px color-mix(in srgb,var(--bg_main) 88%,transparent),0 0 28px color-mix(in srgb,var(--sub) 54%,transparent),0 10px 24px rgba(0,0,0,.33)}
body[data-wallet-style="3"] .bottom-panel .hide-menu-btn{top:9px!important}

/* Clean idle states: decoration appears only on hover or the active page. */
body[data-wallet-style="2"] .bottom-panel .footer-item{border-color:transparent;background:transparent;box-shadow:none}
body[data-wallet-style="2"] .bottom-panel .footer-item:before{border:0!important;background-color:transparent!important;box-shadow:none!important;opacity:.62;filter:grayscale(.5) brightness(.92);transition:opacity .2s ease,filter .2s ease,transform .2s ease}
body[data-wallet-style="2"] .bottom-panel .footer-link:is(:hover,.is-active) .footer-item:before{border:0!important;background-color:transparent!important;box-shadow:none!important;opacity:1;filter:none;transform:translateY(-1px) scale(1.08)}

/* Independent left/right menu wings leave a real gap for the profile control. */
body[data-wallet-style="3"] .bottom-panel .footer,
body[data-wallet-style="3"] .bottom-panel .footer:hover{position:relative;isolation:isolate;border:0!important;background:transparent!important;box-shadow:none!important}
body[data-wallet-style="3"] .bottom-panel .footer:before{content:"";position:absolute;display:block!important;z-index:0;inset:auto 0 0;width:100%;height:67px;border:1px solid color-mix(in srgb,#fff 16%,transparent);border-radius:22px 22px 0 0;background:linear-gradient(115deg,color-mix(in srgb,var(--main) 96%,#080b14),color-mix(in srgb,var(--sub) 95%,#080b14));box-shadow:0 -10px 30px color-mix(in srgb,var(--main) 18%,transparent),inset 0 1px rgba(255,255,255,.15);-webkit-mask:radial-gradient(circle 43px at 50% 0,transparent 42px,#000 43px);mask:radial-gradient(circle 43px at 50% 0,transparent 42px,#000 43px);pointer-events:none}
body[data-wallet-style="3"] .bottom-panel .footer:after{content:none!important;display:none!important}
body[data-wallet-style="3"] .bottom-panel .footer-link{position:relative;z-index:1}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)) .footer-item{border-color:transparent;background:transparent;box-shadow:none}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5){z-index:3}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item{align-items:center!important;justify-content:flex-start!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item i,
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-profile-avatar{position:absolute!important;z-index:2;top:6px!important;left:50%!important;margin:0!important;transform:translateX(-50%)!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item div{position:absolute;z-index:3;top:72px;left:50%;width:80px;max-width:80px;margin:0!important;padding:2px 3px;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;transform:translateX(-50%);text-shadow:0 1px 4px rgba(0,0,0,.55)}

/* Final image-menu behavior: images stay crisp; only the current page grows. */
body[data-wallet-style="2"] .bottom-panel .footer-item,
body[data-wallet-style="2"] .bottom-panel .footer-link:is(:hover,.is-active) .footer-item{transform:none!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important}
body[data-wallet-style="2"] .bottom-panel .footer-item:before,
body[data-wallet-style="2"] .bottom-panel .footer-link:hover .footer-item:before{opacity:1!important;filter:none!important;transform:none!important}
body[data-wallet-style="2"] .bottom-panel .footer-link.is-active .footer-item:before{transform:scale(1.14)!important}
body[data-wallet-style="2"] .bottom-panel .footer:before,
body[data-wallet-style="2"] .bottom-panel .footer:after{content:none!important;display:none!important;animation:none!important}

/* Final centered-profile behavior: one static bar with no sweep or floating motion. */
body[data-wallet-style="3"] .bottom-panel .footer,
body[data-wallet-style="3"] .bottom-panel .footer:hover{border:1px solid color-mix(in srgb,#fff 16%,transparent)!important;background:linear-gradient(115deg,color-mix(in srgb,var(--main) 96%,#080b14),color-mix(in srgb,var(--sub) 95%,#080b14))!important;background-size:100% 100%!important;animation:none!important;transition:none!important;box-shadow:0 -8px 22px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.14)!important}
body[data-wallet-style="3"] .bottom-panel .footer:before,
body[data-wallet-style="3"] .bottom-panel .footer:after{content:none!important;display:none!important}
body[data-wallet-style="3"] .bottom-panel .footer-link,
body[data-wallet-style="3"] .bottom-panel .footer-item,
body[data-wallet-style="3"] .bottom-panel .footer-link:is(:hover,.is-active) .footer-item{transition:none!important;animation:none!important;transform:none!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)):hover{background:transparent!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)):hover .footer-item{border-color:transparent!important;background:transparent!important;box-shadow:none!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)).is-active .footer-item{border-color:rgba(255,255,255,.32)!important;background:rgba(255,255,255,.14)!important;box-shadow:none!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item:before{box-shadow:0 0 0 6px var(--bg_main),0 8px 18px rgba(0,0,0,.28)!important;transition:none!important;animation:none!important;filter:none!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5):is(:hover,.is-active) .footer-item:before{box-shadow:0 0 0 6px var(--bg_main),0 8px 18px rgba(0,0,0,.28)!important;filter:none!important}

/* Compact Thai-safe profile menu with a clean floating profile circle. */
body[data-wallet-style="3"] .bottom-panel .footer,
body[data-wallet-style="3"] .bottom-panel .footer:hover{min-height:58px;padding:5px 7px!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)){height:46px}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)) .footer-item{min-height:46px!important;height:46px!important;padding:3px 2px!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)) .footer-item i{margin-bottom:1px!important;font-size:17px!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:not(:nth-child(5)) .footer-item div{height:auto!important;min-height:14px;padding:2px 1px!important;font-size:8px!important;line-height:1.45!important;overflow:hidden!important;text-overflow:ellipsis!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5),
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item{width:80px!important;height:82px!important;min-width:80px!important;min-height:82px!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5){margin-top:-30px}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item:before{top:0;left:50%;width:66px;height:66px;border:0!important;background:linear-gradient(135deg,var(--main),var(--sub))!important;box-shadow:0 8px 18px rgba(0,0,0,.25)!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item i,
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-profile-avatar{top:6px!important;width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;max-width:54px!important;max-height:54px!important;flex-basis:54px!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item div{top:67px;min-height:13px;line-height:1.35!important}
body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5):is(:hover,.is-active) .footer-item:before{box-shadow:0 8px 18px rgba(0,0,0,.25)!important}

/* 4: animated premium gaming HUD with a generated icon sprite. */
@keyframes walletGamingEnergy{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes walletGamingIcon{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--main) 52%,transparent))}50%{transform:translateY(-2px);filter:drop-shadow(0 0 9px color-mix(in srgb,var(--main) 82%,transparent))}}
@keyframes walletGamingRail{0%{transform:translateX(-125%)}100%{transform:translateX(260%)}}
body[data-wallet-style="4"] .bottom-panel{bottom:9px;max-width:590px;padding:8px 9px 0}
body[data-wallet-style="4"] .bottom-panel .footer,
body[data-wallet-style="4"] .bottom-panel .footer:hover{position:relative;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:5px;min-height:72px;padding:7px!important;border:1px solid transparent!important;border-radius:18px!important;background:linear-gradient(120deg,color-mix(in srgb,var(--bg_main) 92%,var(--main)),color-mix(in srgb,var(--bg_sub) 91%,var(--sub)),color-mix(in srgb,var(--bg_main) 90%,var(--main))) padding-box,linear-gradient(105deg,var(--main),var(--sub),var(--main)) border-box!important;background-size:220% 100%!important;animation:walletGamingEnergy 6s ease-in-out infinite!important;box-shadow:0 0 25px color-mix(in srgb,var(--main) 28%,transparent),0 13px 34px rgba(0,0,0,.34),inset 0 0 22px color-mix(in srgb,var(--sub) 16%,transparent)!important;overflow:hidden}
body[data-wallet-style="4"] .bottom-panel .footer:before{content:""!important;position:absolute;display:block!important;z-index:4;top:0;bottom:0;left:0;width:32%;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--main) 35%,transparent),color-mix(in srgb,#fff 28%,transparent),transparent);animation:walletGamingRail 4.8s linear infinite!important;pointer-events:none}
body[data-wallet-style="4"] .bottom-panel .footer:after{content:""!important;position:absolute;display:block!important;z-index:1;right:12px;bottom:3px;left:12px;height:2px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--main),var(--sub),var(--main),transparent);box-shadow:0 0 10px var(--main);pointer-events:none}
body[data-wallet-style="4"] .bottom-panel .footer-link{position:relative;z-index:2;min-width:0;height:57px;border-radius:11px!important;overflow:visible!important;background:transparent!important}
body[data-wallet-style="4"] .bottom-panel .footer-item{position:relative;width:100%;height:57px!important;min-height:57px!important;padding:4px 2px!important;border:1px solid transparent;border-radius:11px!important;background:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}
body[data-wallet-style="4"] .bottom-panel .footer-item i,
body[data-wallet-style="4"] .bottom-panel .footer-profile-avatar{display:none!important}
body[data-wallet-style="4"] .bottom-panel .footer-item:before{content:none!important;display:none!important;background-image:none!important}
body[data-wallet-style="4"] .bottom-panel .footer-link:nth-child(1) .footer-item:before{background-position-x:0;animation-delay:0s}
body[data-wallet-style="4"] .bottom-panel .footer-link:nth-child(2) .footer-item:before{background-position-x:25%;animation-delay:-.45s}
body[data-wallet-style="4"] .bottom-panel .footer-link:nth-child(3) .footer-item:before{background-position-x:50%;animation-delay:-.9s}
body[data-wallet-style="4"] .bottom-panel .footer-link:nth-child(4) .footer-item:before{background-position-x:75%;animation-delay:-1.35s}
body[data-wallet-style="4"] .bottom-panel .footer-link:nth-child(5) .footer-item:before{background-position-x:100%;animation-delay:-1.8s}
body[data-wallet-style="4"] .bottom-panel .footer-item div{max-width:78px;margin:0!important;padding:1px;color:#fff!important;font-size:8px!important;font-weight:700!important;line-height:1.35!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 7px color-mix(in srgb,var(--main) 55%,transparent)}
body[data-wallet-style="4"] .bottom-panel .footer-link:is(:hover,.is-active) .footer-item{transform:none!important;border-color:color-mix(in srgb,var(--main) 62%,var(--sub));background:linear-gradient(145deg,color-mix(in srgb,var(--main) 20%,transparent),color-mix(in srgb,var(--sub) 18%,transparent));box-shadow:inset 0 0 13px color-mix(in srgb,var(--main) 16%,transparent),0 0 13px color-mix(in srgb,var(--sub) 20%,transparent)}
body[data-wallet-style="4"] .bottom-panel .footer-link.is-active .footer-item:before{transform:translateY(-2px) scale(1.12);filter:drop-shadow(0 0 12px var(--main));animation:none}
body[data-wallet-style="4"] #openMenuBtn{border:1px solid var(--main);border-radius:12px;background:linear-gradient(110deg,var(--main),var(--sub),var(--main))!important;background-size:220% 100%!important;animation:walletGamingEnergy 5s ease-in-out infinite!important;color:#fff!important;box-shadow:0 0 18px color-mix(in srgb,var(--main) 36%,transparent),0 10px 25px rgba(0,0,0,.28)}
body[data-wallet-style="4"] #openMenuBtn:before,
body[data-wallet-style="4"] #openMenuBtn:after{content:none!important;display:none!important}

/* 5: glassmorphism dock with a smooth theme-colour energy rail. */
@property --wallet-glass-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes walletGlassOrbit{to{--wallet-glass-angle:360deg}}
body[data-wallet-style="5"] .bottom-panel{bottom:10px;max-width:565px;padding:6px 9px 0}
body[data-wallet-style="5"] .bottom-panel .footer,
body[data-wallet-style="5"] .bottom-panel .footer:hover{position:relative;isolation:isolate;gap:5px;min-height:68px;padding:7px!important;border:1px solid color-mix(in srgb,#fff 13%,transparent)!important;border-radius:23px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--bg_main) 58%,transparent),color-mix(in srgb,var(--bg_sub) 48%,transparent))!important;background-size:100% 100%!important;animation:none!important;box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 1px color-mix(in srgb,#fff 18%,transparent),inset 0 -1px color-mix(in srgb,var(--sub) 9%,transparent)!important;backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%);overflow:hidden}
body[data-wallet-style="5"] .bottom-panel .footer:before{content:""!important;position:absolute;display:block!important;z-index:3;inset:0;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--wallet-glass-angle),transparent 0 16%,var(--main) 23%,var(--sub) 31%,transparent 39% 64%,var(--main) 73%,var(--sub) 80%,transparent 89%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:walletGlassOrbit 4.8s linear infinite!important;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--main) 62%,transparent));pointer-events:none}
body[data-wallet-style="5"] .bottom-panel .footer:after{content:""!important;position:absolute;display:block!important;z-index:0;inset:1px;border-radius:22px;background:linear-gradient(115deg,color-mix(in srgb,#fff 7%,transparent),transparent 34%,color-mix(in srgb,var(--sub) 7%,transparent));pointer-events:none}
body[data-wallet-style="5"] .bottom-panel .footer-link{position:relative;z-index:1;min-width:0;border-radius:16px!important;overflow:hidden!important;background:transparent!important}
body[data-wallet-style="5"] .bottom-panel .footer-item{min-height:54px!important;padding:5px 2px!important;border:1px solid transparent;border-radius:16px!important;background:transparent;transition:background .22s ease,border-color .22s ease,transform .22s ease}
body[data-wallet-style="5"] .bottom-panel .footer-item i{margin-bottom:3px;color:#fff!important;font-size:19px!important;filter:none!important;transition:color .22s ease,transform .22s ease,filter .22s ease}
body[data-wallet-style="5"] .bottom-panel .footer-profile-avatar{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;max-width:24px!important;max-height:24px!important;flex:0 0 24px!important;margin:0 0 3px!important;border:1px solid color-mix(in srgb,var(--font_main) 48%,transparent)!important;box-shadow:0 0 9px color-mix(in srgb,var(--sub) 25%,transparent)!important}
body[data-wallet-style="5"] .bottom-panel .footer-item div{max-width:72px;margin:0!important;padding:1px;color:var(--font_main)!important;font-size:8px!important;line-height:1.35!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-wallet-style="5"] .bottom-panel .footer-link:is(:hover,.is-active) .footer-item{transform:translateY(-1px)!important;border-color:color-mix(in srgb,var(--main) 38%,transparent);background:linear-gradient(145deg,color-mix(in srgb,#fff 10%,transparent),color-mix(in srgb,var(--main) 12%,transparent));box-shadow:inset 0 1px color-mix(in srgb,#fff 14%,transparent),0 7px 18px rgba(0,0,0,.14)}
body[data-wallet-style="5"] .bottom-panel .footer-link:is(:hover,.is-active) .footer-item i{color:var(--main)!important;transform:scale(1.2);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--main) 62%,transparent))!important}
body[data-wallet-style="5"] .bottom-panel .footer-link.is-active .footer-item div{color:var(--main)!important}
body[data-wallet-style="5"] #openMenuBtn{border:1px solid color-mix(in srgb,var(--font_main) 20%,var(--main));border-radius:999px;background:color-mix(in srgb,var(--bg_main) 70%,transparent)!important;color:var(--font_main)!important;box-shadow:0 12px 30px rgba(0,0,0,.26);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body[data-wallet-style="5"] #openMenuBtn:before,
body[data-wallet-style="5"] #openMenuBtn:after{content:none!important;display:none!important}
body[data-wallet-style="5"] .bottom-panel .footer:before,
body[data-wallet-style="5"] .bottom-panel .footer:hover:before{content:none!important;display:none!important;animation:none!important;filter:none!important}

@media(max-width:575.98px){body .bottom-panel .hide-menu-btn{top:-19px!important;right:7px!important;min-width:43px;height:21px;padding-inline:7px!important}body[data-wallet-style="2"] .bottom-panel{padding-inline:5px}body[data-wallet-style="2"] .bottom-panel .footer{gap:3px;padding:5px!important}body[data-wallet-style="2"] .bottom-panel .footer-item:before{width:27px;height:27px;flex-basis:27px}body[data-wallet-style="3"] .bottom-panel{padding-inline:4px}body[data-wallet-style="3"] .bottom-panel .footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 76px minmax(0,1fr) minmax(0,1fr);gap:3px;padding-inline:4px!important}body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5),body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item{width:76px!important;min-width:76px!important}body[data-wallet-style="3"] .bottom-panel .footer-link:nth-child(5) .footer-item div{width:74px;max-width:74px}body[data-wallet-style="3"] .bottom-panel .hide-menu-btn{top:9px!important}body[data-wallet-style="4"] .bottom-panel{bottom:4px;padding-inline:5px}body[data-wallet-style="4"] .bottom-panel .footer{gap:3px;padding:5px!important}body[data-wallet-style="4"] .bottom-panel .footer-item{gap:0!important;padding:3px 1px!important}body[data-wallet-style="4"] .bottom-panel .footer-item:before{width:32px;height:32px;flex-basis:32px}body[data-wallet-style="4"] .bottom-panel .footer-item div{width:100%;max-width:64px;font-size:7.5px!important}body[data-wallet-style="5"] .bottom-panel{bottom:5px;padding-inline:5px}body[data-wallet-style="5"] .bottom-panel .footer{gap:3px;padding:5px!important}body[data-wallet-style="5"] .bottom-panel .footer-item{min-height:51px!important;padding:4px 1px!important}}

/* ปุ่มซ่อนและสถานะหุบ: แยกบุคลิกตามเมนูแต่ละแบบ (ยกเว้นแบบพื้นฐาน) */
body[data-wallet-style="2"] .bottom-panel .hide-menu-btn{top:-27px!important;right:12px!important;bottom:auto!important;width:32px!important;min-width:32px!important;height:28px!important;padding:0!important;border:1px solid rgba(255,255,255,.24)!important;border-bottom:0!important;border-radius:11px 11px 0 0!important;background:linear-gradient(145deg,var(--main),var(--sub))!important;box-shadow:0 -6px 16px color-mix(in srgb,var(--main) 22%,transparent)!important;backdrop-filter:none!important}
body[data-wallet-style="2"] .bottom-panel .hide-menu-btn span{font-size:0!important;color:#fff!important}body[data-wallet-style="2"] .bottom-panel .hide-menu-btn span:after{content:"⌄"!important;display:block;font-size:18px!important;line-height:14px;color:#fff!important}
body[data-wallet-style="2"] #openMenuBtn{bottom:9px;width:146px;max-width:calc(100vw - 24px);height:42px;border:1px solid rgba(255,255,255,.24);border-radius:16px 16px 7px 7px;background:linear-gradient(115deg,var(--main),var(--sub))!important;color:#fff!important;box-shadow:0 10px 28px color-mix(in srgb,var(--main) 28%,transparent),inset 0 1px rgba(255,255,255,.2)}
body[data-wallet-style="2"] #openMenuBtn i{display:grid;width:26px;height:26px;place-items:center;border-radius:8px;background:rgba(255,255,255,.13);color:#fff!important}

body[data-wallet-style="3"] .bottom-panel .hide-menu-btn{top:12px!important;right:13px!important;bottom:auto!important;width:27px!important;min-width:27px!important;height:27px!important;padding:0!important;border:1px solid rgba(255,255,255,.34)!important;border-radius:50%!important;background:rgba(255,255,255,.12)!important;box-shadow:none!important;backdrop-filter:none!important}
body[data-wallet-style="3"] .bottom-panel .hide-menu-btn span{font-size:0!important}body[data-wallet-style="3"] .bottom-panel .hide-menu-btn span:after{content:"↓"!important;display:block;font-size:13px!important;color:#fff!important}
body[data-wallet-style="3"] #openMenuBtn{bottom:10px;width:60px;min-width:60px;max-width:60px;height:60px;padding:0;border:3px solid transparent;border-radius:50%;background:linear-gradient(145deg,var(--main),var(--sub)) padding-box,conic-gradient(from 45deg,var(--sub),var(--main),var(--sub)) border-box!important;color:#fff!important;font-size:0!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--bg_main) 80%,transparent),0 10px 27px rgba(0,0,0,.3),0 0 20px color-mix(in srgb,var(--sub) 35%,transparent)}
body[data-wallet-style="3"] #openMenuBtn i{margin:0;color:#fff!important;font-size:22px!important}

body[data-wallet-style="4"] .bottom-panel .hide-menu-btn{top:-25px!important;right:10px!important;bottom:auto!important;width:72px!important;min-width:72px!important;height:27px!important;padding:0 10px!important;border:1px solid var(--main)!important;border-bottom:0!important;border-radius:0!important;background:linear-gradient(110deg,color-mix(in srgb,var(--main) 24%,var(--bg_main)),color-mix(in srgb,var(--sub) 18%,var(--bg_main)))!important;clip-path:polygon(9px 0,100% 0,100% 100%,0 100%,0 9px);box-shadow:0 -5px 16px color-mix(in srgb,var(--main) 30%,transparent)!important;backdrop-filter:none!important}
body[data-wallet-style="4"] .bottom-panel .hide-menu-btn span{font-size:0!important}body[data-wallet-style="4"] .bottom-panel .hide-menu-btn span:after{content:"HIDE  ▾"!important;display:block;color:#fff!important;font-size:9px!important;font-weight:700;letter-spacing:.12em;text-shadow:0 0 7px var(--main)}
body[data-wallet-style="4"] #openMenuBtn{bottom:9px;width:174px;max-width:calc(100vw - 24px);height:42px;border:1px solid var(--main);border-radius:0;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);background:linear-gradient(110deg,var(--main),var(--sub),var(--main))!important;background-size:220% 100%!important;color:#fff!important;animation:walletGamingEnergy 5s ease-in-out infinite!important;box-shadow:0 0 18px color-mix(in srgb,var(--main) 40%,transparent),0 10px 25px rgba(0,0,0,.28)}
body[data-wallet-style="4"] #openMenuBtn i{color:#fff!important;filter:drop-shadow(0 0 6px #fff)}

body[data-wallet-style="5"] .bottom-panel .hide-menu-btn{top:-30px!important;right:14px!important;bottom:auto!important;width:31px!important;min-width:31px!important;height:31px!important;padding:0!important;border:1px solid color-mix(in srgb,var(--font_main) 24%,var(--main))!important;border-radius:50%!important;background:color-mix(in srgb,var(--bg_main) 68%,transparent)!important;box-shadow:0 -6px 18px rgba(0,0,0,.2),inset 0 1px color-mix(in srgb,#fff 18%,transparent)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
body[data-wallet-style="5"] .bottom-panel .hide-menu-btn span{font-size:0!important}body[data-wallet-style="5"] .bottom-panel .hide-menu-btn span:after{content:"−"!important;display:block;color:var(--font_main)!important;font-size:17px!important;line-height:1}
body[data-wallet-style="5"] #openMenuBtn{bottom:10px;width:152px;max-width:calc(100vw - 24px);height:42px;border:1px solid color-mix(in srgb,var(--font_main) 22%,var(--main));border-radius:999px;background:linear-gradient(115deg,color-mix(in srgb,var(--bg_main) 70%,transparent),color-mix(in srgb,var(--sub) 15%,color-mix(in srgb,var(--bg_main) 66%,transparent)))!important;color:var(--font_main)!important;box-shadow:0 12px 30px rgba(0,0,0,.26),inset 0 1px color-mix(in srgb,#fff 16%,transparent);backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px)}
body[data-wallet-style="5"] #openMenuBtn i{color:var(--main)!important;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--main) 45%,transparent))}

@media(max-width:575.98px){body[data-wallet-style="2"] .bottom-panel .hide-menu-btn{top:-25px!important;right:8px!important;height:26px!important}body[data-wallet-style="3"] .bottom-panel .hide-menu-btn{top:9px!important;right:9px!important}body[data-wallet-style="4"] .bottom-panel .hide-menu-btn{top:-23px!important;right:7px!important;height:25px!important}body[data-wallet-style="5"] .bottom-panel .hide-menu-btn{top:-27px!important;right:9px!important;width:28px!important;min-width:28px!important;height:28px!important}}

/* Configurable images for wallet style 2. */
.bottom-panel .footer-custom-nav-image{display:none}
body[data-wallet-style="2"] .bottom-panel .footer-link:nth-child(-n+4) .footer-item:before{content:none!important;display:none!important}
body[data-wallet-style="2"] .bottom-panel .footer-custom-nav-image{display:block!important;width:29px;height:29px;min-width:29px;min-height:29px;max-width:29px;max-height:29px;flex:0 0 29px;margin:0 0 3px;object-fit:contain;filter:none!important;box-shadow:none!important;transition:transform .2s ease}
body[data-wallet-style="2"] .bottom-panel .footer-link:nth-child(-n+4):is(:hover,.is-active) .footer-custom-nav-image{transform:scale(1.12);filter:none!important}
@media(max-width:575.98px){body[data-wallet-style="2"] .bottom-panel .footer-custom-nav-image{width:27px;height:27px;min-width:27px;min-height:27px;max-width:27px;max-height:27px;flex-basis:27px}}
/* สถานะหุบใช้โครงเดียวกับเมนูพื้นฐานทุกสไตล์ เปลี่ยนเฉพาะงานสี */
body[data-wallet-style="2"] #openMenuBtn,
body[data-wallet-style="3"] #openMenuBtn,
body[data-wallet-style="4"] #openMenuBtn,
body[data-wallet-style="5"] #openMenuBtn{
  position:fixed!important;
  right:auto!important;
  bottom:0!important;
  left:50%!important;
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  max-width:550px!important;
  height:22px!important;
  min-height:22px!important;
  padding:0 12px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  clip-path:none!important;
  border-radius:16px 16px 0 0!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1!important;
  text-shadow:none!important;
  transform:translateX(-50%) translateY(0)!important;
  animation:none!important;
  filter:none!important;
  transition:opacity .22s ease,background-color .22s ease,border-color .22s ease!important;
}
body[data-wallet-style="2"] #openMenuBtn i,
body[data-wallet-style="3"] #openMenuBtn i,
body[data-wallet-style="4"] #openMenuBtn i,
body[data-wallet-style="5"] #openMenuBtn i{
  display:inline-block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  font-size:12px!important;
  line-height:1!important;
  filter:none!important;
}
body[data-wallet-style="2"] #openMenuBtn{border:1px solid var(--main)!important;border-bottom:0!important;background:var(--bg_main)!important;color:var(--font_main)!important;box-shadow:0 -5px 18px rgba(0,0,0,.2)!important;backdrop-filter:none!important}
body[data-wallet-style="2"] #openMenuBtn i{color:var(--main)!important}
body[data-wallet-style="3"] #openMenuBtn{border:1px solid color-mix(in srgb,#fff 18%,transparent)!important;border-bottom:0!important;background:linear-gradient(110deg,var(--main),var(--sub))!important;color:#fff!important;box-shadow:0 -5px 18px color-mix(in srgb,var(--main) 22%,transparent)!important;backdrop-filter:none!important}
body[data-wallet-style="3"] #openMenuBtn i{color:#fff!important}
body[data-wallet-style="4"] #openMenuBtn{border:1px solid color-mix(in srgb,var(--main) 62%,var(--sub))!important;border-bottom:0!important;background:linear-gradient(105deg,color-mix(in srgb,var(--main) 90%,var(--bg_main)),color-mix(in srgb,var(--sub) 86%,var(--bg_main)))!important;color:#fff!important;box-shadow:0 -5px 18px color-mix(in srgb,var(--sub) 20%,transparent)!important;backdrop-filter:none!important}
body[data-wallet-style="4"] #openMenuBtn i{color:#fff!important}
body[data-wallet-style="5"] #openMenuBtn{border:1px solid color-mix(in srgb,#fff 14%,var(--bg_border))!important;border-bottom:0!important;background:color-mix(in srgb,var(--bg_main) 72%,transparent)!important;color:var(--font_main)!important;box-shadow:0 -6px 20px rgba(0,0,0,.25),inset 0 1px color-mix(in srgb,#fff 13%,transparent)!important;backdrop-filter:blur(18px) saturate(150%)!important;-webkit-backdrop-filter:blur(18px) saturate(150%)!important}
body[data-wallet-style="5"] #openMenuBtn i{color:var(--main)!important}
@media(max-width:575.98px){body[data-wallet-style="2"] #openMenuBtn,body[data-wallet-style="3"] #openMenuBtn,body[data-wallet-style="4"] #openMenuBtn,body[data-wallet-style="5"] #openMenuBtn{max-width:100%!important;height:22px!important;min-height:22px!important;border-radius:14px 14px 0 0!important;font-size:10px!important}}
/* เมนูโปรไฟล์ตรงกลางใช้สีหลักและสีรองของธีมทั้งตอนเปิดและตอนหุบ */
body[data-wallet-style="3"] .bottom-panel .footer,
body[data-wallet-style="3"] .bottom-panel .footer:hover{
  background:linear-gradient(115deg,var(--main),var(--sub))!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-wallet-style="3"] #openMenuBtn{
  background:linear-gradient(110deg,var(--main),var(--sub))!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* All wallet themes now disappear completely while collapsed. */
html body #openMenuBtn#openMenuBtn{display:none!important;visibility:hidden!important;pointer-events:none!important}