/* =====================================================================
   SLOT SITE TEMPLATE — style.css
   โครงสร้าง/รูปแบบ อ้างอิงจากเว็บคู่แข่ง (ธีมเทาเข้ม + เหลือง)
   แก้สีทั้งเว็บได้ที่บล็อก :root ด้านล่าง
   ===================================================================== */
:root{
  --bg:#1b1c20;            /* พื้นหลังหน้า */
  --panel:#535357;         /* พื้นการ์ด */
  --panel-2:#292b32;       /* พื้นรอง */
  --line:#eed93a;          /* เส้น/ขอบเหลือง */
  --accent:#eed93a;        /* สีเน้น */
  --accent-2:#ffd400;
  --text:#e9e9ee;
  --muted:#a9a9b3;
  --dark:#0d0d0d;
  --radius:14px;
  --maxw:1200px;
  --header-h:64px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:15px;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 14px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-block;padding:9px 18px;border-radius:999px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#1a1a1a;font-weight:700;border:0;cursor:pointer;font-size:14px;
  transition:.15s transform,.15s filter;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--accent)}
.btn-sm{padding:6px 14px;font-size:13px}

/* =====================================================================
   1) TOPBAR  (ติดบนสุด)
   ===================================================================== */
.topbar{background:#111216;border-bottom:1px solid #303138;position:relative;z-index:60}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;flex-wrap:wrap}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.topbar-item img{width:18px;height:18px}
.lang-btn{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer}
.lang-flag{width:22px;height:14px;border-radius:2px;overflow:hidden;background:linear-gradient(90deg,#a51931 0 20%,#f4f5f8 20% 40%,#2d2a4a 40% 60%,#f4f5f8 60% 80%,#a51931 80%)}

/* =====================================================================
   2) HEADER + NAV
   ===================================================================== */
.site-header{
  background:linear-gradient(180deg,#23242a,#1b1c20);
  border-bottom:2px solid var(--line);
  position:sticky;top:0;z-index:55;
}
.header-inner{display:flex;align-items:center;gap:16px;min-height:var(--header-h)}
.logo img{height:40px;width:auto}
.main-nav{margin-left:auto}
.menu{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.menu>li>a{
  display:flex;align-items:center;gap:6px;padding:8px 11px;border-radius:10px;
  font-size:13.5px;color:var(--text);white-space:nowrap;
}
.menu>li>a img{width:20px;height:20px;border-radius:4px}
.menu>li>a:hover,.menu>li[data-active="true"]>a{background:#2f3138;color:var(--accent)}
.menu .has-sub{position:relative}
.menu .submenu{
  position:absolute;top:100%;left:0;min-width:210px;background:#26272d;
  border:1px solid var(--line);border-radius:10px;padding:8px;display:none;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.menu .has-sub:hover .submenu{display:block}
.menu .submenu a{display:block;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--muted)}
.menu .submenu a:hover{background:#33343c;color:var(--accent)}
.burger{display:none;background:none;border:0;color:var(--accent);font-size:24px;cursor:pointer}
.header-actions{display:flex;align-items:center;gap:8px}

/* =====================================================================
   3) BANNER
   ===================================================================== */
.banner{margin:16px auto;max-width:var(--maxw);padding:0 14px}
.banner a{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.banner img{width:100%;height:auto}

/* =====================================================================
   4) ANNOUNCEMENT
   ===================================================================== */
.announcement{
  background:var(--panel-2);border:1px solid #3b3d46;border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:12px 16px;margin:0 0 16px;
  display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;
}
.announcement img{width:18px;height:18px;margin-top:3px}
.announcement .ann-text{flex:1;min-width:220px;font-size:14px;color:var(--text)}
.announcement .ann-date{font-size:12px;color:var(--muted);white-space:nowrap}

/* =====================================================================
   5) แจ็คพอต
   ===================================================================== */
.jackpot{
  background:linear-gradient(135deg,#2a2b31,#1e1f24);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;margin:0 0 18px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.jackpot img{height:34px;width:auto}
.jackpot .jp-label{font-size:13px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.jackpot .jp-value{font-size:26px;font-weight:800;color:var(--accent-2);font-variant-numeric:tabular-nums}

/* =====================================================================
   6) เกม (GRID)
   ===================================================================== */
.section-title{
  display:flex;align-items:center;gap:10px;margin:22px 0 14px;
  font-size:19px;color:var(--accent);border-bottom:2px solid var(--line);padding-bottom:8px;
}
.section-title img{width:22px;height:22px}
.game-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:8px}
.game-item{background:var(--panel-2);border:1px solid #3b3d46;border-radius:12px;overflow:hidden;transition:.15s}
.game-item:hover{border-color:var(--line);transform:translateY(-3px)}
.game-item .thumb{position:relative;aspect-ratio:1/1;background:#202127;overflow:hidden}
.game-item .thumb img{width:100%;height:100%;object-fit:cover}
.game-item .play{
  position:absolute;inset:auto 0 0 0;text-align:center;padding:7px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8));
  color:var(--accent);font-weight:700;font-size:13px;
}
.game-item .name{padding:8px 10px;font-size:12.5px;color:var(--muted);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-more{text-align:center;margin:18px 0 28px}

/* =====================================================================
   7) เนื้อหา SEO + สารบัญ
   ===================================================================== */
.seo-wrap{margin:34px 0}
.seo-hero h1{font-size:clamp(20px,2.6vw,30px);line-height:1.4;margin:0 0 18px;color:var(--accent)}
.seo-grid{display:grid;gap:26px;align-items:start}
@media(min-width:992px){.seo-grid{grid-template-columns:minmax(240px,288px) minmax(0,1fr);gap:28px 36px}}
.seo-toc nav{
  position:sticky;top:80px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--radius);padding:16px 14px;
}
.seo-toc h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;color:var(--accent)}
.seo-toc ol,.seo-toc ul{display:grid;gap:6px}
.seo-toc a{display:block;padding:9px 12px;border-radius:10px;font-size:13px;line-height:1.4;color:var(--text)}
.seo-toc a:hover{background:#3a3c45;color:var(--accent)}
.seo-content{border:1px solid var(--line);background:var(--panel);border-radius:16px;
  padding:22px 16px 28px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
@media(min-width:992px){.seo-content{padding:28px 32px 36px}}
.seo-content h2{scroll-margin-top:96px;margin:26px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--line);
  font-size:clamp(19px,2.2vw,24px);line-height:1.35;color:var(--accent)}
.seo-content h3{margin:22px 0 10px;padding:10px 14px;border-radius:10px;border-left:4px solid var(--dark);
  background:var(--panel-2);font-size:17px;line-height:1.42;color:var(--accent)}
.seo-content p{margin:14px 0;font-size:15px;line-height:1.78}
.seo-content ul,.seo-content ol{margin:12px 0 18px;padding-left:1.35rem}
.seo-content ul li{list-style:disc}
.seo-content ol li{list-style:decimal;margin:8px 0}
.seo-content li{margin:9px 0;line-height:1.68}
.seo-content strong{color:var(--accent-2)}
.seo-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.seo-table th,.seo-table td{border:1px solid #4a4c56;padding:9px 11px;text-align:left}
.seo-table th{background:var(--panel-2);color:var(--accent)}

/* ---------- FAQ ---------- */
.faq{margin:26px 0}
.faq details{background:var(--panel-2);border:1px solid #3b3d46;border-radius:12px;margin-bottom:10px;overflow:hidden}
.faq details[open]{border-color:var(--line)}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:600;color:var(--accent);list-style:none;position:relative;padding-right:42px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 16px 16px;font-size:14.5px;line-height:1.75;color:var(--text)}

/* =====================================================================
   8) LINK ภายใน (คีย์เวิร์ด)
   ===================================================================== */
.kw-cloud{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.kw-cloud a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:var(--panel-2);border:1px solid #3b3d46;font-size:13px;color:var(--muted)}
.kw-cloud a img{width:18px;height:18px;border-radius:4px}
.kw-cloud a:hover{border-color:var(--line);color:var(--accent)}

/* =====================================================================
   9) FOOTER
   ===================================================================== */
.site-footer{
  margin-top:36px;padding:34px 0 18px;border-top:2px solid var(--line);
  background:#141519 url("images/footer-background_4673abc7-46e54423b870.jpg") center/cover no-repeat;
}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px}
.footer-col h4{margin:0 0 12px;font-size:14px;color:var(--accent);letter-spacing:.04em}
.footer-col a{display:block;padding:5px 0;font-size:13px;color:var(--muted)}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{margin-top:26px;padding-top:16px;border-top:1px solid #303138;display:flex;
  gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.age-badge{display:flex;align-items:center;gap:8px}
.age-badge img{width:34px;height:auto}
.browser-row{display:flex;gap:8px;align-items:center}
.browser-row img{width:26px;height:auto;opacity:.75}

/* =====================================================================
   10) RESPONSIVE
   ===================================================================== */
@media(max-width:991px){
  .burger{display:block}
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:#1c1d22;
    transform:translateX(100%);transition:.25s;padding:20px;overflow-y:auto;z-index:70}
  .main-nav.open{transform:none}
  .menu{flex-direction:column;align-items:stretch}
  .menu .submenu{position:static;display:block;border:0;background:transparent;padding:0 0 0 12px;box-shadow:none}
  .seo-toc nav{position:static}
}
@media(max-width:575px){
  .game-list{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px}
  .topbar-left{display:none}
}