:root{--neutral900:#111111;--text:#e6e8ea;--muted:#a6acb2;--brand:#00c853;--brand-2:#14805e}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--neutral900);color:var(--text);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif;overflow-x:hidden;overflow-y:auto;padding-top:56px}
.overlay{position:fixed;top:56px;right:0;bottom:0;left:0;background:#0000;display:none;z-index:100}
.overlay.show{display:block}
.overlay,.sidebar{touch-action:auto}
a,button,.item,.bottom-bar-btn{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.header-bar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;gap:16px;padding:8px 16px;height:56px;background:#111316;border-bottom:1px solid #1a1e26}
.icon-btn{width:36px;height:36px;border:0;border-radius:8px;background:#1a1f26;display:grid;place-items:center;color:var(--text);cursor:pointer}
.icon-btn img{width:20px;height:20px}
.i-burger{width:18px;height:2px;background:var(--text);position:relative}
.i-burger::before,.i-burger::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--text)}
.i-burger::before{top:-6px}
.i-burger::after{top:6px}
.brand img{height:24px}
.brand img{height:36px}
.top-nav{display:flex;gap:16px;margin-left:10px}
.nav-link{padding:8px 10px;border-radius:8px;color:#bfc5cb;font-weight:600;display:flex;align-items:center;gap:8px}
.nav-link .nav-ico{width:18px;height:18px;display:inline-block}
.nav-link:hover{background:#1a1f26;color:#e6e8ea}
.actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.actions .flag{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px #1f2530 inset}
.btn{display:inline-block;padding:8px 12px;border-radius:6px;font-weight:700}
.btn-ghost{background:transparent;border:1px solid #323843;color:#d0d4d8;border-radius:6px}
.btn-green{background:var(--brand);color:#08130b;border:1px solid #0ea84e;border-radius:6px}
.btn-green:hover{background:var(--brand-2)}
.only-header{min-height:auto}
@media (max-width:768px){
  .icon-btn{display:none}
  .header-bar{padding:8px 10px}
  .brand img{height:30px}
  .top-nav{display:none}
  .nav-link{padding:6px 8px}
  .nav-link .nav-ico{width:16px;height:16px}
  .actions{gap:8px}
  .actions .btn-ghost{display:inline-block}
  .actions .flag{width:14px;height:14px}
}
body.no-scroll{overflow-y:auto}
/* sidebar */
.sidebar{position:fixed;top:56px;bottom:0;left:0;width:280px;background:#111316;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;z-index:210;transition:transform .28s cubic-bezier(.2,.7,.4,1),width .28s cubic-bezier(.2,.7,.4,1);will-change:transform,width}
.sidebar.collapsed{transform:translateX(-100%);background-color:#111316}
.sidebar-top .logo img{height:24px}
.live-chat{margin-top:10px;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;background:#1a1f26;border-radius:8px;font-weight:600}
.sidebar-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.sidebar-scroll::-webkit-scrollbar{display:none}
.sponsor-banner{margin-top:12px;background:#15181e;border-radius:10px;padding:8px}
.sponsor-banner img{height:44px;margin:0 auto}
.menu{list-style:none;margin:0;padding:8px}
.menu .collapsible{padding:6px 8px;border-radius:10px;color:#ffffff}
.menu .item{display:flex;align-items:center;gap:12px;min-height:44px;color:#ffffff}
.menu .item{position:relative;overflow:hidden}
.menu li+li{border-top:1px solid rgba(255,255,255,.06)}
.menu .item img{width:24px;height:24px}
.menu .item .ext{margin-left:auto;width:14px;height:14px;opacity:.85}
.menu .item.banner{padding:0;gap:0;min-height:auto}
.menu .item.banner img{width:100%;height:auto;aspect-ratio:1029/270;object-fit:cover;border-radius:10px;display:block}
.menu .collapsible:hover{background:#1a1f26}
.menu .item.active{background:transparent}
.dropdown .item .chev{margin-left:auto;width:14px;height:14px;transform:rotate(180deg);opacity:.7;transition:transform .2s ease}
.dropdown.open .item .chev{transform:rotate(0deg)}
.submenu{display:none;padding:6px 0 6px 36px}
.dropdown.open .submenu{display:block}
.submenu a{display:flex;align-items:center;gap:8px;color:#ffffff;padding:8px 0}
.submenu{max-height:0;overflow:hidden;padding:0 0 0 36px;transition:max-height .28s cubic-bezier(.2,.7,.4,1),padding .28s cubic-bezier(.2,.7,.4,1);background:#111316;border-top:1px solid #1a1e26;will-change:max-height;overflow-anchor:none}
.dropdown.open .submenu{max-height:300px;padding:6px 0 6px 36px}
.submenu li+li{border-top:1px solid rgba(255,255,255,.06)}
.submenu a:hover{color:#e6e8ea}
.submenu img{width:16px;height:16px;border-radius:4px}
.sidebar-bottom{margin-top:auto;padding:12px;border-top:1px solid #1a1e26;display:grid;gap:10px}
.promo{background:#111316;border-radius:0}
.promo-head{display:flex;align-items:center;gap:10px;padding:10px}
.promo-head .ico{width:20px;height:20px;background:#d0d4d8;display:inline-block;-webkit-mask-image:url("https://img.b112j.com/bj/h5/assets/v3/images/icon-set/utility-type/icon-gift.svg?v=1770792598866&source=drccdnsrc");mask-image:url("https://img.b112j.com/bj/h5/assets/v3/images/icon-set/utility-type/icon-gift.svg?v=1770792598866&source=drccdnsrc");-webkit-mask-size:cover;mask-size:cover}
.sidebar-bottom{border-top:1px solid rgba(255,255,255,.10)}
.promo-head img{width:20px;height:20px}
.promo-head .view-all{margin-left:auto;color:#8ec9a0;font-weight:700}
.promo-head .chev{margin-left:8px;width:14px;height:14px;transform:rotate(180deg);opacity:.7}
.promo.open .promo-head .chev{transform:rotate(0deg)}
.promo-body{max-height:0;overflow:hidden;padding:0 10px;border-top:1px solid #1a1e26;transition:max-height .28s cubic-bezier(.2,.7,.4,1),padding .28s cubic-bezier(.2,.7,.4,1);will-change:max-height;overflow-anchor:none}
.promo.open .promo-body{max-height:560px;padding:8px 10px}
.promo-carousel{position:relative;overflow:hidden;border-radius:10px;background:#111316}
.promo-track{display:flex;transition:transform .28s cubic-bezier(.2,.7,.4,1)}
.promo-unit{min-width:100%;aspect-ratio:1125/540;background-size:cover;background-position:center;display:block}
.promo-controls{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:8px}
.pc-btn{width:28px;height:28px;border:0;border-radius:6px;background:#1a1f26;display:grid;place-items:center}
.pc-btn img{width:14px;height:14px}
.pc-btn.prev img{transform:rotate(-90deg)}
.pc-btn.next img{transform:rotate(90deg)}
.pc-dots{display:flex;gap:6px}
.pc-dots .dot{width:6px;height:6px;border-radius:50%;background:#44505f}
.pc-dots .dot.active{background:#8ec9a0}
.promo-head .chev{transition:transform .2s ease}
@keyframes shine{to{left:120%}}
.menu .item.shine::after{content:"";position:absolute;top:0;bottom:0;left:-120%;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);animation:shine .5s ease}
.page-banner{padding:8px 0}
.pb-carousel{position:relative;overflow:hidden;border-radius:0;background:#111316;max-width:1920px;margin:0 auto;width:100%}
.pb-dots{display:none}
.pb-track{display:flex;transition:transform .28s cubic-bezier(.2,.7,.4,1)}
.pb-unit{min-width:100%;aspect-ratio:64/7;height:max(120px,calc(100vw*7/64));display:block;background:#0f1217}
.pb-unit img{width:100%;height:100%;object-fit:contain;display:block;transition:none}
.mb-unit img{transition:transform .45s cubic-bezier(.2,.7,.4,1)}
.mb-unit.enter img{transform:scale(1.06)}
.mb-unit.leave img{transform:scale(0.94)}
.pb-controls{position:absolute;inset:0;pointer-events:none}
.pb-btn{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:8px;background:rgba(26,31,38,.5);display:grid;place-items:center;pointer-events:auto;z-index:2}
.pb-btn.prev{left:16%}
.pb-btn.next{right:16%}
.pb-btn img{width:16px;height:16px}
.pb-btn.prev img{transform:rotate(-90deg)}
.pb-btn.next img{transform:rotate(90deg)}
@media (min-width:769px){
  .pb-carousel::before,.pb-carousel::after{content:"";position:absolute;top:0;bottom:0;width:16%;pointer-events:none;z-index:1}
  .pb-carousel::before{left:0;background:linear-gradient(to right,rgba(0,0,0,.65),rgba(0,0,0,0))}
  .pb-carousel::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.65),rgba(0,0,0,0))}
}
body.menu-closed .page-banner{padding:6px 0;transition:padding .28s cubic-bezier(.2,.7,.4,1)}
.mb-carousel{position:relative;overflow:hidden;border-radius:0;background:#111316;width:100%}
.mb-track{display:flex;transition:transform .28s cubic-bezier(.2,.7,.4,1);will-change:transform;touch-action:pan-y}
.mb-unit{min-width:100%;aspect-ratio:1125/540;height:clamp(140px,calc(100vw*540/1125),320px);display:block;background:#0f1217;border-radius:10px;overflow:hidden}
.mb-unit img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .45s cubic-bezier(.2,.7,.4,1);transform:scale(1)}
.mb-controls{position:absolute;inset:0;pointer-events:none}
.mb-controls{display:none}
.mb-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.mb-dots .dot{width:8px;height:6px;border-radius:6px;background:rgba(255,255,255,.25);transition:background .2s ease,transform .2s ease}
.mb-dots .dot.active{background:#8ec9a0;transform:scale(1.1)}
 .notice-bar{background:transparent;border-top:0;display:flex;align-items:center;gap:12px;padding:10px 16px;max-width:1200px;margin:0 auto}
 .notice-bar .nb-icon{width:20px;height:20px;background:var(--brand-2);display:inline-block;-webkit-mask-image:url("https://img.b112j.com/bj/h5/assets/v3/images/icon-set/utility-type/icon-speaker.svg?v=1770792598866");mask-image:url("https://img.b112j.com/bj/h5/assets/v3/images/icon-set/utility-type/icon-speaker.svg?v=1770792598866");-webkit-mask-size:cover;mask-size:cover;flex-shrink:0;animation:nb-icon-enter .45s ease-out both}
 @keyframes nb-icon-enter{from{transform:translateX(-14px);opacity:.0}to{transform:translateX(0);opacity:1}}
 .notice-bar .nb-content{flex:1;overflow:hidden}
 .notice-bar .nb-track{display:flex;gap:32px;white-space:nowrap;animation:nb-marquee var(--marquee-duration,26s) linear infinite}
 .notice-bar .nb-text{color:#e6e8ea;opacity:.95}
 @keyframes nb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (min-width:769px){.mb-carousel{display:none}}
@media (max-width:768px){.mb-carousel{display:block}}
@media (max-width:768px){
  .sidebar{left:0;right:auto}
  .sidebar{bottom:56px}
  .promo-grid{grid-template-columns:1fr}
  .sidebar-scroll{-webkit-overflow-scrolling:touch}
  .pb-carousel{display:none}
  .notice-bar{
    width:calc(100vw - 24px);
    padding:8px 12px;
    gap:10px;
    margin:0 auto;
  }
}
/* desktop notice visible just below banner */
@media (min-width:769px){
  .sidebar.mini{width:64px}
  .sidebar.expanded{width:280px}
  .sidebar.mini .menu .item{justify-content:center;gap:0}
  .sidebar.mini .menu .item span{display:none}
  .sidebar.mini .menu .item .ext{display:none}
  .sidebar.mini .menu .item.banner{display:none}
  .sidebar.mini .sidebar-bottom{padding:8px}
  .sidebar.mini .promo-head{justify-content:center}
  .sidebar.mini .promo-head .title{display:none}
  .sidebar.mini .promo-head .view-all,.sidebar.mini .promo-head .chev{display:none}
  .sidebar.mini .promo-body{display:none}
  .sidebar.mini .live-chat{width:36px;justify-content:center;padding:8px;gap:0}
  .sidebar.mini .live-chat .lc-text{display:none}
  .sidebar.mini .live-chat .live-icon{width:18px;height:18px}
  .sidebar.mini .dropdown .item .chev{display:none}
  .sidebar.mini .dropdown .submenu{display:none;max-height:0;padding:0}
}
.lang-modal{position:fixed;inset:0;background:#0000;display:none;z-index:60}
.lang-modal{position:fixed;inset:0;background:#0000;display:none;z-index:60}
.lang-modal.show{display:block}
.lang-panel{position:absolute;right:16px;top:64px;height:auto;max-height:70vh;width:420px;background:#0f1217;border:1px solid #1a1e26;border-radius:12px;padding:16px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.lang-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.lang-title{font-weight:700;font-size:16px}
.lang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.lang-card{background:#171a20;border:1px solid #242a33;border-radius:12px;padding:12px}
.lc-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.lc-top img{width:22px;height:22px;border-radius:50%}
.lc-top .cur{font-weight:700}
.lc-body{display:grid;gap:8px}
.lang-btn{padding:8px 10px;border-radius:6px;border:1px solid #2b313b;background:#1a1f26;color:#d0d4d8;text-align:left;cursor:pointer}
.lang-btn.active{background:#14805e;color:#08130b;border-color:#0ea84e}
#main-content-wrapper.page-slide-out-left{
  animation:page-slide-out-left .32s cubic-bezier(.2,.7,.4,1) forwards;
}
#main-content-wrapper.page-slide-in-right{
  animation:page-slide-in-right .32s cubic-bezier(.2,.7,.4,1) forwards;
}
#main-content-wrapper.page-slide-out-right{
  animation:page-slide-out-right .32s cubic-bezier(.2,.7,.4,1) forwards;
}
#main-content-wrapper.page-slide-in-left{
  animation:page-slide-in-left .32s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes page-slide-out-left{
  to{transform:translateX(-30%);opacity:0}
}
@keyframes page-slide-in-right{
  from{transform:translateX(30%);opacity:0}
  to{transform:translateX(0);opacity:1}
}
@keyframes page-slide-out-right{
  to{transform:translateX(30%);opacity:0}
}
@keyframes page-slide-in-left{
  from{transform:translateX(-30%);opacity:0}
  to{transform:translateX(0);opacity:1}
}
@media (max-width:768px){
  .lang-panel{left:50%;right:auto;width:92vw;transform:translate(-50%,-50%)}
  .lang-grid{grid-template-columns:1fr}
}
.bottom-bar{position:fixed;left:0;right:0;bottom:0;background:#111316;border-top:1px solid #1a1e26;display:none;z-index:70}
.bottom-bar__content{display:flex;justify-content:space-around;align-items:center;padding:10px 12px}
.bottom-bar-btn{display:flex;flex-direction:column;align-items:center;gap:6px;color:#d0d4d8}
.bottom-bar-btn__img{width:22px;height:22px}
.bottom-bar-btn__text{font-size:12px;font-weight:600}
.bottom-bar-btn__text{font-size:12px;font-weight:600}
@media (max-width:768px){
  .bottom-bar{display:block;z-index:220}
  body{padding-bottom:56px}
}

/* Fix for Sidebar visibility via JS */
.sidebar.active {
    transform: translateX(0) !important;
}
/* Ensure header bar is above everything else if needed, but below sidebar */
.header-bar {
    z-index: 200;
}
.sidebar {
    z-index: 210;
}