: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:rgba(0,0,0,0.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.3s ease;z-index:100}
.overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.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:100002;display:flex;align-items:center;gap:16px;padding:8px 16px;height:56px;background:#141515;border-bottom:1px solid #303232}
.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 #222424;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}
  #sidebarToggle{display:grid}
  .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}
/* Mobile/Tablet Sidebar (Default or Override) */
.sidebar{position:fixed;top:56px;bottom:0;left:0;width:280px;background:#141515;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;z-index:100001;transition:transform .4s cubic-bezier(0.25, 0.8, 0.25, 1), width .4s cubic-bezier(0.25, 0.8, 0.25, 1);will-change:transform,width}
/* Ensure sidebar is hidden by default on mobile (collapsed) */
@media (max-width: 1024px) {
    .sidebar.collapsed{transform:translateX(-100%);background-color:#141515}
}
@media (min-width: 1025px) {
    .sidebar {
        width: 280px; /* Default expanded width */
        transform: translateX(0); /* Always visible on desktop unless manually hidden, but we use mini/expanded */
    }
    
    .sidebar.mini {
        width: 80px;
        overflow: hidden;
    }
    
    .sidebar.mini .sidebar-scroll {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .sidebar.mini .menu .item {
        justify-content: center;
        padding: 0;
    }
    
    .sidebar.mini .menu .item span,
    .sidebar.mini .menu .item .ext,
    .sidebar.mini .menu .item .chev {
        display: none;
    }
    
    .sidebar.mini .promo,
    .sidebar.mini .sidebar-footer,
    .sidebar.mini .menu.extra {
        display: none; /* Hide extra content in mini mode */
    }
    
    /* Show only icons in mini mode */
    .sidebar.mini .menu .item img {
        margin: 0;
        width: 24px;
        height: 24px;
    }
    
    .sidebar.mini .menu .item {
        height: 56px;
    }
    
    /* Ensure body content pushes (optional, if layout requires it) */
    body.sidebar-mini {
        padding-left: 80px; /* Adjust based on sidebar width */
    }
    body.sidebar-expanded {
        padding-left: 280px;
    }
}
/* Use a consistent overlay style */
.sidebar-overlay {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100000; /* Below sidebar (100001) but above everything else (including bottom-bar at 99999) */
}
.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.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:#141515;border-top:1px solid #ffffff;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 #ffffff;display:grid;gap:10px}
.promo{background:#141515;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)}

/* sidebar footer toolkit */
.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: #141515;
}

.side-menu-toolkit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #1a1f26;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.side-menu-toolkit-btn:active {
    background: #242a33;
}

.side-menu-toolkit-btn__img {
    width: 20px;
    height: 20px;
}

.side-menu-toolkit-btn__text {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.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 #ffffff;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:#141515}
.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:#141515;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:#141515;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 #ffffff;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}
@font-face{font-family:"Noto Sans Digits Polyfills";src:url("https://img.b112j.com/bj/h5/assets/v3/fonts/NotoSansDigits-Bengali.woff2?v=1777375656815") format("woff2");unicode-range:U+09E6-09EF}
.announcement-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:rgba(6,8,12,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease;z-index:2147483647}
.announcement-modal.show{opacity:1;visibility:visible;pointer-events:auto}
.announcement-dialog{width:min(100%,340px);display:flex;flex-direction:column;align-items:center;gap:18px}
.announcement-panel{width:min(340px,92vw);min-height:396px;display:flex;flex-direction:column;align-items:center;background:#202225;border:1px solid rgba(255,255,255,.08);border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.48);padding:20px 18px 16px;transform:translateY(14px) scale(.98);opacity:0;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .24s ease}
.announcement-modal.show .announcement-panel{transform:translateY(0) scale(1);opacity:1}
.announcement-title{margin:4px 0 0;color:#f3f5f7;text-align:center;font-size:20px;line-height:1.15;font-weight:800;font-family:inherit}
.announcement-body{margin-top:16px;color:rgba(214,220,225,.86);text-align:center;font-size:13px;line-height:1.55;font-family:inherit}
.announcement-body p{margin:0}
.announcement-body p+p{margin-top:14px}
.announcement-close{position:relative;width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(35,38,40,.95);box-shadow:0 10px 24px rgba(0,0,0,.26);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 46px;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.announcement-close:hover{transform:scale(1.04);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.24)}
.announcement-close::before{content:"";width:18px;height:18px;display:block;background-color:#ffffff;-webkit-mask-image:url("https://img.b112j.com/bj/h5/assets/v3/images/icon-set/utility-type/icon-close.svg?v=1775728419200");mask-image:url("https://img.b112j.com/bj/h5/assets/v3/images/icon-set/utility-type/icon-close.svg?v=1775728419200");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.announcement-close:active{transform:scale(0.98)}
@media (max-width:768px){
  .announcement-modal{padding:24px 14px}
  .announcement-dialog{width:min(100%,340px);gap:16px}
  .announcement-panel{width:min(340px,92vw);min-height:396px;padding:18px 16px 14px}
  .announcement-title{font-size:18px}
  .announcement-body{font-size:12.5px}
}
.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:#141515;border-top:1px solid #303232;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;
}

/* FORCED COLOR OVERRIDES FOR SIDEBAR */
.sidebar .menu .item,
.sidebar .menu .item span,
.sidebar .menu .item a,
.sidebar .submenu a,
.sidebar .promo-head,
.sidebar .promo-head .title,
.sidebar .promo-head .view-all {
    color: #ffffff !important;
    text-decoration: none !important;
}

.sidebar .menu .item:hover,
.sidebar .submenu a:hover {
    color: #e6e8ea !important;
}