/* =============================================================================
   RAN MOBILE BKK - ระบบดีไซน์ของเว็บไซต์
   สีแดง/ทองสุ่มมาจากโลโก้จริง (assets-src/fb-logo.jpg): แดง #99221D, ทอง #C99858
   เขียนเป็น CSS ล้วน ไม่มีขั้นตอน build - อัปเดตบน VPS แค่ก๊อปไฟล์ทับ
   ============================================================================= */

:root{
  /* พื้น */
  --bg:#08090C; --bg-2:#040507; --panel:#101218; --panel-2:#15181F;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);

  /* แบรนด์ */
  --red:#B31E22; --red-hot:#E4262C; --red-deep:#7A1512;
  --gold:#C99858; --gold-lt:#EBC98D; --silver:#D8DCE3;

  /* ตัวอักษร */
  --fg:#FFFFFF; --fg-2:#A9AFBC; --fg-3:#767D8B;

  /* สถานะ */
  --ok:#2BD576; --warn:#FFB020; --bad:#FF4D4F;

  /* รูปทรง: มุมตัดเฉียง ไม่ใช่มุมมน */
  --cut:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --cut-sm:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  --cut-btn:polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);

  --nav-h:66px;
  --wrap:1280px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:Kanit,'Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.6;
  overflow-x:hidden;                      /* §11: ห้ามเลื่อนแนวนอนที่ระดับ body */
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}
ul{list-style:none}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::selection{background:var(--red);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,5vw,88px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0} /* honeypot */

/* ไอคอน: ทุกอันมาจาก /img/icons.svg ที่วาดเอง ไม่มีอิโมจิในเว็บนี้ */
.i{width:1.25em;height:1.25em;flex:none;vertical-align:-.22em}
.i-lg{width:1.7em;height:1.7em}
.i-xl{width:2.4em;height:2.4em}

/* ============================================================ ปุ่ม */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:14.5px;padding:12px 20px;min-height:44px;  /* §11: touch target */
  clip-path:var(--cut-btn);transition:.18s ease;text-align:center;
}
.btn-red{background:linear-gradient(100deg,var(--red),#D4472A);color:#fff;box-shadow:0 6px 22px rgba(179,30,34,.4)}
.btn-red:hover{filter:brightness(1.13);transform:translateY(-2px)}
.btn-gold{background:linear-gradient(100deg,var(--gold),var(--gold-lt));color:#150E06;font-weight:700}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-2);color:#E6E8EE}
.btn-ghost:hover{border-color:var(--red);background:rgba(179,30,34,.12)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ============================================================ แถบบน */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;background:rgba(4,5,7,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:44px;height:44px;object-fit:contain}
.brand-tx{font-weight:700;font-style:italic;font-size:17px;line-height:1.05;letter-spacing:.3px;white-space:nowrap}
.brand-tx b{color:var(--red-hot)}
.brand-tx span{display:block;font-style:normal;font-weight:400;font-size:8.5px;letter-spacing:3.4px;color:var(--fg-3)}
.mnu{display:flex;gap:20px;font-size:14.5px;font-weight:500}
.mnu a{position:relative;padding:8px 0;color:#CFD3DC}
.mnu a:hover,.mnu a.on{color:#fff}
.mnu a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--red-hot);transition:.22s}
.mnu a:hover::after,.mnu a.on::after{right:0}
.hdr-sp{flex:1}
.hdr-user{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line-2);clip-path:var(--cut-sm)}

/* เมนูมือถือ */
.drawer{position:fixed;inset:0;z-index:70;background:rgba(4,5,7,.97);backdrop-filter:blur(6px);
  display:none;flex-direction:column;padding:16px 20px calc(24px + env(safe-area-inset-bottom))}
.drawer.open{display:flex}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.drawer nav{display:flex;flex-direction:column;margin-top:8px}
.drawer nav a{padding:15px 4px;border-bottom:1px solid var(--line);font-size:17px;display:flex;align-items:center;gap:12px}
.drawer nav a .i{color:var(--red-hot)}
.drawer .btn{margin-top:16px}

/* ============================================================ ฮีโร่ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);
  filter:saturate(1.1) contrast(1.02) brightness(1.22);
  background-image:url('/img/hero-mobile-v2.jpg')}
@media (min-width:768px){ .hero-bg{background-image:url('/img/hero-desktop-v2.jpg')} }
/* เปิดภาพ hero ให้เห็นชัด ๆ แล้วไปพึ่งเงาตัวอักษรแทนการถมดำทั้งภาพ
   เหลือความมืดไว้เฉพาะสองที่ที่จำเป็นจริง: บนสุดให้แถบเมนูอ่านออก และล่างสุดให้ต่อกับเนื้อหาถัดไป */
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(110% 80% at 50% 42%,rgba(4,5,7,.16) 0%,rgba(4,5,7,.06) 46%,rgba(4,5,7,0) 72%,rgba(4,5,7,.16) 100%),
    linear-gradient(180deg,rgba(4,5,7,.62) 0%,rgba(4,5,7,0) 20%,rgba(4,5,7,.06) 62%,rgba(4,5,7,.90) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.hero .wrap{position:relative;z-index:2;padding-top:calc(var(--nav-h) + 28px);padding-bottom:36px;
  display:flex;justify-content:center}
.hero-in{max-width:660px;text-align:center;margin-inline:auto}
/* ที่ว่างขนาดเท่าโลโก้เดิม: เอาโลโก้ออกแล้วแต่ทุกอย่างต้องอยู่ตำแหน่งเดิม และเห็นตัวละครในภาพ */
.hero-logo-gap{height:min(320px,66vw);margin:0 auto 2px}
/* มือถือ: ภาพ hero ถูกครอปจนหัวตัวละครอยู่สูงอยู่แล้ว ช่องว่างเลยกลายเป็นแถบดำเปล่า ๆ - ตัดทิ้ง */
@media (max-width:900px){ .hero-logo-gap{height:0;margin:0} }
.hero-logo{width:min(320px,66vw);margin:0 auto 2px;
  /* ไฟล์โลโก้ถูกแปลงให้พื้นดำเป็นโปร่งใสแล้ว (ดู README) จึงวางทับภาพ hero ได้โดยไม่มีกรอบดำ */
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.65))}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:3px;color:var(--gold-lt);
  border:1px solid rgba(201,152,88,.45);background:rgba(8,9,12,.55);backdrop-filter:blur(3px);
  padding:5px 14px;margin-bottom:16px;text-transform:uppercase;clip-path:var(--cut-sm)}
h1.hero-h{font-size:clamp(34px,5.6vw,72px);line-height:1;font-weight:700;font-style:italic;letter-spacing:-.5px;
  text-shadow:0 4px 20px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.95)}
h1.hero-h em{color:var(--red-hot);font-style:italic;
  text-shadow:0 0 34px rgba(228,38,44,.65),0 4px 18px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.95)}
.hero p.lead{margin-top:15px;color:#DDE1E8;font-size:clamp(14.5px,1.4vw,17px);max-width:560px;margin-inline:auto;
  text-shadow:0 2px 12px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.9)}

/* นาฬิกานับถอยหลัง */
/* --- OBT: แถบลอยใต้เมนู - ใบปฏิทิน + นาฬิกานับถอยหลังพลิกเลข ---------------- */
/* แถบเต็มความกว้างจอ คาดใต้เมนู เนื้อหากึ่งกลาง */
.obt-bar{position:fixed;top:var(--nav-h);left:0;right:0;z-index:55;
  display:flex;gap:28px;align-items:center;justify-content:center;padding:16px 4vw 20px;
  background:rgba(5,6,9,.84);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
/* ตัวเลขนับถอยหลังในแถบนี้ใหญ่กว่าค่ากลางของ .cd ปกติ */
.obt-bar .cd{gap:12px}
.obt-bar .cd div{max-width:130px;min-width:86px;padding:10px 0}
.obt-bar .cd b{font-size:clamp(34px,5vw,52px)}
.obt-bar .cd span{font-size:12.5px}
.obt-bar .cd-head{font-size:13px}
.cal{min-width:150px;background:linear-gradient(180deg,rgba(22,24,32,.96),rgba(12,13,18,.96));
  border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.45)}
.cal-top{background:linear-gradient(90deg,#8f1d1d,#c22525);color:#ffe9c9;font-weight:700;
  font-size:13px;letter-spacing:1px;padding:7px 12px;white-space:nowrap}
.cal-day{font-size:clamp(46px,6vw,64px);font-weight:800;font-style:italic;line-height:1.05;
  color:#ffd76a;padding:3px 12px 0;text-shadow:0 2px 12px rgba(245,179,1,.35);
  font-variant-numeric:tabular-nums}
.cal-sub{font-size:12px;color:var(--fg-3);letter-spacing:.4px;padding:1px 8px 8px;white-space:nowrap}
.cd-side{display:flex;flex-direction:column;justify-content:center;gap:5px}
.cd-head{font-size:10.5px;color:var(--fg-3);letter-spacing:2px;text-align:center;text-transform:uppercase}
.cd{display:flex;gap:8px;margin:0;justify-content:center;perspective:340px}
.cd b.flip{animation:cdflip .55s cubic-bezier(.2,.9,.3,1.1)}
@keyframes cdflip{
  0%{transform:rotateX(-92deg);opacity:.15;filter:brightness(1.6)}
  60%{transform:rotateX(14deg);opacity:1}
  100%{transform:rotateX(0)}
}
@media (prefers-reduced-motion:reduce){ .cd b.flip{animation:none} }
/* บรรทัดเล็กใต้นาฬิกา (site.launchNote เช่นวันปิด CBT) + ปุ่มเข้าเกมข้างนาฬิกา (23 ก.ย. 2569) */
.cd-note{font-size:12px;color:var(--fg-3);text-align:center;letter-spacing:.4px}
.obt-bar .cd-play{align-self:center;white-space:nowrap}
@media (max-width:640px){ .obt-bar .cd-play{width:100%;justify-content:center} }
@media (max-width:640px){
  /* จอแคบ: ใบปฏิทินยุบเป็นแถวเดียว นาฬิกาเรียงเต็มความกว้าง - ห้ามล้นขอบจอ */
  .obt-bar{flex-direction:column;gap:6px;padding:8px 10px 12px}
  .cal{display:flex;align-items:baseline;justify-content:center;gap:8px;min-width:0;
    background:transparent;border:none;box-shadow:none;border-radius:0}
  .cal-top{border-radius:6px;padding:3px 8px;font-size:11px;align-self:center}
  .cal-day{font-size:26px;padding:0;line-height:1}
  .cal-sub{padding:0;font-size:11px}
  .cd-side{width:100%}
  .obt-bar .cd{gap:6px;width:100%}
  .obt-bar .cd div{flex:1;min-width:0;max-width:none;padding:8px 0}
  .obt-bar .cd b{font-size:clamp(22px,8vw,34px)}
  .obt-bar .cd span{font-size:10.5px}
  .obt-bar .cd-head{font-size:11px}
}
.cd div{flex:1;max-width:88px;background:rgba(16,18,24,.86);border:1px solid var(--line);clip-path:var(--cut-sm);
  padding:10px 0;text-align:center}
.cd b{display:block;font-size:clamp(22px,4vw,30px);font-weight:700;font-style:italic;line-height:1;font-variant-numeric:tabular-nums}
.cd span{font-size:10.5px;color:var(--fg-3);letter-spacing:1px}

/* ============================================================ กล่องลงทะเบียน */
/* รูปโปรโมชั่นเหนือฟอร์มลงทะเบียน (รูปเดียวกับป๊อปอัป) - 19 ก.ย. 2569 */
/* 19 ก.ย. 2569 เจ้าของ: "เล็กลงหน่อย ใหญ่ไป" - จำกัด 300px ชิดซ้ายของคอลัมน์ฟอร์ม */
.home-promo{max-width:300px;margin-bottom:14px;border:1px solid var(--line);border-top:3px solid var(--gold);background:rgba(8,9,12,.94);overflow:hidden}
.home-promo a,.home-promo picture{display:block}
.home-promo img{display:block;width:100%;height:auto}
.prereg{background:rgba(8,9,12,.94);backdrop-filter:blur(4px);border:1px solid var(--line);border-top:3px solid var(--red);
  padding:20px;max-width:560px;margin-inline:auto;text-align:left;clip-path:var(--cut)}
.prereg h2{font-size:17px;font-weight:600;display:flex;align-items:center;gap:9px}
.prereg h2 .i{color:var(--gold)}
.prereg .sub{font-size:13px;color:var(--fg-3);margin-top:4px}
.field{display:flex;gap:9px;margin-top:14px}
.inp{flex:1;min-width:0;background:#07080B;border:1px solid var(--line-2);color:#fff;padding:13px 14px;
  font-size:16px;clip-path:var(--cut-sm)}      /* 16px: กัน iOS ซูมอัตโนมัติตอนโฟกัส */
.inp::placeholder{color:#5E6472}
/* ช่องรหัสผ่าน: ปุ่มตาลอยอยู่ในช่อง เว้นที่ด้านขวาไม่ให้ตัวอักษรลอดใต้ปุ่ม */
.pw-wrap{position:relative;display:block;width:100%}
.prereg .fields .pw-wrap,.field .pw-wrap{display:block}
.pw-wrap .inp{width:100%;padding-right:46px}
.pw-eye{position:absolute;top:0;right:0;height:100%;width:44px;display:grid;place-items:center;
  background:none;border:0;color:#8A90A0;cursor:pointer;padding:0}
.pw-eye:hover,.pw-eye:focus-visible{color:var(--gold-lt);outline:none}
.pw-eye .i{width:20px;height:20px}
.inp:focus{outline:none;border-color:var(--red-hot);background:#0A0B10}
.prereg .fields{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-top:6px}
.prereg .lbl{margin:12px 0 5px;font-size:12.5px;color:#C3C8D2}
.prereg .lbl span{color:var(--fg-3);font-size:11.5px;margin-left:5px;font-weight:400}
.counter-link{margin-left:auto;font-size:12.5px;color:var(--gold);text-decoration:underline}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:12.5px;color:var(--fg-2);cursor:pointer}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--red)}
.consent a{color:var(--gold);text-decoration:underline}
.counter{display:flex;align-items:center;gap:9px;margin-top:15px;font-size:14px;color:var(--fg-2)}
.counter b{font-size:24px;color:var(--gold-lt);font-style:italic;font-weight:700;font-variant-numeric:tabular-nums}
.msg{margin-top:12px;padding:11px 13px;font-size:13.5px;clip-path:var(--cut-sm);display:none;align-items:flex-start;gap:9px}
.msg.show{display:flex}
.msg-ok{background:rgba(43,213,118,.12);border:1px solid rgba(43,213,118,.4);color:#B6F5D2}
.msg-err{background:rgba(255,77,79,.12);border:1px solid rgba(255,77,79,.4);color:#FFC9CA}

/* จุดสถานะ */
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--fg-3)}
.dot.on{background:var(--ok);box-shadow:0 0 9px var(--ok);animation:pulse 2.4s infinite}
.dot.off{background:var(--bad);box-shadow:0 0 9px rgba(255,77,79,.7)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ============================================================ แถบสถานะสด */
.live{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#0A0B0F,#14161D 60%,#0A0B0F)}
.live .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;min-height:56px;padding-block:10px;font-size:14px}
.live .it{display:flex;align-items:center;gap:8px;color:#C3C8D2}
.live .it b{color:#fff;font-variant-numeric:tabular-nums}
.live .it .i{color:var(--fg-3)}
.live .rate{color:var(--gold-lt);font-weight:600}
.live .rate .i{color:var(--gold)}
.live .upd{margin-left:auto;color:var(--fg-3);font-size:12px}

/* ============================================================ ส่วนเนื้อหา */
.sec{padding:64px 0}
.sec-alt{background:linear-gradient(180deg,#06070A,var(--bg))}
.sec-h{display:flex;align-items:center;gap:13px;margin-bottom:24px;flex-wrap:wrap}
.sec-h i.bar{width:5px;height:26px;background:var(--red);transform:skewX(-12deg);flex:none}
.sec-h h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;font-style:italic}
.sec-h .more{margin-left:auto;color:var(--fg-2);font-size:13.5px;display:flex;align-items:center;gap:6px}
.sec-h .more:hover{color:var(--gold)}

/* ความคืบหน้า milestone */
.pbar{height:6px;background:#171A21;position:relative;margin-bottom:8px;overflow:hidden}
.pbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .8s ease}
.pbar-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--fg-3);margin-bottom:26px}

/* หัวตารางรางวัล: ยอดผู้ติดตามปัจจุบัน + พอยต์ที่ปลดล็อกแล้ว */
.ms-head{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  padding:14px 18px;clip-path:var(--cut-sm)}
.ms-head .k{display:block;font-size:12px;color:var(--fg-3)}
.ms-head b{font-size:24px;font-weight:700;font-style:italic;font-variant-numeric:tabular-nums}
.ms-head b.gold{color:var(--gold-lt)}
.ms-head .btn{margin-left:auto}
/* เหรียญพ้อย: ไฟล์จริงจากไคลเอนต์เกม (gui/slot/ran_mobile_coin03) */
.coin{display:inline-block;vertical-align:-.25em;margin-right:6px;
  filter:drop-shadow(0 2px 6px rgba(201,152,88,.45))}
.ms .thumb img{width:64px;height:64px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.ms .reward{font-size:20px;font-weight:700;font-style:italic;color:var(--gold-lt);line-height:1.2}
.ms .reward span{font-size:12px;color:var(--fg-2);font-style:normal;font-weight:400}
.ms{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:13px}
.ms .c{background:var(--panel);border:1px solid var(--line);padding:18px 14px;text-align:center;
  clip-path:var(--cut);position:relative;transition:.2s}
.ms .c:hover{transform:translateY(-4px);border-color:rgba(179,30,34,.55)}
.ms .num{font-size:12px;color:var(--fg-3);letter-spacing:.5px}
.ms .thumb{height:74px;display:grid;place-items:center;margin:10px 0 8px;color:var(--gold-lt);
  background:radial-gradient(circle,rgba(201,152,88,.16),transparent 68%)}
.ms .thumb .i{width:40px;height:40px;stroke-width:1.6}
.ms .name{font-size:13.5px;font-weight:500;line-height:1.4}
.ms .det{font-size:11.5px;color:var(--fg-3);margin-top:4px}
.ms .c.locked{opacity:.4;filter:grayscale(.85)}
.ms .flag{position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:10px;padding:3px 11px;
  clip-path:polygon(0 0,100% 0,82% 100%,0 100%);display:flex;align-items:center;gap:4px}
.ms .flag .i{width:12px;height:12px}

/* การ์ดข่าว */
.tabs{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;font-size:13.5px;font-weight:500;padding:9px 17px;border:1px solid var(--line-2);
  color:#C3C8D2;clip-path:var(--cut-sm)}
.tabs a.on{background:var(--red);border-color:var(--red);color:#fff}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--line);clip-path:var(--cut);transition:.2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);border-color:rgba(179,30,34,.55)}
.card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#1A1E27,#0B0D12);position:relative;
  display:grid;place-items:center;color:#2B303B;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb .i{width:44px;height:44px}
.card .cat{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:10.5px;
  padding:3px 11px;font-weight:500;letter-spacing:.4px}
.card .cat.event{background:var(--gold);color:#150E06}
.card .cat.notice{background:#2E3542}
.card .bd{padding:15px 16px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:15.5px;font-weight:500;line-height:1.45}
.card p{font-size:13px;color:var(--fg-3);line-height:1.55}
.card time{font-size:12px;color:var(--fg-3);margin-top:auto;display:flex;align-items:center;gap:6px}

/* การ์ดฟีเจอร์ */
.grid-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feat{background:var(--panel);border:1px solid var(--line);padding:22px 20px;clip-path:var(--cut);transition:.2s}
.feat:hover{transform:translateY(-4px);border-color:rgba(201,152,88,.45)}
.feat .i{color:var(--gold);width:34px;height:34px;stroke-width:1.6}
.feat h3{font-size:16px;font-weight:600;margin:12px 0 6px}
.feat p{font-size:13.5px;color:var(--fg-3)}

/* กล่องดาวน์โหลด */
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:760px}

/* หน้าตาการ์ดอยู่ในหมวด "ดาวน์โหลด" ท้ายไฟล์ที่เดียว - เคยเขียนไว้สองที่แล้วชุดท้ายทับ
   ชุดต้น ทำให้สีที่ตั้งไว้ไม่ขึ้นเลย (เจ้าของ: "ไม่มีสี ผมต้องการสีชัดๆ") */
.dl b{display:block;font-size:17px;font-weight:700;color:#fff;letter-spacing:.2px}
/* ป้ายเวอร์ชันบนปุ่มดาวน์โหลด (เจ้าของขอ 15 ก.ย. 2569) - ชื่อคลาสใหม่ ตรวจแล้วว่าไม่ชนของเดิม
   ใช้สีของปุ่มแม่ (--dl) จึงกลมกลืนทั้งปุ่มเขียว Android และปุ่มฟ้า Windows เอง */
.dl-ver{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.3px;vertical-align:middle;
  color:var(--dl,#9fb0c9);background:color-mix(in srgb,var(--dl,#9fb0c9) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--dl,#9fb0c9) 38%,transparent)}
.dl span{font-size:13px;color:rgba(255,255,255,.82)}

/* ลูกศรโหลดด้านขวา ขึ้นเฉพาะปุ่มที่กดได้จริง */
.dl .dl-go{width:19px;height:19px;margin-left:auto;opacity:.75;filter:none}
.dl a:hover .dl-go{opacity:1;transform:translateY(2px);transition:.18s}

/* ฝั่งที่ยังไม่เปิด - เก็บสีประจำฝั่งไว้แต่หรี่ลง ยังดูออกว่าเป็นของใคร
   แต่ก็ดูออกว่ากดไม่ได้ (เจ้าของอยากให้ Android เขียวอยู่ดีแม้ยังไม่เปิด) */
.dl a.dl-soon{opacity:.5;filter:saturate(.7)}
.dl a.dl-soon:hover{transform:none;
  box-shadow:none;border-color:color-mix(in srgb, var(--dl) 55%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--dl) 42%, #0B0D12) 0%,
    color-mix(in srgb, var(--dl) 20%, #0B0D12) 46%,
    color-mix(in srgb, var(--dl) 7%, #0B0D12) 100%)}

/* กล่องนับถอยหลังตอนกดดาวน์โหลดถี่เกิน */
.dl-wait{display:flex;align-items:center;gap:10px;margin-top:16px;max-width:760px;
  background:#1A1206;border-left:3px solid var(--warn);padding:12px 16px;
  color:#E8D3A8;font-size:13.5px}
.dl-wait .i{width:18px;height:18px;color:var(--warn);flex:none}
.dl-wait b{color:var(--warn);font-size:15px;font-variant-numeric:tabular-nums}

/* ลิงก์ดาวน์โหลดหลายทาง (mirror) */
.mir{margin-top:22px;max-width:760px}
.mir-lead{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;
  font-size:13px;color:var(--fg-3)}
.mir-lead .i{width:18px;height:18px;color:var(--gold);flex:none}
.mir-lead b{font-size:15px;font-weight:800;color:var(--gold);letter-spacing:.2px}
.mir-lead span{color:var(--fg-3)}
@media(max-width:560px){ .mir-lead b{font-size:14px} }
.mir-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-bottom:12px}
.mir-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fg-2);
  min-width:104px;font-weight:600;padding-top:7px}
.mir-tag .i{width:16px;height:16px;color:var(--silver)}
/* ★ ปุ่มช่องทางสำรองต้องใช้สีประจำฝั่งเหมือนปุ่มแม่ - เดิมเป็นชิปเทาจาง ๆ จนผู้เล่นนึกว่ากดไม่ได้
   (เจ้าของแจ้ง 12 ก.ย. 2569: "คนนึงว่ากดไม่ได้ สีตามปุ่มแม่มันเลย") สีตรงกับ .dl-and / .dl-win */
.mir-row a[data-dl="pc"]{--mir:#48A2F0}
.mir-row a[data-dl="apk"]{--mir:#3DDC84}
.mir-row a{font-size:12.5px;font-weight:700;padding:7px 13px;
  background:color-mix(in srgb, var(--mir, #8892a4) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--mir, #8892a4) 62%, transparent);
  clip-path:var(--cut-sm);color:var(--mir, var(--fg-2));transition:.15s;white-space:nowrap}
.mir-row a:hover{background:var(--mir, var(--red));color:#08111C;
  border-color:var(--mir, var(--red));
  box-shadow:0 0 14px color-mix(in srgb, var(--mir, var(--red)) 45%, transparent)}
/* ปุ่มที่ตกบรรทัดต้องเรียงตรงกับบรรทัดแรก ไม่ไหลไปชิดซ้ายใต้ชื่อฝั่ง */
.mir-links{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
@media(max-width:560px){.mir-tag{min-width:100%}}

/* ชุมชน */
.soc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.soc a{display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 12px;background:var(--panel);
  border:1px solid var(--line);clip-path:var(--cut-sm);transition:.2s;font-size:13.5px;text-align:center}
.soc a:hover{transform:translateY(-3px);border-color:var(--red)}
.soc .i{width:28px;height:28px;color:var(--fg-2)}
.soc a:hover .i{color:var(--red-hot)}
.soc a.off{opacity:.42;pointer-events:none}

/* กล่องบันทึก/คำเตือน */
.note{background:#12141A;border-left:3px solid var(--gold);padding:14px 17px;color:#C3C8D2;font-size:13.5px;
  display:flex;gap:11px;align-items:flex-start}
.note .i{color:var(--gold);flex:none;margin-top:2px}

/* ตาราง (ทุกตารางเลื่อนในกล่องตัวเอง ไม่ดัน layout - §11) */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--panel-2);color:var(--fg-2);font-weight:500;font-size:13px;white-space:nowrap}

/* บทความ */
.article{max-width:820px}
.article h1{font-size:clamp(24px,3.4vw,36px);font-weight:700;line-height:1.25;margin-bottom:12px}
.article .meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--fg-3);font-size:13px;margin-bottom:26px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.article .meta span{display:flex;align-items:center;gap:6px}
.body-tx{font-size:16px;color:#D2D6DE}
.body-tx p{margin-bottom:16px}
.body-tx h2{font-size:20px;font-weight:600;margin:28px 0 12px}
.body-tx ul{list-style:disc;padding-left:22px;margin-bottom:16px}
.body-tx li{margin-bottom:7px}
.body-tx a{color:var(--gold);text-decoration:underline}
.body-tx img{margin:18px 0;clip-path:var(--cut)}

/* หน้าเพจย่อย */
.page-head{padding:calc(var(--nav-h) + 44px) 0 32px;background:linear-gradient(180deg,#0B0D12,var(--bg));
  border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(24px,3.6vw,38px);font-weight:700;font-style:italic}
.page-head p{color:var(--fg-3);margin-top:8px;font-size:14.5px}
.crumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--fg-3);margin-bottom:12px}
.crumb a:hover{color:var(--gold)}

/* หน้าอันดับ/สถิติ */
.stat{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.stat .b{background:var(--panel);border:1px solid var(--line);padding:18px;clip-path:var(--cut-sm)}
.stat .b .k{font-size:12.5px;color:var(--fg-3);display:flex;align-items:center;gap:7px}
.stat .b .v{font-size:clamp(22px,3vw,30px);font-weight:700;font-style:italic;margin-top:7px;font-variant-numeric:tabular-nums}
.stat .b .v.ok{color:var(--ok)} .stat .b .v.bad{color:var(--bad)} .stat .b .v.gold{color:var(--gold-lt)}

/* ============================================================ ท้ายเว็บ */
.ftr{border-top:1px solid var(--line);background:var(--bg-2);padding:40px 0 28px;color:var(--fg-3);font-size:13.5px}
.ftr-top{display:flex;gap:34px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line)}
.ftr-brand{max-width:320px}
.ftr-brand p{margin-top:12px;font-size:13px;line-height:1.7}
.ftr-col h4{color:#fff;font-size:14px;font-weight:600;margin-bottom:11px}
.ftr-col a{display:block;padding:4px 0}
.ftr-col a:hover{color:var(--gold)}
.ftr-bt{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding-top:20px;font-size:12.5px}
.ftr-bt .sp{margin-left:auto}

/* ปุ่มลอยด้านขวา (เดสก์ท็อป) */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:50;display:grid;gap:1px}
.rail a{width:44px;height:44px;display:grid;place-items:center;background:rgba(16,18,24,.92);
  border:1px solid var(--line);color:var(--fg-2);transition:.18s}
.rail a:hover{background:var(--red);color:#fff}

/* แถบปุ่มติดขอบล่าง (มือถือ) */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;gap:10px;padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(4,5,7,.4),rgba(4,5,7,.97))}
.sticky-cta .btn{flex:1;font-size:14px}

/* =============================================================================
   RESPONSIVE - มือถือมาก่อน (WEB_PAYMENT_SHOP_PLAN.md §11)
   ============================================================================= */
@media (max-width:1023px){
  .mnu{display:none}
  .burger{display:flex}
  /* มือถือ: แถบโซเชียลแนวตั้งชิดขอบขวาเหมือนบนคอม แค่ย่อปุ่มลงให้พอดีจอเล็ก */
  .rail{display:grid;right:0;top:50%;transform:translateY(-50%);gap:1px;z-index:56}
  .rail a{width:40px;height:40px;background:rgba(16,18,24,.9)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-feat{grid-template-columns:repeat(2,1fr)}
  .stat{grid-template-columns:repeat(2,1fr)}
  .ms{grid-template-columns:repeat(3,1fr)}
  .live .upd{margin-left:0;width:100%}
}

@media (max-width:767px){
  :root{--nav-h:60px}
  .sec{padding:44px 0}
  .grid-3{grid-template-columns:1fr}
  .grid-feat{grid-template-columns:1fr}
  .ms{grid-template-columns:repeat(2,1fr);gap:10px}
  .dl{grid-template-columns:1fr}
  .soc{grid-template-columns:repeat(2,1fr)}
  .sticky-cta{display:flex}
  .hdr-in > .btn{display:none}       /* ปุ่มหลักย้ายไปอยู่แถบล่างและเมนูมือถือแล้ว */
  .ftr{padding-bottom:96px}          /* เผื่อที่ให้แถบปุ่มล่าง */
  .hero{min-height:auto;padding-bottom:8px}
  .hero::before{background:linear-gradient(180deg,rgba(4,5,7,.55) 0%,rgba(4,5,7,.42) 46%,rgba(4,5,7,.92) 100%)}
  .hero .wrap{padding-top:calc(var(--nav-h) + 22px);padding-bottom:96px}
  .hero-in{max-width:none}
  .hero-bg{background-position:center top}
  .field{flex-direction:column}
  .prereg .fields{grid-template-columns:1fr}
  .prereg{max-width:none}
  .ftr-top{gap:24px}
  .ftr-brand{max-width:none}
}

@media (max-width:479px){
  .wrap{padding-inline:14px}
  .hero-logo{width:min(230px,58vw)}
  .brand img{width:36px;height:36px}
  .brand-tx{font-size:15px}
  .brand-tx span{display:none}
  .btn{padding:11px 15px;font-size:13.5px}
  .ms .thumb{height:58px}
  .ms .thumb .i{width:32px;height:32px}
  .ms .det{display:none}
  .cd div{padding:8px 0}
  .hero-logo{width:min(300px,80vw)}
}

/* จอใหญ่: ไม่ยืดเนื้อหาเกินอ่านสบาย */
@media (min-width:1920px){
  :root{--wrap:1440px}
}

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* พิมพ์ */
@media print{
  .hdr,.rail,.sticky-cta,.drawer,.live{display:none!important}
  body{background:#fff;color:#000}
}

/* =============================================================================
   บัญชีผู้เล่น / ไอเทมมอลล์
   ============================================================================= */

/* ---- ฟอร์มทั่วไป ---- */
.lbl{display:block;margin:15px 0 6px;font-size:13px;color:#C3C8D2;font-weight:500}
.lbl span{color:var(--fg-3);font-weight:400;font-size:12px;margin-left:6px}
.inp-block{width:100%;display:block}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-2) 50%),
  linear-gradient(135deg,var(--fg-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.form-narrow{max-width:420px}

/* ---- หน้าเข้าสู่ระบบ / สมัคร ---- */
.auth-wrap{min-height:calc(100vh - var(--nav-h));display:grid;place-items:center;
  padding:calc(var(--nav-h) + 40px) 20px 60px;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(179,30,34,.16),transparent 70%)}
.auth-card{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--red);padding:28px 26px 24px;clip-path:var(--cut)}
.auth-head{text-align:center;margin-bottom:18px}
.auth-head img{margin:0 auto 10px;object-fit:contain}
.auth-head h1{font-size:22px;font-weight:700;font-style:italic}
.auth-head p{color:var(--fg-3);font-size:13px;margin-top:4px}
.auth-foot{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);font-size:13px}
.auth-foot a{color:var(--fg-2)}
.auth-foot a:hover{color:var(--gold)}

/* ---- โครงหน้าบัญชี ---- */
.acc-grid{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start}
.acc-side{position:sticky;top:calc(var(--nav-h) + 16px)}
.acc-wallet{background:linear-gradient(150deg,#17120C,#100F13);border:1px solid var(--line);
  border-left:3px solid var(--gold);padding:16px;clip-path:var(--cut-sm);margin-bottom:14px}
.acc-wallet .k{font-size:12px;color:var(--fg-3);display:flex;align-items:center;gap:7px}
.acc-wallet .v{font-size:28px;font-weight:700;font-style:italic;color:var(--gold-lt);line-height:1.2;margin-top:4px}
.acc-wallet .v span{font-size:14px;color:var(--fg-3);font-style:normal}
.acc-wallet .v2{font-size:15px;color:var(--fg-2)}
.acc-wallet .btn{margin-top:12px}
.acc-nav{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);clip-path:var(--cut-sm)}
.acc-nav a{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:14px;color:#C3C8D2;
  border-bottom:1px solid var(--line);min-height:44px}
.acc-nav a:last-child{border-bottom:0}
.acc-nav a .i{color:var(--fg-3);width:18px;height:18px}
.acc-nav a:hover{background:rgba(255,255,255,.04);color:#fff}
.acc-nav a.on{background:rgba(179,30,34,.16);color:#fff;box-shadow:inset 3px 0 0 var(--red)}
.acc-nav a.on .i{color:var(--red-hot)}
.acc-main{min-width:0}

.panel{background:var(--panel);border:1px solid var(--line);padding:20px;clip-path:var(--cut)}
.panel-head{display:flex;gap:14px;align-items:flex-start;padding-bottom:14px;margin-bottom:6px;
  border-bottom:1px solid var(--line)}
.panel-head .i{color:var(--gold);flex:none}
.panel-head b{display:block;font-size:15px}
.panel-head span{display:block;font-size:12.5px;color:var(--fg-3);margin-top:3px}

.cha-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cha{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);
  padding:13px 15px;clip-path:var(--cut-sm)}
.cha-ic{width:38px;height:38px;display:grid;place-items:center;background:rgba(179,30,34,.16);color:var(--red-hot);flex:none}
.cha b{display:block;font-size:14.5px}
.cha span{display:block;font-size:12px;color:var(--fg-3)}

.pill{display:inline-block;padding:2px 10px;font-size:11.5px;border:1px solid var(--line-2);color:var(--fg-2)}
.pill.ok{background:rgba(43,213,118,.14);border-color:rgba(43,213,118,.45);color:#9DEEC1}
.pill.wait{background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.45);color:#FFD98A}
.pill.bad{background:rgba(255,77,79,.14);border-color:rgba(255,77,79,.45);color:#FFB3B4}
.num-up{color:#7BE3A9} .num-down{color:#FF9A9B}

.pay-box{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#0B0D12;border:1px solid var(--line);padding:14px 16px;clip-path:var(--cut-sm);margin-top:14px}
.pay-box .k{display:block;font-size:12px;color:var(--fg-3)}
.pay-box b{display:block;font-size:19px;letter-spacing:1px;font-variant-numeric:tabular-nums;margin:2px 0}

/* ---- ไอเทมมอลล์ ---- */
.shop-bar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:22px}
.shop-bal{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--fg-2)}
.shop-bal b{color:var(--gold-lt);font-size:20px;font-style:italic;font-variant-numeric:tabular-nums}
.shop-bal .i{color:var(--gold)}
/* การ์ดสินค้าย่อลง 10 ก.ย. 2569 - มอลล์มีของเป็นร้อยชิ้น การ์ดใหญ่ 4 ใบ/แถวทำให้ดูโล่ง
   และต้องเลื่อนยาวมาก ใช้ auto-fill เพื่อให้จอกว้างได้ 6 ใบ/แถวโดยไม่ต้องเขียน breakpoint เพิ่ม */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.prod{background:var(--panel);border:1px solid var(--line);clip-path:var(--cut);display:flex;flex-direction:column;transition:.2s;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.prod:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.prod:hover{transform:translateY(-4px);border-color:rgba(201,152,88,.5)}
.prod-img{aspect-ratio:1;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 50% 40%,rgba(201,152,88,.16),transparent 65%),#0C0E13}
.prod-img .i{width:44px;height:44px;color:var(--gold-lt);stroke-width:1.4}
.prod-img img{width:100%;height:100%;object-fit:cover}
.prod-off{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:10.5px;padding:2px 7px;font-weight:600}
.prod-out{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,6,10,.72);
  font-size:13px;color:#FFB3B4;font-weight:600}
.prod-bd{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-bd h3{font-size:13.5px;font-weight:600;line-height:1.35}
.prod-bd p{font-size:11.5px;color:var(--fg-3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-items{font-size:11px;color:var(--fg-2);display:flex;flex-direction:column;gap:3px}
.prod-items li{display:flex;gap:6px;align-items:flex-start}
.prod-items .i{width:12px;height:12px;color:var(--ok);margin-top:3px;flex:none}
.prod-price{margin-top:auto;padding-top:6px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.prod-price b{font-size:17px;color:var(--gold-lt);font-style:italic;font-variant-numeric:tabular-nums}
.prod-price s{color:var(--fg-3);font-size:11.5px}
.prod-stock{margin-left:auto;font-size:10.5px;color:var(--fg-3)}
.prod-buy{display:flex;gap:6px}
.prod-buy .inp{flex:1;min-width:0;padding:7px 8px;font-size:11.5px}
.prod-buy .btn{padding:7px 12px;font-size:12px}

@media (max-width:1023px){
  .acc-grid{grid-template-columns:1fr}
  .acc-side{position:static}
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}
@media (max-width:767px){
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .cha-grid{grid-template-columns:1fr}
  .auth-wrap{padding-top:calc(var(--nav-h) + 24px);padding-bottom:100px}
  .prod-buy{flex-direction:column}
  .prod-buy .btn{width:100%}
}
@media (max-width:479px){
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:9px}
}

/* ---- PRE-REGISTERED counter (2026-08-27): pure typography, no frame ---- */
.counter-hero{margin-top:22px;text-align:center;line-height:1.05;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  row-gap:.12em}
.counter-hero-head,
.counter-hero b{font-size:clamp(44px,8vw,68px);font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff3c4,#f5b301 60%,#c98a00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 30px rgba(245,179,1,.25)}
.counter-hero-head{font-size:clamp(20px,3.4vw,32px);letter-spacing:.12em}

/* ตัวเลขเป็นการ์ดทีละหลัก พลิกวนตลอดเวลาแบบป้ายไฟสนามบิน
   (เลขไม่เปลี่ยนถ้ายอดจริงไม่ขยับ - แค่ทำให้ป้ายดูมีชีวิต) */
.counter-hero b{display:inline-flex;align-items:center;gap:.1em;perspective:600px;
  background:none;-webkit-text-fill-color:initial;color:transparent}
.counter-hero b .cd-d{display:inline-block;color:#ffd76a;
  min-width:.68em;padding:.04em .13em;border-radius:.12em;text-align:center;
  background:linear-gradient(180deg,#241a08 0%,#120d05 49%,#1c1409 51%,#0b0804 100%);
  border:1px solid rgba(245,179,1,.38);
  box-shadow:inset 0 1px 0 rgba(255,236,180,.18),0 6px 18px rgba(0,0,0,.55);
  text-shadow:0 2px 10px rgba(245,179,1,.35);
  animation:cd-flip 5s cubic-bezier(.5,.05,.35,1) infinite;
  transform-style:preserve-3d;backface-visibility:hidden}
.counter-hero b .cd-s{display:inline-block;color:#f5b301;padding:0 .02em}
@keyframes cd-flip{
  0%{transform:rotateX(0)}
  12%{transform:rotateX(-180deg)}
  24%,100%{transform:rotateX(-360deg)}
}
@media (prefers-reduced-motion:reduce){ .counter-hero b .cd-d{animation:none} }

/* ---- ปุ่ม PLAY NOW (เล่นบนเบราว์เซอร์) ---- */
.play-wrap{margin-top:20px;text-align:center}
.play-btn{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  padding:14px 30px 14px 20px;border-radius:999px;
  background:linear-gradient(135deg,#ff3b3b,#c1121f 55%,#7d0a12);
  border:1px solid rgba(255,214,120,.55);
  box-shadow:0 10px 34px rgba(228,38,44,.45),inset 0 1px 0 rgba(255,255,255,.25);
  animation:play-pulse 2.4s ease-in-out infinite;
  transition:transform .15s ease,box-shadow .15s ease}
.play-btn:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 16px 44px rgba(228,38,44,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.play-ic{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  background:linear-gradient(180deg,#fff3c4,#f5b301);}
.play-ic .i{width:22px;height:22px;color:#5a2400}
.play-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.play-tx b{font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:.06em;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.55)}
.play-tx span{font-size:clamp(12px,1.5vw,13.5px);color:rgba(255,255,255,.9)}
.play-sub{margin-top:9px;font-size:13px;color:#DDE1E8;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.play-soon{background:linear-gradient(135deg,#3a3f4b,#22262f);border-color:rgba(201,152,88,.4);
  box-shadow:0 8px 26px rgba(0,0,0,.45);animation:none;cursor:default}
.play-soon .play-ic{background:linear-gradient(180deg,#c9a15a,#8a6a2f)}
.play-soon .play-tx b{color:#E8ECF3}
@keyframes play-pulse{
  0%,100%{box-shadow:0 10px 34px rgba(228,38,44,.45),inset 0 1px 0 rgba(255,255,255,.25)}
  50%{box-shadow:0 10px 44px rgba(228,38,44,.75),0 0 0 6px rgba(228,38,44,.12),inset 0 1px 0 rgba(255,255,255,.25)}
}
@media (prefers-reduced-motion:reduce){ .play-btn{animation:none} }

/* ปุ่ม PLAY บนแถบบน - ทองเข้ม แยกตัวจากปุ่มแดง เห็นได้ทุกหน้า */
.btn.btn-play{background:linear-gradient(135deg,#ffd86f,#f5b301 55%,#c98a00);color:#3a1f00;font-weight:800;
  letter-spacing:.08em;border:1px solid rgba(255,240,190,.7);
  box-shadow:0 6px 20px rgba(245,179,1,.45)}
.btn.btn-play:hover{filter:brightness(1.06);box-shadow:0 8px 26px rgba(245,179,1,.6)}
.btn.btn-play .i{color:#3a1f00}
.drw-play{color:#f5b301 !important;font-weight:700}
/* สถานะยังไม่เปิด: ยังเป็นปุ่มทองให้เห็นชัด แต่หรี่ลงและกดไม่ได้ */
.btn.btn-play-off{background:linear-gradient(135deg,#c9a15a,#8a6a2f 60%,#5c4620);color:#2a1a00;
  border-color:rgba(255,240,190,.35);box-shadow:0 4px 14px rgba(0,0,0,.4);
  cursor:default;pointer-events:none;gap:8px}
.btn.btn-play-off em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.32);color:#ffe9b0}
.drw-play-off{opacity:.72;display:flex;align-items:center;gap:8px}
/* ---------------------------------------------------------------- กล่องแจ้งผลทับหน้าจอ
   ใช้กับผลตรวจสลิป: ข้อความโผล่หลังผู้เล่นกดส่งไฟล์ ซึ่งตอนนั้นเขาเลื่อนหน้าลงมาแล้ว
   แถบข้อความที่อยู่บนสุดของหน้าจึงอยู่นอกจอ ผู้เล่นไม่เห็นแล้วกดส่งซ้ำ */
.pop{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:20px}
.pop[hidden]{display:none}
.pop-back{position:absolute;inset:0;background:rgba(3,4,6,.78);backdrop-filter:blur(3px)}
.pop-box{position:relative;width:min(420px,100%);background:var(--panel);border:1px solid var(--line-2);
  padding:26px 24px 22px;text-align:center;clip-path:var(--cut-sm,none);
  box-shadow:0 24px 70px rgba(0,0,0,.6);animation:popIn .16s ease-out}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.pop-ic{width:52px;height:52px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  border-radius:999px}
.pop-ic .i{width:26px;height:26px}
.pop-ic.bad{background:rgba(255,77,79,.14);color:#FFB3B4;border:1px solid rgba(255,77,79,.4)}
.pop-ic.ok{background:rgba(43,213,118,.14);color:#9DEEC1;border:1px solid rgba(43,213,118,.4)}
.pop-box h3{margin:0 0 8px;font-size:19px;color:var(--fg)}
.pop-box p{margin:0 0 20px;font-size:14.5px;line-height:1.65;color:var(--fg-2);overflow-wrap:anywhere}
.pop-box .btn{width:100%;justify-content:center}

/* กำแพงโพสต์เฟซบุ๊กในหน้าข่าวสาร - กล่องของเฟซบุ๊กเป็น iframe ความกว้างคงที่ 500px
   ที่ย่อเองไม่ได้ จึงใช้ flex ให้ห่อบรรทัดแทน grid และ max-width:100% กันล้นบนมือถือ */
.fb-wall{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:0 0 22px}
.fb-item{max-width:100%;overflow:hidden;border-radius:10px}
.fb-item .fb-post{max-width:100%}
.fb-item blockquote{margin:0;padding:14px 16px}
@media (max-width:560px){.fb-wall{gap:12px}}

/* กล่องไลฟ์ มุมขวาล่างของจอ
   fixed มุมขวาล่าง (เจ้าของขอ 5 ก.ย. 2569) - ตำแหน่งมาตรฐานของกล่องลอยแบบนี้
   ตรงนั้นไม่บังเนื้อหาหลักเหมือนตอนวางไว้ด้านบน จึงลอยตามจอได้โดยไม่กวน
   right:64px เว้นทางให้แถบไอคอนโซเชียล (.rail กว้าง 44px ชิดขอบขวา กลางจอ)
   z-index ต่ำกว่า .rail (50) เพื่อให้ปุ่มโซเชียลยังกดได้เมื่อสองอันมาใกล้กัน */
.hero-live{position:fixed;right:64px;bottom:22px;z-index:48;width:340px;
  max-width:calc(100vw - 88px);background:rgba(12,14,20,.94);border:2px solid var(--gold);
  border-radius:12px;overflow:hidden;
  /* เงาสองชั้น: วงทองจาง ๆ รอบกล่องให้ขอบไม่จมไปกับพื้นดำของเว็บ
     แล้วค่อยเงาดำถ่วงให้ดูลอยอยู่เหนือฉาก */
  box-shadow:0 0 0 1px rgba(201,152,88,.35), 0 0 22px rgba(201,152,88,.28),
             0 18px 46px rgba(0,0,0,.55)}

/* หัวกล่องคือปุ่มยุบทั้งแถบ - เป้าแตะเต็มความกว้าง ไม่ใช่ไอคอน 24px
   พื้นทองแทนพื้นดำโปร่ง: ธีมเว็บดำล้วน หัวกล่องสีดำจึงจมหายไปกับพื้น
   ใช้ไล่สีทองชุดเดียวกับปุ่ม .btn-gold ให้เป็นภาษาเดียวกับทั้งเว็บ
   พร้อมตัวอักษรสีเข้ม #150E06 ตามปุ่มนั้นเพื่อให้อ่านออกบนพื้นสว่าง */
.hl-head{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;cursor:pointer;
  background:linear-gradient(100deg,var(--gold),var(--gold-lt));border:0;
  border-bottom:1px solid rgba(0,0,0,.25);
  color:#150E06;font:inherit;font-size:13px;font-weight:700;text-align:left}
.hl-head:hover{background:linear-gradient(100deg,var(--gold-lt),var(--gold))}
/* จุดกับคำว่า LIVE ยังแดง - เป็นสัญลักษณ์สากลของการถ่ายทอดสด และตัดกับพื้นทองได้ชัด */
.hl-head b{color:var(--red-deep);letter-spacing:.06em}
.hl-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--red-deep);animation:hlPulse 1.4s infinite}
@keyframes hlPulse{0%,100%{opacity:1}50%{opacity:.25}}
.hl-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-min{width:26px;height:26px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(0,0,0,.35);border-radius:6px;line-height:1;font-size:15px}
.hl-head:hover .hl-min{background:#150E06;color:var(--gold-lt);border-color:#150E06}
.hl-body{aspect-ratio:16/9;background:#000}
.hl-body iframe{width:100%;height:100%;display:block;border:0}
.hl-fallback{display:grid;place-items:center;gap:6px;width:100%;height:100%;color:var(--fg-2)}

/* ยุบแล้วเหลือแค่ป้าย LIVE - ไม่ใช่กล่องเปล่ากินที่ ยังอยู่มุมเดิม กดกลับมากางได้ */
.hero-live.is-min{width:auto;border-radius:999px}
.hero-live.is-min .hl-body{display:none}
.hero-live.is-min .hl-name{display:none}
.hero-live.is-min .hl-head{border-bottom:0;padding:8px 12px}

@media (max-width:720px){
  /* ค่าตั้งต้นเผื่อพ้นแถบปุ่มล่างไว้ก่อน สคริปต์วัดความสูงจริงแล้วเขียนทับอีกที
     ถ้าสคริปต์ไม่ทำงาน อย่างน้อยป้าย LIVE ก็ยังไม่โดนแถบทับ */
  .hero-live{right:52px;bottom:calc(76px + env(safe-area-inset-bottom));
    width:min(280px,calc(100vw - 72px))}
  .hl-name{display:none}
}
}
}

/* ============================================================ /status - เซิร์ฟเวอร์ → ชาแนล + กราฟ */
.stat .b .v.warn{color:var(--warn)}
.stat .b .k .dim{color:var(--fg-3);font-weight:400;margin-left:2px}
.dim{color:var(--fg-3)}
.srv{background:var(--panel);border:1px solid var(--line);clip-path:var(--cut);margin-bottom:18px}
.srv.closed{opacity:.6}
.srv-h{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(179,30,34,.22),rgba(179,30,34,.04) 45%,transparent)}
.srv-h .crest{width:44px;height:44px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--red-deep));
  clip-path:var(--cut-sm);color:#fff}
.srv-h .crest .i{width:22px;height:22px}
.srv-h .nm{font-size:clamp(19px,2.3vw,25px);font-weight:700;font-style:italic;line-height:1.1}
.srv-h .sub{color:var(--fg-3);font-size:13px;margin-top:4px}
.srv-h .tot{margin-left:auto;text-align:right}
.srv-h .tot b{font-size:clamp(22px,2.6vw,30px);font-style:italic;font-variant-numeric:tabular-nums;line-height:1}
.srv-h .tot span{display:block;color:var(--fg-3);font-size:12px;margin-top:5px}
/* ตัวเลขสรุปของแต่ละเซิร์ฟ อยู่ในหัวการ์ดของเซิร์ฟนั้นเอง (11 ก.ย. 2569 เปิดเซิร์ฟที่สอง) */
.srv-h .id{min-width:0}
.srv-h .kpis{margin-left:auto;display:flex;align-items:flex-start;gap:26px;text-align:right;flex-wrap:wrap;justify-content:flex-end}
.srv-h .kpi{display:flex;flex-direction:column;gap:5px;min-width:78px}
.srv-h .kpi .kk{color:var(--fg-3);font-size:11.5px;letter-spacing:.03em;order:2}
.srv-h .kpi b{order:1;font-size:clamp(19px,2.2vw,26px);font-style:italic;font-variant-numeric:tabular-nums;line-height:1}
.srv-h .kpi b.sm{font-size:clamp(14px,1.5vw,17px);font-style:normal;font-weight:600;line-height:1.25;padding-top:3px}
.srv-h .kpi b.ok{color:var(--ok)}
.srv-h .kpi b.bad{color:var(--bad)}
.srv-h .kpi b.warn{color:var(--warn)}
.srv-h .kpi b.off{color:var(--fg-3)}
.ch{display:grid;grid-template-columns:minmax(170px,1.3fr) 130px minmax(170px,2fr) 110px 110px;gap:18px;align-items:center;
  padding:16px 22px;border-bottom:1px solid var(--line);transition:background .15s}
.ch:last-child{border-bottom:0}
.ch:hover{background:rgba(255,255,255,.025)}
.ch.off{opacity:.5}
.ch-empty{padding:22px;color:var(--fg-3);font-size:13.5px}
.ch .nm{font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:15px}
.ch .nm .no{display:inline-grid;place-items:center;width:32px;height:32px;background:var(--panel-2);border:1px solid var(--line-2);
  font-style:italic;font-weight:700;clip-path:var(--cut-sm);font-size:14px}
.tag{font-size:10.5px;letter-spacing:.05em;padding:3px 8px;border:1px solid;font-weight:600;line-height:1.3}
.tag.pk{color:#FF6B6E;border-color:rgba(228,38,44,.55);background:rgba(228,38,44,.12)}
.tag.ev{color:var(--gold-lt);border-color:rgba(201,152,88,.55);background:rgba(201,152,88,.12)}
.st{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--fg-3)}
.st .dot{width:9px;height:9px;border-radius:50%;background:var(--fg-3);flex:none}
.st.ok{color:var(--ok)} .st.ok .dot{background:var(--ok);animation:st-pulse 2s infinite}
.st.bad{color:var(--bad)} .st.bad .dot{background:var(--bad)}
.st.maint{color:var(--warn)} .st.maint .dot{background:var(--warn)}
@keyframes st-pulse{0%{box-shadow:0 0 0 0 rgba(43,213,118,.5)}70%{box-shadow:0 0 0 9px rgba(43,213,118,0)}100%{box-shadow:0 0 0 0 rgba(43,213,118,0)}}
.cap{display:flex;flex-direction:column;gap:7px}
.cap .bar{height:9px;background:rgba(255,255,255,.07);overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,4px 100%,0 calc(100% - 4px))}
.cap .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1FA65B,var(--ok));transition:width .7s ease}
.cap .bar i.mid{background:linear-gradient(90deg,var(--gold),var(--gold-lt))}
.cap .bar i.hot{background:linear-gradient(90deg,var(--red),var(--red-hot))}
.cap .lbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ch .num b{display:block;font-variant-numeric:tabular-nums;font-weight:700;font-size:19px;font-style:italic;line-height:1.1}
.ch .num small{display:block;font-size:11.5px;color:var(--fg-3);margin-top:3px}
.chart{background:var(--panel);border:1px solid var(--line);clip-path:var(--cut);padding:18px 18px 12px;position:relative}
.chart canvas{display:block;width:100%;height:280px;cursor:crosshair;touch-action:pan-y}
.chart .lg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chart .lg button{background:var(--panel-2);border:1px solid var(--line);color:var(--fg-2);font:inherit;font-size:12.5px;
  padding:6px 11px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:.15s}
.chart .lg button:hover{border-color:var(--line-2);color:var(--fg)}
.chart .lg button i{width:10px;height:10px;display:inline-block;flex:none}
.chart .lg button.off{opacity:.38}
.chart .tip{position:absolute;pointer-events:none;background:#0B0D12;border:1px solid var(--line-2);padding:9px 12px;font-size:12.5px;
  line-height:1.7;display:none;min-width:170px;z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.chart .tip .tm{color:var(--fg-3);font-size:11.5px;margin-bottom:2px}
.chart .tip i{width:9px;height:9px;display:inline-block;margin-right:7px;vertical-align:middle}
.chart .tip b{float:right;margin-left:14px;font-variant-numeric:tabular-nums}
@media(max-width:860px){
  .ch{grid-template-columns:1fr 1fr;row-gap:12px;padding:14px 16px}
  .ch .cap{grid-column:1/-1}
  .srv-h{padding:16px;flex-wrap:wrap}
  .srv-h .kpis{margin-left:0;width:100%;justify-content:space-between;gap:14px;text-align:left;
    padding-top:14px;border-top:1px solid var(--line)}
  .srv-h .kpi{min-width:0;align-items:flex-start}
}

/* ============================================================ V3 THEME (10 ก.ย. 2569 - "ให้ว๊าวไปเลย")
   ภาพ hero ใหม่ (ถนนนีออนบางกอก 17332.jpg), แผงกระจกเบลอ, แสงนีออน, เผยเนื้อหาตอนเลื่อน,
   หัวหน้าย่อยแบบภาพยนตร์ทุกหน้า - ทับของเดิมเฉพาะจุด คลาสเดิมยังใช้ได้ทั้งหมด */
:root{--neon:#FF2E3B;--blue:#3D8BFF;--glass:rgba(9,10,15,.66);--glass-line:rgba(255,255,255,.13)}

/* สกรอลบาร์ให้เข้าธีม */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#06070A}
::-webkit-scrollbar-thumb{background:#2A2F3B;border:3px solid #06070A;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* ---------- แถบบน: ใสบนหน้าแรกจนกว่าจะเลื่อน ---------- */
.hdr{transition:background .35s,border-color .35s,box-shadow .35s}
body.at-top .hdr{background:linear-gradient(180deg,rgba(4,5,7,.72),rgba(4,5,7,0));border-bottom-color:transparent;backdrop-filter:blur(2px)}
.hdr.scrolled{background:rgba(4,5,7,.9);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.mnu a::after{background:linear-gradient(90deg,var(--red-hot),var(--gold))}

/* ---------- HERO ---------- */
.hero.v3{min-height:100svh;align-items:stretch}
.hero.v3 .hero-bg{background-image:url('/img/hero-v4-mobile.jpg');background-position:50% 30%;
  filter:saturate(1.12) contrast(1.05) brightness(1.02);transform:scale(1.06);will-change:transform;
  transition:transform .1s linear}
@media (min-width:768px){ .hero.v3 .hero-bg{background-image:url('/img/hero-v4.jpg');background-position:center 30%} }
/* ถมความมืดเฉพาะครึ่งล่างและซ้าย ให้ป้ายไฟด้านบนของภาพยังเห็นเต็ม ๆ */
.hero.v3::before{background:
  linear-gradient(180deg,rgba(4,5,7,.55) 0%,rgba(4,5,7,.05) 22%,rgba(4,5,7,.18) 52%,rgba(4,5,7,.86) 82%,var(--bg) 100%),
  linear-gradient(100deg,rgba(4,5,7,.55) 0%,rgba(4,5,7,.15) 45%,rgba(4,5,7,0) 70%)}
.hero.v3::after{background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px);mix-blend-mode:overlay}
/* ฝนบาง ๆ + แสงนีออนแกว่งเบา ๆ (แค่ให้ภาพมีชีวิต ไม่รบกวน) */
.hero-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-fx::before{content:"";position:absolute;inset:-20% 0 0 0;
  background-image:linear-gradient(170deg,transparent 0 47%,rgba(255,255,255,.055) 49%,transparent 51%),
                   linear-gradient(170deg,transparent 0 62%,rgba(255,255,255,.035) 63%,transparent 64%);
  background-size:140px 260px,90px 180px;animation:rain 1.1s linear infinite;opacity:.7}
.hero-fx::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 40% at 78% 22%,rgba(255,46,59,.20),transparent 70%),
             radial-gradient(45% 35% at 16% 20%,rgba(255,46,59,.16),transparent 70%),
             radial-gradient(40% 30% at 62% 30%,rgba(61,139,255,.14),transparent 70%);
  animation:neon 4.5s ease-in-out infinite}
@keyframes rain{to{background-position:0 260px,0 180px}}
@keyframes neon{0%,100%{opacity:.75}45%{opacity:1}52%{opacity:.6}58%{opacity:.95}}
.hero.v3 .wrap{display:block;padding-top:calc(var(--nav-h) + 12vh);padding-bottom:64px;min-height:100svh}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end;min-height:calc(100svh - var(--nav-h) - 12vh - 64px)}
.hero-copy{text-align:left;max-width:640px}
.hero-copy .eyebrow{margin-bottom:18px}
.hero.v3 h1.hero-h{font-size:clamp(44px,7vw,96px);letter-spacing:-1px;line-height:.95}
.hero.v3 h1.hero-h em{background:linear-gradient(180deg,#FF6B72,var(--neon) 55%,#B3121E);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 22px rgba(255,46,59,.55)) drop-shadow(0 6px 18px rgba(0,0,0,.9))}
.hero.v3 p.lead{margin-inline:0;max-width:560px;font-size:clamp(15px,1.5vw,18px)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-cta .btn{min-height:50px;padding:12px 24px;font-size:15px}
.hero-cta .btn-play{font-size:16px;letter-spacing:.06em}
.hero-cta .btn-ghost{background:rgba(8,9,12,.45);backdrop-filter:blur(6px)}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.hero-stats .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;font-size:13px;color:#DDE1E8;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);clip-path:var(--cut-sm)}
.hero-stats .chip b{color:#fff;font-variant-numeric:tabular-nums}
.hero-stats .chip .i{color:var(--gold)}
.hero-stats .chip .dot{width:8px;height:8px}
.hero.v3 .counter-hero{align-items:flex-start;text-align:left;margin-top:26px}
.hero.v3 .counter-hero-head{font-size:clamp(14px,1.6vw,20px);letter-spacing:.18em}
.hero.v3 .counter-hero b{font-size:clamp(36px,5vw,56px)}
.hero-side{width:100%}
.hero.v3 .prereg{max-width:none;background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--glass-line);border-top:3px solid var(--red-hot);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(228,38,44,.18),0 0 60px rgba(228,38,44,.12);padding:24px 24px 20px}
.hero.v3 .prereg h2{font-size:18px}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:11px;letter-spacing:3px;color:var(--fg-3);text-transform:uppercase}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:1023px){
  .hero-grid{grid-template-columns:1fr;gap:26px;align-items:start;min-height:0}
  .hero-copy{max-width:none}
  .hero.v3 .wrap{padding-top:calc(var(--nav-h) + 8vh);padding-bottom:110px}
  .scroll-cue{display:none}
}
@media (max-width:767px){
  .hero.v3{min-height:auto}
  .hero.v3 .wrap{min-height:0;padding-top:calc(var(--nav-h) + 28px);padding-bottom:110px}
  .hero.v3::before{background:linear-gradient(180deg,rgba(4,5,7,.6) 0%,rgba(4,5,7,.28) 30%,rgba(4,5,7,.75) 60%,var(--bg) 100%)}
  .hero.v3 h1.hero-h{font-size:clamp(40px,12vw,64px)}
  .hero.v3 .counter-hero{align-items:center;text-align:center}
}

/* ---------- แถบสถานะสดใต้ hero ---------- */
.live{background:linear-gradient(90deg,#0A0B0F,#161922 55%,#0A0B0F);border-top:1px solid rgba(228,38,44,.35);position:relative}
.live::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--red-hot),var(--gold),transparent)}
.live .it b{font-weight:700}

/* ---------- หัวหน้าย่อยแบบภาพยนตร์ (ทุกหน้า) ---------- */
.page-head{position:relative;overflow:hidden;min-height:260px;display:flex;align-items:flex-end;padding:calc(var(--nav-h) + 56px) 0 34px;
  border-bottom:1px solid rgba(228,38,44,.25);background:var(--bg)}
.page-head::before{content:"";position:absolute;inset:0;background:url('/img/hero-v3.jpg') center 38%/cover no-repeat;
  filter:saturate(1.05) brightness(.9);transform:scale(1.04)}
.page-head::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,5,7,.6),rgba(4,5,7,.35) 40%,rgba(8,9,12,.96) 100%),
             linear-gradient(90deg,rgba(4,5,7,.55),transparent 60%)}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{font-size:clamp(28px,4.4vw,48px);text-shadow:0 4px 24px rgba(0,0,0,.8)}
.page-head h1::after{content:"";display:block;width:64px;height:4px;margin-top:12px;background:linear-gradient(90deg,var(--red-hot),var(--gold));transform:skewX(-14deg)}
.page-head p{color:#C9CED8;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.crumb{color:#B9BEC9}

/* ---------- หัวข้อ + การ์ด ---------- */
.sec-h h2{position:relative}
.sec-h .kicker{display:block;font-size:11px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;font-style:normal;font-weight:600;margin-bottom:4px}
.sec-alt{background:linear-gradient(180deg,#06070A,var(--bg));position:relative}
.sec-alt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.sec-alt > .wrap{position:relative}
.card,.feat,.ms .c,.prod,.dl a,.stat .b,.srv,.soc a,.panel,.auth-card,.chart{position:relative}
.card:hover,.feat:hover,.prod:hover,.dl a:hover,.ms .c:hover{box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 0 1px rgba(228,38,44,.35),0 0 40px rgba(228,38,44,.12)}
.feat{background:linear-gradient(160deg,var(--panel),#0B0D12)}
.feat .i{filter:drop-shadow(0 0 12px rgba(201,152,88,.45))}
.feat::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,152,88,.14),transparent 70%);pointer-events:none}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,9,12,.75));pointer-events:none}
.card .cat{z-index:1}
.stat .b{background:linear-gradient(160deg,var(--panel),#0C0E14)}
.stat .b .v{letter-spacing:-.5px}

/* เผยเนื้อหาตอนเลื่อนถึง (JS ใส่ .rv ให้ แล้วเติม .in เมื่อเข้าจอ) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .hero-fx{display:none} }

/* ---------- ข่าวเด่น ---------- */
.news-feat{display:grid;grid-template-columns:1.25fr 1fr;gap:0;background:var(--panel);border:1px solid var(--line);clip-path:var(--cut);margin-bottom:22px;min-height:340px}
.news-feat .thumb{position:relative;min-height:260px;background:#0B0D12 center/cover no-repeat}
.news-feat .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--panel))}
.news-feat .bd{padding:30px 32px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.news-feat .cat{align-self:flex-start;background:var(--red);color:#fff;font-size:11px;padding:4px 12px;letter-spacing:.5px}
.news-feat .cat.event{background:var(--gold);color:#150E06}
.news-feat h3{font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.3}
.news-feat p{color:var(--fg-2);font-size:14.5px;line-height:1.7}
.news-feat time{color:var(--fg-3);font-size:12.5px;display:flex;gap:6px;align-items:center}
.news-feat .btn{align-self:flex-start;margin-top:6px}
@media (max-width:860px){ .news-feat{grid-template-columns:1fr} .news-feat .thumb{min-height:200px} .news-feat .thumb::after{background:linear-gradient(180deg,transparent 60%,var(--panel))} .news-feat .bd{padding:22px} }

/* ---------- ดาวน์โหลด ---------- */
/* สีเต็มใบ ไม่ใช่แค่จาง ๆ - Android เขียว Windows ฟ้า ตัวหนังสือกับไอคอนขาวเพื่อให้อ่านออก
   บนพื้นสีเข้ม สีแบรนด์แดง-ทองของเว็บไม่ถูกแตะ ใช้เฉพาะสองการ์ดนี้ */
.dl-and{--dl:#3DDC84;--dl-a:#1FA968;--dl-b:#0C5637}
.dl-win{--dl:#48A2F0;--dl-a:#1E6FD9;--dl-b:#0B3A73}

/* เล่นผ่านเว็บ - การ์ดใบที่สามในกริดเดียวกัน กินเต็มแถวจึงต่อท้าย Windows พอดี
   ใช้แดง/ทองเดิมไว้ให้เด่นกว่าอีกสองใบ แต่ทรงและขอบเท่ากันหมด (เจ้าของ 12 ก.ย. 2569) */
.dl-play{--dl:#FF4D4D;--dl-a:#C1121F;--dl-b:#7D0A12;grid-column:1/-1;
  animation:play-pulse 2.4s ease-in-out infinite}
.dl-play:hover{animation:none}
.dl-play .play-ic{flex:0 0 40px;width:40px;height:40px}
.dl-play b{font-size:clamp(19px,2.4vw,23px);font-weight:800;letter-spacing:.06em}
.dl-note{max-width:760px;margin-top:12px;font-size:13px;color:var(--fg-3);text-align:center}
@media (prefers-reduced-motion:reduce){ .dl-play{animation:none} }

/* ทิปใต้ปุ่ม PLAY เฉพาะผู้เล่น iOS (หน้าแรก) - ซ่อนด้วย hidden จนสคริปต์เช็ค UA แล้วค่อยเปิด
   ★ display:flex ชนะ [hidden] ของเบราว์เซอร์ - ต้องมีคู่ [hidden] ของตัวเองเสมอ (แบบ .pm) */
.ios-play-tip{display:flex;gap:8px;align-items:flex-start;max-width:560px;margin-top:12px;
  font-size:13px;line-height:1.6;color:var(--fg-3)}
.ios-play-tip .i{flex:none;width:15px;height:15px;margin-top:3px;color:#EBC98D}
.ios-play-tip[hidden]{display:none}

.dl a{position:relative;display:flex;align-items:center;gap:16px;padding:22px 24px;min-height:96px;
  clip-path:var(--cut);border:1px solid var(--dl);
  background:linear-gradient(140deg, var(--dl-a) 0%, var(--dl-b) 72%, #08111C 100%);
  transition:transform .18s,box-shadow .18s,filter .18s}
.dl a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--dl);
  box-shadow:0 0 16px var(--dl)}
.dl a:hover{transform:translateY(-3px);filter:brightness(1.14);
  box-shadow:0 12px 30px -10px var(--dl)}

.dl .i{width:42px;height:42px;color:#fff;flex:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.dl a:hover .i{color:#fff}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}
.steps .feat{padding-top:26px}
/* เดิมเป็นขาว 6% ซึ่งแทบมองไม่เห็น (เจ้าของ: "ทำไมมันจางงี้อะ") - ใช้สีทองของเว็บให้อ่านออก */
.steps .feat::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;top:12px;right:18px;
  font-size:46px;font-weight:800;font-style:italic;color:rgba(201,152,88,.38);line-height:1}
.steps .feat:hover::before{color:rgba(235,201,141,.62)}
@media (max-width:767px){ .steps{grid-template-columns:1fr} }

/* ---------- ไอเทมมอลล์ ---------- */
.prod{background:linear-gradient(170deg,#12141B,#0B0D12)}
.prod-img{overflow:hidden}
.prod-img::after{content:"";position:absolute;inset:-60% -20%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);
  transform:translateX(-70%);transition:transform .8s ease;pointer-events:none}
.prod:hover .prod-img::after{transform:translateX(70%)}
.prod-price b{text-shadow:0 0 18px rgba(235,201,141,.35)}

/* ---------- ล็อกอิน / สมัคร: ฉากนีออนเบลอเป็นพื้นหลัง ---------- */
.auth-wrap{position:relative;overflow:hidden;background:var(--bg)}
.auth-wrap::before{content:"";position:absolute;inset:0;background:url('/img/hero-v3.jpg') center/cover no-repeat;filter:blur(3px) brightness(.55) saturate(1.1);transform:scale(1.06)}
.auth-wrap::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 40%,rgba(4,5,7,.2),rgba(4,5,7,.9))}
.auth-card{position:relative;z-index:1;background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--glass-line);border-top:3px solid var(--red-hot);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(228,38,44,.12)}
.auth-head img{filter:drop-shadow(0 8px 20px rgba(0,0,0,.6))}

/* ---------- ท้ายเว็บ ---------- */
.ftr{position:relative;background:linear-gradient(180deg,var(--bg-2),#020304)}
.ftr::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--red-hot),var(--gold),transparent)}
.ftr-col h4{letter-spacing:.5px}

/* ---------- ปุ่ม ---------- */
.btn-red{box-shadow:0 8px 26px rgba(228,38,44,.38),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-gold{box-shadow:0 8px 26px rgba(201,152,88,.35),inset 0 1px 0 rgba(255,255,255,.28)}

/* ---------- 2.5D "เดินเข้าไปในฉาก" (10 ก.ย. 2569) ----------
   ภาพพื้นหลังเป็นชั้นลึกสุด ขยับตามเมาส์/เอียงเครื่องเล็กน้อยและซูมเข้าตอนเลื่อน,
   ชั้นหมอกไฟกลางฉาก, ชั้นอนุภาคแสงนีออน (canvas) ลอยขึ้นด้านหน้า */
.hero.v3{perspective:1200px}
.hero.v3 .hero-bg{transform:translate3d(0,0,0) scale(1.08);transition:none}
.hero-fx canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.9;mix-blend-mode:screen}
.hero-fog{position:absolute;inset:auto 0 0 0;height:55%;z-index:1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 100%,rgba(228,38,44,.22),transparent 70%),
             radial-gradient(40% 40% at 20% 90%,rgba(61,139,255,.14),transparent 70%);
  filter:blur(10px);animation:fog 9s ease-in-out infinite alternate}
@keyframes fog{from{transform:translateX(-2%) scaleY(1)}to{transform:translateX(2%) scaleY(1.15)}}
.hero-copy,.hero-side{transform:translate3d(0,0,0);will-change:transform}
.hero.v3 .hero-grid{transform-style:preserve-3d}
.hero.v3 .prereg{transition:transform .25s ease,box-shadow .25s ease}
.hero.v3 .prereg:hover{box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(228,38,44,.3),0 0 80px rgba(228,38,44,.18)}
@media (prefers-reduced-motion:reduce){ .hero-fog{animation:none} .hero-fx canvas{display:none} }

/* ---------- ปุ่ม PLAY แบบนีออน (เจ้าของ 10 ก.ย. 2569: "ปุ่มนี้ดูไม่ล้ำเลย") ----------
   ตัวปุ่มเป็นกระจกดำ ขอบเป็นแถบไฟหมุนวน แดง→ทอง→น้ำเงิน (conic-gradient ใต้ชั้นใน)
   ตัวอักษรเรืองแสง ป้าย "เร็ว ๆ นี้" กะพริบ - ใช้กับปุ่มบนแถบบนและปุ่มใหญ่ใน hero */
@property --pa{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn.btn-play{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,#171A24,#0A0C11);color:#FFE9B0;font-weight:800;letter-spacing:.14em;
  border:0;text-shadow:0 0 14px rgba(255,216,111,.65),0 0 2px rgba(255,255,255,.4);
  box-shadow:0 0 0 1px rgba(228,38,44,.35),0 0 26px rgba(228,38,44,.35),0 10px 30px rgba(0,0,0,.5);
  animation:play-glow 2.6s ease-in-out infinite}
.btn.btn-play::before{content:"";position:absolute;inset:-60%;z-index:-2;
  background:conic-gradient(from var(--pa),#E4262C 0deg,#FFD86F 110deg,#3D8BFF 220deg,#E4262C 360deg);
  animation:play-spin 2.8s linear infinite}
.btn.btn-play::after{content:"";position:absolute;inset:2px;z-index:-1;clip-path:var(--cut-btn);
  background:linear-gradient(180deg,#171A24,#0A0C11)}
.btn.btn-play .i{color:#FFD86F;filter:drop-shadow(0 0 8px rgba(255,216,111,.9));animation:play-bolt 1.4s ease-in-out infinite}
.btn.btn-play:hover{filter:none;transform:translateY(-2px);color:#fff;
  box-shadow:0 0 0 1px rgba(255,216,111,.55),0 0 42px rgba(228,38,44,.55),0 14px 34px rgba(0,0,0,.55)}
.btn.btn-play em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 8px;
  background:linear-gradient(100deg,var(--red-hot),#B3121E);color:#fff;clip-path:var(--cut-sm);
  box-shadow:0 0 12px rgba(228,38,44,.7);animation:play-blink 1.6s ease-in-out infinite}
@keyframes play-spin{to{--pa:360deg}}
@keyframes play-glow{0%,100%{box-shadow:0 0 0 1px rgba(228,38,44,.35),0 0 22px rgba(228,38,44,.3),0 10px 30px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 1px rgba(255,216,111,.45),0 0 36px rgba(228,38,44,.55),0 10px 30px rgba(0,0,0,.5)}}
@keyframes play-bolt{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes play-blink{0%,100%{opacity:1}50%{opacity:.45}}
/* สถานะยังไม่เปิด: โครงสร้างเดิม แต่ไฟหรี่เป็นโทนเย็นและกดไม่ได้ */
.btn.btn-play-off{color:#C9CED8;text-shadow:0 0 10px rgba(201,206,216,.35);animation:none;cursor:default;pointer-events:none;
  box-shadow:0 0 0 1px rgba(120,130,150,.35),0 0 18px rgba(61,139,255,.18),0 10px 30px rgba(0,0,0,.5)}
.btn.btn-play-off::before{background:conic-gradient(from var(--pa),#4A5163 0deg,#8A7A4A 110deg,#3D6AAA 220deg,#4A5163 360deg);animation-duration:5s}
.btn.btn-play-off .i{color:#C9CED8;filter:drop-shadow(0 0 6px rgba(201,206,216,.6));animation:none}
.hero-cta .btn-play{min-height:54px;padding:12px 28px;font-size:17px}
@media (prefers-reduced-motion:reduce){ .btn.btn-play,.btn.btn-play::before,.btn.btn-play .i,.btn.btn-play em{animation:none} }

/* ---------- hero clear (เจ้าของ 10 ก.ย. 2569: "ภาพหลัง hero ขอชัด ไม่ต้องปิดกั้นมัน") ----------
   เอาแผ่นมืดออกเกือบหมด เหลือไล่จางบาง ๆ ตรงขอบบน (ให้เมนูอ่านออก) และขอบล่าง (ต่อกับเนื้อหา)
   ความอ่านง่ายของตัวอักษรใช้เงาและกล่องกระจกแทน */
.hero.v3::before{background:linear-gradient(180deg,rgba(4,5,7,.42) 0%,rgba(4,5,7,0) 14%,rgba(4,5,7,0) 72%,rgba(8,9,12,.9) 100%)}
.hero.v3::after{opacity:.35}
.hero-fog{opacity:.55}
.hero.v3 .hero-bg{filter:saturate(1.15) contrast(1.06) brightness(1.06)}
.hero.v3 h1.hero-h{text-shadow:0 6px 30px rgba(0,0,0,.95),0 2px 6px rgba(0,0,0,.95)}
.hero.v3 h1.hero-h em{filter:drop-shadow(0 0 22px rgba(255,46,59,.6)) drop-shadow(0 4px 10px rgba(0,0,0,1))}
.hero.v3 p.lead{color:#F1F3F7;text-shadow:0 2px 14px rgba(0,0,0,1),0 1px 3px rgba(0,0,0,1);
  background:rgba(4,5,7,.28);backdrop-filter:blur(3px);padding:10px 14px;border-left:3px solid var(--red-hot);clip-path:var(--cut-sm)}
.hero.v3 .eyebrow{background:rgba(4,5,7,.6)}
.hero-stats .chip{background:rgba(6,7,10,.7)}
@media (max-width:767px){
  .hero.v3::before{background:linear-gradient(180deg,rgba(4,5,7,.5) 0%,rgba(4,5,7,0) 16%,rgba(4,5,7,.1) 60%,rgba(8,9,12,.92) 100%)}
}

/* ---------- มือถือ: แถบโซเชียลลอยทับปุ่มใน hero (เจ้าของ 10 ก.ย. "มือถือล้นจอ") - ซ่อนไว้จนเลื่อนพ้น hero ---------- */
@media (max-width:767px){
  .rail{transition:opacity .3s ease;gap:2px}
  .rail a{width:36px;height:36px}
  body.at-top .rail{opacity:0;pointer-events:none}
  .hero.v3 .hero-cta,.hero.v3 .hero-stats{padding-right:4px}
}

/* ---------- คู่มือระบบเกม (/guide) ---------- */
.guide-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
.guide-side{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:14px}
.guide-nav,.guide-toc{background:var(--panel);border:1px solid var(--line);clip-path:var(--cut-sm);display:flex;flex-direction:column}
.guide-nav-h{font-size:11px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;padding:12px 14px 6px}
.guide-nav a,.guide-toc a{display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:13.5px;color:#C3C8D2;border-top:1px solid var(--line)}
.guide-nav a .i{width:16px;height:16px;color:var(--fg-3)}
.guide-nav a:hover,.guide-toc a:hover{background:rgba(255,255,255,.04);color:#fff}
.guide-nav a.on{background:rgba(179,30,34,.16);color:#fff;box-shadow:inset 3px 0 0 var(--red)}
.guide-nav a.on .i{color:var(--red-hot)}
.guide-main{min-width:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:28px}
.fact{background:linear-gradient(160deg,var(--panel),#0C0E14);border:1px solid var(--line);padding:14px 16px;clip-path:var(--cut-sm)}
.fact .k{display:block;font-size:12px;color:var(--fg-3)}
.fact b{display:block;font-size:17px;font-weight:700;font-style:italic;margin-top:4px;color:var(--gold-lt);font-variant-numeric:tabular-nums;line-height:1.3}
.gsec{margin-bottom:34px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.gsec h2{font-size:clamp(19px,2.2vw,24px);font-weight:700;font-style:italic;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.gsec h2::before{content:"";width:5px;height:22px;background:var(--red);transform:skewX(-12deg);flex:none}
.gsec p{color:#D2D6DE;font-size:15px;line-height:1.75;margin-bottom:12px}
.glist{list-style:none;display:flex;flex-direction:column;gap:9px;margin:6px 0 12px}
.glist li{position:relative;padding-left:22px;color:#D2D6DE;font-size:14.5px;line-height:1.7}
.glist li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;background:var(--gold);clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)}
.gsteps{list-style:none;counter-reset:gs;display:flex;flex-direction:column;gap:12px;margin:6px 0 14px}
.gsteps li{counter-increment:gs;position:relative;padding:12px 16px 12px 58px;background:var(--panel);border:1px solid var(--line);clip-path:var(--cut-sm);font-size:14.5px;line-height:1.7;color:#D2D6DE}
.gsteps li::before{content:counter(gs,decimal-leading-zero);position:absolute;left:14px;top:10px;font-size:22px;font-weight:800;font-style:italic;color:var(--red-hot)}
.gsec .tbl-wrap{margin:10px 0 12px;clip-path:var(--cut-sm)}
.gsec table{min-width:0}
.gsec td b{color:var(--gold-lt)}
.guide-next{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.guide-card{display:flex;flex-direction:column}
.guide-card .more{margin-top:auto;padding-top:12px;color:var(--gold);font-size:13px;display:flex;align-items:center;gap:6px}
.grid-feat a.feat{display:flex;flex-direction:column}
@media (max-width:1023px){
  .guide-grid{grid-template-columns:220px minmax(0,1fr);gap:20px}
  .guide-toc{display:none}
}

/* ---------- ไอเทมมอลล์: ไอคอนต้นฉบับเล็ก ห้ามยืด (เจ้าของ 10 ก.ย. 2569) ----------
   วางไอคอนขนาดจริงกลางแผ่นเรืองแสงในกรอบช่องไอเทม แทนการขยายเต็มการ์ดจนแตก */
.prod-img{aspect-ratio:4/3;background:radial-gradient(circle at 50% 45%,rgba(201,152,88,.22),transparent 58%),linear-gradient(180deg,#12141B,#0A0C11)}
.prod-img::before{content:"";position:absolute;width:132px;height:132px;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px solid rgba(235,201,141,.35);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  clip-path:var(--cut-sm);box-shadow:0 0 0 4px rgba(0,0,0,.35),inset 0 0 26px rgba(201,152,88,.15)}
.prod-img img{position:relative;width:min(44%,96px);height:auto;max-height:96px;object-fit:contain;image-rendering:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.7));transition:transform .3s ease}
.prod:hover .prod-img img{transform:scale(1.08)}
.prod-img .i{position:relative}

/* ---------- kicker ในหัวเรื่องหน้าย่อย + แถบหัวข้อคู่มือบนมือถือ ---------- */
.page-head h1 .kicker{display:block;font-size:12px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;font-style:normal;font-weight:600;margin-bottom:8px}

/* ---------- ไอคอนโซเชียลลอย: สีแบรนด์ (เจ้าของ 10 ก.ย. "ให้มันเป็นสีด้วย เฟสสีน้ำเงิน") ---------- */
.rail a{color:#fff;border-color:rgba(255,255,255,.14)}
.rail a[aria-label="เฟซบุ๊ก"]{background:#1877F2}
.rail a[aria-label="ยูทูบ"]{background:#FF0000}
.rail a[aria-label="ติ๊กต็อก"]{background:#0F0F12;box-shadow:inset 2px 0 0 #25F4EE,inset -2px 0 0 #FE2C55}
.rail a[aria-label="ดิสคอร์ด"]{background:#5865F2}
.rail a[aria-label="กลับขึ้นบน"]{background:rgba(16,18,24,.92);color:var(--fg-2)}
.rail a:hover{filter:brightness(1.15);background:inherit}
.rail a[aria-label="เฟซบุ๊ก"]:hover{background:#1877F2}
.rail a[aria-label="ยูทูบ"]:hover{background:#FF0000}
.rail a[aria-label="ติ๊กต็อก"]:hover{background:#0F0F12}
.rail a[aria-label="ดิสคอร์ด"]:hover{background:#5865F2}
.rail a[aria-label="กลับขึ้นบน"]:hover{background:var(--red);color:#fff}

/* ---------- มือถือเลื่อนซ้ายขวาได้ (เจ้าของ 10 ก.ย.): body{overflow-x:hidden} อย่างเดียวกันไม่อยู่บน Chrome/Safari มือถือ
   ต้อง clip ทั้ง html และ body และ clip hero ด้วยเพราะลูกใน hero ถูก transform (dolly/parallax) ---------- */
html,body{overflow-x:clip}
.hero.v3{overflow:clip}
@media (max-width:767px){
  .hero-copy,.hero-side{transform:none!important}
  .hero.v3 .prereg{max-width:100%}
}

/* ---------- คู่มือบนมือถือ: ปุ่มเมนูเลือกหัวข้อ ---------- */
.guide-pick{display:none}
@media (max-width:767px){
  .guide-grid{grid-template-columns:1fr;gap:16px}
  .guide-side{display:block;position:sticky;top:calc(var(--nav-h) + 8px);z-index:20}
  .guide-nav,.guide-toc{display:none}
  .guide-pick{display:block;position:relative}
  .guide-pick summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);clip-path:var(--cut-sm);cursor:pointer;user-select:none}
  .guide-pick summary::-webkit-details-marker{display:none}
  .guide-pick .lbl{font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;flex:none}
  .guide-pick .cur{display:flex;align-items:center;gap:8px;font-weight:700;font-style:italic;color:#fff;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .guide-pick .cur .i{width:16px;height:16px;color:var(--red-hot);flex:none}
  .guide-pick .chev{width:18px;height:18px;color:var(--fg-3);transition:transform .2s;flex:none}
  .guide-pick[open] .chev{transform:rotate(180deg)}
  .guide-pick[open] summary{border-color:var(--red)}
  .guide-pick-list{position:absolute;left:0;right:0;top:calc(100% + 6px);max-height:min(70vh,560px);overflow-y:auto;background:#0E1016;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.7);z-index:30;display:flex;flex-direction:column}
  .guide-pick-list .guide-nav-h{padding:12px 14px 4px;font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;background:#0E1016;position:sticky;top:0}
  .guide-pick-list a{display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:14px;color:#C3C8D2;border-top:1px solid var(--line)}
  .guide-pick-list a .i{width:16px;height:16px;color:var(--fg-3);flex:none}
  .guide-pick-list a.on{background:rgba(179,30,34,.16);color:#fff;box-shadow:inset 3px 0 0 var(--red)}
  .guide-pick-list a.on .i{color:var(--red-hot)}
  .guide-pick-list a.all{justify-content:center;color:var(--gold);font-weight:700;background:rgba(255,255,255,.03)}
}

/* ---------------------------------------------------------------- ปุ่มสลับภาษา TH/EN
   สีเขียวเพื่อให้เด่นออกจากปุ่มแดง/ทองของเว็บ - เจ้าของสั่งให้เห็นชัดทั้งมือถือและจอใหญ่ */
.lang-sw{display:inline-flex;align-items:center;justify-content:center;gap:5px;margin-left:14px;
  padding:6px 13px;font-size:12.5px;font-weight:800;letter-spacing:.04em;
  color:#0B1F14;background:linear-gradient(100deg,#2BD576,#7BE8A8);
  border:1px solid rgba(43,213,118,.55);box-shadow:0 4px 16px rgba(43,213,118,.28);
  cursor:pointer;white-space:nowrap;clip-path:var(--cut-sm,none)}
.lang-sw:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ตัวบนแถบมือถือ - ซ่อนบนจอใหญ่ (จอใหญ่ใช้ตัวในแถบเมนูแล้ว) */
.lang-sw-m{display:none}
@media (max-width:980px){
  .lang-sw{display:none}
  .lang-sw-m{display:inline-flex;margin:0 10px 0 auto;padding:7px 14px;font-size:13px}
}


/* ---- โมดอลรายละเอียดสินค้า (10 ก.ย. 2569) ------------------------------------------
   การ์ดในหน้าร้านเล็กลงจนใส่รายละเอียดไม่ไหว จึงย้ายของทั้งหมด (คำอธิบาย ไอเทมข้างใน
   โอกาสของกล่องสุ่ม ตัวเลือกตัวละคร จำนวน) มาไว้ในโมดอลใบเดียวที่ใช้ร่วมกันทุกสินค้า */
.pm{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px}
/* ★ ต้องเขียนเอง - display:flex ของ .pm ชนะ [hidden]{display:none} ที่เบราว์เซอร์ให้มา
   (กฎ UA มีน้ำหนักต่ำกว่า class) ถ้าไม่มีบรรทัดนี้ โมดอลจะเด้งค้างตั้งแต่เปิดหน้า */
.pm[hidden]{display:none}
.pm-bg{position:absolute;inset:0;background:rgba(3,4,7,.78);backdrop-filter:blur(3px)}
.pm-box{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:linear-gradient(170deg,#13151C,#0A0C11);border:1px solid var(--line);
  clip-path:var(--cut);padding:20px 20px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pm-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--fg-3);
  font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.pm-x:hover{color:var(--fg)}
.pm-top{display:flex;gap:15px;align-items:flex-start}
.pm-img{width:96px;height:96px;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(201,152,88,.18),transparent 65%),#0C0E13;border:1px solid var(--line)}
.pm-img img{width:100%;height:100%;object-fit:cover}
.pm-head{min-width:0;flex:1}
.pm-head h3{font-size:17px;font-weight:700;line-height:1.35;margin-bottom:5px}
.pm-head p{font-size:12.5px;color:var(--fg-3);line-height:1.55}
.pm-price{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.pm-price b{font-size:24px;color:var(--gold-lt);font-style:italic;font-variant-numeric:tabular-nums}
.pm-price s{color:var(--fg-3);font-size:13px}
.pm-meta{font-size:11.5px;color:var(--fg-3);margin-top:4px}
.pm-items{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.pm-items-h{font-size:12px;color:var(--gold-lt);letter-spacing:.06em;text-transform:uppercase;margin-bottom:9px}
.pm-items ul{display:flex;flex-direction:column;gap:9px}
.pm-items li{font-size:13px;color:var(--fg-2);line-height:1.45;
  border-left:2px solid rgba(201,152,88,.35);padding-left:10px}
.pm-items li b{color:var(--fg)}
.pm-items li p{font-size:11.5px;color:var(--fg-3);margin-top:3px;line-height:1.5}
.pm-tag{font-size:11px;color:var(--gold-lt);margin-left:7px}
.pm-buy{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.pm-lbl{font-size:11.5px;color:var(--fg-3);letter-spacing:.04em}
.pm-qty{display:flex;align-items:center;gap:8px}
.pm-qty button{width:36px;height:36px;flex:none;background:#171A22;border:1px solid var(--line);
  color:var(--fg);font-size:18px;line-height:1;cursor:pointer}
.pm-qty button:hover{border-color:rgba(201,152,88,.5)}
.pm-qty input{width:74px;text-align:center;padding:8px;background:#0E1016;border:1px solid var(--line);
  color:var(--fg);font:inherit;font-variant-numeric:tabular-nums}
.pm-total{margin-left:auto;font-size:14px;color:var(--gold-lt);font-variant-numeric:tabular-nums}
.pm-note{font-size:11.5px;color:var(--fg-3)}
/* เลือกกระเป๋าจ่าย พ้อยจริง/พ้อยล็อค (27 ก.ย. 2569) */
#pm-wallet{display:flex;flex-direction:column;gap:6px}
#pm-wallet[hidden]{display:none}
.pm-wopt{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;background:#0E1016;
  border:1px solid var(--line);cursor:pointer;font-size:13px;color:var(--fg-2)}
.pm-wopt:has(input:checked){border-color:rgba(201,152,88,.6)}
.pm-wopt input{margin-top:3px}
.pm-wopt small{display:block;font-size:11px;color:var(--fg-3);margin-top:2px}
@media (max-width:479px){
  .pm{padding:10px}
  .pm-box{padding:16px 15px 18px}
  .pm-img{width:72px;height:72px}
}

/* ---- ช่องค้นหาสินค้าในไอเทมมอลล์ (10 ก.ย. 2569) ---- */
.shop-find{display:flex;align-items:center;gap:9px;margin:16px 0 4px;flex-wrap:wrap}
.shop-find .i{width:17px;height:17px;color:var(--fg-3);flex:none}
.shop-find .inp{flex:1;min-width:180px;max-width:340px;padding:9px 12px;font-size:13.5px;
  background:#0E1016;border:1px solid var(--line);color:var(--fg)}
.shop-find .inp:focus{outline:none;border-color:rgba(201,152,88,.55)}
.shop-find .btn{padding:9px 16px;font-size:13px}
.shop-found{font-size:12px;color:var(--fg-3)}
@media (max-width:479px){
  .shop-find .inp{min-width:0;flex:1 1 100%;max-width:none}
}


/* ---- ยอดกดดาวน์โหลดจริง ใต้ปุ่มโหลด (12 ก.ย. 2569) ---- */
.dlstat{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:14px 0 0}
.dlstat span{display:inline-flex;align-items:center;gap:7px;
  font-size:13px;color:#9aa3b2;letter-spacing:.01em}
.dlstat .i{width:15px;height:15px;opacity:.75}
.dlstat b{color:#f5b301;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}


/* ---------------- ป๊อปอัปโปรโมชั่นกลางจอ (12 ก.ย. 2569) ----------------
   วางท้ายไฟล์เพื่อให้ทับสไตล์อื่นได้แน่นอน - ไฟล์นี้เคยมีปัญหาชุดท้ายทับชุดต้นมาแล้ว */
#promo{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:20px;
  background:rgba(4,5,8,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:promo-in .18s ease-out}
#promo[hidden]{display:none}
.promo-box{position:relative;width:min(92vw,520px);max-height:92vh;line-height:0}
.promo-box img{width:100%;height:auto;max-height:92vh;object-fit:contain;
  border:1px solid rgba(255,214,120,.35);box-shadow:0 24px 70px rgba(0,0,0,.7)}
.promo-go{position:absolute;inset:0;cursor:pointer}
.promo-x{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;font-size:26px;line-height:1;cursor:pointer;
  color:#fff;background:#C1121F;border:2px solid rgba(255,255,255,.9);
  box-shadow:0 4px 16px rgba(0,0,0,.6);transition:transform .15s}
.promo-x:hover{transform:scale(1.08)}
@keyframes promo-in{from{opacity:0}to{opacity:1}}
/* มือถือ: ปุ่มปิดห้ามล้นจอ ดึงเข้ามาอยู่ในกรอบรูป */
@media(max-width:560px){
  .promo-box{width:94vw}
  .promo-x{top:6px;right:6px;width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){ #promo{animation:none} }


/* ---------------- กระดานอันดับ /ranking (12 ก.ย. 2569) ---------------- */
.rk-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.rk-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-size:13.5px;
  font-weight:600;color:var(--fg-2);background:var(--panel);border:1px solid var(--line-2);
  clip-path:var(--cut-sm);transition:.15s;white-space:nowrap}
.rk-tab:hover{border-color:var(--red);color:#fff}
.rk-tab.on{background:linear-gradient(135deg,#C1121F,#7D0A12);border-color:#FF4D4D;color:#fff}
.rk-tab .i{width:16px;height:16px}
.rk-tbl{margin-top:18px}
/* ปุ่มเลือกเซิร์ฟ (อันดับแยกเซิร์ฟ 13 ก.ย.) - ใช้สีป้าย .wtag-N เดิม ตัวที่เลือกอยู่ทึบ+ขอบชัด */
.rk-srvs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.rk-srvs-k{font-size:12.5px;color:var(--fg-3);margin-right:2px}
/* ตัวเลือก .rk-srvs .rk-srv สองชั้น - .wtag ประกาศทีหลังในไฟล์ ชั้นเดียวจะโดนทับ padding */
.rk-srvs .rk-srv{padding:7px 14px;font-size:13.5px;text-decoration:none;opacity:.6;transition:opacity .15s}
.rk-srvs .rk-srv:hover,.rk-srvs .rk-srv.on{opacity:1}
.rk-srvs .rk-srv.on{box-shadow:0 0 0 2px var(--wtag) inset;font-weight:700}
.rk-tbl td{vertical-align:middle}
/* มือถือ (13 ก.ย. 2569 เจ้าของ "มือถือเห็นไม่ครบ"): table{min-width:520px} ทั่วเว็บ + .tbl ไม่มี overflow
   คอลัมน์เลเวลตกขอบขวาหายไปเลย - จอแคบซ่อนคอลัมน์คลับ/หัวหน้า ย้ายไปเป็นบรรทัดเล็กใต้ชื่อ */
.rk-tbl table{min-width:0}
.rk-gu{font-size:12.5px;color:var(--fg-3);font-weight:400;margin-left:4px;word-break:break-word}
.rk-sub{display:none;font-size:11.5px;color:var(--fg-3);margin-top:2px;font-weight:400}
@media(max-width:640px){
  .rk-tbl .rk-club{display:none}
  .rk-tbl .rk-sub{display:block}
  .rk-tbl th,.rk-tbl td{padding:9px 8px;font-size:13px}
  .rk-tbl th:first-child,.rk-tbl td:first-child{width:46px !important;padding-left:10px}
  .rk-tbl td b{word-break:break-word}
}
.rk-no{display:inline-grid;place-items:center;width:30px;height:30px;font-size:13px;
  color:var(--fg-3);font-variant-numeric:tabular-nums}
.rk-medal{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font-size:13px;font-weight:800;color:#2A1B00}
.rk-m1{background:linear-gradient(180deg,#FFE58A,#E0A800)}
.rk-m2{background:linear-gradient(180deg,#E8ECF3,#A9B2C0)}
.rk-m3{background:linear-gradient(180deg,#E9A46A,#B06A2C);color:#fff}
.rk-top b{color:#fff}
@media(max-width:560px){ .rk-tab{padding:9px 12px;font-size:12.5px} }


/* ชื่อผู้จัดทำในแถบล่าง - ลิงก์ไปเฟซบุ๊กของเจ้าของ ให้เห็นว่ากดได้แต่ไม่แย่งสายตา */
.ftr-by{color:var(--gold);font-weight:600;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--gold) 40%, transparent);transition:.15s}
.ftr-by:hover{color:#fff;border-bottom-color:#fff}


/* ---------------- ป้ายชื่อเซิร์ฟเวอร์ (12 ก.ย. 2569) ----------------
   เจ้าของแจ้ง: ในหน้าอันดับชื่อเซิร์ฟเป็นสีเทาเหมือนกันหมด กวาดตาแล้วแยกไม่ออกว่าแถวไหนเซิร์ฟไหน

   * สีผูกกับ "เลขกลุ่มเซิร์ฟ" (WorldGroup) ไม่ใช่ชื่อ - เจ้าของเปลี่ยนชื่อเซิร์ฟจาก /servers
     ได้ทุกเมื่อ ถ้าผูกกับชื่อ พอเปลี่ยนชื่อแล้วสีจะหายไปเงียบ ๆ
   * เซิร์ฟที่ 5 ขึ้นไปวนกลับมาใช้สีแรก ยังมีชื่อกำกับอยู่ ดีกว่าโผล่มาไม่มีสีจนดูเหมือนหน้าพัง
   * ไม่ใช้แดง/ทองของแบรนด์ เพราะเหรียญอันดับ 1-3 กับแท็บที่เลือกอยู่ใช้ไปแล้ว จะกลืนกัน
   * ★ ชื่อคลาสต้องเป็น .wtag ห้ามใช้ .srv เด็ดขาด - .srv ถูกจองไว้แล้วเป็น "การ์ดเซิร์ฟเวอร์"
     ของหน้า /status (บรรทัด 788) ผมเคยตั้งชื่อซ้ำแล้วบล็อกนี้ซึ่งอยู่ท้ายไฟล์ไปทับของเดิม
     หน้า /status แตกทั้งหน้าทันทีที่ deploy (12 ก.ย. 2569) - ชื่อคลาสกว้าง ๆ ต้อง grep ก่อนเสมอ
   * ใช้ตัวแปร --wtag ตัวเดียว ไม่ใช้ currentColor เพราะ currentColor จะไปทับสีตัวอักษรด้วย */
.wtag{--wtag:var(--fg-3);
  display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;
  font-size:12.5px;font-weight:600;white-space:nowrap;color:#fff;
  background:color-mix(in srgb, var(--wtag) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--wtag) 45%, transparent);
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px))}
/* จุดนำหน้า: ตัวแยกที่ไม่ได้พึ่งสีอย่างเดียว ช่วยตอนป้ายอยู่ชิดกันและช่วยคนตาบอดสี */
.wtag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wtag);flex:none}
.wtag-1{--wtag:#3FC3F0}
.wtag-2{--wtag:#FF7AB8}
.wtag-3{--wtag:#2BD576}
.wtag-4{--wtag:#EBC98D}
@media(max-width:560px){
  .wtag{font-size:11.5px;padding:3px 9px 3px 7px;gap:5px}
  .wtag::before{width:6px;height:6px}
}


/* ---------------- แถบสถานะสดใต้เมนู (12 ก.ย. 2569) ----------------
   ใช้โครง .obt-bar เดิมของนาฬิกานับถอยหลัง (แถบลอย fixed ใต้เมนู) แต่เตี้ยกว่ามาก
   เพราะนาฬิกามีเลขสูง 52px ส่วนแถบนี้เป็นตัวเลขสถานะ ไม่ควรไปบังหัวเรื่องในฮีโร่ */
.live-bar{padding:11px 4vw 12px;gap:clamp(18px,3.5vw,40px)}
.lb-now{display:flex;align-items:center;gap:10px}
.lb-now .dot{width:10px;height:10px}
.lb-now-t{display:flex;flex-direction:column;line-height:1.25}
.lb-now-t b{font-size:15px;font-weight:700}
.lb-now-t span{font-size:10.5px;color:var(--fg-3);letter-spacing:1.2px;text-transform:uppercase}

.lb-figs{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.lb-figs>div{display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:62px}
.lb-figs b{font-size:clamp(19px,2.2vw,25px);font-weight:800;font-style:italic;
  font-variant-numeric:tabular-nums;color:var(--gold-lt)}
.lb-figs span{font-size:10.5px;color:var(--fg-3);white-space:nowrap}

.lb-cta{display:flex;align-items:center;gap:9px}
.lb-cta .btn{padding:9px 16px;font-size:13px}
.lb-cta .btn .i{width:15px;height:15px}

/* จอแคบ: แถบเดิมกลายเป็นคอลัมน์อยู่แล้ว (กฎของ .obt-bar) จัดของในแถวให้พอดีจอ
   ปุ่มยาวเต็มแถวเพราะเป็นเป้านิ้ว ไม่ใช่ของประดับ */
@media(max-width:760px){
  /* สองแถวพอ: แถวบน สถานะ+ปุ่ม (ทั้งคู่สั้น) แถวล่าง ตัวเลขสามช่องกางเต็มความกว้าง
     ถ้าจอแคบจนแถวบนไม่พอ flex-wrap จะตัดลงเป็นสามแถวเอง ไม่ล้นออกนอกจอ */
  .live-bar{flex-direction:row;flex-wrap:wrap;justify-content:center;
    align-items:center;gap:9px 14px;padding:8px 12px 9px}
  .lb-now{order:1}
  .lb-cta{order:2}
  .lb-figs{order:3;width:100%;gap:10px;justify-content:space-around}
  .lb-figs b{font-size:18px}
  .lb-now-t b{font-size:13.5px}
}
@media(max-width:420px){
  .lb-cta .btn{padding:8px 12px;font-size:12px}
  .lb-figs>div{min-width:0}
}


/* ---------------- หน้าเติมเงินแบบขั้นตอน /account/topup (13 ก.ย. 2569) ----------------
   ทุกคลาสขึ้นต้น tp- เพราะ site.css ใช้ร่วมทั้งเว็บ ชื่อกว้าง ๆ เคยไปทับการ์ดหน้า /status มาแล้ว */
.tp-steps{list-style:none;display:flex;gap:6px;margin:0 0 16px;padding:0;flex-wrap:wrap}
.tp-steps li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--fg-3);
  padding:6px 12px 6px 6px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.tp-steps li i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.08);font-size:12px;font-weight:700}
.tp-steps li.on{color:#fff;border-color:var(--gold)}
.tp-steps li.on i{background:var(--gold);color:#150E06}
.tp-steps li.done{color:var(--fg-2)}
.tp-steps li.done i{background:rgba(43,213,118,.25);color:#7BE3A9}

.tp-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.tp-m{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;text-decoration:none;
  color:var(--fg);background:var(--panel-2,rgba(255,255,255,.03));border:1px solid var(--line-2,var(--line));
  clip-path:var(--cut-sm);transition:.15s}
.tp-m:hover,.tp-m:focus-visible{border-color:var(--gold);transform:translateY(-1px)}
.tp-m .i{width:28px;height:28px;color:var(--gold)}
.tp-m b{font-size:16px}
.tp-m span{font-size:13px;color:var(--fg-2);line-height:1.5}
.tp-m-auto{border-color:rgba(201,152,88,.55);background:linear-gradient(160deg,rgba(201,152,88,.14),rgba(255,255,255,.02))}
/* .tp-m span (สีเทา) ชนะ .tp-badge เดิม ตัวหนังสือ "แนะนำ" จึงเป็นเทาบนทองอ่านไม่ออก - ต้องผูกกับ .tp-m */
.tp-m .tp-badge{position:absolute;top:10px;right:10px;font-size:11.5px;font-weight:800;line-height:1.5;
  letter-spacing:.3px;color:#1A1004;background:var(--gold-lt,var(--gold));padding:2px 9px}
.tp-chosen{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--fg-2)}
.tp-chosen b{color:#fff}

.tp-qr{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;margin-top:6px}
.tp-qr-img{flex:none;width:min(260px,100%)}
.tp-qr-img img{display:block;width:100%;height:auto;background:#fff;padding:6px;clip-path:var(--cut-sm)}
.tp-qr-info{flex:1;min-width:220px}
.tp-amt{font-size:26px !important;color:var(--gold-lt);font-variant-numeric:tabular-nums}
.tp-wait{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:14px}
.tp-wait .k{color:var(--fg-3)}
.tp-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--gold);
  animation:tp-spin 1s linear infinite;flex:none}
@keyframes tp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tp-spin{animation:none}}
.tp-bank{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

/* หน้าเติมเงิน: เลือกธนาคารรับเงินของ QR อัตโนมัติ (13 ก.ย.) */
.tp-bks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.tp-bk{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.03);transition:border-color .15s}
.tp-bk input{position:absolute;opacity:0;pointer-events:none}
.tp-bk i{font-style:normal;flex:none;display:grid;place-items:center;min-width:38px;height:38px;padding:0 6px;
  border-radius:50%;font-size:12px;font-weight:800;color:#fff;background:#555}
.tp-bk-kbank i{background:#138F2D}
.tp-bk-scb i{background:#4E2A84}
.tp-bk-maemanee i{background:#C8102E}
.tp-bk-krungsri i{background:#FEC43B;color:#3C2A00}
.tp-bk b{font-size:14.5px}
.tp-bk:hover{border-color:rgba(201,152,88,.6)}
.tp-bk:has(input:checked){border-color:var(--gold);background:rgba(201,152,88,.12)}
.tp-bk:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}

/* หน้าเติมเงิน QR อัตโนมัติ: บอกขั้นหลังสแกนจ่าย (13 ก.ย.) */
.tp-hint{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--fg-2)}
.tp-hint.warn{color:#FFD98A}
.pop-box .pop-pts{font-size:24px;font-weight:800;color:var(--gold-lt);margin:4px 0 2px}
.pop-box .pop-sub{font-size:13px;color:var(--fg-3);margin:0 0 14px}
.tp-cd{font-variant-numeric:tabular-nums;opacity:.75;margin-left:4px}
/* ช่องทางชำระเงินที่ปิดชั่วคราว (TMWEASY ใช้ไม่ได้) - เห็นแต่กดไม่ได้ */
.tp-m-off{opacity:.55;cursor:not-allowed;filter:grayscale(.6)}
.tp-m-off:hover{transform:none;border-color:var(--line)}
.tp-m .tp-badge-off{background:#3a3f4a;color:#E8ECF3}
.pop-ic.info{background:rgba(201,152,88,.14);color:var(--gold-lt);border:1px solid rgba(201,152,88,.45)}
.tp-cancel{display:inline-block;margin:0 0 0 8px}

/* ---------------- ฮีโร่หลบแถบลอยใต้เมนู (13 ก.ย. 2569) ----------------
   .obt-bar เป็น fixed จึงไม่กินที่ในหน้า ฮีโร่เว้นแค่ความสูงเมนู - บนมือถือแถบตัดเป็นสองแถว (~110px)
   เลยทับหัวเรื่อง "EP9 Online" (เจ้าของแคปจาก iPhone 16 Pro Max) ความสูงจริงวัดโดย site.js ใส่ --obt-h
   ค่าในวงเล็บเป็นค่าเผื่อก่อน JS ทำงาน */
.obt-bar ~ .hero.v3 .wrap{padding-top:calc(var(--nav-h) + var(--obt-h,80px) + 8vh)}
@media (max-width:1023px){ .obt-bar ~ .hero.v3 .wrap{padding-top:calc(var(--nav-h) + var(--obt-h,110px) + 5vh)} }
@media (max-width:767px){ .obt-bar ~ .hero.v3 .wrap{padding-top:calc(var(--nav-h) + var(--obt-h,110px) + 18px)} }

/* ---------------- เมนูบัญชีบนมือถือ: ปุ่มเดียว + โมดอลเลือกหน้า (13 ก.ย. 2569) ---------------- */
.acc-menu-btn{display:none;width:100%;align-items:center;gap:12px;margin-top:12px;padding:11px 14px;
  background:var(--panel);border:1px solid var(--line-2,var(--line));color:var(--fg);text-align:left;
  font:inherit;cursor:pointer;clip-path:var(--cut-sm)}
.acc-menu-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.acc-menu-btn>.i{width:20px;height:20px;color:var(--red-hot,var(--red))}
.acc-menu-btn span{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.acc-menu-btn small{font-size:11px;color:var(--fg-3);letter-spacing:.4px}
.acc-menu-btn b{font-size:15px;font-weight:700}
.acc-menu-btn .accm-caret{width:20px;height:20px;color:var(--fg-2)}
/* ★ ต้องอยู่หลังกฎ display:none ข้างบน - เคยวางไว้ใน media query ช่วงต้นไฟล์ กฎพื้นฐานท้ายไฟล์เลยทับ ปุ่มหายทั้งปุ่ม */
@media (max-width:1023px){ .acc-side .acc-nav{display:none} .acc-menu-btn{display:flex} }
.pop.accm{align-items:flex-end}
@media (min-width:600px){ .pop.accm{align-items:center} }
.pop-box.accm-box{width:min(460px,100%);padding:16px 14px 14px;text-align:left;max-height:calc(100svh - 40px);overflow:auto}
.accm-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}
.accm-head h3{margin:0;font-size:17px}
.accm-x{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;
  border:1px solid var(--line);color:var(--fg-2);cursor:pointer}
.accm-x .i{width:18px;height:18px}
.accm-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.accm-list a{display:flex;align-items:center;gap:9px;padding:13px 12px;font-size:14px;color:#C3C8D2;
  background:rgba(255,255,255,.03);border:1px solid var(--line);text-decoration:none;min-width:0}
.accm-list a span{overflow-wrap:anywhere}
.accm-list a .i{flex:none;width:18px;height:18px;color:var(--fg-3)}
.accm-list a:hover,.accm-list a:focus-visible{border-color:var(--gold);color:#fff}
.accm-list a.on{background:rgba(179,30,34,.18);border-color:rgba(228,38,44,.55);color:#fff}
.accm-list a.on .i{color:var(--red-hot,var(--red))}
.accm-list a.out{grid-column:1/-1;justify-content:center;color:var(--fg-2)}
@media (max-width:340px){ .accm-list{grid-template-columns:1fr} }

/* ---------- โพเดียม Top 3 หน้าจัดอันดับ (21 ก.ย. 2569 "อยากให้ผู้เล่นรู้สึกเด่น") ----------
   คลาส rkp-* ใหม่ทั้งชุด grep แล้วไม่ชนของเดิม (กฎ site.css ไฟล์เดียวทั้งเว็บ) */
.rkp{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:26px 0 6px}
.rkp-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:150px;max-width:220px;flex:1;padding:18px 14px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  }
.rkp-1{order:2;padding-top:26px;min-width:170px;
  background:linear-gradient(180deg,rgba(255,200,60,.16),rgba(255,200,60,.03));
  box-shadow:0 0 26px rgba(255,190,40,.12)}
.rkp-2{order:1;background:linear-gradient(180deg,rgba(200,210,230,.12),rgba(200,210,230,.02))}
.rkp-3{order:3;background:linear-gradient(180deg,rgba(224,141,88,.13),rgba(224,141,88,.02))}
.rkp-crown{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:26px;height:26px;color:#ffd23e;filter:drop-shadow(0 2px 6px rgba(255,190,40,.6))}
.rkp-medal{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:999px;font-weight:800;font-size:15px;color:#1a1206}
.rkp-1 .rkp-medal{background:linear-gradient(160deg,#ffe9a3,#f5b301);box-shadow:0 0 12px rgba(255,190,40,.5)}
.rkp-2 .rkp-medal{background:linear-gradient(160deg,#eef2fa,#aab4c8)}
.rkp-3 .rkp-medal{background:linear-gradient(160deg,#ffd0ae,#c97b4a)}
.rkp-name{font-size:16px;color:#fff;letter-spacing:.2px;text-align:center;word-break:break-all}
.rkp-1 .rkp-name{font-size:18px;color:#ffe9a3}
.rkp-gu{font-size:12px;color:rgba(255,255,255,.6);text-align:center}
.rkp-score{margin-top:2px;font-size:15px;font-weight:800;color:#fff}
.rkp-1 .rkp-score{color:#ffd23e}
.rkp-score i{font-style:normal;font-weight:400;font-size:11px;color:rgba(255,255,255,.55);margin-left:4px}
@media (max-width:560px){.rkp{gap:8px}.rkp-card{min-width:0;padding:14px 8px 10px}
  .rkp-name{font-size:13.5px}.rkp-1 .rkp-name{font-size:15px}.rkp-score{font-size:13px}}

/* ---------- บ้านของกิลด์ (Club War E-Room) หน้าจัดอันดับ (21 ก.ย. 2569) - rkh-* ใหม่ทั้งชุด */
.rkh{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:22px}
.rkh-card{display:flex;flex-direction:column;gap:5px;padding:16px 16px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  }
.rkh-owned{background:linear-gradient(180deg,rgba(255,200,60,.12),rgba(255,200,60,.02))}
.rkh-room{display:flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.65)}
.rkh-room .i{width:15px;height:15px;opacity:.8}
.rkh-owner{font-size:17px;color:#ffe9a3;letter-spacing:.2px}
.rkh-none{color:rgba(255,255,255,.45);font-weight:600}
.rkh-sub{font-size:12px;color:rgba(255,255,255,.55)}

/* รูปอาชีพบนโพเดียม (21 ก.ย. 2569 "เบื้องต้นดึงรูปอาชีพมาแสดงก่อน แยกเพศด้วย") */
.rkp-img{width:118px;height:150px;object-fit:contain;object-position:bottom;margin:-4px 0 2px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.rkp-1 .rkp-img{width:142px;height:184px}
@media (max-width:560px){.rkp-img{width:84px;height:106px}.rkp-1 .rkp-img{width:100px;height:128px}}

/* คะแนนอุปกรณ์ใต้คะแนนหลักบนโพเดียม (21 ก.ย. 2569) */
.rkp-eq{font-size:11.5px;color:rgba(255,255,255,.6)}
.rkp-1 .rkp-eq{color:rgba(255,222,120,.85)}

/* ตรากิลด์ (21 ก.ย. 2569) - ตราคลาสสิก 16x11 ขยายคมแบบ pixelated, ตรา HD ก็กรอบเดียวกัน */
.rk-gmark{display:inline-block;width:26px;height:18px;object-fit:contain;vertical-align:-3px;margin-right:7px;
  image-rendering:pixelated;border-radius:2px}

/* ---- อันดับโรงเรียน: การ์ดผู้นำท็อป 5 ต่อ รร. (23 ก.ย. 2569 "ผู้เล่นชอบให้อวย") ---- */
.rk-sch{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:22px}
.rk-sch-card{display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.rk-sch-first{background:linear-gradient(180deg,rgba(255,200,60,.12),rgba(255,200,60,.02));
  border-color:rgba(255,200,60,.35)}
.rk-sch-head{display:flex;align-items:center;gap:9px;font-size:16px}
.rk-sch-n{margin-left:auto;font-size:12px;color:rgba(255,255,255,.55)}
.rk-sch-lead{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:rgba(255,200,60,.08);border:1px solid rgba(255,200,60,.22)}
.rk-sch-lead .i{width:22px;height:22px;color:#FFD34D;flex:none}
.rk-sch-lead b{font-size:15.5px;color:#ffe9a3;letter-spacing:.2px}
.rk-sch-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:3px 2px;font-size:13.5px}
.rk-sch-no{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.08);font-style:normal;font-size:11.5px;margin-right:4px;
  color:rgba(255,255,255,.75)}

/* 1 ต.ค. 2569 ประกาศเปิด OPEN BETA (แถบบนหลังเวลาเปิด) - ริบบิ้นแดง + หัวข้อทอง + ตัวเลขออนไลน์ใหญ่ */
.obt-live{gap:clamp(18px,3vw,44px)}
.obt-ann{display:flex;align-items:center;gap:14px;min-width:0}
.obt-ribbon{flex:none;font-weight:800;font-style:italic;letter-spacing:.14em;font-size:13px;color:#fff;
  padding:8px 14px 8px 16px;background:linear-gradient(90deg,#8f1d1d,#e0262c);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%);
  box-shadow:0 6px 20px rgba(224,38,44,.35)}
.obt-ann-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.obt-ann-t b{font-size:clamp(16px,1.9vw,22px);font-weight:800;
  background:linear-gradient(180deg,#fff3c4,#f5b301 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.obt-ann-t span{font-size:12px;color:var(--fg-3)}
.lb-online b{font-size:clamp(30px,3.6vw,44px) !important;color:#ffd76a}
.lb-online>span{display:inline-flex;align-items:center;gap:6px}
.lb-online .dot{width:8px;height:8px}
@media (max-width:760px){
  .obt-live{flex-wrap:wrap;justify-content:center;row-gap:10px}
  .obt-ann{width:100%;justify-content:center;text-align:center}
}

/* 2 ต.ค. 2569 คะแนนวอร์ Tyranny: ป้ายเหรียญ PvP อันดับคิล + แถบอธิบายรางวัล - rkt-* ใหม่ทั้งชุด */
.rkt-coin{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;margin-left:6px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap;color:#ffd23e;background:rgba(255,200,60,.12);
  border:1px solid rgba(255,200,60,.32)}
.rkp-card .rkt-coin{margin:4px 0 0}
.rkt-pay b{color:#ffe9a3}
.rkt-pay-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rkt-pay-row .rkt-coin{margin-left:0}

/* 4 ต.ค. 2569 iPhone / iPad ผ่าน TestFlight - การ์ดหน้า /download, ปุ่มหน้าแรก, หน้าคู่มือ /download/ios
   คลาสใหม่ทั้งชุด (dl-ios / btn-ios / ios-*) ตรวจแล้วไม่ชนของเดิม · โทนเงิน-ขาวแบบ Apple แยกจากเขียว/ฟ้า/แดง */
.dl-ios{--dl:#E6EAF0;--dl-a:#5A6273;--dl-b:#1E222B;grid-column:1/-1}

.btn.btn-ios{gap:10px;padding:8px 20px 8px 16px;text-align:left;color:#0B0D12;
  background:linear-gradient(180deg,#FFFFFF 0%,#E4E8EE 100%);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 18px rgba(230,234,240,.18)}
.btn.btn-ios:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 26px rgba(230,234,240,.32)}
.btn.btn-ios .i{width:26px;height:26px;color:#0B0D12;vertical-align:0}
.btn-ios-t{display:flex;flex-direction:column;line-height:1.12}
.btn-ios-t small{font-size:10.5px;font-weight:600;letter-spacing:.05em;color:#4A5160}
.btn-ios-t b{font-size:15.5px;font-weight:800;letter-spacing:.01em}
.hero-cta .btn.btn-ios{padding:7px 22px 7px 16px}
/* มีปุ่ม iOS = สี่ปุ่ม: จัดเป็นกริด 2x2 กว้างเท่ากันทุกจอ (แถวเดียวล้นจนปุ่มสุดท้ายตกไปอยู่บรรทัดเดียวโดด ๆ)
   ไม่มี PLAY (download.web ว่าง) เหลือสามปุ่ม - ปุ่มสุดท้ายที่เป็นลำดับคี่กินเต็มแถว */
.hero-cta.has-ios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:600px}
.hero-cta.has-ios .btn{width:100%}
.hero-cta.has-ios > .btn:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:767px){
  .hero-cta.has-ios{gap:10px}
  .hero-cta.has-ios .btn{padding-inline:10px}
  .hero-cta.has-ios .btn.btn-ios{padding-inline:10px}
}

/* หน้า /download/ios - กล่องติดตั้งด่วน: ปุ่มซ้าย QR ขวา (QR ซ่อนบนจอแคบ) */
.ios-get{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;align-items:stretch;max-width:900px}
.ios-get-btns{display:flex;flex-direction:column;gap:12px}
.ios-btn{display:flex;align-items:center;gap:14px;padding:16px 20px;min-height:76px;clip-path:var(--cut);
  background:linear-gradient(140deg,#2A303B,#15181F);border:1px solid var(--line-2);color:#fff;transition:.18s}
.ios-btn:hover{transform:translateY(-2px);border-color:#E6EAF0;box-shadow:0 12px 30px -12px rgba(230,234,240,.5)}
.ios-btn .i{width:30px;height:30px;flex:none;color:#E6EAF0}
.ios-btn span{display:flex;flex-direction:column;gap:3px;min-width:0}
.ios-btn small{font-size:12px;color:var(--fg-2);font-weight:600}
.ios-btn b{font-size:17px;font-weight:800;line-height:1.3}
.ios-btn .ios-go{width:20px;height:20px;margin-left:auto;opacity:.7}
.ios-btn-main{min-height:92px;background:linear-gradient(140deg,#FFFFFF,#DCE1E8);border-color:#fff;color:#0B0D12}
.ios-btn-main .i{color:#0B0D12;width:38px;height:38px}
.ios-btn-main small{color:#4A5160}
.ios-btn-main b{font-size:clamp(18px,2.2vw,21px)}
.ios-get-hint{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--fg-2);line-height:1.6;margin:2px 0 0}
.ios-get-hint .i{width:16px;height:16px;flex:none;margin-top:3px;color:var(--gold)}
.ios-qr{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px;
  background:var(--panel);border:1px solid var(--line);clip-path:var(--cut)}
.ios-qr-box{width:190px;background:#fff;padding:6px}
.ios-qr b{font-size:14.5px;margin-top:4px}
.ios-qr span{font-size:12.5px;color:var(--fg-3);line-height:1.55}
@media (max-width:767px){
  .ios-get{grid-template-columns:1fr}
  .ios-qr{display:none}
}

.ios-steps{grid-template-columns:repeat(2,1fr)}
@media (max-width:767px){ .ios-steps{grid-template-columns:1fr} }
.ios-steps .feat{display:flex;flex-direction:column}
.ios-sub{margin:4px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--fg-2);line-height:1.6}
.ios-sub li::marker{color:var(--gold);font-weight:700}
.ios-step-btn{margin-top:16px;align-self:flex-start}

.ios-faq{display:flex;flex-direction:column;gap:10px;max-width:900px}
.ios-faq details{background:var(--panel);border:1px solid var(--line);clip-path:var(--cut-sm)}
.ios-faq summary{list-style:none;cursor:pointer;padding:15px 44px 15px 18px;font-weight:600;font-size:14.5px;position:relative}
.ios-faq summary::-webkit-details-marker{display:none}
.ios-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:700;color:var(--gold)}
.ios-faq details[open] summary::after{content:"−"}
.ios-faq details[open]{border-color:rgba(201,152,88,.45)}
.ios-faq p{padding:0 18px 16px;font-size:13.5px;color:var(--fg-2);line-height:1.7}
.ios-faq p a{color:var(--gold);text-decoration:underline;margin-left:4px}

/* 7 ต.ค. 2569 ป้ายติดตัว/ไม่ติดตัวบนการ์ดสินค้า */
.prod-bind{font-size:11px;color:#8fd48f;margin:2px 0 4px;line-height:1.3}
.prod-bind-on{color:#f0a060}