/* =====================================================================
   BJS WEB SHOP  |  public/css/theme.css
   ธีม EMBER HEX — ชุดเดียวกับ bjs_policemdt / bjs_itemexpire
   ไฟล์นี้มีแค่ "ระบบ" : ตัวแปรสี ฟอนต์ รีเซ็ต และคอมโพเนนต์ที่ใช้ซ้ำทุกหน้า
   หน้าตาเฉพาะหน้า (ร้านค้า/หลังบ้าน) อยู่ใน app.css / admin.css

   ต่างจาก MDT ตรงไหน :
     · MDT เป็น NUI ลอยบนจอเกม พื้นหลังต้องโปร่งใส — เว็บไม่ใช่ ใส่พื้นดำได้เลย
     · MDT ล็อกขนาดหน้าต่าง 980x600 — เว็บต้องยืดตามจอ มีมือถือด้วย
     · เพิ่มโหมด reduced-motion (เว็บมีคนใช้จริงหลากหลายกว่า NUI)
   ===================================================================== */

@font-face{
  font-family:'Sukhumvit';
  src:url('../fonts/SukhumvitSet-Thin.woff2') format('woff2'),
      url('../fonts/SukhumvitSet-Thin.woff')  format('woff');
  font-weight:100 400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Sukhumvit';
  src:url('../fonts/SukhumvitSet.woff2') format('woff2'),
      url('../fonts/SukhumvitSet.woff')  format('woff');
  font-weight:500 900; font-style:normal; font-display:swap;
}

/* ---------- TOKENS ---------- */
:root{
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --hair:rgba(255,255,255,.07);
  --hair-2:rgba(255,255,255,.12);

  --txt:#f6efe8; --dim:#c9b39c; --dim-2:#9c8570;
  --or:#ff8a1f; --or-hi:#ffd0a0; --or-lo:#a1490a; --o:255,138,31;
  --safe:#ffb347;  --s:255,179,71;
  --warn:#ff7a18;  --w:255,122,24;
  --bad:#ff4d4d;   --b:255,77,77;
  --ok:#57d38b;    --g:87,211,139;
  --info:#5aa9e6;  --i:90,169,230;

  --bg:#060403;
  --panel: linear-gradient(180deg, rgba(22,14,8,.965), rgba(9,6,4,.98));
  --panel-2: linear-gradient(180deg, rgba(28,18,10,.9), rgba(13,9,5,.95));
  --edge: linear-gradient(150deg, rgba(var(--o),.55), rgba(255,255,255,.08) 46%, rgba(var(--o),.26));

  /* ฟอนต์ — ตัวเลขใช้ Orbitron ทุกที่ ให้หน้าตาเป็นชุดเดียวกับ MDT */
  --f:'Sukhumvit','Kanit','Noto Sans Thai','Segoe UI',sans-serif;
  --f-num:'Orbitron','Sukhumvit',sans-serif;

  --ease:cubic-bezier(.22,.61,.24,1);
  --r:16px; --r-sm:10px; --r-lg:22px;
  --shadow: 0 30px 64px -30px rgba(0,0,0,.95), 0 0 56px -30px rgba(var(--o),.24),
            inset 0 1px 0 rgba(255,255,255,.06);
  --nav-h:64px;
}

/* ---------- RESET ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  /*  ฟุตเตอร์ต้องติดขอบล่างเสมอ : body เป็นคอลัมน์ยาวเต็มจอ แล้วให้ main ยืดกินที่ว่าง
      ตัวที่ลอยอยู่แล้ว (nav sticky · drawer/annc/toasts fixed · sprite absolute)
      ไม่ได้รับผลอะไร เพราะอยู่นอกโฟลว์หรือ sticky ซึ่งใช้กับ flex item ได้ปกติ  */
  min-height:100vh;
  display:flex; flex-direction:column;
  font-family:'Sukhumvit','Kanit','Noto Sans Thai','Segoe UI',sans-serif;
  font-weight:300; font-size:15px; line-height:1.55;
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(80% 55% at 15% -5%, #26170c, transparent 62%),
    radial-gradient(65% 60% at 88% 8%, #1d1208, transparent 60%),
    radial-gradient(70% 70% at 50% 110%, #180f07, transparent 65%),
    var(--bg);
  background-attachment:fixed;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; outline:none; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--or); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ไอคอน SVG ทั้งระบบเป็นเส้น ไม่ใช่ทึบ — ตรงกับ MDT */
.ic{ width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:1.6;
     stroke-linecap:round; stroke-linejoin:round; flex:none; }
/* ตัวเลขใช้ฟอนต์ความกว้างคงที่ ไม่ให้ราคากระตุกตอนอัปเดต */
.num{ font-family:'Orbitron','Sukhumvit',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/*  แถบเลื่อน
    ⚠ เดิมเป็นแท่งส้มทึบเต็มความสูง — ในกล่องที่เนื้อหายาว ๆ (เช่นโมดัลเพิ่มสินค้า)
      มันกลายเป็นเส้นส้มสว่างพาดขอบขวาทั้งใบ เด่นกว่าเนื้อหาที่กำลังกรอกอยู่
      และขัดกับกฎของธีมที่ใช้ส้มเป็น "ตัวหนังสือกับเส้นขอบ" ไม่ใช่พื้นทึบ

    ปกติ = เทาจาง ๆ พอให้รู้ว่าเลื่อนได้ · เอาเมาส์ไปโดนค่อยเป็นส้ม  */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  border:3px solid transparent; background-clip:padding-box; border-radius:99px;
  background-color:rgba(255,255,255,.14);
}
::-webkit-scrollbar-thumb:hover{ background-color:rgba(var(--o),.55); }
::-webkit-scrollbar-corner{ background:transparent; }
/*  Firefox ตั้งได้แค่สองค่า — ให้โทนใกล้เคียงกัน  */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }

/* ---------- LAYOUT ---------- */
.wrap{ width:min(1240px, 100% - 32px); margin-inline:auto; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:10px; }
.spacer{ flex:1; }
.grid{ display:grid; gap:16px; }
/*  ⚠ ฟุตเตอร์ต้องติดขอบล่างเสมอ แม้หน้าจะสั้น
    เดิมใช้ min-height ที่เดาความสูงฟุตเตอร์เอาไว้ 180px — เดาผิดเมื่อไหร่
    ฟุตเตอร์ก็ลอยขึ้นมากลางจอ เหลือพื้นดำเปล่า ๆ ข้างล่าง
    (เจอในหน้าร้านค้าที่มีสินค้าใบเดียว)
    ให้ body เป็น flex คอลัมน์แล้วดัน main ให้ยืดแทน ไม่ต้องเดาอะไรเลย  */
main{ padding-block:28px 64px; flex:1 0 auto; }

/* ---------- HEX MARK (โลโก้หกเหลี่ยม) ---------- */
.mark{ position:relative; width:38px; height:44px; display:grid; place-items:center; flex:none; }
.mark__hex{ position:absolute; inset:0; clip-path:var(--hex);
  background:linear-gradient(160deg,var(--or-hi),var(--or) 42%,var(--or-lo));
  box-shadow:0 0 18px -8px rgba(var(--o),.7); }
.mark__in{ position:absolute; inset:2.6px; clip-path:var(--hex); background:linear-gradient(180deg,#1b1108,#0b0704); }
.mark__txt{ position:relative; font-size:.6rem; letter-spacing:.08em; font-weight:700; color:var(--or-hi); }

/* ---------- NAVBAR ---------- */
.nav{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(10,6,4,.92), rgba(10,6,4,.72));
  border-bottom:1px solid var(--hair);
}
.nav__in{ height:100%; display:flex; align-items:center; gap:8px; }
/*  ⚠ ห้าม flex:none
    ชื่อร้านตั้งเองได้ ยาวแค่ไหนก็ได้ ('LOS LEOPARD SHOP' ยาวกว่า 'BJS SHOP' เท่าตัว)
    flex:none = แบรนด์กินที่เท่าไหร่ก็ได้ แล้วบีบเมนูให้เหลือน้อยลงเรื่อย ๆ
    จนตัวหนังสือในเมนูหักกลางคำ ('ร้าน' / 'ค้า' คนละบรรทัด)
    ให้แบรนด์ยอมหดก่อน แล้วตัดท้ายด้วย ... แทน — เมนูสำคัญกว่าชื่อเต็ม  */
.brand{ display:flex; align-items:center; gap:11px; margin-right:12px;
  flex:0 1 auto; min-width:0; }
.brand > span:not(.mark){ min-width:0; overflow:hidden; }
.brand__tag{ font-size:.54rem; letter-spacing:.3em; color:var(--or); font-weight:600; white-space:nowrap; }
/* nowrap สำคัญ : ชื่อร้านที่ผู้ใช้ตั้งเองอาจยาว ปล่อยให้ตัดบรรทัดแล้วแถบ nav จะสูงเกิน 64px
   แล้วเนื้อหาข้างล่างเลื่อนลงทั้งหน้า */
.brand__title{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:.92rem; font-weight:700;
  letter-spacing:.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.nav__links{ display:flex; align-items:center; gap:2px; flex:none; }
/*  ⚠ nowrap คือของบังคับ ไม่ใช่ของแต่ง
    ไม่มี = พอที่แคบลง ชื่อเมนูจะหักกลางคำ ได้ 'หน้า' บรรทัดบน 'แรก' บรรทัดล่าง
    ซึ่งดันแถบ nav สูงขึ้นแล้วเนื้อหาทั้งหน้าเลื่อนตาม
    เมนูควร "ล้นแล้วซ่อน" หรือ "ยุบเป็นปุ่มเบอร์เกอร์" ไม่ใช่หักคำ  */
.nav__link{
  position:relative; display:flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:99px; font-size:.88rem; color:var(--dim);
  white-space:nowrap; flex:none;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.nav__link:hover{ color:var(--txt); background:rgba(255,255,255,.05); }
.nav__link.is-active{ color:var(--or-hi); background:rgba(var(--o),.12); }
.nav__link.is-active::after{
  content:''; position:absolute; left:50%; bottom:-13px; translate:-50% 0;
  width:22px; height:2px; border-radius:2px; background:var(--or); box-shadow:0 0 12px 1px rgba(var(--o),.6);
}

/* ป้าย "ตู้สุ่ม" ให้เด่นกว่าเมนูอื่นนิดหน่อย — เป็นตัวชูโรงของเว็บ */
.nav__link--hot{ color:var(--or); }
.nav__link--hot::before{
  content:''; position:absolute; top:6px; right:8px; width:5px; height:5px; border-radius:99px;
  background:var(--or); box-shadow:0 0 8px 1px rgba(var(--o),.9);
}
.nav__link--hot.is-active::before{ display:none; }

.nav__burger{ display:none; width:40px; height:40px; place-items:center; border-radius:10px; color:var(--dim); }
.nav__burger:hover{ background:rgba(255,255,255,.06); color:var(--txt); }

.nav__right{ display:flex; align-items:center; gap:8px; flex:none; }

/* ---------- แคปซูลรวมบนแถบนำทาง ----------
   สถานะเซิร์ฟ · เครดิต · ตะกร้า อยู่ในกรอบเดียว คั่นด้วยเส้นบาง
   เคยเป็นชิปสามใบลอย ๆ ขนาด/สี/ทรงต่างกันหมด เบียดกันจนอ่านไม่ออกว่าอันไหนคืออะไร */
.navpod{
  display:flex; align-items:stretch; flex:none; overflow:hidden;
  border-radius:99px; border:1px solid var(--hair-2); background:rgba(0,0,0,.35);
}
.navpod > *{ border-left:1px solid var(--hair); }
.navpod > *:first-child{ border-left:0; }

.navpod__credit{
  display:flex; align-items:center; gap:6px; padding:0 13px;
  font-size:.84rem; white-space:nowrap; color:var(--or-hi);
  transition:.16s var(--ease);
}
.navpod__credit:hover{ background:rgba(var(--o),.16); }
.navpod__credit .ic{ width:14px; height:14px; color:var(--or); }

.navpod__cart{
  display:flex; align-items:center; justify-content:center; gap:6px; padding:0 13px;
  color:var(--dim); transition:.16s var(--ease);
}
.navpod__cart:hover{ background:rgba(255,255,255,.07); color:var(--txt); }
.navpod__cart .ic{ width:17px; height:17px; flex:none; }

/* จำนวนในตะกร้า — หกเหลี่ยมเล็กข้างไอคอน เข้าชุดกับธีม
   ของเดิมเป็นวงกลมส้มลอยทับมุมไอคอน มีวงแหวนดำรอบ ๆ ดูเหมือนสติกเกอร์แปะหลุด
   แล้วรอบต่อมาเป็นหกเหลี่ยม "ส้มทึบ" ซึ่งก็ยังดังเกินไปอยู่ดี —
   บนแถบเมนูมันกลายเป็นจุดที่สว่างที่สุด ทั้งที่เป็นแค่ตัวเลขบอกจำนวน
   ตอนนี้กลับด้าน : พื้นเข้ม ตัวเลขส้ม เรืองอ่อน ๆ พอให้เห็นว่ามีของอยู่ */
.navpod__n{
  display:grid; place-items:center; min-width:19px; height:22px; padding:0 4px;
  clip-path:var(--hex);
  font-family:var(--f-num); font-size:.68rem; font-weight:700;
  color:var(--or-hi);
  background:linear-gradient(165deg, rgba(var(--o),.34), rgba(var(--o),.16));
  text-shadow:0 0 10px rgba(var(--o),.55);
}
.navpod__n[hidden]{ display:none; }

/* ---------- ป้ายสถานะเซิร์ฟเกม ---------- */
.srvpill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:99px;
  font-size:.76rem; white-space:nowrap; transition:.2s var(--ease);
  border:1px solid var(--hair-2); color:var(--dim); background:rgba(255,255,255,.03);
}
.srvpill__dot{ width:7px; height:7px; border-radius:99px; flex:none; background:var(--dim-2); }
.srvpill.is-up{ border-color:rgba(var(--g),.35); color:#a8ecc6; background:rgba(var(--g),.09); }
.srvpill.is-up .srvpill__dot{ background:var(--ok); box-shadow:0 0 9px rgba(var(--g),.9);
  animation:pulse 2.4s ease-in-out infinite; }
.srvpill.is-down{ border-color:rgba(var(--w),.4); color:#ffc48a; background:rgba(var(--w),.09); }
.srvpill.is-down .srvpill__dot{ background:var(--warn); box-shadow:0 0 9px rgba(var(--w),.9); }
.srvpill.is-wait{ opacity:.6; }

/* แบบย่อบนแถบนำทาง — จุดกับคำเดียว ไม่มีขอบของตัวเอง เพราะอยู่ในแคปซูลแล้ว */
.srvpill--mini{
  border:0; border-radius:0; background:none;
  padding:0 13px; font-size:.75rem; height:38px;
}
.srvpill--mini.is-up{ background:rgba(var(--g),.1); }
.srvpill--mini.is-down{ background:rgba(var(--w),.1); }
.srvpill--mini:hover{ filter:brightness(1.3); }
@media (max-width: 640px){ .srvpill--mini span:not(.srvpill__dot){ display:none; } }

/* ---------- เมนูบัญชี (ดรอปดาวน์) ---------- */
.usermenu{ position:relative; flex:none; }
.usermenu__btn{
  display:flex; align-items:center; gap:9px; padding:5px 11px 5px 5px; border-radius:99px;
  border:1px solid var(--hair-2); background:rgba(255,255,255,.04);
  transition:.16s var(--ease); max-width:210px;
}
.usermenu__btn:hover{ border-color:rgba(var(--o),.45); background:rgba(var(--o),.1); }
.usermenu__name{ font-size:.85rem; font-weight:500; }
.usermenu__caret{ color:var(--dim-2); transition:transform .2s var(--ease); flex:none; }
.usermenu.is-open .usermenu__caret{ transform:rotate(180deg); }
.usermenu.is-open .usermenu__btn{ border-color:rgba(var(--o),.6); background:rgba(var(--o),.14); }

.usermenu__ava{ position:relative; width:30px; height:35px; flex:none; display:block; }
.usermenu__ava--lg{ width:44px; height:51px; }
.usermenu__hex{ position:absolute; inset:0; clip-path:var(--hex);
  background:linear-gradient(160deg,var(--or-hi),var(--or) 45%,var(--or-lo)); }
.usermenu__ava img{ position:absolute; inset:2px; width:calc(100% - 4px); height:calc(100% - 4px);
  clip-path:var(--hex); object-fit:cover; }

.usermenu__pop{
  position:absolute; z-index:80; top:calc(100% + 10px); right:0; width:288px;
  border-radius:var(--r); border:1px solid transparent;
  background:linear-gradient(180deg, rgba(24,16,9,.995), rgba(10,7,4,.995)) padding-box, var(--edge) border-box;
  box-shadow:0 28px 60px -26px rgba(0,0,0,.96);
  padding:6px; animation:popIn .18s var(--ease);
}
.usermenu__pop[hidden]{ display:none; }
@keyframes popIn{ from{ opacity:0; transform:translateY(-8px) scale(.98); } }

.usermenu__head{ display:flex; gap:11px; align-items:center; padding:11px 11px 12px; }
.usermenu__stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 8px 10px; }
.usermenu__stats > div{ padding:8px 10px; border-radius:9px; border:1px solid var(--hair);
  background:rgba(255,255,255,.03); min-width:0; }
.usermenu__stats b{ display:block; margin-top:2px; }
.usermenu__stats .num{ font-size:1.02rem; }

.usermenu__alert{
  display:flex; align-items:center; gap:9px; margin:0 8px 8px; padding:9px 11px; border-radius:9px;
  font-size:.76rem; line-height:1.45;
  border:1px solid rgba(var(--w),.4); background:rgba(var(--w),.1); color:#ffc48a;
}
.usermenu__alert .ic{ width:16px; height:16px; flex:none; }
.usermenu__alert:hover{ background:rgba(var(--w),.18); }

.usermenu__sep{ height:1px; background:var(--hair); margin:5px 8px; }
.usermenu__item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
  font-size:.87rem; color:var(--dim); transition:.14s var(--ease);
}
.usermenu__item:hover{ background:rgba(var(--o),.12); color:var(--txt); }
.usermenu__item .ic{ width:16px; height:16px; color:var(--or); flex:none; }
.usermenu__item--danger{ color:#ffb3b3; }
.usermenu__item--danger:hover{ background:rgba(var(--b),.14); color:#ffd0d0; }
.usermenu__item--danger .ic{ color:var(--bad); }

/* ---------- ปุ่ม ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:var(--r-sm); font-size:.9rem; font-weight:500;
  border:1px solid var(--hair-2); color:var(--txt);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition:.18s var(--ease); white-space:nowrap;
}
.btn:hover{ border-color:rgba(var(--o),.4); background:linear-gradient(180deg, rgba(var(--o),.16), rgba(var(--o),.05)); }
.btn:active{ transform:translateY(1px); }
.btn[disabled], .btn.is-disabled{ opacity:.4; pointer-events:none; }

/* ═══════════ ปุ่มหลัก — โทน EMBER ไม่ใช่แผ่นส้มทึบ ═══════════
   เคยเป็นเฉดส้มสว่างเต็มปุ่ม ซึ่งชนกับธีมทั้งเว็บที่เป็นดำ+ขอบเรืองส้ม
   ปุ่มกลายเป็นแผ่นสีลอยอยู่บนหน้าจอ ไม่ได้ดูเป็นส่วนหนึ่งของงาน
   ตัวใหม่ : ฐานดำโปร่ง + ขอบส้มเรือง + ตัวหนังสือส้มสว่าง + แสงวิ่งตอนชี้
   ยังเด่นกว่า .btn ธรรมดาชัดเจน แต่ไม่ตะโกน */
.btn--primary{
  color:#ffd7ab; font-weight:600;
  border-color:rgba(var(--o),.55);
  background:
    linear-gradient(180deg, rgba(var(--o),.26), rgba(var(--o),.07) 60%, rgba(var(--o),.14)),
    rgba(12,7,4,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px -16px rgba(var(--o),.9);
  overflow:hidden;
}
/* เส้นแสงวิ่งผ่านตอนชี้ — สัญญาณ "กดได้" ที่ไม่ต้องเปลี่ยนสีพื้น */
.btn--primary::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,210,160,.22) 48%, transparent 66%);
  transform:translateX(-120%); transition:transform .55s var(--ease);
}
.btn--primary:hover{
  color:#fff6ec; border-color:rgba(var(--o),.95);
  background:
    linear-gradient(180deg, rgba(var(--o),.4), rgba(var(--o),.13) 60%, rgba(var(--o),.22)),
    rgba(12,7,4,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 30px -10px rgba(var(--o),.85);
}
.btn--primary:hover::after{ transform:translateX(120%); }
.btn--primary:disabled, .btn--primary[disabled], .btn--primary.is-disabled{
  box-shadow:none; border-color:var(--hair-2); color:var(--dim-2);
  background:rgba(255,255,255,.04);
}
.btn--primary:disabled::after, .btn--primary[disabled]::after, .btn--primary.is-disabled::after{ display:none; }
@media (prefers-reduced-motion: reduce){ .btn--primary::after{ display:none; } }
.btn--ghost{ background:none; border-color:var(--hair-2); color:var(--dim); }
.btn--ghost:hover{ color:var(--txt); }
.btn--danger{ border-color:rgba(var(--b),.35); color:#ffb3b3; background:linear-gradient(180deg, rgba(var(--b),.14), rgba(var(--b),.04)); }
.btn--danger:hover{ border-color:rgba(var(--b),.6); background:linear-gradient(180deg, rgba(var(--b),.24), rgba(var(--b),.08)); }
.btn--ok{ border-color:rgba(var(--g),.35); color:#a8ecc6; background:linear-gradient(180deg, rgba(var(--g),.14), rgba(var(--g),.04)); }
.btn--ok:hover{ border-color:rgba(var(--g),.6); background:linear-gradient(180deg, rgba(var(--g),.24), rgba(var(--g),.08)); }
.btn--sm{ padding:6px 12px; font-size:.8rem; border-radius:8px; }
.btn--lg{ padding:14px 26px; font-size:1rem; }
.btn--block{ width:100%; }

/* ปุ่มไอคอนทรงหกเหลี่ยม — ยกมาจาก MDT ตรง ๆ */
.iconbtn{ position:relative; width:36px; height:41px; display:grid; place-items:center; color:var(--dim); transition:.18s var(--ease); }
.iconbtn::before{ content:''; position:absolute; inset:0; clip-path:var(--hex);
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08)); transition:.18s var(--ease); }
.iconbtn::after{ content:''; position:absolute; inset:1.6px; clip-path:var(--hex);
  background:linear-gradient(180deg,#1a1108,#0b0705); transition:.18s var(--ease); }
.iconbtn .ic{ position:relative; z-index:1; width:15px; height:15px; stroke-width:1.9; }
.iconbtn:hover{ color:#fff; }
.iconbtn:hover::before{ background:linear-gradient(180deg,var(--or-hi),var(--or)); box-shadow:0 0 16px -5px rgba(var(--o),.9); }
.iconbtn:hover::after{ background:linear-gradient(180deg,rgba(var(--o),.4),rgba(var(--o),.12)); }

/* ---------------------------------------------------------------------
   TOOLTIP  (.tip)  — JS ใน app.js เป็นคนวาง ที่ <body> ตรง ๆ
   ไม่ใช้ title= ของเบราว์เซอร์เพราะเป็นกล่องเหลืองของ OS ไม่เข้าธีม
   และรอเป็นวินาทีถึงจะโผล่
   --------------------------------------------------------------------- */
.tip{
  position:fixed; z-index:400; pointer-events:none;
  max-width:min(280px,80vw); padding:8px 12px; border-radius:9px;
  font-size:.76rem; line-height:1.55; color:var(--txt);
  border:1px solid rgba(var(--o),.35);
  background:linear-gradient(180deg, rgba(30,19,11,.99), rgba(12,8,5,.99));
  box-shadow:0 16px 36px -14px rgba(0,0,0,.95), 0 0 24px -14px rgba(var(--o),.7);
  opacity:0; transform:translateY(5px) scale(.97);
  transition:opacity .14s var(--ease), transform .14s var(--ease);
}
.tip.is-on{ opacity:1; transform:translateY(0) scale(1); }
.tip.is-below{ transform:translateY(-5px) scale(.97); }
.tip.is-below.is-on{ transform:translateY(0) scale(1); }

/* ลูกศร — --ax คือระยะจากขอบซ้ายกล่องถึงกึ่งกลางปุ่มจริง
   ทำให้ลูกศรยังชี้ถูกแม้กล่องจะถูกดันชนขอบจอ */
.tip__arw{
  position:absolute; left:var(--ax,50%); translate:-50% 0;
  width:9px; height:9px; rotate:45deg;
  background:linear-gradient(135deg, rgba(12,8,5,.99) 50%, transparent 50%);
  border-left:1px solid rgba(var(--o),.35); border-bottom:1px solid rgba(var(--o),.35);
}
.tip:not(.is-below) .tip__arw{ bottom:-5px; }
.tip.is-below .tip__arw{
  top:-5px; rotate:225deg;
  background:linear-gradient(135deg, rgba(30,19,11,.99) 50%, transparent 50%);
}
@media (prefers-reduced-motion: reduce){ .tip{ transition:none; } }

/* ---------- การ์ด / แผง ---------- */
.card{
  position:relative; border-radius:var(--r); border:1px solid transparent;
  background:var(--panel) padding-box, var(--edge) border-box;
  box-shadow:var(--shadow);
}
.card__pad{ padding:18px 20px; }
.card__head{ display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--hair); }
.card__title{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:.86rem; font-weight:600; letter-spacing:.06em; }
.card__sub{ font-size:.78rem; color:var(--dim-2); }

.panel{ border-radius:var(--r-sm); border:1px solid var(--hair); background:var(--panel-2); }

/* ---------- ป้ายสถานะ ---------- */
.tag{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px;
  font-size:.72rem; font-weight:500; letter-spacing:.02em; white-space:nowrap;
  border:1px solid rgba(255,255,255,.12); color:var(--dim); background:rgba(255,255,255,.04);
}
.tag--or{ border-color:rgba(var(--o),.35); color:var(--or-hi); background:rgba(var(--o),.12); }
.tag--ok{ border-color:rgba(var(--g),.35); color:#a8ecc6; background:rgba(var(--g),.12); }
.tag--bad{ border-color:rgba(var(--b),.35); color:#ffb3b3; background:rgba(var(--b),.12); }
.tag--warn{ border-color:rgba(var(--w),.4); color:#ffc48a; background:rgba(var(--w),.12); }
.tag--info{ border-color:rgba(var(--i),.35); color:#a9d4f5; background:rgba(var(--i),.12); }
.tag--dot::before{ content:''; width:6px; height:6px; border-radius:99px; background:currentColor; box-shadow:0 0 8px currentColor; }

/* ---------- ฟอร์ม ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field__label{ font-size:.78rem; color:var(--dim); font-weight:500; }
.field__hint{ font-size:.72rem; color:var(--dim-2); line-height:1.45; }
.field__err{ font-size:.74rem; color:#ffb3b3; }

.input, .select, .textarea{
  width:100%; padding:10px 13px; border-radius:var(--r-sm);
  border:1px solid var(--hair-2); background:rgba(0,0,0,.32); color:var(--txt);
  font-size:.9rem; transition:.16s var(--ease);
}
.input::placeholder, .textarea::placeholder{ color:var(--dim-2); }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:rgba(var(--o),.55); background:rgba(0,0,0,.45);
  box-shadow:0 0 0 3px rgba(var(--o),.12);
}
.textarea{ resize:vertical; min-height:88px; line-height:1.6; }
.select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9b39c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:15px; padding-right:34px; }

/* สวิตช์เปิด/ปิด */
.switch{ position:relative; width:44px; height:24px; flex:none; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch__track{ position:absolute; inset:0; border-radius:99px; background:rgba(255,255,255,.1);
  border:1px solid var(--hair-2); transition:.2s var(--ease); pointer-events:none; }
.switch__dot{ position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:99px;
  background:var(--dim); transition:.2s var(--ease); pointer-events:none; }
.switch input:checked ~ .switch__track{ background:rgba(var(--o),.3); border-color:rgba(var(--o),.55); }
.switch input:checked ~ .switch__dot{ left:23px; background:linear-gradient(180deg,var(--or-hi),var(--or)); box-shadow:0 0 10px -2px rgba(var(--o),.9); }

/* ---------- ตาราง ---------- */
/*  ตารางกว้างกว่าจอต้องเลื่อนในกล่องตัวเอง ไม่ใช่ดันทั้งหน้าให้เลื่อนซ้ายขวา
    ⚠ ต้องมี min-width:0 ด้วย — การ์ดที่ครอบเป็น flex คอลัมน์ ลูกจะกว้างตามเนื้อหา
      (min-width:auto) แล้ว overflow-x ไม่มีผลเลย ตารางจะดันการ์ดจนล้นจอ  */
.tablewrap{ overflow-x:auto; border-radius:var(--r-sm); min-width:0; max-width:100%; }
.table{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:640px; }
.table th{
  text-align:left; padding:11px 14px; font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim-2); border-bottom:1px solid var(--hair-2); white-space:nowrap;
}
.table td{ padding:12px 14px; border-bottom:1px solid var(--hair); vertical-align:middle; }
.table tbody tr{ transition:background .14s var(--ease); }
.table tbody tr:hover{ background:rgba(var(--o),.045); }
.table tbody tr:last-child td{ border-bottom:0; }

/* ---------- สถานะว่าง ---------- */
.empty{ display:grid; place-items:center; gap:12px; padding:56px 20px; text-align:center; color:var(--dim-2); }
.empty .ic{ width:44px; height:44px; stroke-width:1.2; color:rgba(var(--o),.4); }
.empty__title{ font-size:.98rem; color:var(--dim); font-weight:500; }
.empty__text{ font-size:.84rem; max-width:38ch; line-height:1.6; }

/* ---------- แจ้งเตือนลอย ---------- */
.toasts{ position:fixed; z-index:200; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px;
  width:min(340px, calc(100vw - 36px)); pointer-events:none; }
.toast{
  pointer-events:auto; display:flex; align-items:flex-start; gap:11px; padding:13px 15px;
  border-radius:var(--r-sm); border:1px solid transparent;
  background:linear-gradient(180deg, rgba(26,17,9,.98), rgba(11,7,4,.98)) padding-box, var(--edge) border-box;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.95);
  animation:toastIn .28s var(--ease);
}
.toast .ic{ width:18px; height:18px; margin-top:1px; color:var(--or); }
.toast--ok .ic{ color:var(--ok); }
.toast--bad .ic{ color:var(--bad); }
.toast__body{ flex:1; min-width:0; }
.toast__title{ font-size:.86rem; font-weight:600; }
.toast__text{ font-size:.78rem; color:var(--dim); line-height:1.5; margin-top:2px; word-break:break-word; }
.toast.is-out{ animation:toastOut .22s var(--ease) forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(24px); } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(24px); } }

/* ---------- โมดัล ---------- */
.modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px;
  background:rgba(3,2,1,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal[hidden]{ display:none; }

/*  ⚠ ฉากหลังสำหรับกดปิด — ต้องมีขนาดจริง ไม่งั้นกดไม่โดน
    .modal__veil ถูกใส่ไว้ในโมดัลหลายหน้าพร้อม data-close-modal
    แต่ไม่เคยมีกฎ CSS ให้เลย มันเลยเป็น <div> เปล่าสูง 0
    กดพื้นที่ว่างรอบกล่องแล้วไม่มีอะไรเกิดขึ้น ต้องกดปุ่มปิดหรือ Esc เท่านั้น
    (ตัว .modal เป็นคนวาดพื้นมืด ไม่ใช่ veil — เลยไม่มีใครสังเกตว่าหาย)

    z-index ต่ำกว่ากล่อง เพื่อไม่ให้ไปบังปุ่มข้างใน  */
.modal__veil{ position:absolute; inset:0; z-index:0; cursor:default; }
.modal__box{ z-index:1; }
.modal__box{
  position:relative; width:min(560px, 100%); max-height:88vh; overflow:auto;
  animation:modalIn .24s var(--ease);
  /*  ยกกล่องให้ลอยเหนือฉากหลังชัด ๆ — เงาอย่างเดียวยังจมอยู่กับพื้นดำ
      เติมวงแหวนบางรอบกล่องอีกชั้นให้ขอบคมขึ้น  */
  box-shadow:0 30px 70px -20px #000, 0 0 0 1px rgba(255,255,255,.05);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.98); } }

/*  เส้นเรืองแสงบนขอบบน — ตัวเดียวกับที่ใช้ในกล่องยืนยันตอนซื้อ
    ยกมาเป็นของกลางเพื่อให้โมดัลทุกใบในเว็บหน้าตาเป็นชุดเดียวกัน
    กล่องไหนอยากเปลี่ยนสีก็ทับแค่ background (ดู .igm__card ใน app.css)  */
.modal__box::before{
  content:''; position:sticky; top:0; left:0; right:0; display:block;
  height:1px; margin-bottom:-1px; z-index:3;
  background:linear-gradient(90deg, transparent, var(--or), transparent);
  opacity:.5;
}

/*  ⚠ หัวกล่องต้องหนึบ
    โมดัลสินค้า/ตู้สุ่มยาวเกินจอ เลื่อนลงไปนิดเดียวชื่อกล่องกับปุ่มปิดก็หายไปแล้ว
    ต้องเลื่อนกลับขึ้นมาบนสุดถึงจะปิดได้ ซึ่งน่ารำคาญมากเวลาแก้ของยาว ๆ  */
.modal__box > .card__head{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg, rgba(22,14,8,.97), rgba(18,11,6,.93));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* ---------- แถบโหลด ---------- */
.skel{ border-radius:8px; background:linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.1), rgba(255,255,255,.045));
  background-size:200% 100%; animation:skel 1.3s linear infinite; }
@keyframes skel{ to{ background-position:-200% 0; } }

/* ---------- FOOTER ---------- */
.foot{ border-top:1px solid var(--hair); padding:26px 0 34px; margin-top:40px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.4)); }
.foot__in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:.8rem; color:var(--dim-2); }
.foot a:hover{ color:var(--or); }

/* ---------- helper ---------- */
.t-dim{ color:var(--dim); }
.t-dim2{ color:var(--dim-2); }
.t-or{ color:var(--or); }
.t-ok{ color:var(--ok); }
.t-bad{ color:var(--bad); }
.t-info{ color:var(--info); }
/*  ⚠ ตัวนี้ขาดหายไปนาน ทั้งที่ถูกเรียกใช้ 7 ที่ใน 5 ไฟล์
    ผลคือข้อความเตือนทั้งหมดแสดงเป็นสีตัวหนังสือปกติ ไม่มีใครสังเกต
    เพราะมันไม่พัง แค่ "ไม่เด่น" ซึ่งคือจุดประสงค์ทั้งหมดของคลาสนี้  */
.t-warn{ color:var(--warn); }
.t-sm{ font-size:.82rem; }
.t-xs{ font-size:.74rem; }
.t-c{ text-align:center; }
.t-r{ text-align:right; }
.t-b{ font-weight:600; }
.t-nowrap{ white-space:nowrap; }
.t-clip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-a{ margin-top:auto; }
.hr{ height:1px; background:var(--hair); border:0; margin:16px 0; }

.section__title{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.section__title h2{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:1.02rem; font-weight:600; letter-spacing:.05em; }
.section__title::after{ content:''; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(var(--o),.4), transparent); }

/* ---------- มือถือ ---------- */
@media (max-width: 860px){
  .wrap{ width:calc(100% - 24px); }
  .nav__burger{ display:grid; }
  /* CSS เป็นเจ้าของการซ่อน/แสดงเมนู ไม่ใช่ JS
     เดิมใช้ JS ตั้ง .hidden ตาม matchMedia แล้วเจอว่า ถ้าเปิดหน้าตอนจอแคบ
     แล้วขยายจอทีหลัง เมนูค้างซ่อนอยู่บนเดสก์ท็อป · ให้ JS แตะแค่คลาส is-open
     ส่วนจะโชว์ไหมปล่อยให้ media query ตัดสิน = ขยาย/ย่อจอกี่ครั้งก็ถูกเสมอ */
  .nav__links{
    display:none;
    position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:4px;
    padding:12px; border-bottom:1px solid var(--hair);
    background:linear-gradient(180deg, rgba(12,8,5,.99), rgba(9,6,4,.99));
    box-shadow:0 24px 40px -24px rgba(0,0,0,.95);
  }
  .nav__links.is-open{ display:flex; }
  .nav__link{ padding:12px 14px; border-radius:var(--r-sm); }
  .nav__link.is-active::after{ display:none; }
}

/* จอแคบมาก (มือถือแนวตั้ง) — ตัดข้อความแบรนด์ออก เหลือแค่หกเหลี่ยม
   ที่ว่างต้องเก็บไว้ให้ยอดเครดิต ตะกร้า และปุ่มออกจากระบบ ซึ่งเป็นของที่ต้องกดจริง
   ส่วนชื่อร้านแค่บอกว่าอยู่เว็บไหน ซึ่งผู้ใช้รู้อยู่แล้วตอนถือมือถือ */
@media (max-width: 860px){
  /* เมนูบัญชีบนมือถือ — กางเต็มความกว้างจอแทนที่จะลอยชิดขวาแคบ ๆ */
  .usermenu__pop{ position:fixed; top:calc(var(--nav-h) + 8px); left:12px; right:12px; width:auto; }
  .usermenu__name{ display:none; }
  .usermenu__btn{ padding:5px; }
}

@media (max-width: 520px){
  .brand > span:not(.mark){ display:none; }
  .brand{ margin-right:4px; }
  .nav__in{ gap:4px; }
  .nav__right{ gap:5px; }
  .iconbtn{ width:32px; height:37px; }
  .navpod__credit{ padding:0 9px; font-size:.76rem; }
  .navpod__cart{ width:34px; }
  .srvpill--mini{ padding:0 9px; height:34px; }
  .nav__logintext{ display:none; }
}


/* ---------------------------------------------------------------------
   ทางลัดของทีมงานบนแถบเมนู

   ต่างจากลิงก์อื่นด้วยเส้นคั่นซ้ายกับตัวหนังสือจาง ๆ — บอกว่า
   "คนละกลุ่มกับเมนูของผู้เล่น" โดยไม่ต้องใช้สีทึบมาแย่งความสนใจ
   --------------------------------------------------------------------- */
.nav__link--staff{
  border-left:1px solid var(--hair); margin-left:5px; padding-left:14px;
  color:var(--dim-2);
}
.nav__link--staff:hover{ color:var(--or-hi); }
/*  ตัวเลขเรื่องค้าง
    ⚠ ของเดิมเป็นวงกลมพื้นส้มทึบตัวหนังสือสีเข้ม — เด่นจนแย่งสายตาไปจากชื่อเมนู
      และตัวเลขเข้มบนพื้นส้มที่ .6rem อ่านแทบไม่ออก ต้องเพ่ง
    ใหม่ : ตัวเลขเป็นสีส้ม พื้นจาง ๆ มีขอบส้มบาง ๆ — ยังสะดุดตาว่ามีงานค้าง
      แต่ไม่ตะโกนใส่ และตัวเลขอ่านออกชัดเพราะเป็นสีสว่างบนพื้นเข้ม  */
.nav__n{
  margin-left:5px;
  min-width:19px; height:19px; padding:0 6px; line-height:1;
  display:inline-grid; place-items:center; border-radius:99px;
  font-family:var(--f-num); font-size:.66rem; font-weight:700;
  color:var(--or-hi); background:rgba(var(--o),.14);
  border:1px solid rgba(var(--o),.5);
}

/* =====================================================================
   ช่องติ๊ก (checkbox / radio) — ทั้งเว็บ

   ⚠ ของเดิมปล่อยเป็นของเบราว์เซอร์ล้วน ๆ
     บนวินโดวส์ได้กล่องขาวขอบเทาสีฟ้าตอนติ๊ก ซึ่งชนกับธีมดำ-ส้มทั้งหน้า
     และเล็กจนกดพลาดบนมือถือ (ค่าปริยาย 13px)

   ทำเป็น appearance:none แล้ววาดเอง — ใช้กับ <input type=checkbox> ทุกอันในเว็บ
   โดยไม่ต้องไปแก้ทีละหน้า · ยกเว้นตัวที่อยู่ในสวิตช์ (.switch) ซึ่งมีทรงของตัวเอง
   ===================================================================== */
input[type="checkbox"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input),
input[type="radio"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input){
  appearance:none; -webkit-appearance:none;
  width:17px; height:17px; flex:none; margin:0;
  display:inline-grid; place-content:center;
  border:1.5px solid var(--hair-2); border-radius:5px;
  background:rgba(0,0,0,.35);
  cursor:pointer; transition:.14s var(--ease);
}
input[type="radio"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input){ border-radius:99px; }

input[type="checkbox"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input):hover,
input[type="radio"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input):hover{
  border-color:rgba(var(--o),.55); background:rgba(var(--o),.1);
}

/*  ⚠ ยกเว้นช่องที่ถูกซ่อนไว้เพื่อวาดกล่องเอง (.switch .skipbox .drop เลือกทรงรังผึ้ง)
    ไม่ยกเว้น = ช่องที่ควรมองไม่เห็นโผล่มาซ้อนกับกล่องที่วาดไว้แล้ว

    เครื่องหมายถูกวาดด้วย clip-path — ไม่ต้องโหลดฟอนต์หรือรูป
    และคมทุกความละเอียดหน้าจอ  */
input[type="checkbox"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input)::before{
  content:''; width:9px; height:9px; transform:scale(0);
  transition:transform .14s var(--ease);
  background:#1a0d03;
  clip-path:polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 38% 66%);
}
input[type="radio"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input)::before{
  content:''; width:7px; height:7px; border-radius:99px; transform:scale(0);
  transition:transform .14s var(--ease); background:#1a0d03;
}

input[type="checkbox"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input):checked,
input[type="radio"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input):checked{
  border-color:transparent;
  background:linear-gradient(180deg, var(--or-hi), var(--or));
  box-shadow:0 0 10px -2px rgba(var(--o),.6);
}
input[type="checkbox"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input):checked::before,
input[type="radio"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input):checked::before{ transform:scale(1); }

/*  โฟกัสด้วยคีย์บอร์ดต้องเห็นชัด — เดินด้วย Tab แล้วต้องรู้ว่าอยู่ตรงไหน  */
input[type="checkbox"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input):focus-visible,
input[type="radio"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input):focus-visible{
  outline:2px solid var(--or); outline-offset:2px;
}
input[type="checkbox"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input):disabled,
input[type="radio"]:not(.switch input):not(.skipbox input):not(.drop input):not(#bf_shapes input):disabled{
  opacity:.45; cursor:not-allowed;
}


/* =====================================================================
   ช่องเลือก (select) — ทั้งเว็บ

   ⚠ ของเดิมปล่อยเป็นของเบราว์เซอร์ ได้ลูกศรระบบสีเทากับกล่องเหลี่ยม ๆ
     ชนกับธีมทั้งหน้า และบนวินโดวส์รายการที่กางออกมาเป็นพื้นขาวตัวหนังสือดำ

   วาดลูกศรเองด้วย background-image (SVG inline) — ไม่ต้องมี wrapper เพิ่ม
   ส่วนรายการที่กางออกมาเป็นของระบบปฏิบัติการ สั่งสีได้แค่ผ่าน color-scheme
   ===================================================================== */
select, .select{
  appearance:none; -webkit-appearance:none;
  color-scheme:dark;
  padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ff8a1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:11px 8px;
  cursor:pointer;
}
select:hover, .select:hover{ border-color:rgba(var(--o),.45); }
select option, .select option{ background:#140c06; color:var(--txt); }
select:disabled, .select:disabled{ opacity:.5; cursor:not-allowed; }

/* =====================================================================
   dropdown ที่วาดรายการเอง  (public/js/select.js เป็นคนประกอบให้)

   ⚠ กฎข้างบนจัดได้แค่ "กล่องตอนปิด" เท่านั้น
     รายการที่กางออกมาเป็นหน้าต่างของระบบปฏิบัติการ CSS เข้าไม่ถึงจริง ๆ
     ตั้ง color-scheme:dark กับ option{background} ครบแล้วก็ยังได้
     แถบฟ้าพื้นขาวของวินโดวส์บนตัวที่เลือกอยู่เหมือนเดิม
     ทั้งหน้าเป็นธีมดำ-ส้ม แล้วโดนแถบฟ้าเด้งใส่ทุกครั้งที่กด

   กฎเดิมด้านบนยังต้องอยู่ : เป็นหน้าตาก่อน js ทำงาน และตอน js ปิด
   ===================================================================== */
.xsel{ position:relative; display:block; width:100%; }
/*  select ตัวจริงยังอยู่ในฟอร์ม แค่ไม่ให้เห็น — ค่ายังถูกส่งไปเซิร์ฟเวอร์ตามปกติ
    ใช้ position:absolute แทน display:none เพราะ :required ที่ซ่อนด้วย display
    จะทำให้เบราว์เซอร์ฟ้อง "ช่องที่ต้องกรอกถูกซ่อนอยู่" แล้วส่งฟอร์มไม่ได้เลย  */
.xsel__native{
  position:absolute; opacity:0; pointer-events:none;
  width:100%; height:100%; left:0; top:0; margin:0; z-index:-1;
}
.xsel__btn{
  width:100%; display:flex; align-items:center; gap:9px;
  padding:10px 13px; border-radius:var(--r-sm);
  border:1px solid var(--hair-2); background:rgba(0,0,0,.32); color:var(--txt);
  font-family:inherit; font-size:.9rem; text-align:left; cursor:pointer;
  transition:.16s var(--ease);
}
.xsel__val{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/*  ยังไม่ได้เลือกอะไร — จางลงให้ต่างจากค่าที่ตั้งไว้จริง  */
.xsel__btn.is-empty .xsel__val{ color:var(--dim-2); }
.xsel__chev{ width:11px; height:8px; flex:none; color:var(--or); transition:transform .18s var(--ease); }
.xsel__btn:hover{ border-color:rgba(var(--o),.45); }
.xsel__btn:focus-visible{
  outline:none; border-color:rgba(var(--o),.55); background:rgba(0,0,0,.45);
  box-shadow:0 0 0 3px rgba(var(--o),.12);
}
.xsel.is-open .xsel__btn{ border-color:rgba(var(--o),.55); background:rgba(0,0,0,.45); }
.xsel.is-open .xsel__chev{ transform:rotate(180deg); }
.xsel__btn:disabled{ opacity:.5; cursor:not-allowed; }

/*  รายการ — อยู่ที่ <body> ชั้นบนสุด ไม่โดนการ์ดที่ overflow:hidden ตัดหัวตัดท้าย

    ⚠ z-index ต้องสูงกว่า .modal (150) เสมอ
      เดิมเป็น 120 ซึ่งต่ำกว่า — dropdown ในโมดัลเลยกางออกมา "ใต้" กล่องโมดัล
      อาการที่เห็นคือกดแล้วลูกศรพลิกขึ้นแต่ไม่มีรายการโผล่มา เหมือนตัวเลือกหายไปหมด
      ทั้งที่ option อยู่ครบ แค่มองไม่เห็น · ต่ำกว่า .toasts (200) เพื่อให้ toast ยังอยู่บนสุด  */
.xsel__pop{
  position:fixed; z-index:170; overflow-y:auto; overscroll-behavior:contain;
  padding:5px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--o),.3); background:#120a05;
  box-shadow:0 18px 44px -14px #000, 0 0 0 1px rgba(0,0,0,.6);
  animation:xselIn .13s var(--ease);
}
@keyframes xselIn{ from{ opacity:0; transform:translateY(-4px); } }

.xsel__opt{
  padding:8px 11px; border-radius:7px; cursor:pointer;
  font-size:.86rem; color:var(--dim); line-height:1.5;
  transition:.1s var(--ease);
}
.xsel__opt.is-empty{ color:var(--dim-2); font-style:italic; }
/*  ตัวที่เมาส์ชี้อยู่ / เดินมาถึงด้วยลูกศร — พื้นจาง ๆ ไม่ใช่แถบทึบ  */
.xsel__opt.is-hot{ background:rgba(255,255,255,.06); color:var(--txt); }
/*  ตัวที่เลือกอยู่ — ตัวหนังสือส้มกับขีดซ้าย ไม่ถมพื้นส้ม
    ถมพื้นแล้วรายการยาว ๆ จะมีแถบสว่างหนึ่งอันเด่นจนอ่านตัวอื่นไม่ทัน  */
.xsel__opt.is-sel{
  color:var(--or-hi); background:rgba(var(--o),.09);
  box-shadow:inset 2px 0 0 var(--or);
}
.xsel__opt.is-sel.is-hot{ background:rgba(var(--o),.15); }
.xsel__opt.is-off{ opacity:.38; cursor:not-allowed; }
.xsel__opt.is-off.is-hot{ background:none; }

/* =====================================================================
   กล่องบัญชีรับโอน

   ⚠ ทุกบรรทัดต้องมีป้ายว่าคืออะไร
     ของเดิมเรียงสามบรรทัดลงมาเฉย ๆ — 'บจก. บีเจเอส เกมมิ่ง' ตัวจิ๋วสีเทา
     คนอ่านไม่รู้ว่านั่นคือชื่อบัญชี ทั้งที่เป็นข้อมูลที่ต้องเอาไปเทียบ
     ตอนกดโอนในแอปธนาคาร · โอนผิดชื่อ = เงินเข้าบัญชีคนอื่น ตามคืนไม่ได้
   ===================================================================== */
.bankbox{
  --bk:#3a2a1c;
  position:relative; overflow:hidden; margin-bottom:11px;
  border:1px solid var(--hair); border-radius:var(--r-sm);
  background:
    radial-gradient(80% 130% at 0% 0%, color-mix(in srgb, var(--bk) 18%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(28,18,10,.72), rgba(10,7,4,.88));
}
/*  แถบสีแบรนด์ที่ขอบซ้าย — รู้ว่าธนาคารไหนตั้งแต่ยังไม่ทันอ่าน  */
.bankbox::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--bk);
}

/* ── แบนเนอร์หัวกล่อง ──────────────────────────────────────────────
   ⚠ เดิมเป็นแถบสีแบรนด์จาง ๆ บนพื้นดำ
     สีแบรนด์ที่ opacity ต่ำ ๆ บนพื้นดำแทบไม่ต่างจากพื้นดำเปล่า
     (เขียวกสิกรจาง ๆ = เทาอมเขียว มองผ่าน ๆ ไม่รู้ด้วยซ้ำว่ามีสี)
     ผลคือหัวกล่องไม่มีน้ำหนัก ชื่อธนาคารจมไปกับพื้นหลัง

     ทำเป็นแบนเนอร์เต็มสีไปเลย — สีแบรนด์ทึบ ตัวอักษรบนสีนั้น
     คนกวาดตาผ่านรู้ทันทีว่าโอนเข้าธนาคารไหน ไม่ต้องเพ่ง
   ───────────────────────────────────────────────────────────────── */
.bankbox__top{
  position:relative; overflow:hidden;
  display:flex; gap:15px; align-items:center; padding:16px 18px;
  /*  ไล่เฉดนิด ๆ ให้ไม่แบนเป็นแผ่นสีเดียว  */
  background:linear-gradient(105deg,
    color-mix(in srgb, var(--bk) 88%, #000),
    var(--bk) 45%,
    color-mix(in srgb, var(--bk) 78%, #000));
}
/*  ลายหกเหลี่ยมจาง ๆ ให้เข้าธีม — ไม่ใช้ไฟล์รูป วาดด้วย gradient  */
.bankbox__top::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(0deg, rgba(0,0,0,.28), transparent 55%);
}
/*  เส้นคมคั่นระหว่างแบนเนอร์กับเนื้อกล่อง  */
.bankbox__top::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(0,0,0,.45); z-index:1;
}

.bankbox__hex{
  --bkink:#ffd0a0;
  position:relative; z-index:1;
  display:grid; place-items:center; width:56px; height:62px; flex:none;
  clip-path:var(--hex);
  /*  ⚠ พื้นขาวเสมอบนแบนเนอร์
      โลโก้ธนาคารออกแบบมาสำหรับพื้นขาว วางบนสีแบรนด์เดียวกันแล้วจมหายไปเลย
      และตัวอักษรย่อบนพื้นขาวก็ใช้สีแบรนด์ อ่านชัดกว่าสีขาวบนสีขาว  */
  background:#fff;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
}
.bankbox__hex > span{
  font-family:var(--f-num); font-size:.62rem; font-weight:700; letter-spacing:.02em;
  color:var(--bk); text-align:center; line-height:1; padding:0 4px; word-break:break-all;
}
.bankbox__hex img{ width:70%; height:70%; object-fit:contain; }

.bankbox__id{ position:relative; z-index:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
/*  ตัวอักษรบนแบนเนอร์ใช้สีที่คู่กับสีแบรนด์ (บางแบรนด์พื้นสว่างต้องใช้ตัวเข้ม)  */
.bankbox__lbl{
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bkink); opacity:.75;
}
.bankbox__name{
  font-size:1.16rem; line-height:1.3; color:var(--bkink);
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* ── รายละเอียด : ป้ายซ้าย ค่าขวา ── */
.bankbox__rows{
  display:grid; grid-template-columns:auto 1fr; gap:10px 16px;
  margin:0; padding:14px 16px; align-items:center;
}
.bankbox__rows dt{ font-size:.7rem; color:var(--dim-2); white-space:nowrap; }
.bankbox__rows dd{ margin:0; display:flex; align-items:center; gap:7px; min-width:0; }

/*  เลขบัญชี — ตัวใหญ่ที่สุดในกล่อง เพราะเป็นสิ่งเดียวที่ต้องคัดลอกไปใช้  */
.bankbox__acc{
  display:inline-flex; align-items:center; gap:10px; padding:7px 13px; cursor:pointer;
  border:1px dashed rgba(var(--o),.42); border-radius:var(--r-sm);
  background:rgba(0,0,0,.34); transition:.14s var(--ease);
}
.bankbox__acc .num{
  font-family:var(--f-num); font-size:1.2rem; letter-spacing:.07em; color:var(--or-hi);
}
.bankbox__acc .ic{ width:14px; height:14px; color:var(--dim-2); }
.bankbox__acc:hover{ border-style:solid; border-color:rgba(var(--o),.75); background:rgba(var(--o),.09); }
.bankbox__acc:hover .ic{ color:var(--or); }
.bankbox__acc:active{ transform:scale(.985); }

/*  ชื่อบัญชี — ต้องเด่นพอให้เทียบกับหน้าจอแอปธนาคารได้
    ของเดิมเป็นตัวจิ๋วสีเทาจนแทบมองไม่เห็น  */
.bankbox__holder{ font-size:.92rem; color:var(--txt); line-height:1.4; word-break:break-word; }

.bankbox__mini{
  display:grid; place-items:center; width:26px; height:26px; flex:none; cursor:pointer;
  border:1px solid var(--hair); border-radius:var(--r-sm);
  background:rgba(255,255,255,.03); transition:.14s var(--ease);
}
.bankbox__mini .ic{ width:12px; height:12px; color:var(--dim-2); }
.bankbox__mini:hover{ border-color:rgba(var(--o),.5); }
.bankbox__mini:hover .ic{ color:var(--or); }

/*  เตือนก่อนโอน — ตำแหน่งสุดท้ายที่สายตาผ่านก่อนไปเปิดแอปธนาคาร  */
.bankbox__warn{
  display:flex; gap:8px; align-items:flex-start; margin:0;
  padding:9px 16px 12px; font-size:.68rem; line-height:1.65; color:var(--dim-2);
  border-top:1px solid var(--hair);
}
.bankbox__warn .ic{ width:13px; height:13px; flex:none; margin-top:2px; color:var(--warn); }

@media (max-width: 520px){
  .bankbox__top{ gap:11px; padding:12px 13px; }
  .bankbox__hex{ width:42px; height:47px; }
  .bankbox__rows{ padding:12px 13px; gap:8px 12px; }
  .bankbox__acc .num{ font-size:1.05rem; }
}