/* Glow scrollbar (supported browsers) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(6,26,16,.55)}
::-webkit-scrollbar-thumb{background:rgba(var(--nl-primary-rgb),.25);border:1px solid rgba(var(--nl-primary-rgb),.35);border-radius:999px;box-shadow:0 0 12px rgba(var(--nl-primary-rgb),.25)}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--nl-primary-rgb),.35)}

.nl-app{color:var(--nl-text);background:radial-gradient(1200px 600px at 50% 0%, rgba(var(--nl-primary-rgb),.12), transparent 60%), var(--nl-bg);min-height:100vh;}
.nl-top{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(4,20,12,.95), rgba(4,20,12,.75));backdrop-filter: blur(10px);border-bottom:1px solid rgba(var(--nl-primary-rgb),.15);}
.nl-top-inner{max-width:var(--nl-container);margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 16px;}
.nl-logo img{max-height:42px;width:auto;}
.nl-logo-text{font-weight:800;letter-spacing:.5px}
.nl-topmenu{display:flex;gap:10px;flex:1;justify-content:center;flex-wrap:wrap}
.nl-toplink{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;color:var(--nl-text);text-decoration:none;border:1px solid rgba(var(--nl-primary-rgb),.12);background:rgba(8,30,18,.45)}
.nl-toplink:hover{box-shadow:0 0 0 2px rgba(var(--nl-primary-rgb),.15), 0 0 18px var(--nl-glow)}
.nl-auth{display:flex;gap:10px;align-items:center}
.nl-btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(var(--nl-primary-rgb),.25);background:linear-gradient(180deg, rgba(var(--nl-primary-rgb),.18), rgba(var(--nl-primary-rgb),.06));color:var(--nl-text);text-decoration:none;font-weight:700}
.nl-btn-ghost{background:rgba(8,30,18,.45)}

/* Auth buttons: allow Admin to set colors (Appearance → Signup Button / Login Button) */
.nl-btn-signup{background:var(--nl-auth-signup)!important;border-color:rgba(255,255,255,.18)!important;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset, 0 0 16px rgba(0,0,0,.15)}
.nl-btn-signup:hover{filter:brightness(1.05)}
.nl-btn-login{background:var(--nl-auth-login)!important;border-color:rgba(255,255,255,.18)!important}
.nl-btn-login:hover{filter:brightness(1.08)}
.nl-main{max-width:var(--nl-container);margin:0 auto;display:flex;gap:18px;padding:16px;}
/* Desktop side menu: MUST scroll with the page (never sticky/fixed, no internal scroll lock) */
.nl-side{width:260px;flex:0 0 260px;background:rgba(7,24,14,.55);border:1px solid rgba(var(--nl-primary-rgb),.12);border-radius:var(--nl-radius);box-shadow:0 0 22px rgba(0,0,0,.25);
  position:static !important;top:auto !important;}
.nl-side-inner{padding:12px;display:flex;flex-direction:column;gap:10px;overflow:visible !important;max-height:none !important}
.nl-sidebtn{display:flex;align-items:center;gap:10px;padding:14px 14px;border-radius:14px;border:1px solid rgba(var(--nl-primary-rgb),.15);background:linear-gradient(180deg, rgba(var(--nl-primary-rgb),.12), rgba(var(--nl-primary-rgb),.04));color:var(--nl-text);cursor:pointer;font-weight:800}
.nl-sidebtn:hover{box-shadow:0 0 0 2px rgba(var(--nl-primary-rgb),.12), 0 0 18px var(--nl-glow)}

/* ============ ICON SIZE STANDARD (prevents PNG overflow) ============ */
/* Bigger, clearer icons across the site (mobile + desktop) */
.nl-ico{width:32px;height:32px;max-width:32px;max-height:32px;object-fit:contain;display:block;flex:0 0 auto}
.nl-toplink .nl-ico{width:28px;height:28px;max-width:28px;max-height:28px}
.nl-sidebtn .nl-ico{width:34px;height:34px;max-width:34px;max-height:34px}
.nl-badge .nl-ico{width:38px;height:38px;max-width:38px;max-height:38px;filter:drop-shadow(0 0 16px var(--nl-glow))}
.nl-floatbtn .nl-ico{width:64px;height:64px;max-width:64px;max-height:64px;filter:drop-shadow(0 0 20px var(--nl-glow))}

@media (max-width: 980px){
  .nl-toplink .nl-ico{width:24px;height:24px;max-width:24px;max-height:24px}
  .nl-bnav-ico img{width:26px;height:26px}
}

/* =============================
   NeonLobby v1.3.28 UI FIXES
   - Mobile hero slider: remove ratio frame/extra border, let banner height follow image
   - Keep image full, no crop, background fits snug (no oversized box)
   ============================= */

@media (max-width: 768px){
  /* Kill the old padding-ratio frame that causes the "green box" + background mismatch */
  .nl-slider .nl-slide::before{
    content: none !important;
    display: none !important;
    padding-top: 0 !important;
  }

  /* Ensure slide wraps the image naturally */
  .nl-slider .nl-slide{
    height: auto !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  /* Undo absolute positioning from older patches */
  .nl-slider .nl-slide > img{
    position: relative !important;
    inset: auto !important;
  }

  /* Banner image: full width, keep full picture (no crop), height follows image */
  .nl-slider .nl-slide > img.nl-hero-img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
  }
}

/* =============================
   v1.3.23 final-closure patches
   ============================= */

/* 1) Hero/Slider image: always fill frame (no letterbox / no “มุด” บนมือถือ) */
.nl-hero{ overflow:hidden; }
.nl-hero .nl-slider{ overflow:hidden; }
.nl-hero .nl-slide{ aspect-ratio:16/9; }
.nl-hero .nl-hero-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}

/* Extra: keep sharpness where possible */
.nl-hero .nl-hero-img{ image-rendering:auto; }

/* 2) Force headings/links in content blocks to white (avoid browser default blue) */
.nl-section a,
.nl-section a:visited,
.nl-post-card a,
.nl-post-card a:visited,
.nl-event-card a,
.nl-event-card a:visited,
.nl-promo-card a,
.nl-promo-card a:visited{
  color:#ffffff !important;
  text-decoration:none;
}
.nl-section a:hover{ text-decoration:underline; }

/* 3) Desktop category menu (left game categories) should follow scroll (sticky) */
@media (min-width: 992px){
  .nl-side{
    position:sticky !important;
    top:88px;
    align-self:flex-start;
    z-index:30;
  }
  .nl-side-inner{
    max-height:calc(100vh - 120px);
    overflow:auto;
  }
}

/* 4) Mobile drawer: icon left, text white after icon, neat spacing */
.nl-drawer a{
  display:flex;
  align-items:center;
  gap:10px;
  color:#ffffff !important;
}
.nl-drawer a i,
.nl-drawer a img{
  width:22px;
  height:22px;
  flex:0 0 22px;
}
.nl-drawer a span{ color:#ffffff !important; }


/* Neon green scrollbar (mobile+desktop webkit) */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(6,26,16,.35)}
*::-webkit-scrollbar-thumb{background:rgba(var(--nl-primary-rgb),.35);border:1px solid rgba(var(--nl-primary-rgb),.45);border-radius:999px;box-shadow:0 0 14px var(--nl-glow)}
*::-webkit-scrollbar-thumb:hover{background:rgba(var(--nl-primary-rgb),.55)}
.nl-content{flex:1;min-width:0}
.nl-hero{border-radius:var(--nl-radius);border:1px solid rgba(var(--nl-primary-rgb),.18);background:rgba(7,24,14,.55);box-shadow:0 0 22px rgba(0,0,0,.25);overflow:hidden}
.nl-slider{display:flex;gap:0;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.nl-slider::-webkit-scrollbar{display:none}
.nl-slide{flex:0 0 100%;scroll-snap-align:start;display:block;aspect-ratio:16/9}
/* Default hero image behavior (desktop): fill the frame */
.nl-hero-img{width:100%;height:clamp(170px, 26vw, 340px);object-fit:cover;object-position:center;display:block;image-rendering:auto}
/* Slider frames should always size by aspect ratio (avoid "มุด" on mobile) */
.nl-slider .nl-hero-img{height:100%}

@media (max-width: 520px){
  /* Mobile: fill the frame (avoid "มุด" / letterboxing) */
  .nl-slide{aspect-ratio:16/9}
  .nl-slider .nl-hero-img{object-fit:cover;background:transparent}
}
.nl-hero-ph{padding:42px 22px}
.nl-hero-ph h2{margin:0 0 8px 0}
.nl-panel-title{margin-top:14px}
.nl-panel.nl-panel-title{
  padding:18px 20px;
  border-color:rgba(var(--nl-primary-rgb),.22);
}
.nl-panel.nl-panel-title .nl-panel-h{padding:0;display:flex;align-items:center;gap:10px}
.nl-panel.nl-panel-title .nl-tag{font-size:15px;letter-spacing:.2px}
.nl-panel{
  border-radius:var(--nl-radius);
  border:1px solid rgba(var(--nl-primary-rgb),.16);
  /* 4-layer premium look */
  background:
    linear-gradient(180deg, rgba(var(--nl-primary-rgb),.10), rgba(var(--nl-primary-rgb),.03)),
    radial-gradient(120% 120% at 10% 0%, rgba(var(--nl-primary-rgb),.10), transparent 50%),
    rgba(7,24,14,.60);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22) inset,
    0 10px 30px rgba(0,0,0,.28),
    0 0 22px rgba(0,0,0,.25);
}
.nl-panel-h{padding:12px 14px}
.nl-tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(var(--nl-primary-rgb),.14);border:1px solid rgba(var(--nl-primary-rgb),.20);font-weight:900}
.nl-provider-grid{margin-top:12px;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px;align-items:stretch}
/* Provider/Game cards: use padding-ratio fallback to avoid iOS grid overlap issues */
.nl-card{border-radius:var(--nl-radius);border:1px solid rgba(var(--nl-primary-rgb),.12);background:linear-gradient(180deg, rgba(var(--nl-primary-rgb),.10), rgba(var(--nl-primary-rgb),.03));overflow:hidden;cursor:pointer;position:relative}
.nl-card::before{content:"";display:block;padding-top:56.25%}
.nl-card:hover{box-shadow:0 0 0 2px rgba(var(--nl-primary-rgb),.12), 0 0 18px var(--nl-glow)}
.nl-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;display:block;opacity:1}
.nl-card .nl-cardlabel{position:absolute;left:10px;bottom:10px;font-weight:900;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.nl-sep{height:14px}
.nl-blog{margin-top:8px}
.nl-blog-head{
  padding:16px;
  border-radius:var(--nl-radius);
  border:1px solid rgba(var(--nl-primary-rgb),.16);
  background:
    linear-gradient(180deg, rgba(var(--nl-primary-rgb),.10), rgba(var(--nl-primary-rgb),.03)),
    radial-gradient(120% 120% at 10% 0%, rgba(var(--nl-primary-rgb),.10), transparent 50%),
    rgba(7,24,14,.60);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22) inset,
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -10px 18px rgba(0,0,0,.35) inset,
    0 10px 30px rgba(0,0,0,.25),
    0 0 18px rgba(var(--nl-primary-rgb),.10);
}
.nl-blog-head h3{margin:0 0 6px 0;color:var(--nl-text)}
.nl-blog-head p{margin:0;opacity:.8;color:rgba(235,255,240,.92)}
.nl-blog-grid{margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nl-postcard{border-radius:var(--nl-radius);border:1px solid rgba(var(--nl-primary-rgb),.12);background:rgba(7,24,14,.55);overflow:hidden;cursor:pointer}
.nl-postthumb{display:block;aspect-ratio:16/9;overflow:hidden}
.nl-postthumb img{width:100%;height:100%;object-fit:cover;display:block}
.nl-postmeta{padding:10px 12px}
.nl-postmeta h4{margin:0 0 6px 0;font-size:15px}
.nl-postmeta a{color:#e8fff0!important;text-decoration:none}
.nl-postmeta a:hover{text-decoration:underline;text-underline-offset:3px}

/* Fix remaining blue links/titles in promotions/events/blog sections */
.nl-promos a, .nl-blog a{color:#e8fff0!important}
.nl-promos a:hover, .nl-blog a:hover{color:#ffffff!important}
.nl-promos-head h3, .nl-blog-head h3{color:#ffffff}
.nl-promos-head p, .nl-blog-head p{color:rgba(232,255,240,.85)}
.nl-postdate{opacity:.75;font-size:12px}
.nl-postviewer{margin-top:10px;padding:14px;border-radius:var(--nl-radius);border:1px solid rgba(var(--nl-primary-rgb),.12);background:rgba(7,24,14,.55)}
.nl-seo{margin-top:10px}
.nl-seo-inner{padding:16px;border-radius:var(--nl-radius);border:1px solid rgba(var(--nl-primary-rgb),.12);background:rgba(7,24,14,.55)}
.nl-brands{margin-top:12px}
.nl-brands-title{margin-bottom:8px;font-weight:900}
.nl-brands-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.nl-brand{border-radius:12px;border:0;background:transparent;padding:8px;text-align:center;font-weight:900;opacity:.95}
.nl-brand img{max-height:28px;width:auto;object-fit:contain;filter:drop-shadow(0 0 12px rgba(0,0,0,.35))}
.nl-footer{margin-top:14px;padding:10px 0;opacity:.8;text-align:center}
.nl-badges{position:fixed;right:12px;top:120px;display:flex;flex-direction:column;gap:10px;z-index:60}
.nl-badge{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:0;background:transparent;color:var(--nl-text);text-decoration:none;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.nl-badge:hover{box-shadow:0 0 0 2px rgba(var(--nl-primary-rgb),.12), 0 0 18px var(--nl-glow)}
.nl-float{position:fixed;right:14px;bottom:86px;display:flex;flex-direction:column;gap:12px;z-index:60}
/* Floating buttons: icon on top, label below (bigger + clearer) */
.nl-floatbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:10px 10px;border-radius:18px;border:0;background:transparent;color:var(--nl-text);
  text-decoration:none;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.nl-floatbtn span{font-weight:900;font-size:13px;line-height:1;}
.nl-modal{display:none}
.nl-modal[aria-hidden="false"]{display:block;position:fixed;inset:0;z-index:80}
.nl-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.nl-modal-card{position:relative;max-width:980px;margin:8vh auto 0 auto;background:rgba(7,24,14,.95);border:1px solid rgba(var(--nl-primary-rgb),.18);border-radius:var(--nl-radius);box-shadow:0 0 32px rgba(0,0,0,.45);padding:16px}
.nl-modal-card a{color:#ffffff !important;text-decoration:none}
.nl-modal-card a:visited,.nl-modal-card a:hover,.nl-modal-card a:active{color:#ffffff !important;text-decoration:none}
.nl-modal-x{position:absolute;right:10px;top:10px;border:0;background:transparent;color:var(--nl-text);font-size:28px;cursor:pointer}
.nl-modal-body{padding-top:18px}
.nl-roomgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nl-room{border-radius:var(--nl-radius);border:1px solid rgba(var(--nl-primary-rgb),.12);background:rgba(7,24,14,.55);overflow:hidden;cursor:pointer;aspect-ratio: 16 / 9;min-height:140px}
.nl-room img{
  width:100%;
  height:100%;
  object-fit:contain; /* show full room image (no crop) */
  background:rgba(0,0,0,.18);
  display:block
}
.nl-room .nl-roommeta{padding:10px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.nl-room .nl-roommeta strong{font-size:14px}
.nl-pill{padding:4px 8px;border-radius:999px;border:1px solid rgba(var(--nl-primary-rgb),.18);background:rgba(var(--nl-primary-rgb),.12);font-size:12px;font-weight:900}

.nl-bottomnav{display:none}
@media (max-width: 980px){
  .nl-provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nl-blog-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
  .nl-side{display:none}
  .nl-main{padding-bottom:84px}
  .nl-bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:8px;justify-content:space-around;padding:12px 10px;background:rgba(4,20,12,.92);border-top:1px solid rgba(var(--nl-primary-rgb),.15)}
  .nl-bottomnav a{color:var(--nl-text);text-decoration:none;font-weight:900;padding:10px 12px;border-radius:12px;border:1px solid rgba(var(--nl-primary-rgb),.12);background:rgba(7,24,14,.55)}
  .nl-badges{display:none}
}

/* v1.3.2: Mobile bottom nav polish */
.nl-bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  padding:10px 12px;
  backdrop-filter: blur(10px);
}
.nl-bottomnav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
}
.nl-bnav-ico{
  width:38px;height:38px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.nl-bnav-ico img{width:22px;height:22px;object-fit:contain;display:block}
.nl-svgico{width:28px;height:28px;display:block;filter:drop-shadow(0 0 12px var(--nl-glow))}
.nl-bnav-dot{width:10px;height:10px;border-radius:999px;display:block;opacity:.7}
.nl-bnav-txt{font-size:12px;line-height:1;white-space:nowrap}
@media (max-width: 820px){
  body{padding-bottom:74px;}
}



/* ===== Mobile Top Categories (logo + scrollable categories) ===== */
.nl-mobcats{display:none;flex:1}
.nl-mobcats-inner{display:flex;gap:10px;overflow-x:auto;padding:6px 0;scroll-snap-type:x mandatory}
.nl-mobcats-inner::-webkit-scrollbar{display:none}
.nl-mobcat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-width:80px;padding:9px 10px;border-radius:18px;border:1px solid rgba(var(--nl-primary-rgb),.12);
  background:rgba(7,24,14,.35);color:var(--nl-text);cursor:pointer;scroll-snap-align:center}
.nl-mobcat .nl-ico{width:34px;height:34px;max-width:34px;max-height:34px}
.nl-mobcat .nl-mobdot{width:10px;height:10px;border-radius:999px;background:rgba(var(--nl-primary-rgb),.55);box-shadow:0 0 14px var(--nl-glow)}
.nl-mobcat-txt{font-size:12px;line-height:1;white-space:nowrap;font-weight:900;opacity:.95}
.nl-mobcat.is-active{box-shadow:0 0 0 2px rgba(var(--nl-primary-rgb),.15), 0 0 18px var(--nl-glow)}
@media (max-width: 980px){
  .nl-top-inner{flex-direction:column;align-items:center;gap:10px}
  .nl-topmenu,.nl-auth{display:none}
  .nl-logo{display:flex;justify-content:center}
  .nl-mobcats{display:block;width:100%}
}

/* ===== Promotions Section ===== */
.nl-promos{margin-top:10px}
.nl-promos-head{
  padding:16px;
  border-radius:var(--nl-radius);
  border:1px solid rgba(var(--nl-primary-rgb),.16);
  background:
    linear-gradient(180deg, rgba(var(--nl-primary-rgb),.10), rgba(var(--nl-primary-rgb),.03)),
    radial-gradient(120% 120% at 10% 0%, rgba(var(--nl-primary-rgb),.10), transparent 50%),
    rgba(7,24,14,.60);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22) inset,
    0 10px 30px rgba(0,0,0,.25);
}
.nl-promos-head h3{margin:0 0 6px 0}
.nl-promos-head p{margin:0;opacity:.75}
.nl-promos-slider{margin-top:10px;display:grid;grid-template-columns:1fr;gap:14px;justify-items:stretch}
.nl-promo{width:100%;max-width:500px;aspect-ratio:1/1;border-radius:18px;overflow:hidden;border:1px solid rgba(var(--nl-primary-rgb),.12);
  background:rgba(7,24,14,.25);display:block}
.nl-promo img{width:100%;height:100%;object-fit:cover;display:block}

/* Desktop: 3 images in a row (500x500 recommended) */
@media (min-width: 860px){
  .nl-promos-slider{grid-template-columns:repeat(3, minmax(0,1fr));justify-items:center}
}

/* Events cards: lock thumbnail to 1:1 (admin uses 500×500) */
.nl-eventcard .nl-postthumb{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:18px}
.nl-eventcard .nl-postthumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Footer Branding ===== */
.nl-footer{margin-top:18px;padding:14px 0;opacity:.92;text-align:center}
.nl-foot-inner{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}
.nl-foot-brand{display:flex;align-items:center;gap:10px;justify-content:center}
.nl-foot-brand img{max-height:30px;width:auto;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,0,0,.35))}
.nl-foot-name{font-weight:900;letter-spacing:.2px}
.nl-foot-copy{opacity:.75;font-size:12px}


/* v1.3.8 UI polish: full-frame cards + overlays + footer brands + float bar */
.nl-card{overflow:hidden}
.nl-card img{background:transparent; opacity:1}
/* provider/game overlays */
.nl-card .nl-ovl{position:absolute;inset:0;pointer-events:none}
.nl-ovl .nl-rtp{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  padding:4px 8px;border-radius:999px;font-weight:900;font-size:12px;color:#eaffff;box-shadow:0 0 16px rgba(0,0,0,.35)}
.nl-ovl .nl-online{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  padding:4px 8px;border-radius:999px;font-weight:900;font-size:12px;color:#eaffff;box-shadow:0 0 16px rgba(0,0,0,.35)}
/* room cards: keep full cover without dark gutters */
.nl-room{overflow:hidden}
.nl-room img{width:100%;height:100%;object-fit:cover;display:block}
/* floating bar (black rounded) */
.nl-float{right:12px;bottom:110px;gap:10px;padding:10px 8px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);border-radius:22px;backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.nl-float-toggle{width:36px;height:36px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.55);
  color:var(--nl-text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:900;opacity:.9}
.nl-float.is-collapsed .nl-floatbtn{display:none}

/* =====================
   v1.3.19 FINAL POLISH
   - Force frontend link color to follow theme text (no blue anchors)
   - Mobile drawer: premium alignment (icon left, label right)
   ===================== */

/* Blue link kill-switch (frontend only) */
.nl-app a,
.nl-app a:visited,
.nl-app a:hover,
.nl-app a:active{
  color:var(--nl-text) !important;
}
.nl-app a{ text-decoration:none; }

/* v1.3.22 final polish: force content links/headings to white (avoid browser blue) */
.nl-app a,
.nl-app a:visited,
.nl-app a:hover,
.nl-app a:active{color:#eaffea !important;text-decoration:none}

/* Make section headers / panel blocks feel more premium (4-layer green depth) */
.nl-panel,
.nl-section,
.nl-block{border:1px solid rgba(var(--nl-primary-rgb),.14);background:
  linear-gradient(180deg, rgba(12,46,24,.70), rgba(8,26,14,.62));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 12px 30px rgba(0,0,0,.22);
  border-radius:calc(var(--nl-radius) + 6px);
}
.nl-panel h2,
.nl-panel h3,
.nl-section h2,
.nl-section h3,
.nl-block h2,
.nl-block h3{color:#ffffff !important;letter-spacing:.2px}

/* Desktop/Tablet: game-category sidebar follows scroll (sticky). */
@media (min-width: 768px){
  .nl-side{position:sticky;top:92px;align-self:flex-start}
  .nl-side-inner{max-height:calc(100vh - 120px);overflow:auto;padding-right:6px}
  .nl-side-inner::-webkit-scrollbar{width:8px}
  .nl-side-inner::-webkit-scrollbar-thumb{background:rgba(var(--nl-primary-rgb),.18);border-radius:999px}
}

/* Mobile hero/slider: reduce cropping + keep image sharp (no forced stretch) */
@media (max-width: 520px){
  .nl-slide{aspect-ratio:16/9}
  .nl-slider .nl-hero-img{width:100%;height:100%;object-fit:cover;object-position:center;background:transparent}
}
.nl-app a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Mobile drawer menu: icon in front, label after, aligned + readable */
.nl-mobdrawer .nl-menulink{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}
.nl-mobdrawer .nl-menulink .nl-menulabel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nl-float.is-collapsed{padding:10px 8px}
.nl-floatbtn{padding:10px 8px;border-radius:16px}
.nl-floatbtn .nl-ico{width:64px;height:64px;max-width:64px;max-height:64px;filter:drop-shadow(0 0 18px var(--nl-glow))}
.nl-floatbtn span{font-size:13px}
/* make key icons bigger everywhere */
.nl-mobcat .nl-ico{width:44px;height:44px}
.nl-bnav-ico img{width:30px;height:30px}
.nl-badge .nl-ico{width:52px;height:52px;max-width:52px;max-height:52px}
/* footer brand logos: tighter + larger */
.nl-brands-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.nl-brand{padding:6px 8px}
.nl-brand img{max-height:44px;filter:drop-shadow(0 0 10px rgba(0,0,0,.25))}
@media (max-width: 980px){
  .nl-brands-grid{gap:6px}
  .nl-brand img{max-height:40px}
  .nl-floatbtn .nl-ico{width:56px;height:56px;max-width:56px;max-height:56px}
}
/* remove unwanted gutters around main grids on desktop */
.nl-provider-grid{padding:0}

/* clean cards (no extra border shadow gutters) */
.nl-card{border:0;box-shadow:none;background:transparent}

/* footer single strip (from Settings): big on desktop, auto on mobile, never overflow */
.nl-brandstrip{margin-top:12px;border-radius:var(--nl-radius);overflow:hidden;border:1px solid rgba(var(--nl-primary-rgb),.10);background:rgba(0,0,0,.28)}
.nl-brandstrip-link{display:block;text-decoration:none}
.nl-brandstrip img{width:100%;height:auto;max-height:clamp(120px, 14vw, 240px);display:block;object-fit:contain}


/* v1.3.9 mobile polish: smaller floating bar + mobile menu drawer + full footer brand */
.nl-top-inner{position:relative}
.nl-mobmenu-btn{display:none;position:absolute;left:10px;top:10px;transform:none;z-index:6;
  width:40px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.45);backdrop-filter:blur(10px);align-items:center;justify-content:center;
  box-shadow:0 0 18px rgba(0,0,0,.25);color:#eaffea}
.nl-mobmenu-btn .nl-svgico{width:22px;height:22px}

.nl-mobdrawer h3{margin:0 0 10px 0}
.nl-mobdrawer .nl-menulist{display:flex;flex-direction:column;gap:10px}
.nl-mobdrawer .nl-menulink{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:16px;
  border:1px solid rgba(var(--nl-primary-rgb),.16);background:rgba(7,24,14,.35);text-decoration:none;color:#ffffff !important}
.nl-mobdrawer .nl-menulink .nl-menuicon{
  width:28px;height:28px;flex:0 0 28px;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.nl-mobdrawer .nl-menulink .nl-ico{width:28px;height:28px;flex:0 0 28px;object-fit:contain;display:block}
.nl-mobdrawer .nl-menulink:visited,
.nl-mobdrawer .nl-menulink:hover,
.nl-mobdrawer .nl-menulink:active{color:#ffffff !important;text-decoration:none}
/* keep mobile menu steady (no "dancing" scale) */
.nl-mobdrawer a.nl-menulink:active{transform:none}
.nl-mobdrawer .nl-menulabel{font-weight:900}
.nl-mobdrawer .nl-menusec{margin-top:14px;opacity:.85;font-weight:900}

/* keep single-strip sizing handled by the main rule above */

/* smartphone refinements */
@media (max-width: 520px){
  .nl-mobmenu-btn{display:flex}
  /* Mobile hero/slider: show the full image (avoid cropping/mis-fit) */
  /* Prefer a wide banner ratio to prevent the image looking "mudded" on phones */
  .nl-slide{aspect-ratio:16/9}
  .nl-hero-img{height:clamp(170px, 52vw, 250px)}
  .nl-slider .nl-hero-img{height:100%;width:100%;object-fit:cover;object-position:center;background:transparent}
  /* tighter top categories for real smartphone feel */
  .nl-mobcats-inner{gap:8px}
  .nl-mobcat{min-width:72px;padding:8px 9px;border-radius:16px}
  .nl-mobcat .nl-ico{width:30px;height:30px;max-width:30px;max-height:30px}
  .nl-mobcat-txt{font-size:11px}

  /* floating bar: smaller, less intrusive */
  /* compact float bar on small phones (avoid covering content) */
  .nl-float{right:6px;bottom:92px;gap:6px;padding:6px 4px;border-radius:18px;background:rgba(0,0,0,.50)}
  .nl-float-toggle{width:26px;height:26px;border-radius:10px}
  .nl-floatbtn{padding:6px 4px;border-radius:12px}
  .nl-floatbtn .nl-ico{width:36px;height:36px;max-width:36px;max-height:36px;filter:none}
  .nl-floatbtn span{font-size:10px}

  /* footer brand strip: slightly smaller on tiny phones */
  .nl-brandstrip img{max-height:clamp(90px, 22vw, 150px)}
}

/* Events: enforce 1:1 cards (500×500 source) without stretching */
.nl-eventcard .nl-postthumb{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:18px}
.nl-eventcard .nl-postthumb img{width:100%;height:100%;object-fit:cover;display:block}


/* === FINAL PRODUCTION PATCH v1.3.14 === */
html,body,#page,#content,.site,.site-content{
  background: var(--nl-bg) !important;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

/* Mobile glow/radius fix (iOS Safari safe) */
@media (max-width:768px){
  /* Cards + glow layers inherit radius */
  .nl-card,
  .nl-card::before,
  .nl-card::after{
    border-radius: inherit !important;
  }
  .nl-card{
    overflow:hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }

  /* Mobile category buttons */
  .nl-mobcat,
  .nl-mobcat::before,
  .nl-mobcat::after{
    border-radius: inherit !important;
  }
  .nl-mobcat{
    overflow:hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}



/* =============================
   v1.3.23 final-closure patches
   ============================= */

/* 1) Hero/Slider image: fill frame on all devices (no letterbox / no “มุด”) */
.nl-hero{overflow:hidden;}
.nl-hero .nl-slider{overflow:hidden;}
.nl-hero .nl-slide{aspect-ratio:16/9;}
.nl-hero .nl-hero-img{width:100% !important;height:100% !important;object-fit:cover !important;display:block;}

/* 2) Force content headings/links (บทความ/กิจกรรม/โปรโมชัน) to white to avoid default blue */
.nl-section-title, .nl-section h2, .nl-section h3{color:#fff !important;}
.nl-post-card a, .nl-event-card a, .nl-promo-card a,
.nl-post-card a:visited, .nl-event-card a:visited, .nl-promo-card a:visited{color:#fff !important;text-decoration:none;}
.nl-post-card a:hover, .nl-event-card a:hover, .nl-promo-card a:hover{opacity:.92; text-decoration:underline;}

/* 3) Desktop category menu should follow scroll (sticky) */
@media (min-width: 992px){
  .nl-side{position:sticky !important; top:90px; align-self:flex-start;}
  .nl-side-inner{max-height:calc(100vh - 120px) !important; overflow:auto !important; padding-right:6px;}
}

/* 4) Mobile drawer menu: icon before text, aligned & premium */
.nl-drawer a{
  display:flex !important;
  align-items:center;
  gap:10px;
  color:#fff !important;
}
.nl-drawer a .nl-ico, .nl-drawer a img{width:22px;height:22px;flex:0 0 22px;}
.nl-drawer a span{line-height:1.2;}


/* =============================
   v1.3.23 final-closure patches
   ============================= */

/* 1) Hero/Slider image: fill frame on all devices (no letterbox / no “มุด”) */
.nl-hero{overflow:hidden;}
.nl-hero .nl-slider{overflow:hidden;}
.nl-hero .nl-slide{aspect-ratio:16/9;}
.nl-hero .nl-hero-img{width:100% !important;height:100% !important;object-fit:cover !important;display:block;}

/* Reduce “แตก/ยืด” feeling by avoiding forced stretching in some mobile overrides */
@media (max-width: 768px){
  .nl-hero .nl-slide{aspect-ratio:16/9;}
  .nl-hero .nl-hero-img{object-fit:cover !important;}
}

/* 2) Force content headings/links (บทความ/กิจกรรม/โปรโมชัน) to white */
.nl-section a,
.nl-section a:visited,
.nl-post-card a,
.nl-post-card a:visited,
.nl-event-card a,
.nl-event-card a:visited,
.nl-promo a,
.nl-promo a:visited{
  color:#fff !important;
  text-decoration:none;
}
.nl-section a:hover,
.nl-post-card a:hover,
.nl-event-card a:hover,
.nl-promo a:hover{opacity:.92;text-decoration:underline;}

/* 3) Desktop category menu: sticky-follow scroll (เมนูหมวดเกมวิ่งตามหน้าเว็บ) */
@media (min-width: 992px){
  .nl-side{position:sticky !important;top:86px !important;align-self:flex-start;}
  .nl-side-inner{max-height:calc(100vh - 110px) !important;overflow:auto !important;}
}

/* 4) Mobile drawer menu alignment: icon leading + tidy spacing + white text */
.nl-drawer a,
.nl-drawer button{
  color:#fff !important;
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.1;
}
.nl-drawer .nl-mi{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 26px;
}
/* ==============================
   v1.3.24 FINAL CLOSURE PATCHES
   1) Slider/ภาพสไลด์มือถือให้พอดีกับกรอบ (ไม่มุด/ไม่ยืด)
   2) เมนูหมวดหมู่เกม Desktop ให้ Sticky ตามสกอลล์
   ============================== */

/* 1) Slider: ใช้เทคนิค padding-ratio เพื่อให้ iOS/มือถือ render ตรง */
.nl-hero{ padding:0 !important; }
.nl-slider{ padding:0 !important; }

.nl-slider .nl-slide{
  position: relative !important;
  flex: 0 0 100% !important;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
}

/* อัตราส่วน 16:9 (ลดกรอบเขียวสูงเกินบนมือถือ) */
.nl-slider .nl-slide::before{
  content: "";
  display: block;
  padding-top: 56.25%;
}

.nl-slider .nl-slide > img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
}

/* Mobile: ให้เต็มจอขึ้นนิด (ไม่เตี้ย) */
@media (max-width: 520px){
  /* มือถือ: เน้น "เห็นภาพเต็ม" ลดอาการภาพมุด/โดนครอบ */
  .nl-slider .nl-slide{ background: rgba(0,0,0,.22); }
  .nl-slider .nl-slide::before{ padding-top: 62.5%; } /* ~16:10 */
  .nl-slider .nl-slide > img{
    object-fit: contain !important;
    /* กันขอบเขียวกินพื้นที่ ทำให้ภาพดูไม่เต็ม */
    padding: 6px;
    box-sizing: border-box;
  }
}

/* 2) Desktop: เมนูหมวดหมู่เกมให้วิ่งตาม (sticky) */
@media (min-width: 768px){
  .nl-side{
    position: sticky !important;
    top: 88px !important; /* เผื่อเมนูบน/แถบหัวเว็บ */
    align-self: flex-start !important;
  }

  /* ป้องกัน sticky ถูกทำให้ไม่ทำงานจาก overflow ของพาเรนต์ */
  .nl-layout,
  .nl-wrap,
  .nl-main{ overflow: visible !important; }
}



/* =============================
   v1.3.25 FINAL responsive fixes
   - Banner slider: show FULL image (no crop), never overflow
   - Desktop game menu: follow scroll (sticky)
   ============================= */

/* 1) Slider: stable frame height; image shows FULL (contain) */
.nl-hero{overflow:hidden;}
.nl-slider{overflow:hidden;}
.nl-slide{
  /* keep each slide as a clean banner frame */
  aspect-ratio: auto !important;
  height: clamp(180px, 26vw, 360px);
  overflow:hidden;
  background: radial-gradient(ellipse at center, rgba(var(--nl-primary-rgb),.10), rgba(0,0,0,.55));
}
.nl-hero-img{
  width:100% !important;
  height:100% !important;
  object-fit: contain !important;  /* ✅ show full banner */
  object-position:center !important;
  display:block;
}

/* Mobile: taller frame so full image looks good */
@media (max-width: 768px){
  .nl-slide{
    height: clamp(220px, 62vw, 380px);
    border-radius: 16px;
  }
}

/* 2) Desktop side menu follows scroll (like the reference) */
@media (min-width: 992px){
  .nl-main{align-items:flex-start;}
  .nl-side{
    position: sticky !important;
    top: var(--nl-top-h, 110px) !important;
    align-self: flex-start;
    max-height: calc(100vh - var(--nl-top-h, 110px));
    overflow: auto;
  }
  .nl-side-inner{max-height:none !important;}
}

/* Mobile: sidebar should not float */
@media (max-width: 991px){
  .nl-side{
    position: static !important;
    top:auto !important;
    max-height:none !important;
    overflow: visible !important;
    width:100%;
    flex: 0 0 auto;
  }
}



/* ===== NeonLobby v1.3.27 FINAL PATCH: slider mobile fit + sidebar follow scroll ===== */

/* A) Slider: keep desktop behavior, fix mobile "image hides / crops" */
@media (max-width: 768px){
  .nl-slider{overflow:hidden !important;}
  .nl-slide{aspect-ratio:auto !important; height:auto !important;}
  .nl-slide > img.nl-hero-img{
    width:100% !important;
    height:auto !important;
    max-height: 70vh !important;
    object-fit: contain !important;
    object-position: center !important;
    display:block !important;
    background: rgba(0,0,0,.18) !important;
  }
}

/* B) Sidebar menu: enable JS fallback class (for sticky that gets blocked by parent overflow/transform) */
@media (min-width: 992px){
  .nl-side.nl-side--fixed{
    position: fixed !important;
    top: var(--nl-top-h, 110px) !important;
    z-index: 40;
    width: 260px; /* match sidebar width */
  }
  .nl-side.nl-side--stopped{
    position: absolute !important;
    top: auto !important;
    bottom: 16px !important;
  }
}

/* =============================
   NeonLobby v1.3.28 FINAL OVERRIDE (keep this at EOF)
   Mobile slider: "ตามขนาดรูป" + ไม่มีกรอบ/พื้นหลังพอง
   ============================= */
@media (max-width: 768px){
  /* remove the ratio pseudo element frame completely */
  .nl-slider .nl-slide::before{content:none !important;display:none !important;padding-top:0 !important;}

  /* ensure the slide box hugs the image height */
  .nl-slider .nl-slide{
    height:auto !important;
    min-height:0 !important;
    background: transparent !important;
    padding:0 !important;
    border-radius: 16px;
    overflow:hidden;
  }

  /* cancel absolute positioning coming from older patches */
  .nl-slider .nl-slide > img,
  .nl-slider .nl-slide > img.nl-hero-img{
    position: relative !important;
    inset: auto !important;
  }

  /* show FULL image, keep it long/tall if uploaded tall */
  .nl-slider .nl-slide > img.nl-hero-img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit: contain !important;
    object-position: center !important;
    display:block !important;
    padding:0 !important;
    background: transparent !important;
  }
}


/* ===== v1.3.31 FINAL UI PATCH: premium mobile nav + safe sticky offset ===== */
.nl-mobmenu-btn{display:none;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;border:1px solid rgba(var(--nl-primary-rgb),.16);background:rgba(7,24,14,.35);color:var(--nl-text);font-weight:900;line-height:1}
/* Render "เมนู" label only on mobile via pseudo-element (no desktop DOM clutter) */
@media (max-width: 1023px){
  .nl-mobmenu-btn{display:flex}
  .nl-mobmenu-btn::after{content:"เมนู";font-weight:900;letter-spacing:.2px}
}

/* Force hamburger button to be premium (icon + label inline), overriding older icon-only rules */
@media (max-width: 520px){
  .nl-top .nl-mobmenu-btn{
    width:auto !important;
    height:auto !important;
    min-height:40px;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:10px 14px !important;
  }
}

@media (max-width: 980px){
  /* Premium bottom nav: icon inline with label (not stacked) */
  .nl-bottomnav a{display:flex !important;flex-direction:row !important;gap:10px !important;align-items:center !important;justify-content:center !important}
  .nl-bnav-ico{width:34px;height:34px;border-radius:14px;background:rgba(var(--nl-primary-rgb),.10);border:1px solid rgba(var(--nl-primary-rgb),.14)}
  .nl-bnav-txt{font-size:13px}
  /* Highlight key buttons via settings */
  .nl-bottomnav a[data-nav="home"]{
    background:var(--nl-mobile-home-bg) !important;
    border-color:rgba(255,255,255,.18) !important;
    color:var(--nl-mobile-home-text) !important;
    box-shadow:0 0 0 1px rgba(0,0,0,.25) inset, 0 10px 24px rgba(0,0,0,.20);
  }
  .nl-bottomnav a[data-nav="home"] .nl-svgico{filter:none}
  .nl-bottomnav a[data-nav="promo"]{
    background:var(--nl-mobile-promo-bg) !important;
    border-color:rgba(255,255,255,.18) !important;
    color:var(--nl-mobile-promo-text) !important;
  }
  .nl-bottomnav a[data-nav="promo"] .nl-svgico{filter:none}
}

/* Desktop sidebar: never hide under top bar / WP admin bar */
@media (min-width: 992px){
  :root{ --nl-sticky-gap: 16px; }
  .nl-side.nl-side--fixed{
    top: calc(var(--nl-top-h, 90px) + var(--nl-sticky-gap, 16px)) !important;
  }
}

/* ===== v1.3.36 FINAL TOUCH: Desktop hides floating hamburger + Mobile drawer premium alignment ===== */
@media (min-width: 1024px){
  /* Ensure the floating hamburger button never appears on desktop (no overlay behind logo) */
  .nl-mobmenu-btn{display:none !important;box-shadow:none !important;background:transparent !important;backdrop-filter:none !important;border:0 !important}
}
@media (max-width: 1023px){
  /* Mobile drawer: premium row layout (icon left, label right) */
  body.nl-mobdrawer-inline .nl-mobdrawer .nl-menulink{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:var(--nl-mobdrawer-gap,16px) !important;
    padding:14px 18px !important;
    border-radius:16px !important;
  }
  body.nl-mobdrawer-inline .nl-mobdrawer .nl-menulink .nl-ico{
    flex:0 0 var(--nl-mobdrawer-icon,28px) !important;
    width:var(--nl-mobdrawer-icon,28px) !important;
    height:var(--nl-mobdrawer-icon,28px) !important;
  }
  body.nl-mobdrawer-inline .nl-mobdrawer .nl-menulink .nl-menulabel{
    display:block !important;
    line-height:1.05 !important;
    transform:translateY(1px);
    margin:0 !important;
    font-weight:800;
    letter-spacing:.2px;
  }
}


/* ===== v1.3.37: SEO footer banner clean (no bg/shadow/border) ===== */
body.nl-seo-footer-clean .nl-seo .nl-seo-inner{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
body.nl-seo-footer-clean .nl-seo .nl-seo-inner img,
body.nl-seo-footer-clean .nl-brandstrip img{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.nl-seo-footer-clean .nl-seo .nl-seo-inner img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width: var(--nl-seo-footer-maxw, 100%) !important;
  margin: 0 auto !important;
  object-fit: var(--nl-seo-footer-fit, contain) !important;
}