/* ===== TH89 clone — Bootstrap 5 theme ===== */
:root{
  --bg:#ecf9ff;
  --ink:#001327;
  --brand:#0a64b0;
  --brand-dark:#063a6b;
  --nav-grad1:#0a3f74;
  --nav-grad2:#1488cf;
  --cyan:#13a7e0;
  --cyan-d:#0e8fc4;
  --gold:#ffd14d;
}
*{ -webkit-tap-highlight-color:transparent; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Sarabun',-apple-system,BlinkMacSystemFont,"Helvetica Neue",arial,"PingFang SC","Microsoft YaHei","Noto Sans Thai",sans-serif;
  padding-bottom:0;
}
a{ text-decoration:none; }
img{ max-width:100%; }

/* ---------- TOP BAR ---------- */
.topbar{ background:#fff; box-shadow:0 2px 8px rgba(0,40,80,.08); position:sticky; top:0; z-index:1030; }
.brand img{ display:block; }
.search-box{ position:relative; max-width:340px; }
.search-box .form-control{ border-radius:999px; background:#eef6fb; border:1px solid #dbe9f3; padding-left:18px; }
.search-box .form-control:focus{ box-shadow:0 0 0 .2rem rgba(19,167,224,.15); border-color:var(--cyan); }
.search-box .search-btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--brand); }
.btn-register{ background:#fff; color:var(--brand); border:1px solid var(--brand); border-radius:999px; font-weight:700; padding:.45rem 1.1rem; }
.btn-register:hover{ background:var(--brand); color:#fff; }
.btn-login{ background:linear-gradient(180deg,var(--cyan),var(--cyan-d)); color:#fff; border:0; border-radius:999px; font-weight:700; padding:.45rem 1.25rem; }
.btn-login:hover{ filter:brightness(1.05); color:#fff; }
.btn-burger{ border:1px solid rgba(10,100,176,.3); background:#eef6fb; color:var(--brand); border-radius:10px; font-size:1.4rem; line-height:1; padding:.3rem .55rem; }

/* ---------- OFFCANVAS NAV (มือถือ) ---------- */
.offcanvas-nav{ background:#fff; color:var(--ink); width:300px; }
.offcanvas-nav .offcanvas-header{ background:linear-gradient(180deg,var(--nav-grad1),var(--nav-grad2)); }
.offcanvas-nav .menu-link{ display:block; padding:12px 6px; border-bottom:1px solid rgba(10,100,176,.15); color:var(--brand-dark); font-weight:600; }
.offcanvas-nav .menu-link:hover{ color:var(--brand); }

/* ---------- NAV ---------- */
.main-nav{ background:linear-gradient(180deg,var(--nav-grad1),var(--nav-grad2)); box-shadow:0 3px 10px rgba(0,40,80,.18); position:sticky; top:64px; z-index:1020; }
.nav-scroll{ flex-wrap:nowrap; overflow-x:auto; gap:2px; padding:7px 0; scrollbar-width:none; }
.nav-scroll::-webkit-scrollbar{ display:none; }
.main-nav .nav-link{ color:#eaf4ff; white-space:nowrap; font-weight:600; border-radius:8px; padding:.4rem .9rem; font-size:.98rem; }
.main-nav .nav-link:hover{ background:rgba(255,255,255,.12); }
.main-nav .nav-link.active{ background:var(--cyan); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.2); }

/* ---------- HERO ---------- */
.hero{ padding:18px 0 6px; }
.hero .carousel-item img{ object-fit:cover; }
.hero .carousel-indicators{ margin-bottom:.4rem; }
.hero .carousel-indicators [data-bs-target]{ width:10px; height:10px; border-radius:50%; border:0; }

/* ---------- MARQUEE ---------- */
.marquee{ background:linear-gradient(90deg,var(--nav-grad1),var(--nav-grad2)); color:#fff; overflow:hidden; padding:8px 0; white-space:nowrap; }
.marquee-track{ display:inline-flex; animation:marquee 38s linear infinite; }
.marquee-track span{ padding-right:40px; font-size:.92rem; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- SECTION TITLE (ribbon) ---------- */
.block{ margin:34px 0; }
.section-title{ position:relative; display:flex; align-items:center; }
.section-title>span{
  background:linear-gradient(180deg,#1f8fd8,#0d6cb4);
  color:#fff; font-weight:800; font-size:1.25rem; padding:.5rem 2.4rem .5rem 1.2rem;
  clip-path:polygon(0 0,100% 0,86% 100%,0 100%);
  box-shadow:0 4px 10px rgba(13,108,180,.3);
  border-radius:6px 0 0 6px;
}
.section-title::after{ content:""; flex:1; height:2px; background:linear-gradient(90deg,#bfe1f5,transparent); margin-left:-6px; }
.section-title.center{ justify-content:center; }
.section-title.center::after{ display:none; }
.section-title.center>span{ clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); padding:.5rem 2.4rem; border-radius:6px; }
.section-title.between>span{ flex:0 0 auto; }
.section-title.between .see-all{ margin-left:auto; color:var(--brand); font-weight:600; font-size:.9rem; }

/* ---------- CATEGORY CARDS ---------- */
.cat-card{ display:block; text-align:center; transition:transform .2s; }
.cat-card:hover{ transform:translateY(-6px); }
.cat-img-wrap{ aspect-ratio:1; display:flex; align-items:flex-end; justify-content:center;
  background:radial-gradient(circle at 50% 70%,#cdeafe,#eaf6ff 70%); border-radius:18px; overflow:hidden; }
.cat-img-wrap img{ width:88%; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,40,80,.25)); }
.cat-label{ display:inline-block; margin-top:.6rem; background:#fff; border:1px solid #cfe6f5; color:var(--brand);
  font-weight:700; border-radius:999px; padding:.3rem 1.4rem; box-shadow:0 3px 6px rgba(0,40,80,.08); }

/* ---------- MEGA WIN ---------- */
.megawin-img{ max-height:300px; }

/* ---------- GAME CARDS (hot) ---------- */
.game-card{ position:relative; display:block; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 4px 10px rgba(0,40,80,.12); transition:transform .2s; }
.game-card:hover{ transform:translateY(-5px); box-shadow:0 8px 18px rgba(0,40,80,.2); }
.game-card img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.rank-badge{ position:absolute; left:8px; bottom:34px; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(180deg,#1f8fd8,#0d6cb4); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.25); font-size:.9rem; z-index:2; }
.fav-star{ position:absolute; top:6px; right:8px; color:#ffd14d; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); z-index:2; }
.game-name,.jp-name{ display:block; padding:.35rem .4rem; font-size:.8rem; font-weight:600; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- JACKPOT ---------- */
.jackpot-wrap{ background:linear-gradient(180deg,#dff1fc,#eaf6ff); border:1px solid #cfe6f5; border-radius:20px; padding:20px; }
.jackpot-img{ max-height:230px; }
.jackpot-counter{ font-weight:900; font-size:1.7rem; color:#0d6cb4;
  text-shadow:0 2px 0 #fff,0 4px 8px rgba(13,108,180,.25); letter-spacing:1px; margin-top:-8px; }
.jp-card{ position:relative; display:block; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 3px 7px rgba(0,40,80,.12); }
.jp-card img{ width:100%; aspect-ratio:1; object-fit:cover; }
.jp-card:hover{ transform:translateY(-3px); }
.jp-price{ position:absolute; top:4px; right:4px; background:rgba(0,0,0,.62); color:var(--gold); font-weight:700;
  font-size:.7rem; padding:1px 6px; border-radius:8px; z-index:2; }
.jp-fav{ position:absolute; top:4px; left:5px; color:#ffd14d; font-size:.8rem; z-index:2; }

/* ---------- PROVIDERS ---------- */
.provider-strip{ display:flex; gap:14px; overflow-x:auto; padding:8px 2px 16px; scrollbar-width:thin; }
.provider-strip::-webkit-scrollbar{ height:6px; }
.provider-strip::-webkit-scrollbar-thumb{ background:#bcdcf0; border-radius:999px; }
.provider-item{ position:relative; flex:0 0 auto; width:150px; height:80px; background:#fff; border:1px solid #e1eef8;
  border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 7px rgba(0,40,80,.08); }
.provider-item img{ max-width:78%; max-height:54%; object-fit:contain; }
.prov-count{ position:absolute; top:-9px; right:8px; background:#fff; border:1px solid #d8e9f5; color:#4a6a82;
  font-size:.66rem; padding:1px 7px; border-radius:999px; }

/* ---------- FOOTER ---------- */
.site-footer{ background:linear-gradient(180deg,#0d5fa6,#063a6b); color:#dfeefb; margin-top:50px; padding:40px 0 0; }
.site-footer h6{ color:#fff; font-weight:800; margin-bottom:16px; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer ul li{ margin-bottom:9px; }
.site-footer a{ color:#cfe3f5; font-size:.9rem; }
.site-footer a:hover{ color:#fff; }
.footer-brand-logo{ max-height:56px; width:auto; }
.footer-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.footer-badge{
  display:inline-flex; align-items:center; padding:5px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1);
  color:#eaf4ff; font-size:.85rem; font-weight:600; transition:.15s;
}
.footer-badge:hover{ background:#fff; color:var(--brand-dark); }
.foot-social{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff; }
.foot-social.yt{ background:#ff0000; }
.foot-social.tg{ background:#229ed9; }
.footer-license{ max-height:46px; opacity:.95; }
.copyright{ text-align:center; border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding:18px 0; font-size:.85rem; color:#bcd4ea; }

/* ---------- FLOATING SOCIAL RAIL ---------- */
.social-rail{ position:fixed; right:8px; top:50%; transform:translateY(-50%); z-index:1040; display:flex; flex-direction:column; gap:10px; }
.sr-item{ width:54px; height:54px; border-radius:50%; background:linear-gradient(180deg,#28a9e6,#0e7fc0); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,40,80,.3); }
.sr-item i{ font-size:1.1rem; line-height:1; }
.sr-item span{ font-size:.52rem; margin-top:2px; }
.sr-item:hover{ color:#fff; filter:brightness(1.08); }

/* ---------- BACK TO TOP + REGISTER TAB ---------- */
.back-top{ position:fixed; left:16px; bottom:24px; width:48px; height:48px; border-radius:50%; border:0;
  background:linear-gradient(180deg,#28a9e6,#0e7fc0); color:#fff; box-shadow:0 4px 10px rgba(0,40,80,.3);
  display:none; align-items:center; justify-content:center; font-size:1.2rem; z-index:1040; }
.back-top.show{ display:flex; }
.register-tab{ position:fixed; right:0; bottom:120px; writing-mode:vertical-rl; background:linear-gradient(180deg,#7b2ff7,#5a14d0);
  color:#fff; font-weight:700; padding:14px 6px; border-radius:8px 0 0 8px; z-index:1040; box-shadow:-2px 2px 8px rgba(0,0,0,.25); }
.register-tab:hover{ color:#fff; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:991px){
  .main-nav{ top:62px; }
  .section-title>span{ font-size:1.05rem; }
  .social-rail{ display:none; }
  .jackpot-counter{ font-size:1.3rem; }
}
@media (max-width:575px){
  .btn-register,.btn-login{ padding:.4rem .8rem; font-size:.85rem; }
  .section-title>span{ font-size:.95rem; padding:.45rem 1.8rem .45rem 1rem; }
}