/* RAN Vodka — dark gamer theme, gold accent */
:root{
  --bg:#0c0e14; --bg2:#12151f; --card:#171b28; --line:#262c40;
  --txt:#e8eaf2; --dim:#8b92a8; --gold:#f0b945; --gold2:#d49a2a;
  --red:#c03028; --red2:#8c1f1a;
  --blue:#e8a13f; --green:#46c47c;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#0a0c10 url('/assets/img/bg.jpg') no-repeat center top fixed;
  background-size:cover;
  color:var(--txt);
  font-family:"Chakra Petch","Segoe UI",Tahoma,"Sarabun",sans-serif;
  font-size:15px; line-height:1.6;
}
/* ม่านมืดทับ bg เกมให้อ่านตัวหนังสือชัด */
body::before{
  content:''; position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,10,16,.45) 0%, rgba(8,10,16,.62) 45%, rgba(8,10,16,.88) 80%, #0a0c10 100%);
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 32px}
.main{width:100%;padding:28px 32px 60px}
.dim{color:var(--dim)}
.center{text-align:center}
.gold{color:var(--gold)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:#0c0e14 url('/assets/ui/head_bar.png') center/100% 100% no-repeat}
.head-in{display:flex;align-items:center;gap:18px;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:6px}
.logo img{height:88px;display:block;margin:-16px 0 -16px 26px;filter:drop-shadow(0 3px 10px #000)}
.logo:hover{text-decoration:none}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap;min-width:0}
/* ข่าววิ่งใน header */
.ticker{overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-in{display:inline-block;white-space:nowrap;color:#ffd75e;font-size:16px;font-weight:600;
  animation:tick 30s linear infinite}
.ticker:hover .ticker-in{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ปุ่มภาพ PNG (gen จาก master) */
.ibtn{display:block;line-height:0;text-align:center;margin-bottom:0}
.ibtn img{display:inline-block;width:100%;height:auto;max-width:100%}
/* ปุ่มภาพ: ไม่มี hover/active effect — รอสร้างชุดเอฟเฟกต์ใหม่ */
.ibtn.ub{display:inline-block;margin:0 0 0 6px;vertical-align:middle}
.ibtn.ub img{width:150px}
.ibtn-form{display:inline-block;position:relative;background:none;border:0;padding:0;cursor:pointer;line-height:0;
  transition:transform .12s ease,filter .15s ease}
.ibtn-form img{width:auto;height:44px;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 8px 14px rgba(0,0,0,.4));transition:filter .15s ease}
/* hover: ฟิลเตอร์หมุนเฉด แดง -> ทอง */
.ibtn-form:hover{transform:translateY(-2px)}
.ibtn-form:hover img{filter:drop-shadow(0 6px 0 rgba(0,0,0,.55)) drop-shadow(0 12px 18px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(240,185,69,.5)) hue-rotate(42deg) saturate(1.5) brightness(1.15)}
.ibtn-mini{background:none;border:0;padding:0;cursor:pointer;line-height:0;vertical-align:middle}
.ibtn-mini img{width:auto;height:32px}
.ibtn-mini:hover{transform:translateY(-1px);filter:brightness(1.2)}
.ibtn-form:active{transform:translateY(3px);filter:brightness(.92)}
.ibtn-form .ibtn-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#ffefc8;font-weight:700;font-size:15px;letter-spacing:.5px;text-shadow:0 2px 3px #000;pointer-events:none}
.ibtn-form:active img{filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 3px 6px rgba(0,0,0,.35))}

/* ลิงก์เมนูบน + userbox เรียบๆ */
.userbox a{color:#e8b45a;font-size:13px;padding:6px 8px;text-decoration:none}
.userbox a:hover{color:#ffe9b8}
.userbox .acc-link{color:#f0b945;font-weight:700;font-size:14px;padding:0 10px}
.nav-toggle{display:none;background:#1a1206;border:1px solid #6b5230;color:#f0d9a8;font-size:22px;border-radius:2px;min-width:44px;min-height:44px;padding:2px 10px}
/* เมนูมือถือใน nav — ซ่อนบนจอใหญ่ โชว์เมื่อเปิด hamburger */
.mnav{display:none}
.userbox{display:flex;align-items:center;gap:8px}
.pts{color:var(--gold);font-weight:600;font-size:14px}

/* buttons */
/* ปุ่มกลาง: border-image — cap ปลายล็อกขนาด ตัวกลางยืดตามข้อความ (ไม่มีเอฟเฟกต์) */
.btn{display:inline-block;color:#ffefc8;cursor:pointer;font-weight:700;letter-spacing:.5px;
  font-size:15px;text-shadow:0 2px 3px #000;min-width:70px;text-align:center;text-decoration:none;white-space:nowrap;
  border:0 solid transparent;border-width:0 22px;padding:9px 12px;
  border-image:url('/assets/ui/bar_mid.png') 0 16 fill stretch}
.btn.gold{border-image:url('/assets/ui/bar_midgold.png') 0 14 fill stretch}
.btn.green{border-image:url('/assets/ui/bar_midgreen.png') 0 28 0 39 fill stretch}
.btn.red{border-image:url('/assets/ui/bar_midred.png') 0 16 fill stretch}
.btn.ghost{border-image:none;border:1px solid rgba(160,170,190,.4);border-radius:5px;padding:9px 24px;color:#cfd6e4}
.btn.ghost:hover{border-color:rgba(190,200,220,.7);color:#fff}
.btn.sm{border-width:0 16px;padding:6px 10px;font-size:13px;min-width:40px}
.btn:disabled{opacity:.55;cursor:not-allowed}
/* ปุ่มที่เป็น <a> ห้ามขีดเส้นใต้ (ชนะ a:hover global) */
.btn:hover,.side-btn:hover,.ibtn:hover{text-decoration:none}

/* cards/panels */
.card{background:#171b28 url('/assets/img/card_wall.png');border:1px solid var(--line);border-radius:6px;padding:22px;margin-bottom:18px}
/* h2/h3 = แถบแดง gradient (เข้มซ้าย→จางขวา) ตัวหนังสืออยู่ส่วนเข้ม */
.card h2{font-size:18px;margin:0 0 14px;color:#ffe9c9;letter-spacing:.5px;text-shadow:0 1px 3px #000;
  padding:10px 16px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:url('/assets/ui/title_bar.png') left center/100% 100% no-repeat}
.card h3{font-size:16px;margin-bottom:10px;color:#e8ebf4;
  padding:8px 14px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:url('/assets/ui/title_bar.png') left center/100% 100% no-repeat}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* 1fr = minmax(auto) มี floor min-content — ลูกต้องหดต่ำกว่านั้นได้ ไม่งั้นคำยาว (Facebook Group) ดัน track ล้น */
.grid2>*,.grid3>*,.grid4>*{min-width:0}
/* shop: เติมคอลัมน์ตามความกว้างจอ */
.grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
@media(max-width:900px){.grid3,.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

/* forms */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--dim);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg2) url('/assets/img/card_wall.png');border:1px solid var(--line);border-radius:0;
  color:var(--txt);padding:10px 12px;font-size:15px;font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field textarea{min-height:110px;resize:vertical}
.field .hint{font-size:12px;color:var(--dim);margin-top:4px}
form.narrow{max-width:460px;margin:0 auto}

/* flash */
.flash{border-radius:4px;padding:12px 16px;margin-bottom:14px;border:1px solid}
.flash.ok{background:#46c47c22;border-color:var(--green);color:#9fe8c0}
.flash.err{background:#e5534b22;border-color:var(--red);color:#ffb3ae}
.flash.info{background:#4f8cff22;border-color:var(--blue);color:#bcd4ff}

/* table */
/* ครอบตารางกว้าง — เลื่อนแนวนอนในกรอบตัวเองแทนที่จะดันหน้า */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{color:var(--dim);font-weight:600;font-size:13px;text-transform:uppercase}
.tbl tr:hover td{background:#ffffff08}
.tbl .num{text-align:right}

/* shop */
.item-card{background:var(--card) url('/assets/img/card_wall.png');border:1px solid var(--line);border-radius:4px;padding:16px;display:flex;flex-direction:column;gap:8px}
.item-card .iname{font-weight:600;font-size:15px}
.item-card .price{color:var(--gold);font-weight:700;font-size:17px}
.item-card .cat{font-size:12px;color:var(--dim)}
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:2px;background:var(--red);color:#fff;font-weight:700}
.badge.new{background:var(--green)}
.badge.feat{background:var(--gold);color:#241a04}

/* tabs */
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:8px 16px;border-radius:2px;background:var(--card) url('/assets/img/card_wall.png');border:1px solid var(--line);color:var(--txt);font-size:14px;
  box-shadow:0 3px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .12s,box-shadow .12s,filter .15s,background .15s,color .15s}
.tabs a.on{background:var(--gold);color:#241a04;font-weight:600}
.tabs a:hover{text-decoration:none;transform:translateY(-1px);filter:brightness(1.15)}
.tabs a:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}

/* faq */
.faq-q{background:var(--card) url('/assets/img/card_wall.png');border:1px solid var(--line);border-radius:2px;padding:14px 16px;margin-bottom:10px;cursor:pointer;font-weight:600}
.faq-a{display:none;padding:0 16px 14px;color:var(--dim)}
.faq-q.open + .faq-a{display:block}

/* footer */
.site-foot{border-top:1px solid var(--line);background:var(--bg2) url('/assets/img/card_wall.png');padding:26px 0;font-size:13px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;margin-bottom:16px}
.foot-grid a{display:block;color:var(--dim);padding:2px 0}
.foot-grid a:hover{color:var(--txt)}

.emblem{height:22px;vertical-align:middle}
.foot-emblems{display:flex;gap:14px;margin-bottom:10px}
.foot-emblems img{height:34px;opacity:.85}

/* ===== layout: เนื้อหากว้าง + sidebar ขวา (ออกแบบเอง) ===== */
.layout3{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:stretch}
.layout3.solo{grid-template-columns:minmax(0,1fr)}
/* คอลัมน์ซ้อนแนวตั้ง — ทุกกล่องในคอลัมน์ที่สั้นกว่ายืดเท่าๆ กันจนขอบล่างตรงกัน */
.col-center,.col-right{display:flex;flex-direction:column}
.col-center>.rbox,.col-center>.card,.col-right>.rbox{flex:1}
.col-center>.rbox,.col-right>.rbox{display:flex;flex-direction:column}
.col-center>.rbox>.rb-in,.col-right>.rbox>.rb-in{flex:1}
.col-center>:last-of-type,.col-right>:last-of-type{margin-bottom:0}
/* grid item ต้องหดต่ำกว่า min-content ได้ ไม่งั้นตาราง/โค้ดยาวดันหน้าล้น */
.layout3>*{min-width:0}
@media(max-width:1100px){.layout3{grid-template-columns:minmax(0,1fr)}.col-right{display:none}}
@media(max-width:760px){.layout3{grid-template-columns:minmax(0,1fr)}}

/* แถวเมนูแนวนอนใต้ hero — ปุ่มภาพ 5x2 ชิดกัน + ยืดสูงกว่าอัตราส่วนภาพเล็กน้อย */
.menu-strip{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.menu-strip .ibtn{flex:1 0 18%;max-width:19.5%}
.menu-strip .ibtn img{height:62px}

/* เมนูแนวตั้งซ้าย (แบบ jaejae: ปุ่มดำเหลี่ยม + ไทยใหญ่ อังกฤษเล็ก) */
.side-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  border:0 solid transparent;border-width:0 20px;
  border-image:url('/assets/ui/bar_skill.png') 0 95 fill stretch;
  color:#f3e6ff;padding:11px 12px;margin-bottom:6px;text-decoration:none;
  font-size:15px;font-weight:700;letter-spacing:.3px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.side-btn .chev{margin-left:auto;color:#ffd27a;font-weight:900}
.side-btn:hover{color:#fff}

/* กล่องขวา */
.rbox{border:0 solid transparent;border-width:64.8px 8px 9px;border-image:url('/assets/ui/panel_frame.png') 154 14 18 14 stretch;margin-bottom:16px;padding:0;position:relative;
  background:#171b28 url('/assets/img/card_wall.png')}
.grid3 .rbox{margin-bottom:0}
.rbox h3{color:#ffe9c9;font-size:20px;font-weight:700;padding:0 18px;margin:0;letter-spacing:.3px;text-shadow:0 2px 4px #000;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  position:absolute;top:-64.8px;left:-8px;right:-8px;height:64.8px;line-height:64.8px}
.rbox .rb-in{padding:12px}
.stat-line{display:flex;justify-content:space-between;align-items:center;padding:5px 2px;font-size:13px;color:var(--dim)}
.stat-line b{color:var(--txt)}
/* ฟอร์มล็อกอินมินิในคอลัมน์ซ้าย (แบบ jaejae) */
.mini-form input{width:100%;padding:7px 10px;margin-bottom:7px;font-size:13px;
  background:var(--bg2) url('/assets/img/card_wall.png');border:1px solid var(--line);border-radius:0;color:var(--txt)}
.mini-form input:focus{outline:none;border-color:var(--blue)}
.mini-form .btn{font-size:13px}
.week-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.week-tbl td{padding:4px 2px;border-bottom:1px solid #2a1512}
.week-tbl td:last-child{text-align:right;color:#9aa0b5;white-space:nowrap}
.on-pill{background:#1c6b2f;color:#b8ffcb;font-size:10px;font-weight:800;padding:1px 8px;letter-spacing:1px;
  box-shadow:0 0 10px rgba(60,200,110,.55);text-shadow:0 0 7px rgba(184,255,203,.9)}
.off-pill{background:#6b1f1c;color:#ffb8b8;font-size:10px;font-weight:800;padding:1px 8px;letter-spacing:1px}
.wartime{color:#ffe9b8;font-size:13px;padding:4px 2px;display:flex;justify-content:space-between}
.wartime b{color:#fff}
.zonetag{color:#7de08a;font-weight:800;text-shadow:0 0 9px rgba(125,224,138,.95),0 0 18px rgba(125,224,138,.45)}
/* ป้ายประกาศกว้างใต้ hero — กิลด์วอร์ + สัปดาห์ แนวนอน */
.annc{margin-bottom:16px}
.annc-in{display:flex;gap:16px;align-items:stretch}
.annc-war{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:8px;font-weight:700;
  border-right:1px solid #2a1512;padding-right:16px}
.annc-war .wartime{padding:2px 0;font-size:14px;gap:14px}
.annc-week{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;min-width:0}
.aw-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,120,90,.28);border-radius:4px;
  font-size:12px;text-align:center;min-width:0}
.aw-cell b{color:#ffd27a}
.aw-cell span{color:var(--txt);font-weight:700}
.aw-cell span.zonetag{color:#7de08a}
.aw-cell i{font-style:normal;color:#9aa0b5;font-size:11px;white-space:nowrap}
.aw-cell.off{opacity:.4}
/* === หน้าบัญชี: hero + แท็บตั้งค่า === */
.acct-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:6px 2px 4px}
.acct-info{flex:1;min-width:150px}
.acct-name{font-size:20px;font-weight:800;color:#ffe9c9;letter-spacing:.3px}
.acct-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1px;vertical-align:2px;
  padding:2px 9px;border-radius:20px;background:#222b3d;color:#b9c6e8;border:1px solid rgba(140,160,220,.35)}
.acct-badge.gold{background:#3d2a08;color:#ffd77a;border-color:rgba(240,190,90,.5);text-shadow:0 0 8px rgba(255,200,100,.5)}
.acct-points{display:flex;gap:10px}
.acct-points .pt{min-width:96px;padding:8px 14px;text-align:center;border-radius:6px;
  background:#00000055;border:1px solid var(--line)}
.acct-points .pt span{display:block;font-size:10.5px;color:var(--dim);letter-spacing:.5px}
.acct-points .pt b{font-size:19px;color:var(--gold)}
.acct-actions{display:flex;gap:8px;flex-shrink:0}
.acct-actions .ibtn img{width:190px;height:auto}
.acct-sub{margin:16px 0 8px;padding-top:14px;border-top:1px solid var(--line);
  font-size:14px;font-weight:700;color:#ffd27a;letter-spacing:.4px}
.acct-tabs{margin-bottom:14px}
/* === หน้าเติมเงิน === */
.tp-card{margin-bottom:18px}
/* การ์ดเติมเงินสำเร็จ */
.tp-done{border:1px solid var(--green);background:#0d2418;border-radius:10px;
  text-align:center;padding:22px 16px;margin:14px 0 6px;
  box-shadow:0 0 22px rgba(70,196,124,.22);animation:tpDoneIn .35s ease}
@keyframes tpDoneIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1}}
.tp-done-ic{width:58px;height:58px;margin:0 auto 10px;border-radius:50%;background:#46c47c22;
  border:2px solid var(--green);color:#7ce8ad;font-size:32px;font-weight:800;line-height:54px}
.tp-done-h{color:#9fe8c0;margin:0 0 6px}
.tp-done-p{font-size:16px;margin:0}
.tp-done-bal{margin:6px 0 0;font-size:14px;color:var(--dim)}
/* แจ้งเตือนในการ์ดเติมเงิน */
.tp-msg{margin:12px 0 4px;padding:11px 14px;border-radius:8px;font-size:14.5px;
  text-align:center;border:1px solid;animation:tpDoneIn .25s ease}
.tp-msg.ok{background:#0d2418;border-color:var(--green);color:#9fe8c0}
.tp-msg.err{background:#2a0e0e;border-color:#a03a3a;color:#ffb0a0}
.tp-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;margin-top:8px}
.tp-left{border-right:1px solid var(--line);padding-right:24px}
.tp-balance{text-align:center;padding:10px 0 6px;background:#00000033;border:1px solid var(--line);border-radius:8px}
.tp-lb{display:block;font-size:12px;color:var(--dim);letter-spacing:1px}
.tp-points{display:block;font-size:44px;font-weight:800;color:var(--gold);line-height:1.15;
  text-shadow:0 0 22px rgba(240,180,60,.45),0 2px 4px #000}
.tp-form{margin-top:18px}
.tp-h{font-size:14px;color:var(--gold);margin:0 0 10px;letter-spacing:.5px}
.tp-steps{list-style:none;margin:0 0 16px;padding:0}
.tp-steps li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:13.5px;line-height:1.5}
.tp-steps li b{flex:0 0 22px;height:22px;line-height:22px;text-align:center;border-radius:50%;
  background:linear-gradient(180deg,#8a1a1a,#5c0f0f);border:1px solid rgba(240,190,90,.4);color:#ffd77a;font-size:12px}
.tp-rates{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.tp-rate{text-align:center;padding:8px 4px;border:1px solid var(--line);border-radius:6px;background:#00000044}
.tp-rate b{display:block;font-size:15px;color:var(--gold)}
.tp-rate span{display:block;font-size:11px;color:var(--dim)}
.tp-rate:hover{border-color:rgba(240,190,90,.5);filter:brightness(1.2)}
.tp-tabs{justify-content:center;margin:14px 0 4px}
.tp-packs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.tp-pack{display:block;cursor:pointer;text-align:center;padding:9px 4px;
  border:1px solid var(--line);border-radius:6px;background:#00000044;transition:.15s}
.tp-pack input{position:absolute;opacity:0;pointer-events:none}
.tp-pack b{display:block;font-size:15px;color:var(--txt)}
.tp-pack span{display:block;font-size:11px;color:var(--dim)}
.tp-pack:hover{border-color:rgba(240,190,90,.5)}
.tp-pack:has(input:checked){border-color:var(--gold);background:rgba(180,40,40,.25);
  box-shadow:0 0 12px rgba(240,180,60,.25) inset}
.tp-pack:has(input:checked) b{color:var(--gold)}
.tp-qrbox{display:flex;gap:16px;align-items:center;justify-content:center;
  padding:14px;border:1px solid var(--line);border-radius:8px;background:#00000033;margin-bottom:16px}
.tp-qr{position:relative;padding:8px;background:#fff;border-radius:6px;line-height:0}
.tp-qr img{display:block}
.tp-qr-logo{position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);background:#fff;padding:4px;border-radius:10px;
  box-shadow:0 0 0 4px #fff}
.tp-qrmeta{display:flex;flex-direction:column;gap:4px;font-size:15px}
.tp-qr-amt{font-size:26px;color:var(--gold)}
.tp-upload{display:block;margin-bottom:12px}
.tp-upload-btn{display:block;text-align:center;padding:12px;border:1px dashed rgba(240,190,90,.45);
  border-radius:8px;background:#00000033;color:var(--dim);font-size:13.5px;cursor:pointer;transition:.15s}
.tp-upload-btn:hover{border-color:var(--gold);color:#ffd77a}
.tp-manual{margin-top:6px}
.tp-manual summary:hover{color:#ffd77a}
/* === หน้าดาวน์โหลด === */
.dl-list{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
@media(max-width:700px){.dl-list{grid-template-columns:1fr}}
.dl-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#00000033}
.dl-info{display:flex;flex-direction:column;gap:2px}
.dl-info b{font-size:16px}
.dl-info .dim{font-size:12px}
.dl-btn img{width:190px;height:auto}
.dl-check{list-style:none;margin:10px 0;padding:0}
.dl-check li{padding:4px 0 4px 26px;position:relative;color:var(--dim);font-size:13.5px}
.dl-check li::before{content:"✔";position:absolute;left:4px;color:var(--gold)}
.dl-faq{border-top:1px solid var(--line);padding:10px 4px}
.dl-faq summary{cursor:pointer;font-weight:600;font-size:14px}
.dl-faq summary:hover{color:#ffd77a}
.dl-faq p{margin:8px 0 2px 6px;font-size:13px}
.dl-sha{font-family:Consolas,monospace;font-size:11px;opacity:.75}
.dl-pending{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
@media(max-width:560px){.dl-row{flex-direction:column;text-align:center}.dl-btn img{width:220px}}
/* === หน้าร้านค้า === */
.shop-hrow{display:flex;justify-content:space-between;align-items:center;gap:16px}
.shop-bal{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:180px;
  padding:14px 20px 12px;border:1px solid rgba(240,190,90,.45);border-radius:12px;
  background:url('/assets/img/card_wall.png'),linear-gradient(180deg,#1b1307,#0c0904);
  box-shadow:0 0 18px rgba(240,180,60,.14),inset 0 0 24px rgba(240,180,60,.05)}
.sb-lb{font-size:11px;color:var(--dim);letter-spacing:2.5px}
.sb-pts{display:flex;align-items:center;font-size:30px;line-height:1.1;color:var(--gold);
  text-shadow:0 0 16px rgba(240,180,60,.55),0 2px 3px #000}
.sb-pts .coin-i{font-size:.85em}
/* เหรียญ point — วาดด้วย CSS ขนาดตามฟอนต์ (ใส่ <i class="coin-i"></i> หน้าจำนวน P) */
.coin-i{position:relative;display:inline-block;width:1em;height:1em;margin-left:.18em;
  border-radius:50%;vertical-align:-.13em;font-style:normal;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#e8a13f 62%,#8a5a10);
  box-shadow:inset 0 0 0 .09em rgba(110,64,8,.65),0 0 .5em rgba(240,180,60,.55)}
.coin-i::after{content:'P';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:.6em;font-weight:800;font-style:normal;color:#5a3a08}
.sb-btn img{width:152px;height:auto}
.shop-tabs{margin:14px 0}
.item-card .ic-img{min-height:56px;display:flex;align-items:center;justify-content:center}
.item-card .iicon{max-width:52px;max-height:52px;image-rendering:pixelated}
.item-card .idesc{font-size:12.5px;min-height:18px}
@media(max-width:560px){.shop-hrow{flex-direction:column;text-align:center}}
/* === กริดสินค้าแบบ compact — หลายใบต่อแถว === */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.shop-grid .item-card{padding:10px;gap:5px}
.shop-grid .item-card .ic-img{min-height:42px}
.shop-grid .item-card .iicon{max-width:38px;max-height:38px}
.shop-grid .item-card .iname{font-size:13.5px;line-height:1.25;text-wrap:balance;word-break:keep-all}
.shop-grid .item-card .idesc{font-size:11.5px;min-height:0;line-height:1.35;white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-grid .item-card .cat{font-size:11px}
.shop-grid .item-card .price{font-size:15px;margin-top:auto}
.shop-grid .ic-badges{min-height:18px;display:flex;gap:4px;flex-wrap:wrap}
.shop-grid .badge{font-size:10px;padding:1px 6px}
.ibtn-form.buy-sm{display:block;margin:0 auto}
.ibtn-form.buy-sm img{height:30px;width:auto}

/* === ร้านค้า — sidebar หมวดหมู่ซ้าย (แบบเว็บช็อปแรนแท้) === */
.shop-wrap{display:flex;gap:14px;align-items:flex-start}
.shop-side{width:196px;flex:0 0 196px;background:var(--card) url('/assets/img/card_wall.png');border:1px solid var(--line);border-radius:4px;padding:10px;position:sticky;top:12px}
.ss-head{font-weight:700;font-size:14px;padding:5px 8px 10px;border-bottom:1px solid var(--line);color:var(--gold)}
.ss-list{display:flex;flex-direction:column;margin-top:6px;max-height:72vh;overflow-y:auto}
.ss-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:3px;color:var(--txt);font-size:13.5px;border:1px solid transparent;line-height:1.2}
.ss-item:hover{text-decoration:none;background:var(--bg2);border-color:var(--line)}
.ss-item.on{background:var(--gold);color:#241a04;font-weight:600}
.ss-item.on .ss-c{color:#241a04;opacity:.75}
.ss-n{min-width:0}
.ss-c{font-size:11.5px;color:var(--dim);flex:0 0 auto}
.shop-main{flex:1;min-width:0}
@media(max-width:760px){
  .shop-wrap{flex-direction:column}
  .shop-side{width:100%;flex:none;position:static}
  .ss-list{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:6px;max-height:none;padding-bottom:6px}
  .ss-item{white-space:nowrap}
}
/* === หน้าสมัครสมาชิก — ฟอร์มซ้าย + ตัวละครขวา === */
.reg-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:stretch}
.reg-side{display:flex;flex-direction:column;justify-content:flex-end}
.reg-char{line-height:0;text-align:center}
.reg-char img{width:118%;max-width:none;margin-left:-9%;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(90,140,255,.18))}
@media(max-width:860px){.reg-wrap{grid-template-columns:1fr}}
/* === หน้าโปรโมชั่น === */
.promo-packs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.promo-pack{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 8px;
  border:1px solid rgba(240,190,90,.35);border-radius:8px;background:#00000033;
  text-decoration:none;transition:.15s}
.promo-pack:hover{transform:translateY(-2px);border-color:var(--gold);
  box-shadow:0 6px 16px rgba(240,180,60,.15)}
.pp-baht{font-size:19px;font-weight:800;color:var(--txt)}
.pp-arrow{color:var(--dim);font-size:12px}
.pp-pts{font-size:17px;font-weight:800;color:var(--gold);text-shadow:0 0 10px rgba(240,180,60,.4)}
.pp-cta{font-size:11px;color:var(--dim);margin-top:4px}
.perk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.perk{display:flex;flex-direction:column;gap:4px;padding:12px 14px;
  border:1px solid var(--line);border-radius:8px;background:#00000033;font-size:13px}
.perk b{color:#ffd77a;font-size:15px}
.perk span{color:var(--dim)}
.perk a{font-size:12px;margin-top:2px}
@media(max-width:760px){.promo-packs{grid-template-columns:repeat(2,1fr)}.perk-grid{grid-template-columns:1fr}}
/* แถวปุ่มท้ายการ์ด — [รายละเอียด][ซื้อ] ระดับเดียวกันทุกใบ */
.ic-btns{display:flex;gap:6px;align-items:stretch}
.ic-btns>*{flex:1;min-width:0}
.ic-btns .ibtn-form{display:flex;align-items:center;justify-content:center}
.ic-btns .ibtn-form img{height:27px;width:auto;max-width:100%;object-fit:contain}
.ic-btns .btn.ic-off{height:27px;padding:0;font-size:12px;align-self:center}
/* กดชื่อ/รูปไอเทม → เปิด popup รายละเอียด+เลือกจำนวน */
.js-open{cursor:pointer}
.iname.js-open:hover{color:#ffd77a}
.ic-img.js-open:hover img{filter:brightness(1.15)}
/* stepper เลือกจำนวนใน popup — [−|n|+] เม็ดเดียว */
#imForm{display:flex;flex-direction:column;gap:12px;align-items:center}
.im-qty{display:flex;align-items:center;gap:14px}
.qty-step{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#00000055;box-shadow:inset 0 1px 5px rgba(0,0,0,.6)}
.qty-btn{width:36px;height:36px;border:0;background:transparent;color:#ffd77a;font-size:20px;font-weight:700;
  cursor:pointer;line-height:1;padding:0;transition:background .12s}
.qty-btn:hover{background:rgba(240,185,69,.16)}
.qty-btn:active{transform:scale(.9)}
#imQty{width:54px;height:36px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:transparent;color:#fff;text-align:center;font-size:16px;font-weight:700;font-family:inherit;
  appearance:textfield;-moz-appearance:textfield}
#imQty::-webkit-outer-spin-button,#imQty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#imQty:focus{outline:none;background:rgba(240,185,69,.08)}
.im-total{font-size:14px;color:var(--dim)}
.im-buyrow{display:flex;align-items:center;gap:14px;width:100%;justify-content:flex-start}
.im-warn{color:#ff8d84;font-size:13px}
.ibtn-form{position:relative;border:0;background:none;padding:0;cursor:pointer}
.ibtn-form:disabled{cursor:not-allowed}
.ibtn-form:disabled img{opacity:.4;filter:grayscale(.9) brightness(.65)}
.im-lock{display:none;position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:#2a0d0d;border:1px solid var(--red);font-size:11px;line-height:20px;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.6)}
.ibtn-form:disabled .im-lock{display:block}
/* กล่องยืนยันแบบเว็บ */
.cfm-card{width:min(340px,100%);text-align:center;padding:26px 20px 20px}
.cfm-title{font-size:17px;font-weight:700;color:#ffd77a;margin-bottom:12px;letter-spacing:.5px}
.cfm-msg{font-size:15px;line-height:1.7;margin-bottom:18px;color:var(--txt)}
.cfm-msg .coin-i{font-size:.95em}
.cfm-btns{display:flex;gap:14px;justify-content:center}
.cfm-btns .ibtn-form img{height:36px;width:auto}
/* pagination ร้านค้า */
.shop-pager{justify-content:center;margin-top:14px;margin-bottom:0}
.shop-pager .pg-btn.off{opacity:.4;pointer-events:none}
/* === ร้านค้า: แถบค้นหา + กรองอาชีพ === */
.shop-find{display:flex;gap:10px;margin:0 0 14px}
.shop-find input{flex:1;background:var(--bg2) url('/assets/img/card_wall.png');border:1px solid var(--line);
  color:var(--txt);padding:9px 14px;font-size:15px;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.shop-find select{background:var(--bg2) url('/assets/img/card_wall.png');border:1px solid var(--line);
  color:var(--txt);padding:9px 10px;font-size:14px;font-family:inherit;min-width:132px;cursor:pointer}
.shop-find input:focus,.shop-find select:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(240,185,69,.18),0 0 10px rgba(240,185,69,.25)}
@media(max-width:560px){.shop-find{flex-direction:column}}
@media(max-width:900px){.shop-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
@media(max-width:600px){.shop-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
  .shop-grid .item-card{padding:8px}.ic-btns{gap:4px}.ic-btns .ibtn-form img{height:24px}}
/* popup รายละเอียดสินค้า */
.imodal{position:fixed;inset:0;z-index:90;background:rgba(5,6,12,.78);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.imodal[hidden]{display:none}
.im-card{position:relative;width:min(680px,100%);background:var(--card) url('/assets/img/card_wall.png');border:1px solid var(--line2,#333a52);
  border-radius:10px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.6);animation:imIn .18s ease}
@keyframes imIn{from{transform:translateY(14px) scale(.97);opacity:0}}
.im-x{position:absolute;top:-12px;right:-12px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line2,#333a52);background:#1a1d29;color:var(--dim);cursor:pointer;
  font-size:13px;z-index:2;box-shadow:0 4px 10px rgba(0,0,0,.5);padding:0;line-height:28px}
.im-x:hover{color:#fff;border-color:var(--gold)}
.im-cols{display:grid;grid-template-columns:230px 1fr;gap:20px}
.im-left{display:flex;flex-direction:column;min-height:100%;padding-right:4px}
.im-right{border-left:1px solid var(--line);padding-left:20px;padding-right:12px;max-height:66vh;overflow:auto}
.im-right::-webkit-scrollbar{width:6px}
.im-right::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.im-head{display:flex;gap:12px;align-items:center;margin-bottom:10px;padding-right:24px}
.im-icon{width:56px;height:56px;object-fit:contain;image-rendering:pixelated;flex:none}
.im-name{font-size:17px;font-weight:700}
.im-desc{color:var(--dim);font-size:13px;line-height:1.55;margin:0 0 12px;white-space:pre-line}
.im-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.im-foot{display:flex;justify-content:center;margin-top:auto;padding-top:10px}
@media(max-width:600px){
  .im-cols{grid-template-columns:1fr}
  .im-right{border-left:0;padding-left:0;max-height:none;border-top:1px solid var(--line);padding-top:12px}
}
.tp-links{display:flex;gap:10px}
.tp-link{flex:1;text-align:center;padding:9px 8px;font-size:13px;font-weight:700;
  border:1px solid var(--line);border-radius:6px;background:#00000044;color:var(--txt)}
.tp-link:hover{text-decoration:none;border-color:rgba(240,190,90,.5);color:#ffd77a;filter:brightness(1.15)}
@media(max-width:860px){.tp-wrap{grid-template-columns:1fr}.tp-left{border-right:0;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:18px}.tp-rates,.tp-packs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tp-points{font-size:36px}.tp-rates,.tp-packs{grid-template-columns:repeat(2,1fr)}.tp-qrbox{flex-direction:column;text-align:center}}
@media(max-width:700px){
  .acct-hero{flex-direction:column;align-items:flex-start}
  .acct-points{width:100%}
  .acct-points .pt{flex:1}
}
/* กริดปุ่มสกิล 4 ช่อง (คอลัมน์กลางกว้าง) — จอเล็กเหลือ 2 ช่อง */
.skill-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:760px){.skill-grid{grid-template-columns:1fr 1fr}}
/* mini ranking */
.mini-rank{width:100%;border-collapse:collapse;font-size:13px}
.mini-rank td{padding:3px 4px;border-bottom:1px solid #2a1512;color:var(--txt)}
.mini-rank td.r{width:20px;color:var(--gold);font-weight:800}
.mini-rank tr:nth-child(-n+3) td.r{color:#ff7a45}
/* news feed */
.news-row{display:flex;gap:10px;align-items:baseline;padding:7px 4px;border-bottom:1px dashed #3a1512;font-size:14px;font-weight:600}
.news-row .tag{background:#7a1510;color:#ffd9d0;font-size:10px;font-weight:800;padding:1px 6px;flex-shrink:0}
.news-row .dt{margin-left:auto;color:#8b6b5f;font-size:12px;flex-shrink:0}
.news-row:hover{background:#ffffff08}
/* สตริปสื่อ: วิดีโอ+สไลด์แถวเดียว ไร้รอยต่อ */
/* hero เต็มความกว้าง wrap เหนือ 3 คอลัมน์ (แบบ jaejae) — สูงตามสัดส่วน */
.media-strip{position:relative;display:flex;aspect-ratio:3.45/1;max-height:340px;overflow:hidden;margin-bottom:14px}
.media-strip .ms-vid{flex:16;min-width:0;height:100%;object-fit:cover;display:block}
.media-strip .slide-box{flex:9;aspect-ratio:auto;height:100%}
.media-strip .ember-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;pointer-events:none;z-index:4}
/* เปลวไฟจริง — วิดีโอ overlay ที่เปลวเป็นแถบฐานล่างในตัว (screen = ดำหาย เหลือเปลว) */
.media-strip .fire-vid{position:absolute;left:0;right:0;bottom:0;width:100%;height:40%;
  object-fit:cover;object-position:50% 78%;
  mix-blend-mode:screen;opacity:.8;pointer-events:none;z-index:3;
  filter:hue-rotate(-16deg) saturate(1.35) brightness(.72);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%),radial-gradient(ellipse 44% 70% at 55% 100%,transparent 30%,#000 65%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent,#000 45%),radial-gradient(ellipse 44% 70% at 55% 100%,transparent 30%,#000 65%);
  mask-composite:intersect}
/* ชื่อเกมบนแบนเนอร์ — โลโก้วิดีโอไฟฟ้า (key เขียว→ดำ; blend อยู่ที่กลุ่ม — z-index บน .cb-title สร้าง
   stacking context แยก ถ้า blend อยู่บนวิดีโอจะ blend กับพื้นโปร่งของ div = กรอบดำค้าง) */
.media-strip .cb-title{position:absolute;left:0;right:0;bottom:2px;text-align:center;z-index:6;pointer-events:none}
/* เรืองฟ้าหายใจหลังโลโก้ */
.media-strip .cb-title::before{content:'';position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);
  width:min(640px,90%);height:120%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 65%,rgba(35,120,255,.32),rgba(20,60,160,.12) 55%,transparent 72%);
  animation:logoBreathe 4.5s ease-in-out infinite}
@keyframes logoBreathe{0%,100%{opacity:.55}50%{opacity:1}}
.media-strip .cb-title .lgv,.media-strip .cb-title .lg-still{width:min(560px,86%);
  vertical-align:bottom;filter:drop-shadow(0 4px 6px rgba(0,0,0,.8))}
.media-strip .cb-title .lg-still{display:none}
@media (prefers-reduced-motion:reduce){
  .media-strip .cb-title .lgv{display:none}
  .media-strip .cb-title .lg-still{display:inline-block}}
/* (ป้ายชื่อใต้แบนเนอร์เอาออกแล้ว) */
/* สไลด์รูป + youtube หน้าแรก */
/* z-index:5 = อยู่เหนือ ember(4)/fire(3) — สไลด์ไม่โดนแสงทอง/ประกายทับ แต่ต่ำกว่าโลโก้(6) */
.slide-box{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;z-index:1}
.slide-box .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.slide-box .slide.on{opacity:1}

/* === transition FX layer: แตกภาพใหม่เป็นชิ้นๆ ทับชั่วคราว === */
.fx-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.fx-t{position:absolute;overflow:hidden;opacity:0;animation-fill-mode:forwards;animation-timing-function:ease-out}
/* blinds — แถบแนวตั้ง ไล่ทีละเส้น สลับลงบน/ขึ้นล่าง */
.fx-blinds .fx-t{animation-name:fxBlindD;animation-duration:.55s}
.fx-blinds .fx-t:nth-child(odd){animation-name:fxBlindU}
@keyframes fxBlindU{from{opacity:0;transform:translateY(-16%)}to{opacity:1;transform:none}}
@keyframes fxBlindD{from{opacity:0;transform:translateY(16%)}to{opacity:1;transform:none}}
/* grid — ชิ้นตารางเด้งเข้าแบบสุ่ม */
.fx-grid .fx-t{animation-name:fxGrid;animation-duration:.45s}
@keyframes fxGrid{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
/* bars — เส้นแนวนอนสไลด์เข้าสลับซ้ายขวา */
.fx-bars .fx-t{animation-name:fxBarL;animation-duration:.5s}
.fx-bars .fx-t:nth-child(even){animation-name:fxBarR}
@keyframes fxBarL{from{opacity:0;transform:translateX(-55%)}to{opacity:1;transform:none}}
@keyframes fxBarR{from{opacity:0;transform:translateX(55%)}to{opacity:1;transform:none}}
/* flip — ชิ้นภาพพลิกเข้าแบบ 3D */
.fx-flip{perspective:900px}
.fx-flip .fx-t{animation-name:fxFlip;animation-duration:.5s;backface-visibility:hidden}
@keyframes fxFlip{from{opacity:0;transform:rotateY(88deg)}to{opacity:1;transform:none}}
/* wipe — ม่านเปิดทแยง */
.fx-wipe .fx-t{opacity:1;animation-name:fxWipe;animation-duration:.8s}
@keyframes fxWipe{from{clip-path:polygon(0 0,0 0,-25% 100%,0 100%)}to{clip-path:polygon(0 0,125% 0,100% 100%,0 100%)}}

.yt-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ตัวละครถือป้าย — ยืนใต้คอลัมน์ขวา (โซนว่าง) ไม่ลอยบังเนื้อหา */
.col-right{position:relative}
.side-char{position:absolute;top:calc(100% + 8px);right:-34px;height:360px;pointer-events:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));z-index:1}
@media(max-width:1250px){.side-char{display:none}}
main.main{position:relative;z-index:1}

/* misc */
.stats{display:flex;gap:26px;flex-wrap:wrap}
.stat b{font-size:26px;color:var(--gold);display:block}
.ticket-status{font-size:12px;padding:2px 10px;border-radius:2px}
.ticket-status.open{background:#e5534b33;color:#ffb3ae}
.ticket-status.answered{background:#46c47c33;color:#9fe8c0}
.ticket-status.closed{background:#8883;color:#bbb}
.iicon{display:block;width:56px;height:56px;object-fit:contain;margin:2px auto 6px;
  image-rendering:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.code-out{font-family:Consolas,monospace;background:#0008;border:1px dashed var(--gold);border-radius:0;padding:10px 14px;font-size:16px;letter-spacing:1px}
@media(max-width:760px){
  .media-strip{flex-direction:column;height:auto;aspect-ratio:auto;max-height:none}
  .media-strip .ms-vid{flex:none;height:auto;aspect-ratio:4/3}
  .media-strip .slide-box{flex:none;aspect-ratio:3/4;height:auto;max-height:420px}
  .nav{display:none;width:100%;flex-direction:column}
  /* nowrap+flex-basis สำคัญ: column+wrap ทำลูกลอยเป็นคอลัมน์นอกจอ;
     flex:1 (basis:0%) ทำ nav ไม่ยอมตกบรรทัดใหม่ ถูกบีบเป็นแถบ ~140px มุมขวา */
  body.nav-open .nav{display:flex;flex-wrap:nowrap;flex-basis:100%}
  body.nav-open .mnav{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 2px}
  body.nav-open .mnav .ibtn{margin-bottom:0}
  .nav-toggle{display:block}
  .head-in{flex-wrap:wrap}
  .wrap,.main{padding-left:16px;padding-right:16px}
  /* มือถือเรียงทุกส่วนลงมาตาม DOM เหมือน desktop: เมนู(ซ้าย) → เนื้อหา(กลาง) → วิดเจ็ต(ขวา) */
  .menu-strip{gap:8px}
  .menu-strip .ibtn{flex-basis:calc(50% - 4px);max-width:calc(50% - 4px)}
  /* คอลัมน์ขวาถูกซ่อนตั้งแต่ ≤1100 — บนมือถือแสดงเรียงลงล่างเนื้อหา */
  .col-right{display:block}
  .media-strip .cb-title .lgv,.media-strip .cb-title .lg-still{width:min(340px,88%)}
  .media-strip .cb-title::before{width:100%}
  /* ==== responsive ทั้งเว็บ ==== */
  html,body{overflow-x:clip}
  .card{padding:16px;overflow-wrap:break-word}
  .card img{max-width:100%;height:auto}
  .card h2{font-size:15px}
  /* ตาราง: cell เล็กลง + .wide เลื่อนแนวนอนใน .tbl-wrap แทนที่จะดันหน้า */
  .tbl th,.tbl td{padding:7px 9px;font-size:12.5px}
  .tbl.wide{min-width:520px}
  /* input 16px = ไม่ zoom อัตโนมัติบน iOS */
  .field input,.field select,.field textarea{font-size:16px}
  .code-out{overflow-wrap:anywhere;font-size:14px;padding:8px 10px}
  .userbox{flex-wrap:wrap;justify-content:center;row-gap:2px;width:100%}
  .userbox .acc-link{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* header มือถือ: โลโก้ซ้าย — ☰ ชิดขวาบรรทัดเดียว, userbox เต็มบรรทัดล่างกลางจอ */
  .nav-toggle{margin-left:auto}
  .userbox .ibtn.ub img{width:130px}
  .pts{font-size:13px}
  .ticker-in{font-size:14px}
  .news-row{font-size:13px}
  .stats{gap:14px}
  .stat b{font-size:20px}
  /* ปุ่มสกิลในกล่องข่าว: inline min-width:150px เกินจอแคบ → บีบให้ลง 2 คอลัมน์พอดี */
  .rb-in .side-btn{min-width:130px!important}
  .rbox{border-width:48px 6px 7px}
  .rbox h3{top:-48px;left:-6px;right:-6px;height:48px;line-height:48px;font-size:15px;padding:0 12px}
  .foot-grid{grid-template-columns:1fr;gap:10px;text-align:center}
  .foot-grid a{display:inline-block;margin:0 8px}
  /* ไอคอนดาวน์โหลดให้แตะง่าย (≥44px) */
  .dl-ic{width:44px;height:44px}
  .dl-ic svg{width:24px;height:24px}
  .logo img{height:60px;margin:-8px 0 -8px 4px}
}
@media(max-width:430px){
  .userbox .ibtn.ub img{width:112px}
  .logo img{height:46px;margin-left:0}
}

/* พื้นหลังใหญ่ล่างสุด (วางไฟล์ assets/img/bg_main.jpg จะสลับอัตโนมัติ) */
body.has-bgmain{background-image:url('/assets/img/bg_main.jpg')}

/* ==================== UI FX PACK ==================== */
/* --- ปุ่มภาพ: มิติ 3D (drop-shadow ตามขอบ PNG) ขอบล่างหนา+เงาพื้น --- */
.ibtn{transition:transform .12s ease,filter .15s ease}
.ibtn img{filter:drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 8px 14px rgba(0,0,0,.4));
  transition:filter .12s ease}
.ibtn:hover{transform:translateY(-2px);filter:brightness(1.18)}
.ibtn.ub:hover img{filter:drop-shadow(0 6px 0 rgba(0,0,0,.55)) drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.ibtn.ub:hover{filter:brightness(1.22) drop-shadow(0 0 10px rgba(70,220,110,.5))}
.ibtn:active{transform:translateY(3px);filter:brightness(.92)}
.ibtn:active img{filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 3px 6px rgba(0,0,0,.35))}
/* ปุ่มเมนูของหน้าที่เปิดอยู่ — สว่างขึ้นเฉยๆ (เอฟเฟกต์เรืองเอาออกตาม user) */
.ibtn.side.active img{filter:saturate(1.25) brightness(1.28)}
/* --- ปุ่ม border-image (.btn/.side-btn): ขอบล่าง+เงาด้านใน --- */
.btn{transition:transform .12s ease,filter .15s ease,box-shadow .12s ease;
  box-shadow:0 3px 0 rgba(0,0,0,.5),0 7px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.18) drop-shadow(0 0 8px rgba(240,180,60,.35));
  box-shadow:0 5px 0 rgba(0,0,0,.5),0 10px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.btn:active{transform:translateY(2px);filter:brightness(.9);
  box-shadow:0 1px 0 rgba(0,0,0,.55),0 3px 7px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
.side-btn{transition:transform .12s ease,filter .15s ease,color .15s,box-shadow .12s ease;
  box-shadow:0 3px 0 rgba(0,0,0,.5),0 6px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14)}
.side-btn:hover{color:#fff;transform:translateY(-3px);filter:brightness(1.25) drop-shadow(0 0 10px rgba(150,90,255,.4));
  box-shadow:0 5px 0 rgba(0,0,0,.5),0 9px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.side-btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
/* ไอคอนดาวน์โหลด (ตารางลิงก์) — ทองมินิมอล hover เรือง */
.dl-ic{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;color:var(--gold);
  border:1px solid rgba(240,185,69,.4);border-radius:6px;background:#ffffff08;
  transition:transform .12s,box-shadow .15s,color .15s,border-color .15s}
.dl-ic svg{width:21px;height:21px}
.dl-ic:hover{color:#ffe9b8;border-color:rgba(240,185,69,.8);transform:translateY(-2px);
  box-shadow:0 4px 0 rgba(0,0,0,.45),0 0 14px rgba(240,185,69,.35)}
.dl-ic:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.5)}
/* --- shine sweep: แถบแสงทองกวาดผ่านปุ่มตอน hover (เฉพาะปุ่มทึบ — ปุ่มภาพมี drop-shadow ล้ำขอบ overflow:hidden จะตัดเงา) --- */
.btn,.side-btn,.dl-ic,.tabs a{position:relative;overflow:hidden}
.btn::after,.side-btn::after,.dl-ic::after,.tabs a::after{
  content:'';position:absolute;top:-35%;bottom:-35%;left:-65%;width:42%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,224,150,.33),transparent);
  transform:skewX(-18deg);opacity:0}
.btn:hover::after,.side-btn:hover::after,.dl-ic:hover::after,.tabs a:hover::after{opacity:1;animation:btnShine .55s ease-out}
@keyframes btnShine{from{left:-65%}to{left:145%}}
/* --- ปุ่มภาพ: เรืองทองเพิ่มตอน hover (filter เดิม + glow) --- */
.ibtn:hover img{filter:drop-shadow(0 6px 0 rgba(0,0,0,.55)) drop-shadow(0 12px 18px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(240,185,69,.45))}
/* h3 + ไอคอนแบรนด์ (หน้าติดต่อ) */
.h3-icon{display:flex;align-items:center;justify-content:center;gap:9px}
.h3-icon img{width:20px;height:20px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
/* ปุ่มในการ์ด grid3 (หน้าติดต่อ) — กว้างเต็มการ์ด + ชิดล่างแนวเดียวกัน */
.grid3 .card.center{display:flex;flex-direction:column}
.grid3 .card.center .ibtn-form{display:block;width:100%;margin-top:auto;text-decoration:none}
.grid3 .card.center .ibtn-form img{width:100%;height:auto}
/* --- กรอบกล่อง hover เรืองแดงนวล --- */
.rbox{transition:filter .25s ease}
.rbox:hover{filter:drop-shadow(0 0 16px rgba(220,50,40,.22))}
/* --- แถวข่าว hover เลื่อนขวานิด --- */
.news-row{transition:transform .15s ease,background .15s ease}
.news-row:hover{transform:translateX(4px)}
/* --- ป้าย ONLINE หายใจเรืองเขียว --- */
.on-pill{animation:pillGlow 2.2s ease-in-out infinite}
@keyframes pillGlow{0%,100%{box-shadow:0 0 0 rgba(70,220,110,0)}50%{box-shadow:0 0 10px rgba(70,220,110,.65)}}
/* --- การ์ด/ไอเทมร้าน hover ยก+เรืองทอง --- */
.card,.item-card{transition:transform .15s ease,border-color .2s,box-shadow .2s}
.card:hover{border-color:rgba(240,185,69,.35);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.item-card:hover{border-color:rgba(240,185,69,.55);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 14px rgba(240,185,69,.18)}
/* --- input focus เรืองทอง --- */
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(240,185,69,.18),0 0 10px rgba(240,185,69,.25);border-color:var(--gold)}
.field input,.field select,.field textarea{transition:box-shadow .2s,border-color .2s}
/* --- tabs / faq / ลิงก์ทั่วไป --- */
a{transition:color .15s}
.faq-q{transition:border-color .2s,background .2s}
.faq-q:hover{border-color:rgba(240,185,69,.4)}
.faq-q.open{border-color:var(--gold)}
/* --- ตารางอันดับ hover --- */
.mini-rank tr,.tbl tbody tr{transition:background .15s}
.mini-rank tr:hover{background:#ffffff0a}
/* --- โลโก้ hover สว่างนวล (รายละเอียดอยู่บล็อก ambient ด้านล่าง) --- */
.logo img{transition:filter .2s ease}
/* --- scrollbar ธีมมืด --- */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0a0c10}
::-webkit-scrollbar-thumb{background:#3a2024;border:2px solid #0a0c10;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#7a2530}
/* --- selection + page fade-in --- */
::selection{background:rgba(240,185,69,.35);color:#fff}
main.main{animation:pageIn .35s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==================== AMBIENT FX (เล่นเอง ไม่ต้อง hover) ==================== */
/* โลโก้หายใจเรืองฟ้าเบาๆ */
.logo img{animation:logoBreath 5s ease-in-out infinite}
@keyframes logoBreath{0%,100%{filter:drop-shadow(0 3px 10px #000)}50%{filter:drop-shadow(0 3px 10px #000) drop-shadow(0 0 12px rgba(110,165,255,.5))}}
.logo:hover img{animation:none;filter:drop-shadow(0 3px 10px #000) brightness(1.15) drop-shadow(0 0 14px rgba(120,170,255,.5))}
/* (shine บน .btn เอาออกเหมือนกัน — ล้นมุมเฉียงโปร่งใส) */
@keyframes shineSweep{0%,62%{left:-55%}82%,100%{left:115%}}
/* (shine บนปุ่มภาพ .ibtn เอาออก — เดิมล้นออกนอกรูปปุ่ม) */
/* === scroll reveal — :not() เพื่อให้กฎหายไปหลังโชว์ ไม่ล็อก hover transform === */
.rv{transition:opacity .55s ease,transform .55s ease}
.rv:not(.rv-on){opacity:0;transform:translateY(16px)}
/* === ripple ตอนกด — เฉพาะพื้นเรียบ (ไอคอน/แท็บ) === */
.dl-ic,.tabs a{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.32);transform:scale(0);
  animation:rip .55s ease-out forwards;pointer-events:none;z-index:5}
@keyframes rip{to{transform:scale(3);opacity:0}}
/* === เคารพ prefers-reduced-motion: ปิดอนิเมชันทั้งหมด === */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
}
/* แถบหัวข้อกล่อง: แสงกวาดซ้าย→ขวาเบาๆ */
.card h2,.card h3{position:relative;overflow:hidden}
.rbox h3{overflow:hidden}
.rbox h3::after,.card h2::after,.card h3::after{content:'';position:absolute;top:0;left:-45%;width:30%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,200,120,.22),transparent);transform:skewX(-16deg);
  animation:shineSweep 6.5s ease-in-out infinite}
/* (ชื่อใต้แบนเนอร์กลับเป็นทองนิ่ง — เรืองทองเหลือเฉพาะแถบ h3) */
/* ตัวละครฝั่งขวา: ลอยเบาๆ เหมือนหายใจ */
.side-char{animation:charFloat 5.5s ease-in-out infinite}
@keyframes charFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* ป้าย NEWS/PIN กะพริบเรือง */
.news-row .tag{animation:tagBlink 2.6s ease-in-out infinite}
@keyframes tagBlink{0%,100%{box-shadow:0 0 0 rgba(255,80,60,0)}50%{box-shadow:0 0 8px rgba(255,80,60,.7)}}
/* (zoneGlow/ptsPulse เอาออก — เรืองทองเฉพาะแถบแดง) */
/* FAQ chevron หมุนตอนเปิด */
.faq-q::after{content:'▸';float:right;transition:transform .2s;color:var(--gold)}
.faq-q.open::after{transform:rotate(90deg)}

/* ===== ร้านค้าแบบแรนแท้ (POINT_SHOP_WINDOW) ===== */
.pshop{border:2px solid rgba(240,185,69,.4);border-radius:8px;background:linear-gradient(180deg,#10182b 0%,#0a0f1e 100%);box-shadow:0 12px 40px rgba(0,0,0,.55),inset 0 0 60px rgba(20,40,90,.15);overflow:hidden;margin-top:14px}
.psh-tabs{display:flex;gap:3px;padding:8px 10px 0;background:rgba(8,14,30,.85);border-bottom:1px solid rgba(240,185,69,.25)}
.psh-tab{display:inline-block;padding:7px 22px;font-size:13.5px;font-weight:700;border-radius:6px 6px 0 0;border:1px solid rgba(240,185,69,.35);border-bottom:none;cursor:default}
.psh-tab.on{background:linear-gradient(180deg,#2a3555,#1a2340);color:#ffd76e;box-shadow:inset 0 2px 6px rgba(255,215,110,.12)}
.psh-tab.off{background:#131a30;color:#5a6a92;cursor:help}
.psh-body{display:flex;gap:0;min-height:420px}
.psh-items{flex:1;padding:10px 10px 12px;min-width:0}
.psh-cats{width:186px;flex:none;border-left:1px solid rgba(240,185,69,.22);background:rgba(8,14,30,.6);padding:8px 8px 10px}
.psh-cats-title{font-size:12.5px;font-weight:700;color:#8fa3cc;text-transform:uppercase;letter-spacing:.8px;padding:2px 6px 8px;border-bottom:1px solid rgba(240,185,69,.18);margin-bottom:6px}
.psh-cats .ss-item{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 8px;margin-bottom:2px;border-radius:5px;font-size:12.5px;color:#b9c4de;text-decoration:none;border:1px solid transparent}
.psh-cats .ss-item:hover{background:rgba(240,185,69,.08);color:#fff}
.psh-cats .ss-item.on{background:linear-gradient(90deg,rgba(240,185,69,.22),rgba(240,185,69,.06));border-color:rgba(240,185,69,.45);color:#ffd76e;font-weight:700}
.psh-cats .ss-c{font-size:11px;color:#7d8db3;background:rgba(20,32,64,.8);border-radius:8px;padding:1px 7px}
.psh-cats .ss-item.on .ss-c{background:rgba(240,185,69,.25);color:#ffd76e}
/* ตะกร้าด้านล่าง */
.psh-cart{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:2px solid rgba(240,185,69,.35);background:linear-gradient(180deg,#141d38,#0d1530)}
.psc-ic{font-size:20px;line-height:1}
.psc-slots{display:flex;gap:5px;flex:1;min-height:36px;align-items:center;overflow-x:auto}
.psc-slot{width:36px;height:36px;flex:none;border:1px solid rgba(240,185,69,.5);border-radius:5px;background:rgba(10,16,36,.9);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s}
.psc-slot:hover{border-color:#ff6b6b}
.psc-slot img{width:30px;height:30px;object-fit:contain}
.psc-total{font-size:13px;white-space:nowrap}
.psc-total b{font-size:16px}
.psh-cart form{display:inline-flex;align-items:center}
.psh-cart .ibtn-form{vertical-align:middle}
.psh-cart .ibtn-form img{height:38px;width:auto;display:block}
.js-cart.incart::after{content:'✓';position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#2ea043;border:1px solid #7ce38b;color:#fff;font-size:12px;font-weight:700;line-height:17px;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* การ์ดไอเทมแบบแถวแคบให้ฟีลใกล้ลิสต์ของแท้ */
.psh-items .shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px;margin-top:10px}
.psh-items .item-card{padding:7px 9px}
.psh-items .ic-img{float:left;margin:0 8px 0 0}
.psh-items .ic-img img{width:42px;height:42px}
.psh-items .iname{font-size:13px;line-height:1.25;min-height:32px}
.psh-items .idesc{display:none}
.psh-items .cat{font-size:10.5px}
.psh-items .price{font-size:14px}
/* ปุ่มสลับมุมมอง การ์ด/ละเอียด */
.view-tg{display:flex;gap:4px;margin-left:auto}
.view-tg .vt{width:34px;height:32px;border:1px solid var(--line);border-radius:6px;background:rgba(14,22,44,.8);color:#9fb0d8;font-size:15px;cursor:pointer;line-height:1}
.view-tg .vt.on{border-color:var(--gold);color:#ffd76e;background:rgba(240,185,69,.14)}
.view-tg .vt:hover{color:#fff}
/* มุมมองละเอียด: แถวละ 1 ไอเทม + สเตตัสจริง */
.ic-spec{display:none}
.shop-grid.lv{grid-template-columns:1fr;grid-auto-rows:min-content;align-items:start}
.shop-grid.lv .item-card{display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px 12px;overflow:hidden;position:relative}
.shop-grid.lv .ic-badges{position:absolute;top:3px;left:6px;z-index:2;flex-wrap:nowrap;min-height:0}
.shop-grid.lv .ic-img{float:none;margin:0;flex:none}
.shop-grid.lv .ic-img img{width:40px;height:40px}
.shop-grid.lv .iname{min-height:0;flex:0 1 220px;min-width:90px;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.shop-grid.lv .idesc{display:block;font-size:11px;flex:0 1 160px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-grid.lv .ic-spec{display:flex;flex-wrap:wrap;gap:2px 12px;flex:1 1 auto;min-width:110px;max-height:40px;overflow:hidden;align-content:flex-start}
.shop-grid.lv .cat{display:none}
.shop-grid.lv .price{flex:none;min-width:70px;text-align:right;margin-top:0}
.shop-grid.lv .ic-btns{flex:none}
.spec{font-size:11.5px;color:#cfd8ee;white-space:nowrap}
.spec i{color:#7d8db3;font-style:normal;margin-right:4px}
@media(max-width:900px){
 .shop-grid.lv .idesc{display:none}
 .shop-grid.lv .iname{flex:0 1 150px}
}
@media(max-width:620px){
 .shop-grid.lv .ic-spec{display:none}
 .shop-grid.lv .iname{flex:1 1 auto}
}
@media(max-width:760px){
 .psh-body{flex-direction:column-reverse}
 .psh-cats{width:100%;border-left:none;border-bottom:1px solid rgba(240,185,69,.22)}
 .psh-cats .ss-list{display:flex;overflow-x:auto;gap:5px;padding-bottom:4px}
 .psh-cats .ss-item{flex:none;white-space:nowrap;margin-bottom:0}
 .psh-cart{flex-wrap:wrap}
}