/* ===== LAF168 clone – custom theme layered on Bootstrap 5 ===== */
:root{
  --bg:#0a0a0c;
  --bg2:#07080d;
  --panel-top:#1e2330;
  --panel-bot:#000614;
  --line:rgba(255,255,255,.08);
  --muted:#8b93a7;
  --yellow-a:#ffd703;
  --yellow-b:#ffb800;
  --blue-a:rgba(63,47,255,.99);
  --blue-b:#390081;
  --radius:14px;
}
*{-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:#fff}
body{
  font-family:'Sarabun',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.container-app{max-width:1200px;margin-inline:auto;padding-inline:12px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1030;
  background:linear-gradient(180deg,#12131a 0%,#0c0d13 100%);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 18px rgba(0,0,0,.55);
}
.site-header .inner{display:flex;align-items:center;gap:12px;height:64px}
.brand img{height:40px;width:auto}
.header-nav{
  display:flex;align-items:center;gap:2px;margin-left:18px;flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none;
}
.header-nav::-webkit-scrollbar{display:none}
.header-nav a{
  color:#cfd6e6;font-weight:600;font-size:.95rem;white-space:nowrap;
  padding:.4rem .7rem;border-radius:999px;transition:.15s;
}
.header-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.header-nav a.active{
  color:#fff;background:linear-gradient(180deg,var(--blue-a),var(--blue-b));
  box-shadow:0 3px 10px rgba(63,47,255,.35);
}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn-login{
  border:1px solid rgba(255,255,255,.6);color:#fff;background:transparent;
  border-radius:999px;padding:.42rem 1.15rem;font-weight:600;font-size:.95rem;white-space:nowrap;
}
.btn-login:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-register{
  border:0;color:#3a2a00;font-weight:700;font-size:.95rem;white-space:nowrap;
  background:linear-gradient(180deg,var(--yellow-a),var(--yellow-b));
  border-radius:999px;padding:.45rem 1.2rem;box-shadow:0 3px 10px rgba(255,184,0,.35);
}
.btn-register:hover{filter:brightness(1.05);color:#3a2a00}
.btn-burger{background:transparent;border:0;color:#fff;font-size:1.6rem;line-height:1;padding:.1rem .3rem}

/* ---------- Banner ---------- */
.hero-banner{width:100%;display:block;background:#000}
.hero-banner img{width:100%;display:block}

/* ---------- Marquee ---------- */
.marquee{
  display:flex;align-items:center;gap:10px;overflow:hidden;
  background:linear-gradient(90deg,#141826,#0b0d16);
  border-block:1px solid var(--line);padding:9px 12px;
}
.marquee .ico{flex:0 0 auto;height:20px}
.marquee .track{
  white-space:nowrap;overflow:hidden;flex:1;
}
.marquee .track span{
  display:inline-block;padding-left:100%;
  animation:marquee 26s linear infinite;color:#cfd6e6;font-size:.92rem;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ---------- Layout: rail แนวนอนด้านบน + เนื้อหาด้านล่าง ---------- */
.home-grid{display:flex;flex-direction:column;gap:14px;padding-top:16px}
.rail{
  display:flex;flex-direction:row;gap:10px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:#333 transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:#2a2f3d;border-radius:6px}
.rail a{
  flex:0 0 92px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(180deg,#161a26,#0c0e16);
  border:1px solid var(--line);border-radius:14px;padding:12px 4px;color:#c9cfdd;
  font-size:.8rem;font-weight:600;transition:.15s;
}
.rail a img{height:34px;width:34px;object-fit:contain}
.rail a.active{
  background:linear-gradient(180deg,var(--blue-a),var(--blue-b));
  color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(63,47,255,.35);
}
.rail a:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.rail-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}

.section-eyebrow{font-weight:700;font-size:1.02rem;margin:0 0 8px}
/* banner scroller (trending / events) */
.banner-card{
  flex:0 0 clamp(240px,46%,500px);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#0c0e16;
}
.banner-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.banner-wide img{aspect-ratio:2/1}

/* ---------- Section header ---------- */
.sec{padding-top:26px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-title{font-weight:700;font-size:1.12rem;margin:0}
.sec-more{color:#8fb2ff;font-size:.9rem;font-weight:600}
.sec-more:hover{color:#cddcff}

/* ---------- Horizontal scroller ---------- */
.scroller{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:#333 transparent;
}
.scroller::-webkit-scrollbar{height:6px}
.scroller::-webkit-scrollbar-thumb{background:#2a2f3d;border-radius:6px}
.scroller>*{scroll-snap-align:start}

/* ---------- Game card (top 10) ---------- */
.game-card{
  position:relative;flex:0 0 168px;border-radius:14px;overflow:hidden;
  background:#11131b;border:1px solid var(--line);
}
.game-card>img.thumb{width:100%;height:224px;object-fit:cover;display:block}
.game-card .rank{
  position:absolute;left:8px;bottom:2px;font-weight:800;font-style:italic;
  font-size:4.2rem;line-height:1;color:#fff;
  -webkit-text-stroke:2px rgba(0,0,0,.55);text-shadow:0 3px 8px rgba(0,0,0,.6);
  font-family:'Arial Black',Arial,sans-serif;
}
.badge-pill{
  position:absolute;top:8px;left:8px;font-size:.68rem;font-weight:700;color:#fff;
  padding:3px 9px;border-radius:999px;z-index:2;
}
.badge-freespin{background:linear-gradient(90deg,#0066ff,#030096)}
.badge-new{background:linear-gradient(90deg,#04ce00,#038d00)}
.badge-hot{background:linear-gradient(90deg,#ff7a00,#ff0000)}
.badge-maint{background:linear-gradient(90deg,#d9d9d9,#a40000)}
.heart{
  position:absolute;top:6px;right:6px;height:26px;width:26px;z-index:2;opacity:.9;
}

/* live camp card */
.live-card{
  position:relative;flex:0 0 172px;border-radius:14px;overflow:hidden;
  background:#11131b;border:1px solid var(--line);
}
.live-card img.thumb{width:100%;height:230px;object-fit:cover;display:block}
.live-card.maint img.thumb{filter:grayscale(1) brightness(.5)}

/* promo card */
.promo-card{flex:0 0 250px;display:flex;flex-direction:column;gap:10px}
.promo-card .pic{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.promo-card img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.btn-detail{
  border:0;border-radius:10px;font-weight:700;color:#3a2a00;font-size:.95rem;padding:.5rem;
  background:linear-gradient(180deg,var(--yellow-a),var(--yellow-b));width:100%;
}
.btn-detail:hover{filter:brightness(1.05);color:#3a2a00}

/* ---------- Withdrawal report ---------- */
.report{
  margin-top:34px;border-radius:18px;padding:2px;
  background:linear-gradient(180deg,#3a3f52,#0b1020);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.report-inner{background:linear-gradient(180deg,#10131d,#05070e);border-radius:16px;padding:16px 14px 22px}
.report-title{text-align:center;font-weight:700;font-size:1.1rem;margin:6px 0 16px;
  border-bottom:1px solid var(--line);padding-bottom:14px}
.report-list{max-height:430px;overflow:hidden;position:relative}
.report-scroll{display:flex;flex-direction:column;gap:12px;animation:vscroll 22s linear infinite}
.report-list:hover .report-scroll{animation-play-state:paused}
@keyframes vscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.report-row{
  display:flex;align-items:center;gap:14px;
  background:#0a0d16;border:1px solid rgba(120,140,255,.18);border-radius:12px;padding:12px 14px;
}
.report-row .bank{flex:0 0 40px;height:40px;display:grid;place-items:center;color:#7f8cff;font-size:1.6rem}
.report-row .info{font-size:.9rem;line-height:1.5}
.report-row .info b{color:#ffd703}
.report-row .user{color:#8fb2ff}

/* ---------- Contact ---------- */
.contact-wrap{margin-top:34px;background:#0e1018;border:1px solid var(--line);border-radius:16px;padding:18px 16px 22px}
.block-title{font-weight:700;font-size:1.05rem;margin:0 0 16px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.contact-card{
  background:#000;border:1px solid var(--line);border-radius:14px;padding:16px 8px 14px;text-align:center;
}
.contact-card img{height:44px;margin-bottom:8px}
.contact-card .lbl{color:#4aa8ff;font-weight:700;font-size:.9rem}
.contact-card .sub{color:#cfd6e6;font-size:.85rem;margin-top:2px}
.contact-card .lbl.line{color:#00c300}

/* ---------- Partners / cert ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 14px;align-items:center}
.logo-grid img{width:100%;height:44px;object-fit:contain;opacity:.55;filter:grayscale(1);transition:.2s}
.logo-grid img:hover{opacity:1;filter:none}
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:center;max-width:640px}
.cert-grid img{width:100%;height:38px;object-fit:contain;opacity:.5;filter:grayscale(1)}

/* ---------- Footer ---------- */
.site-footer{text-align:center;padding:26px 0 40px;color:var(--muted);font-size:.9rem}
.site-footer .cr{display:inline-flex;align-items:center;gap:8px}
.site-footer img{height:22px}

/* ---------- Footer menu badges ---------- */
.footer-badges{display:flex;flex-wrap:wrap;gap:8px}
.footer-badge{
  display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;
  border:1px solid rgba(255,215,3,.35);background:rgba(255,215,3,.08);
  color:#ffd703;font-size:.85rem;font-weight:600;transition:.15s;
}
.footer-badge:hover{background:#ffd703;color:#0c0e16}

/* ---------- Offcanvas menu ---------- */
.offcanvas{background:#0d0f16;color:#fff}
.menu-link{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);font-weight:600}
.menu-link img{height:30px;width:30px;object-fit:contain}

/* header nav: inline on wide screens, burger on narrow */
@media(min-width:992px){ .btn-burger{display:none} }
@media(max-width:991px){ .header-nav{display:none} }

/* ---------- Responsive ---------- */
@media(max-width:640px){
  .rail a{flex-basis:74px;font-size:.7rem;padding:9px 2px}
  .rail a img{height:28px;width:28px}
  .game-card{flex-basis:140px}
  .game-card>img.thumb{height:188px}
  .game-card .rank{font-size:3.4rem}
  .live-card{flex-basis:150px}
  .live-card img.thumb{height:200px}
  .promo-card{flex-basis:210px}
  .contact-grid{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .cert-grid{grid-template-columns:repeat(2,1fr)}
  .site-header .inner{height:56px}
  .brand img{height:34px}
}