/* =====================================================================
   BJS WEB SHOP  |  public/css/app.css
   หน้าตาเฉพาะหน้าฝั่งผู้เล่น — hero, ร้านค้า, ตะกร้า, เช็คเอาต์, โปรไฟล์, ออเดอร์
   ===================================================================== */

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid transparent;
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(var(--o),.16), transparent 58%),
    linear-gradient(160deg, rgba(30,19,10,.96), rgba(9,6,4,.98)) padding-box,
    var(--edge) border-box;
  box-shadow:var(--shadow);
  padding:44px 40px;
}
/* ตะแกรงหกเหลี่ยมจาง ๆ เป็นพื้นหลัง — คุมโทนเดียวกับ MDT */
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z' fill='none' stroke='%23ff8a1f' stroke-opacity='.10'/%3E%3C/svg%3E");
  mask-image:radial-gradient(70% 90% at 85% 10%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(70% 90% at 85% 10%, #000 10%, transparent 72%);
}
.hero__in{ position:relative; max-width:620px; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.26em;
  font-weight:600; color:var(--or); margin-bottom:14px; }
.hero h1{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:clamp(1.7rem, 4.4vw, 2.7rem);
  font-weight:700; line-height:1.15; letter-spacing:.01em; }
.hero p{ margin-top:14px; color:var(--dim); font-size:1rem; line-height:1.7; max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:26px; margin-top:32px; padding-top:22px; border-top:1px solid var(--hair); }
.hero__stat b{ display:block; font-family:'Orbitron','Sukhumvit',sans-serif; font-size:1.3rem; color:var(--or-hi); }
.hero__stat span{ font-size:.76rem; color:var(--dim-2); }

/* ---------- แผงโปรโมทตู้สุ่มบนหน้าแรก ---------- */
.promo{
  position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid transparent;
  background:
    linear-gradient(120deg, rgba(32,20,10,.97), rgba(10,7,4,.98)) padding-box,
    linear-gradient(120deg, rgba(var(--o),.7), rgba(255,255,255,.08) 55%, rgba(var(--o),.3)) border-box;
  box-shadow:var(--shadow);
}
.promo__glow{
  position:absolute; inset:auto -80px -140px auto; width:420px; height:420px; pointer-events:none;
  background:radial-gradient(circle, rgba(var(--o),.22), transparent 66%);
}
.promo__in{ position:relative; display:grid; grid-template-columns:1fr auto; gap:28px;
  align-items:center; padding:34px 36px; }
.promo__body{ min-width:0; }
.promo__title{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:clamp(1.3rem,3vw,1.9rem);
  font-weight:700; line-height:1.2; }

/* รังผึ้งจิ๋วประกอบ — เรขาคณิตเดียวกับตู้จริง : gap 0 · ทับกัน 25% ของความสูง
   แถวยาว 5 สลับ 4 พอจัดกึ่งกลางทั้งคู่จะเยื้องกันครึ่งช่องเอง */
.promo__comb{ display:flex; flex-direction:column; align-items:center; flex:none; }
.promo__row{ display:flex; gap:0; }
.promo__row + .promo__row{ margin-top:calc(38px * -0.25); }
.promo__comb i{
  width:33px; height:38px; clip-path:var(--hex); display:block;
  background:linear-gradient(170deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 2px rgba(10,7,4,.92);
}
.promo__comb i.is-shut{
  background:linear-gradient(160deg, var(--or-hi), var(--or) 45%, var(--or-lo));
}
@media (max-width: 860px){
  .promo__in{ grid-template-columns:1fr; padding:26px 22px; }
  .promo__comb{ display:none; }
}

/* รางวัลใหญ่ในลิสต์ของที่ได้ */
.reward--grand{ border-color:rgba(var(--o),.45); background:rgba(var(--o),.12); color:var(--or-hi); }

/* ---------- แถบตัวกรองร้านค้า ---------- */
.shopbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:20px; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:99px;
  font-size:.84rem; color:var(--dim); border:1px solid var(--hair-2);
  background:rgba(255,255,255,.03); transition:.16s var(--ease); cursor:pointer;
}
.chip:hover{ color:var(--txt); border-color:rgba(var(--o),.35); }
/*  ชิปที่เลือกอยู่ — เดิมถมส้มทึบตัวหนังสือดำ เป็นเม็ดสีโดดออกมาจากทั้งหน้า
    เปลี่ยนเป็นฐานเข้ม ขอบส้มเรือง ตัวหนังสือส้มสว่าง เข้าชุดกับปุ่มทั้งเว็บ */
.chip.is-on{
  color:var(--or-hi); font-weight:600; border-color:rgba(var(--o),.75);
  background:linear-gradient(180deg, rgba(var(--o),.24), rgba(var(--o),.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 20px -8px rgba(var(--o),.85);
}
.chip.is-on .ic{ color:var(--or); }
.chip .ic{ width:14px; height:14px; }

.search{ position:relative; flex:1; min-width:190px; max-width:320px; }
.search .ic{ position:absolute; left:12px; top:50%; translate:0 -50%; width:16px; height:16px; color:var(--dim-2); }
.search .input{ padding-left:36px; }

/* ---------- ตารางสินค้า ---------- */
.products{ grid-template-columns:repeat(auto-fill, minmax(228px, 1fr)); }

/* ═══════════════════════════════════════════════════════════════════
   การ์ดสินค้า — ทรงตัดมุมทแยง (ตระกูลหกเหลี่ยมเหมือนธีมทั้งเว็บ)

   สี่เหลี่ยมมนธรรมดาไม่ได้บอกอะไรเลยว่านี่คือเว็บ EMBER HEX
   ตัดมุมบนซ้าย/ล่างขวาทแยง 20px แล้วการ์ดกลายเป็นแผ่นหกเหลี่ยมยาว
   เข้าชุดกับหกเหลี่ยมที่ใช้ทั้งเว็บ โดยไม่เสียพื้นที่ใช้งานเหมือนหกเหลี่ยมเต็มใบ

   clip-path ตัด border ทิ้ง เลยต้องวาดขอบเองสองชั้น :
     ::before  เต็มใบ  = สีขอบ (gradient)
     ::after   inset 1px = พื้นการ์ด
   ═══════════════════════════════════════════════════════════════════ */
.pcard{
  --cut:20px;
  --shape:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                  calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  position:relative; display:flex; flex-direction:column; isolation:isolate;
  clip-path:var(--shape);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.75));
  transition:transform .22s var(--ease), filter .22s var(--ease);
}
.pcard::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:var(--edge); transition:background .25s var(--ease);
}
.pcard::after{
  content:''; position:absolute; inset:1px; z-index:-1;
  clip-path:var(--shape); background:var(--panel);
}
.pcard:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 24px 38px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(var(--o),.28));
}
.pcard:hover::before{
  background:linear-gradient(150deg, rgba(var(--o),.9), rgba(255,255,255,.12) 46%, rgba(var(--o),.6));
}
/* จอแคบมาก มุมตัดใหญ่ ๆ กินเนื้อที่ข้อความ */
@media (max-width: 520px){ .pcard{ --cut:14px; } }

/* ── ริบบิ้นมุมบนขวา — ป้าย "แนะนำ" แบบเฉียง ไม่ทับตัวของ ── */
/*  ⚠ เคยเป็นแผ่นส้มทึบ ตัวหนังสือสีเข้ม — อ่านยากมาก
    ตัวอักษร 0.6rem เอียง 38 องศา บนพื้นส้มสว่าง ตาต้องเพ่ง
    และมันกลายเป็นจุดที่สว่างที่สุดของการ์ด แย่งซีนรูปสินค้าไปเลย
    กลับด้านเป็นพื้นเข้ม ตัวหนังสือส้มสว่าง — คอนทราสต์ดีกว่ามากและไม่แสบตา  */
.pcard__ribbon{
  position:absolute; z-index:3; top:13px; right:-30px; width:118px;
  transform:rotate(38deg); text-align:center;
  padding:5px 0; font-size:.62rem; font-weight:700; letter-spacing:.08em;
  color:var(--or-hi);
  background:linear-gradient(180deg, rgba(38,22,10,.97), rgba(20,11,5,.98));
  /*  เส้นส้มบาง ๆ บน-ล่างแทนพื้นทึบ ยังเห็นว่าเป็นป้ายเด่นแต่ไม่ตะโกน  */
  box-shadow:
    inset 0 1px 0 rgba(var(--o),.75),
    inset 0 -1px 0 rgba(var(--o),.45),
    0 4px 14px -4px rgba(0,0,0,.9);
  text-shadow:0 0 10px rgba(var(--o),.5);
}

/* ── หัวการ์ด : รูปหกเหลี่ยม + ชื่อ (แนวนอน ไม่กินความสูง) ── */
.pcard__head{ display:flex; align-items:center; gap:13px; padding:15px 15px 0; }

/* กรอบหกเหลี่ยมสองชั้น — วงนอกเป็นขอบส้มบาง วงในเป็นพื้นเข้มใส่รูป
   เข้าชุดกับธีม EMBER HEX โดยไม่ต้องพึ่งแสงเรืองแรง ๆ */
.phex{
  position:relative; width:62px; height:71.6px; flex:none;
  display:grid; place-items:center;
}
.phex__ring{
  position:absolute; inset:0; clip-path:var(--hex);
  background:linear-gradient(165deg, rgba(var(--o),.75), rgba(var(--o),.18) 55%, rgba(var(--o),.5));
  transition:background .25s var(--ease);
}
.phex__in{
  position:absolute; inset:1.5px; clip-path:var(--hex);
  display:grid; place-items:center; padding:9px;
  background:linear-gradient(168deg,#1d1409,#0a0605);
}
.phex__in img{ width:100%; height:100%; object-fit:contain; transition:transform .25s var(--ease); }
.phex__in b{ font-family:var(--f-num); font-size:1.3rem; color:var(--or-hi); }
.pcard:hover .phex__ring{
  background:linear-gradient(165deg, var(--or-hi), rgba(var(--o),.35) 55%, var(--or));
}
.pcard:hover .phex__in img{ transform:scale(1.09); }

.pcard__lead{ min-width:0; flex:1; }
.pcard__cat{ display:block; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--or); font-weight:700; }
.pcard__name{ font-size:1rem; font-weight:600; line-height:1.35; margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── คำอธิบาย : ให้ที่อ่านจริง 3 บรรทัด ── */
/*  ⚠ คำอธิบายยาวโดนตัดที่ 3 บรรทัดโดยไม่มีทางอ่านต่อ
    แอดมินอุตส่าห์เขียนเงื่อนไขไว้ยาว ๆ (เช่น "ยศนี้ต้องทักแอดมินหลังรับของ")
    แล้วผู้เล่นไม่เคยเห็นบรรทัดท้าย ๆ เลย — มารู้ตอนซื้อไปแล้ว
    กางได้ แต่ยังเริ่มที่ 3 บรรทัดเหมือนเดิม เพื่อให้การ์ดในตารางสูงเท่ากัน  */
.pcard__desc{
  padding:11px 15px 0; font-size:.78rem; color:var(--dim); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pcard__desc.is-open{ -webkit-line-clamp:unset; display:block; }

.descmore{
  display:flex; align-items:center; gap:5px; margin:4px 15px 0; padding:3px 0; cursor:pointer;
  font:inherit; font-size:.68rem; color:var(--dim-2);
  border:0; background:none; transition:.14s var(--ease);
}
.descmore:hover{ color:var(--or); }
.descmore .ic{ width:11px; height:11px; transition:transform .18s var(--ease); }
.descmore.is-open .ic{ transform:rotate(180deg); }
@media (max-width: 560px){ .descmore{ margin-left:13px; margin-right:13px; } }

/* ── ของที่จะได้ : ชื่อซ้าย จำนวนขวา เส้นบางคั่นทีละบรรทัด ── */
.pcard__sec{ padding:13px 15px 0; }
.pcard__seclab{
  display:block; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim-2); font-weight:700; margin-bottom:5px;
}
.prw{ list-style:none; margin:0; padding:0; }
.prw__i{
  display:grid; grid-template-columns:20px 1fr auto; gap:9px; align-items:center;
  padding:5px 0; font-size:.76rem;
  border-top:1px solid var(--hair);
}
.prw__i:first-child{ border-top:0; }
.prw__ic{ width:20px; height:20px; display:grid; place-items:center; }
.prw__ic img{ width:20px; height:20px; object-fit:contain; }
.prw__ic .ic{ width:13px; height:13px; color:var(--or); }
.prw__n{ color:var(--dim); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prw__i b{ font-family:var(--f-num); font-size:.78rem; color:var(--or-hi); }
/*  ปุ่มดูของที่เหลือ — เต็มความกว้าง กดง่ายบนมือถือ  */
.prwmore{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  margin-top:5px; padding:6px 0; cursor:pointer;
  font:inherit; font-size:.7rem; color:var(--dim-2);
  border:0; border-top:1px solid var(--hair); background:none;
  transition:.14s var(--ease);
}
.prwmore:hover{ color:var(--or); }
.prwmore .ic{ width:12px; height:12px; transition:transform .18s var(--ease); }
.prwmore b{ font-family:var(--f-num); color:var(--or-hi); }
/*  กางอยู่ = ลูกศรกลับหัว  */
.prwmore.is-open .ic{ transform:rotate(180deg); }

/* ── สต็อก : บอกตรงแถวราคา ที่ที่สายตาอยู่ตอนตัดสินใจ ── */
/* ของคงเหลือ
   สต็อกปกติเป็น "ตัวหนังสือเปล่า" ไม่ใช่ป้ายกรอบ — ป้ายกรอบกว้างพอที่ราคาหลักพัน
   จะดันมันตกบรรทัด แล้วการ์ดใบข้าง ๆ ที่ราคาหลักร้อยไม่ตก กลายเป็นสูงไม่เท่ากันทั้งแถว
   เหลือกรอบไว้เฉพาะตอนใกล้หมด/หมดแล้ว ซึ่งเลขสั้นเสมอ (≤5 หรือไม่มีเลข) จึงไม่มีวันตก */
/* ---------------------------------------------------------------------
   บรรทัดข้อมูลย่อย — ของคงเหลือ · ลิมิต
   ---------------------------------------------------------------------
   ⚠ ห้ามใส่กรอบ ถมพื้น หรือหมุดนำหน้าให้ของพวกนี้
     เคยทำเป็นกล่องกรอบส้มเต็มความกว้าง -> อ่านเป็น "กล่องแจ้งเตือน"
     ทั้งที่แค่บอกจำนวนคงเหลือ และไปเด่นกว่าราคาที่อยู่ติดกัน
     เคยใส่จุดกลมฝั่งซ้าย ไอคอน ⓘ ฝั่งขวา -> คนละรูปทรงคนละขนาด
     อ่านเป็นของคนละชุด ทั้งที่เป็นข้อมูลประเภทเดียวกัน

   ทั้งบรรทัดเป็นตัวเล็กสีจาง หน้าตาเหมือนกันหมด คั่นด้วยจุดกลางบรรทัด
   บอกความเร่งด่วนด้วย "สี" อย่างเดียว ซึ่งพอแล้วบนพื้นเข้ม  */
/*  ⚠ ห้ามเป็น flex
    flex ทำให้แต่ละ span เป็นกล่องแยก ช่องว่างที่ติดมากับ HTML ไม่ถูกยุบทิ้ง
    กลายเป็นระยะห่างที่คุมไม่ได้ก่อนจุดคั่น
    ใช้ข้อความไหลปกติแทน แล้วคุมระยะด้วย margin ของจุดคั่นที่เดียว  */
.pmeta{
  margin:11px 15px 0;
  font-size:.71rem; line-height:1.6; color:var(--dim-2);
}
.pmeta__i{ display:inline; }

/*  จุดคั่น — วาดจาก CSS ไม่ใช่พิมพ์ในเทมเพลต
    พิมพ์เองต้องคอยเช็คว่าอันไหนเป็นตัวสุดท้าย ซึ่งพลาดง่ายเวลาเพิ่มเงื่อนไข  */
.pmeta__i + .pmeta__i::before{
  content:'·'; margin:0 7px; color:var(--dim-2); opacity:.65;
}

/*  ⚠ ตัวเลขทุกตัวในบรรทัดนี้ต้องเป็นฟอนต์เดียวกัน
    ทั้งจำนวนคงเหลือและจำนวนลิมิต — สองฝั่งคนละฟอนต์เมื่อไหร่เห็นทันที  */
.pmeta .num{ font-family:var(--f-num); font-size:.8rem; color:var(--dim); }

/*  ใกล้หมด / หมดแล้ว — เปลี่ยนแค่สี ไม่เพิ่มรูปทรงอะไรใหม่  */
.pmeta__i.is-low{ color:#ffc48a; }
.pmeta__i.is-low .num{ color:#ffc48a; }
.pmeta__i.is-out{ color:#ffb3b3; }

/* ของหมด — ทั้งใบหม่นลง แต่ยังอ่านออกว่าเป็นของอะไร */
.pcard.is-out .phex__in img{ filter:grayscale(.75) brightness(.6); }
.pcard.is-out .phex__ring{ background:linear-gradient(165deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); }
/* หมายเหตุของที่ได้รับ — แยกสายตาจากคำอธิบายทั่วไปด้วยเส้นขีดข้าง */
.pcard__note{
  margin:11px 15px 0; padding-left:9px;
  font-size:.72rem; line-height:1.65; color:var(--dim);
  border-left:2px solid rgba(var(--o),.4);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* ฐานการ์ด — ราคา + สต็อกบรรทัดบน · ปุ่มเต็มความกว้างบรรทัดล่าง
   คั่นด้วยเส้นบางบนพื้นเข้ม แยกโซน "ตัดสินใจซื้อ" ออกจากโซน "อ่านรายละเอียด" */
.pcard__foot{
  margin-top:auto; padding:12px 15px 14px;
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--hair); background:rgba(0,0,0,.28);
}
/*  ⚠ wrap ไม่ใช่ nowrap — เป็นตาข่ายรองรับ
    nowrap แปลว่า "ยอมให้ล้นออกนอกกรอบ" ซึ่งคือการเลือกให้มันพังแบบเงียบ ๆ
    wrap แปลว่า "ตกบรรทัดแทนที่จะทับกัน" ซึ่งอ่านออกเสมอแม้จะไม่สวยที่สุด  */
.pcard__row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

/* ร้านคิดเป็นเครดิตล้วน — เหลือตัวเลขชุดเดียว ไม่ต้องมีบรรทัด "หรือ ... บาท" */
.pcard__price{ display:flex; align-items:baseline; gap:6px; min-width:0; }
.pcard__price .ic{ width:15px; height:15px; color:var(--or); flex:none; align-self:center; }
.pcard__price b{ font-family:var(--f-num); font-size:1.32rem; font-weight:700; color:var(--or-hi);
  line-height:1; white-space:nowrap; text-shadow:0 0 22px rgba(var(--o),.35); }
.pcard__price i{ font-style:normal; font-size:.63rem; color:var(--dim-2); white-space:nowrap; }

/* ── ปุ่มใส่ตะกร้า ──
   เต็มความกว้าง ฐานดำ ขอบส้ม ตัวหนังสือส้มสว่าง — โทนเดียวกับปุ่มหลักทั้งเว็บ
   ไอคอนตะกร้าเด้งขึ้นตอนชี้ */
.pbuy{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:9px 12px; border-radius:10px; cursor:pointer;
  font-family:inherit; font-size:.84rem; font-weight:600; color:#ffd7ab;
  border:1px solid rgba(var(--o),.5);
  background:linear-gradient(180deg, rgba(var(--o),.22), rgba(var(--o),.06)), rgba(10,6,3,.7);
  transition:.18s var(--ease);
}
.pbuy .ic{ width:15px; height:15px; transition:transform .2s var(--ease); }
.pbuy:hover{
  color:#fff6ec; border-color:rgba(var(--o),.95);
  background:linear-gradient(180deg, rgba(var(--o),.36), rgba(var(--o),.1)), rgba(10,6,3,.7);
  box-shadow:0 0 26px -10px rgba(var(--o),.85);
}
.pbuy:hover .ic{ transform:translateY(-2px); }
.pbuy:active{ transform:translateY(1px); }
.pbuy--off{
  cursor:not-allowed; color:var(--dim-2);
  border-color:var(--hair-2); background:rgba(255,255,255,.03);
}
.pbuy--off:hover{ color:var(--dim-2); border-color:var(--hair-2);
  background:rgba(255,255,255,.03); box-shadow:none; }
@media (prefers-reduced-motion: reduce){ .pbuy:hover .ic{ transform:none; } }

/* ---------- รายการของที่จะได้ (reward list) ---------- */
.rewards{ display:flex; flex-wrap:wrap; gap:6px; }
.reward{
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px 4px 4px; border-radius:99px;
  font-size:.74rem; color:var(--dim); border:1px solid var(--hair); background:rgba(0,0,0,.28);
}
.reward img{ width:20px; height:20px; object-fit:contain; }
.reward__ic{ width:20px; height:20px; display:grid; place-items:center; border-radius:99px;
  background:rgba(var(--o),.18); color:var(--or-hi); font-size:.6rem; font-weight:700; }
.reward b{ color:var(--or-hi); font-family:'Orbitron','Sukhumvit',sans-serif; font-size:.72rem; }

/* ---------- ตะกร้า (ลิ้นชักด้านขวา) ---------- */
.drawer{ position:fixed; inset:0; z-index:140; }
.drawer[hidden]{ display:none; }
.drawer__veil{ position:absolute; inset:0; background:rgba(3,2,1,.72);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); animation:fadeIn .2s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; } }
.drawer__box{
  position:absolute; top:0 ; right:0; bottom:0; width:min(420px, 100%);
  display:flex; flex-direction:column;
  border-left:1px solid rgba(var(--o),.28);
  background:linear-gradient(180deg, rgba(20,13,7,.99), rgba(8,5,3,.99));
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.95);
  animation:drawerIn .26s var(--ease);
}
@keyframes drawerIn{ from{ transform:translateX(100%); } }
.drawer__head{
  display:flex; align-items:center; gap:12px; padding:16px 18px; flex:none;
  border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(var(--o),.09), transparent);
}
.drawer__list{ flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:10px; }
.drawer__foot{
  flex:none; padding:16px 18px; border-top:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  display:flex; flex-direction:column; gap:12px;
}

/* ---------- รายการในตะกร้า ---------- */
.citem{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:11px 12px; border-radius:var(--r-sm);
  border:1px solid var(--hair); background:rgba(255,255,255,.03);
  transition:.16s var(--ease);
}
.citem:hover{ border-color:rgba(var(--o),.32); background:rgba(var(--o),.06); }
.citem__img{
  position:relative; width:52px; height:60px; flex:none; display:grid; place-items:center;
  clip-path:var(--hex);
  background:linear-gradient(165deg, rgba(var(--o),.28), rgba(var(--o),.05));
}
.citem__img::after{
  content:''; position:absolute; inset:2px; clip-path:var(--hex);
  background:linear-gradient(170deg,#1c1208,#0a0604);
}
.citem__img img{ position:relative; z-index:1; width:64%; height:64%; object-fit:contain; }
.citem__img .ic{ position:relative; z-index:1; width:40%; height:40%; color:var(--or-hi); }
.citem__body{ min-width:0; }
.citem__name{ font-size:.88rem; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.citem__price{ font-size:.74rem; color:var(--dim-2); margin-top:3px; }
.citem__price b{ color:var(--or-hi); font-family:'Orbitron','Sukhumvit',sans-serif; }
.citem__side{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:none; }

.qty{ display:flex; align-items:center; border:1px solid var(--hair-2); border-radius:8px;
  overflow:hidden; background:rgba(0,0,0,.35); }
.qty button{ width:26px; height:28px; display:grid; place-items:center; color:var(--dim); transition:.14s var(--ease); }
.qty button:hover{ background:rgba(var(--o),.22); color:var(--or-hi); }
.qty span{ min-width:28px; text-align:center; font-size:.82rem; font-family:'Orbitron','Sukhumvit',sans-serif; }
.citem__del{ font-size:.68rem; color:var(--dim-2); transition:.14s var(--ease); }
.citem__del:hover{ color:#ffb3b3; }

/* ---------- ท้ายลิ้นชัก ---------- */
.drawer__sum{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--o),.26); background:rgba(var(--o),.08);
}
.drawer__sum-l{ font-size:.82rem; color:var(--dim); }
.drawer__sum-v{ display:flex; align-items:baseline; gap:6px; }
.drawer__sum-v b{ font-family:var(--f-num); font-size:1.5rem; color:var(--or-hi);
  line-height:1; text-shadow:0 0 22px rgba(var(--o),.4); }
.drawer__sum-v i{ font-style:normal; font-size:.7rem; color:var(--dim-2); }

/* ปุ่มไปชำระเงิน — ลูกศรเลื่อนตามตอนชี้ ให้รู้ว่าเป็นทางออกของลิ้นชัก
   สถานะ disabled ใช้ของ .btn--primary ในธีมอยู่แล้ว ไม่ต้องเขียนซ้ำ */
.cartgo{ justify-content:center; }
.cartgo__arrow{ width:15px; height:15px; transition:transform .18s var(--ease); }
.cartgo:hover .cartgo__arrow{ transform:translateX(3px); }
.cartgo.is-disabled{ opacity:1; }
.cartgo.is-disabled .cartgo__arrow{ display:none; }

.drawer__warn{
  display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:var(--r-sm);
  font-size:.78rem; line-height:1.45;
  border:1px solid rgba(var(--w),.4); background:rgba(var(--w),.1); color:#ffc48a;
}
.drawer__warn .ic{ width:16px; height:16px; flex:none; }
.drawer__warn:hover{ background:rgba(var(--w),.18); }

.drawer__note{ display:flex; align-items:center; gap:8px; font-size:.72rem; color:var(--dim-2); line-height:1.5; }
.drawer__note .ic{ width:14px; height:14px; color:var(--or); flex:none; }

/* ---------- เช็คเอาต์ ---------- */
.checkout{ display:grid; grid-template-columns:1fr 380px; gap:20px; align-items:start; }
@media (max-width: 940px){ .checkout{ grid-template-columns:1fr; } }

.paylist{ display:flex; flex-direction:column; gap:11px; }
/* ---------------------------------------------------------------------
   ยอดที่ต้องโอน — แถบบนสุดของหน้าต่างขั้นที่ 2
   ---------------------------------------------------------------------
   ⚠ ส้มเป็นตัวอักษรกับเส้นขอบเท่านั้น ห้ามถมพื้นส้ม
     เลขต้องเป็นของที่เด่นที่สุดในหน้าต่าง เพราะเป็นสิ่งเดียวที่ต้องพิมพ์ตาม
     แต่เด่นด้วย "ขนาด" ไม่ใช่ด้วยการถมสี  */
.payamt{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px;
  padding:13px 15px; margin-bottom:14px;
  border:1px solid rgba(var(--o),.34); border-radius:var(--r-sm);
  background:linear-gradient(180deg, rgba(var(--o),.07), rgba(var(--o),.02));
}
.payamt__k{
  display:flex; align-items:center; gap:6px;
  font-size:.7rem; color:var(--dim-2); flex:none;
}
.payamt__k .ic{ width:12px; height:12px; color:var(--or); }

/*  ทั้งก้อนเป็นปุ่มคัดลอก — เลขบัญชีก็กดคัดลอกได้ ยอดก็ต้องได้เหมือนกัน
    พิมพ์ยอดผิดหลักเดียวสลิปก็ไม่ตรง ระบบตรวจอัตโนมัติตีตกทันที  */
.payamt__v{
  display:flex; align-items:baseline; gap:6px; margin-left:auto;
  padding:2px 9px 3px; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r-xs);
  background:none; color:var(--or-hi);
  font-family:var(--f-num); font-size:1.5rem; font-weight:700; line-height:1.15;
  transition:.14s var(--ease);
}
.payamt__v em{ font-family:inherit; font-style:normal; font-size:.72rem;
  font-weight:500; color:var(--dim-2); }
.payamt__v .ic{ width:13px; height:13px; color:var(--dim-2); align-self:center; }
.payamt__v:hover{ border-color:rgba(var(--o),.45); background:rgba(var(--o),.09); }
.payamt__v:hover .ic{ color:var(--or); }

/*  เครดิตที่จะได้ตกไปบรรทัดล่างเมื่อจอแคบ — เป็นข้อมูลยืนยัน ไม่ใช่ข้อมูลที่ต้องหยิบไปใช้  */
.payamt__c{ width:100%; text-align:right; font-size:.68rem; color:var(--dim-2); }
.payamt__c b{ color:var(--or); }

.payopt{ position:relative; display:flex; gap:13px; padding:15px 16px; cursor:pointer;
  border-radius:var(--r-sm); border:1px solid var(--hair-2); background:rgba(255,255,255,.025);
  transition:.16s var(--ease); }
.payopt:hover{ border-color:rgba(var(--o),.4); background:rgba(var(--o),.06); }
.payopt input{ position:absolute; opacity:0; pointer-events:none; }
.payopt__mark{ width:20px; height:20px; flex:none; margin-top:2px; border-radius:99px;
  border:2px solid var(--hair-2); transition:.16s var(--ease); }
.payopt input:checked ~ .payopt__mark{ border-color:var(--or); box-shadow:inset 0 0 0 4px var(--or); }
.payopt:has(input:checked){ border-color:rgba(var(--o),.6); background:rgba(var(--o),.1);
  box-shadow:0 0 0 3px rgba(var(--o),.08); }
.payopt__body{ flex:1; min-width:0; }
.payopt__title{ display:flex; align-items:center; gap:8px; font-size:.92rem; font-weight:600; }
.payopt__desc{ font-size:.78rem; color:var(--dim-2); margin-top:3px; line-height:1.5; }
.payopt.is-off{ opacity:.42; pointer-events:none; }

/* หน้าชำระเงินเหลือทางเดียว (ตัดเครดิต) จึงไม่ใช่ตัวเลือกให้กดแล้ว
   เป็นแค่แผงบอกว่าจะตัดจากไหน + เหลือเท่าไหร่ */
.paynow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:15px 17px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--o),.3); background:rgba(var(--o),.08); }
.paynow__ic{ width:34px; height:39px; flex:none; clip-path:var(--hex); display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(var(--o),.5), rgba(var(--o),.16)); }
.paynow__ic .ic{ width:17px; height:17px; color:#ffe0bf; }
.paynow__body{ flex:1; min-width:170px; }
.paynow__body b{ display:block; font-size:.94rem; font-weight:600; }
.paynow__body span{ display:block; font-size:.78rem; color:var(--dim-2); margin-top:2px; line-height:1.5; }
.paynow__bal{ flex:none; text-align:right; }
.paynow__bal span{ display:block; font-size:.66rem; color:var(--dim-2); }
.paynow__bal b{ display:block; font-family:var(--f-num); font-size:1.4rem; color:var(--or-hi); line-height:1.15; }

/* QR พร้อมเพย์ */
.qrbox{ display:grid; place-items:center; gap:14px; padding:22px; text-align:center; }
.qrbox__img{ width:250px; height:250px; padding:12px; border-radius:14px; background:#fff; }
.qrbox__img img{ width:100%; height:100%; object-fit:contain; }
.qrbox__amt{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:1.7rem; color:var(--or-hi); }

/* ช่องอัปสลิป */
/*  ลืมแนบสลิปแล้วกดยืนยัน — กะพริบช่องแนบให้เห็นว่าต้องไปทำอะไรต่อ  */
.drop.is-need{ animation:dropNeed 1.6s ease; border-color:rgba(var(--b),.7); }
@keyframes dropNeed{
  0%, 100%{ box-shadow:0 0 0 0 rgba(var(--b),0); }
  25%{ box-shadow:0 0 0 3px rgba(var(--b),.45); }
  65%{ box-shadow:0 0 0 3px rgba(var(--b),.2); }
}

.drop{ display:grid; place-items:center; gap:9px; padding:26px 18px; text-align:center; cursor:pointer;
  border-radius:var(--r-sm); border:1.5px dashed rgba(var(--o),.3); background:rgba(var(--o),.04);
  transition:.16s var(--ease); }
.drop:hover, .drop.is-over{ border-color:rgba(var(--o),.7); background:rgba(var(--o),.09); }
.drop .ic{ width:30px; height:30px; color:var(--or); stroke-width:1.4; }
.drop__hint{ font-size:.78rem; color:var(--dim-2); }
.drop input{ display:none; }
.drop__preview{ max-height:230px; border-radius:10px; border:1px solid var(--hair-2); }

/* ---------- สรุปยอด ---------- */
/* =====================================================================
   หน้าเติมเครดิต  (.tp*)
   ===================================================================== */
.tphero{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid transparent;
  background:
    radial-gradient(70% 130% at 6% 0%, rgba(var(--o),.13), transparent 62%),
    linear-gradient(160deg, rgba(28,18,10,.96), rgba(9,6,4,.98)) padding-box,
    var(--edge) border-box;
  box-shadow:var(--shadow);
}
.tphero__rail{ position:absolute; inset:0 0 auto 0; height:3px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(var(--o),.95) 16%, rgba(var(--o),.95) 84%, transparent); }
.tphero__in{ position:relative; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:20px 24px; }
.tphero__ic{ width:44px; height:50px; flex:none; clip-path:var(--hex); display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(var(--o),.6), rgba(var(--o),.18)); }
.tphero__ic .ic{ width:20px; height:20px; color:#fff1e0; }
.tphero__lead{ flex:1; min-width:200px; }
.tphero__eyebrow{ display:block; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim-2); font-weight:600; }
.tphero__lead h1{ font-family:var(--f-num); font-size:clamp(1.1rem,2.4vw,1.4rem); font-weight:700;
  color:var(--or-hi); line-height:1.25; margin-top:5px; }
.tphero__bal{ flex:none; text-align:right; padding-right:18px; border-right:1px solid var(--hair); }
/*  ⚠ ต้องเป็น > span ไม่ใช่ span ลอย ๆ
    ป้ายกำกับเป็น span ลูกตรง ๆ แต่ตัวเลขข้างในก็เป็น span (.num) เหมือนกัน
    เขียนแบบเหมารวมแล้วตัวเลขจะโดน display:block ไปด้วย -> ตัดบรรทัดทุกตัวเลข
    เคยพังมาแล้วที่บล็อกเรตแลก : "1 บาท = 1 เครดิต" กลายเป็นคอลัมน์ผอม 5 บรรทัด */
.tphero__bal > span{ display:block; font-size:.64rem; color:var(--dim-2); }
.tphero__bal b{ display:block; font-family:var(--f-num); font-size:1.7rem; color:#fff; line-height:1.1;
  text-shadow:0 0 26px rgba(var(--o),.5); }
.tphero__rate{ flex:none; }
.tphero__rate > span{ display:block; font-size:.64rem; color:var(--dim-2); }
.tphero__rate b{ display:block; font-size:.84rem; color:var(--or); margin-top:3px; white-space:nowrap; }
/*  ตัวเลขในสูตรแลกต้องอยู่ในบรรทัดเดียวกับข้อความเสมอ กันกฎอื่นมาสั่ง block ทับ */
.tphero__rate b .num, .tphero__bal b .num{ display:inline; }
@media (max-width: 760px){
  .tphero__bal{ border-right:0; padding-right:0; text-align:left; }
}

/* ปุ่มเลือกจำนวน — โชว์เครดิตที่จะได้ใต้ยอดบาท ไม่ต้องคูณในหัว
   ล็อก 3 คอลัมน์ให้เป็น 3+3 พอดี · auto-fit ทำให้ได้ 5+1 แล้วมีปุ่มโดดอยู่บรรทัดล่าง */
.tpamt{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
@media (min-width: 900px){ .tpamt{ grid-template-columns:repeat(6,1fr); } }
.tpamt__b{
  display:flex; flex-direction:column; align-items:center; gap:1px; cursor:pointer;
  padding:11px 10px; border-radius:11px; font-family:inherit;
  border:1px solid var(--hair-2); background:rgba(255,255,255,.03);
  transition:.16s var(--ease);
}
.tpamt__b b{ font-family:var(--f-num); font-size:1.12rem; color:var(--txt); line-height:1.1; }
.tpamt__b > span{ font-size:.63rem; color:var(--dim-2); }
.tpamt__b em{ font-style:normal; font-family:var(--f-num); font-size:.72rem; color:var(--or);
  margin-top:4px; padding:1px 8px; border-radius:99px; background:rgba(var(--o),.12); }
.tpamt__b:hover{ border-color:rgba(var(--o),.5); background:rgba(var(--o),.08); }
.tpamt__b.is-on{
  border-color:rgba(var(--o),.85); background:rgba(var(--o),.15);
  box-shadow:0 0 24px -10px rgba(var(--o),.9);
}
.tpamt__b.is-on b{ color:var(--or-hi); }
.tpamt__b.is-on em{ background:rgba(var(--o),.26); color:var(--or-hi); }

/* ยอดหลังเติม — ตัวเลขที่คนตัดสินใจด้วย */
.tpafter{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:11px; padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--o),.3); background:rgba(var(--o),.09);
}
.tpafter span{ font-size:.8rem; color:var(--dim); }
.tpafter b{ font-family:var(--f-num); font-size:1.6rem; color:var(--or-hi); line-height:1;
  text-shadow:0 0 24px rgba(var(--o),.45); }

.summary__row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:.86rem; }
.summary__row span{ color:var(--dim); }
.summary__total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-top:13px; margin-top:9px; border-top:1px solid var(--hair-2); }
.summary__total b{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:1.5rem; color:var(--or-hi); }

/* ---------- โปรไฟล์ ---------- */
.profile{ display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; }
@media (max-width: 940px){ .profile{ grid-template-columns:1fr; } }

.pinfo{ display:flex; flex-direction:column; align-items:center; gap:13px; padding:28px 22px; text-align:center; }
.pinfo__ava{ position:relative; width:96px; height:110px; }
.pinfo__ava::before{ content:''; position:absolute; inset:0; clip-path:var(--hex);
  background:linear-gradient(160deg,var(--or-hi),var(--or) 45%,var(--or-lo)); }
.pinfo__ava img{ position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px);
  clip-path:var(--hex); object-fit:cover; }
.pinfo__name{ font-size:1.1rem; font-weight:600; }
.pinfo__id{ font-size:.72rem; color:var(--dim-2); font-family:'Orbitron','Sukhumvit',sans-serif; }

.statgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; }
.stat{ padding:15px 16px; border-radius:var(--r-sm); border:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.stat__label{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--dim-2); }
.stat__label .ic{ width:13px; height:13px; color:var(--or); }
.stat__value{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:1.42rem; color:var(--or-hi); margin-top:5px; }
.stat__value.is-sm{ font-size:1.05rem; }

/* กล่องผูกบัญชี */
/* ---------- แถว identifier ---------- */
/*  ค่านี้ยาว 40 ตัวและต้องเอาไปแปะให้แอดมิน จึงต้องมีปุ่มก๊อปติดไว้เสมอ  */
.identrow{ display:flex; align-items:center; gap:10px; padding:11px 13px;
  border-radius:var(--r-sm); border:1px solid var(--hair); background:var(--panel-2); }
.identrow__k{ flex:none; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim-2); font-weight:600; }
/*  min-width:0 ขาดไม่ได้ — flex item ไม่ยอมหดต่ำกว่าความกว้างเนื้อหาถ้าไม่ใส่
    แล้ว ellipsis จะไม่ทำงาน กล่องจะยืดทะลุออกไปแทน  */
.identrow__v{ flex:1; min-width:0; font-size:.74rem; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.identrow__copy{ flex:none; width:28px; height:28px; display:grid; place-items:center;
  border-radius:7px; border:1px solid var(--hair); background:transparent; cursor:pointer;
  color:var(--dim-2); transition:color .15s, border-color .15s, background .15s; }
.identrow__copy .ic{ width:13px; height:13px; }
.identrow__copy:hover{ color:var(--or); border-color:rgba(var(--o),.45); background:rgba(var(--o),.08); }
@media (max-width: 620px){
  .identrow{ flex-wrap:wrap; }
  .identrow__v{ flex:1 0 100%; order:3; }
}

/* ---------- ผูกด้วยโค้ด ---------- */
.linkbox{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:15px 17px;
  border-radius:var(--r-sm); border:1px solid rgba(var(--o),.24); background:rgba(var(--o),.06); }
.linkbox__ic{ flex:none; width:34px; height:39px; clip-path:var(--hex); display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(var(--o),.5), rgba(var(--o),.14)); }
.linkbox__ic .ic{ width:15px; height:15px; color:#fff1e0; }
/*  max-width กันคำอธิบายยืดจนเกิดรูโหว่กลางกล่องตอนจอกว้าง
    ของเดิมใช้ flex:1 เฉย ๆ ข้อความห่อแค่ 360px แต่กล่องยืดเต็ม เหลือที่ว่างเปล่า ๆ กลางแถว  */
.linkbox__lead{ flex:1 1 260px; min-width:0; max-width:400px; }
.linkbox__lead p{ font-size:.74rem; color:var(--dim-2); margin-top:3px; line-height:1.6; }
/*  เส้นคั่นทำให้ระยะห่างอ่านเป็น "การแบ่งส่วน" ไม่ใช่ "ลืมใส่ของ"  */
.linkbox__form{ display:flex; align-items:stretch; gap:0; margin-left:auto;
  padding-left:16px; border-left:1px solid rgba(var(--o),.2); }
/*  ช่องกรอกกับปุ่มติดกันเป็นชิ้นเดียว อ่านออกทันทีว่ากรอกแล้วกดตรงนี้  */
.linkbox__form .codeinput{ border-top-right-radius:0; border-bottom-right-radius:0; }
.linkbox__form .btn{ border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1px; }
@media (max-width: 620px){
  .linkbox__form{ margin-left:0; padding-left:0; border-left:0; flex:1 0 100%; }
  .linkbox__form .codeinput{ flex:1; max-width:none; }
}
.codeinput{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:1.1rem; letter-spacing:.28em;
  text-indent:.28em; text-align:center; text-transform:uppercase; max-width:180px; }

/* ---------- ออเดอร์ ---------- */
.ocard{ display:grid; grid-template-columns:auto 1fr auto; gap:15px; align-items:center; padding:15px 17px; }
@media (max-width: 700px){ .ocard{ grid-template-columns:auto 1fr; } .ocard__right{ grid-column:1/-1; text-align:left; } }
.ocard__img{ width:54px; height:54px; flex:none; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--hair); background:radial-gradient(70% 70% at 50% 40%, rgba(var(--o),.16), transparent 72%); }
.ocard__img img{ width:100%; height:100%; object-fit:contain; padding:5px; }
.ocard__no{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:.74rem; color:var(--dim-2); }
.ocard__name{ font-size:.94rem; font-weight:600; margin-top:1px; }
.ocard__meta{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:6px; font-size:.75rem; color:var(--dim-2); }
.ocard__right{ text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.ocard__price{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:1.05rem; color:var(--or-hi); }

/* แถบเวลาของออเดอร์ */
.steps{ display:flex; align-items:center; gap:0; margin-top:12px; }
.step{ flex:1; display:flex; align-items:center; gap:8px; font-size:.72rem; color:var(--dim-2); }
.step__dot{ width:9px; height:9px; border-radius:99px; flex:none; background:rgba(255,255,255,.16); }
.step__bar{ flex:1; height:2px; background:rgba(255,255,255,.1); }
.step.is-done .step__dot{ background:var(--ok); box-shadow:0 0 10px rgba(var(--g),.7); }
.step.is-done{ color:#a8ecc6; }
.step.is-done .step__bar{ background:rgba(var(--g),.45); }
.step.is-now .step__dot{ background:var(--or); box-shadow:0 0 12px rgba(var(--o),.9); animation:pulse 1.6s ease-in-out infinite; }
.step.is-now{ color:var(--or-hi); }
.step.is-bad .step__dot{ background:var(--bad); box-shadow:0 0 10px rgba(var(--b),.7); }
.step.is-bad{ color:#ffb3b3; }
@keyframes pulse{ 50%{ opacity:.42; } }

/* ---------- เข้าสู่ระบบ ---------- */
.login{ display:grid; place-items:center; min-height:66vh; }
.login__box{ width:min(430px, 100%); padding:38px 32px; text-align:center; }
.login h1{ font-family:'Orbitron','Sukhumvit',sans-serif; font-size:1.32rem; margin:16px 0 8px; }
.login p{ color:var(--dim-2); font-size:.86rem; line-height:1.65; }
/*  ═══ ปุ่มเข้าสู่ระบบด้วย Discord ═══
    มีสองแบบ และใช้คนละที่กัน

    .btn--discord        เงียบ เข้าธีม  — ใช้บนแถบเมนูและปุ่มแทรกตามหน้า
    .btn--discord-brand  น้ำเงินเต็ม ๆ — ใช้เฉพาะหน้า /login ที่เดียว

    ทำไมต้องแยก : น้ำเงิน #5865F2 พร้อมเงาฟุ้งเป็นสีที่ดังที่สุดบนจอ
    เอาไปวางบนแถบเมนูสีส้ม-ดำแล้วมันกลืนไม่ลง กลายเป็นของแปลกปลอมชิ้นเดียวบนแถบ
    บนหน้า /login ที่มีปุ่มเดียวทั้งหน้า สีแบรนด์กลับช่วยให้รู้ว่ากดแล้วไปไหน  */
.btn--discord{
  background:linear-gradient(180deg, rgba(88,101,242,.14), rgba(88,101,242,.06));
  border-color:rgba(120,132,246,.42); color:#cfd5ff; font-weight:600;
}
.btn--discord .ic{ color:#8b98ff; }
.btn--discord:hover{
  border-color:rgba(140,152,255,.7); color:#e6e9ff;
  background:linear-gradient(180deg, rgba(88,101,242,.24), rgba(88,101,242,.1));
}

.btn--discord-brand{ background:linear-gradient(180deg,#7d8cf5,#5865F2 60%); color:#fff; border-color:transparent;
  font-weight:600; box-shadow:0 12px 28px -14px rgba(88,101,242,.95); }
.btn--discord-brand .ic{ color:#fff; }
.btn--discord-brand:hover{ filter:brightness(1.1); background:linear-gradient(180deg,#7d8cf5,#5865F2 60%); }

/* ---------- แถบเตือน ---------- */
/* ---------- ซื้อยังไง : สามขั้นตอน ---------- */
.buysteps{
  list-style:none; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.buystep{
  position:relative; overflow:hidden; isolation:isolate;
  padding:19px 19px 21px;
  border-radius:var(--r-lg);
  border:1px solid var(--hair);
  background:
    radial-gradient(78% 108% at 0% 0%, rgba(var(--o),.11), transparent 58%),
    var(--panel);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.buystep:hover{ border-color:rgba(var(--o),.32); transform:translateY(-2px); }

/*  เลขลำดับใหญ่ ๆ จาง ๆ หลังการ์ด — บอกลำดับโดยไม่ต้องมีหมุดอีกอัน
    ต้อง user-select:none ไม่งั้นลากคลุมข้อความแล้วเลขติดมาด้วย  */
.buystep__no{
  position:absolute; z-index:-1; top:-16px; right:2px;
  font-family:var(--f-num); font-size:6.2rem; font-weight:700; line-height:1;
  color:rgba(var(--o),.075); user-select:none; pointer-events:none;
}

/*  หกเหลี่ยมสองชั้น : ขอบเรืองส้ม ข้างในเข้ม — ไม่ใช่แผ่นส้มทึบ
    (แบบเดียวกับโลโก้ .mark ให้เป็นภาษาเดียวกันทั้งเว็บ)  */
.buystep__hex{
  position:relative; display:grid; place-items:center;
  width:46px; height:53px; margin-bottom:13px;
}
.buystep__hex-o{ position:absolute; inset:0; clip-path:var(--hex);
  background:linear-gradient(160deg, var(--or-hi), var(--or) 42%, var(--or-lo));
  transition:filter .2s var(--ease); }
.buystep__hex-i{ position:absolute; inset:1.6px; clip-path:var(--hex);
  background:linear-gradient(180deg,#1d1209,#0b0704); }
.buystep__hex .ic{ position:relative; width:19px; height:19px; color:var(--or-hi); }
.buystep:hover .buystep__hex-o{ filter:brightness(1.22) saturate(1.1); }

.buystep__eyebrow{
  display:block; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim-2); font-weight:600; margin-bottom:4px;
}
.buystep__t{ display:block; font-size:.97rem; line-height:1.4; }
.buystep__d{ font-size:.8rem; color:var(--dim-2); line-height:1.72; margin-top:7px; }

/*  เส้นประเชื่อมระหว่างขั้น — ให้อ่านเป็นเส้นทางเดียวกัน ไม่ใช่สามกล่องแยกกัน
    โผล่เฉพาะตอนที่การ์ดเรียงครบสามใบในแถวเดียว ถ้าตกบรรทัดแล้วเส้นจะชี้ไปผิดที่
    ตำแหน่งแนวตั้ง 19px (padding) + 26px (ครึ่งหนึ่งของหกเหลี่ยม) = กลางหกเหลี่ยมพอดี  */
@media (min-width: 860px){
  .buysteps{ grid-template-columns:repeat(3, 1fr); }
  .buystep:not(:last-child)::after{
    content:''; position:absolute; top:47px; right:-14px; width:14px; height:1px;
    background:repeating-linear-gradient(90deg,
      rgba(var(--o),.5) 0 4px, transparent 4px 8px);
  }
  /*  หัวลูกศรเล็ก ๆ ปลายเส้น บอกทิศทางให้ชัดขึ้นอีกนิด  */
  .buystep:not(:last-child)::before{
    content:''; position:absolute; top:44px; right:-15px; z-index:1;
    border:3px solid transparent; border-left-color:rgba(var(--o),.55);
  }
}

@media (prefers-reduced-motion: reduce){
  .buystep, .buystep__hex-o{ transition:none; }
  .buystep:hover{ transform:none; }
}

.notice{ display:flex; gap:11px; align-items:flex-start; padding:13px 16px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--w),.3); background:rgba(var(--w),.08); font-size:.85rem; line-height:1.55; }
.notice .ic{ width:18px; height:18px; margin-top:2px; color:var(--warn); flex:none; }
.notice--bad{ border-color:rgba(var(--b),.3); background:rgba(var(--b),.08); }
.notice--bad .ic{ color:var(--bad); }
.notice--ok{ border-color:rgba(var(--g),.3); background:rgba(var(--g),.08); }
.notice--ok .ic{ color:var(--ok); }
.notice--info{ border-color:rgba(var(--i),.3); background:rgba(var(--i),.08); }
.notice--info .ic{ color:var(--info); }
/*  ⚠ ขาดตัวนี้มาตลอด — views/admin/access.ejs กับหน้าแจ้งปัญหาเรียกใช้อยู่
    แต่ไม่มีกฎรองรับ เลยได้กล่องสีกลาง ๆ ที่ดูไม่ออกว่าเป็นคำเตือน  */
.notice--warn{ border-color:rgba(var(--w),.3); background:rgba(var(--w),.08); }
.notice--warn .ic{ color:var(--warn); }

/* ---------- แถบโหมด DEMO ---------- */
.demobar{ position:relative; z-index:70; padding:7px 0; text-align:center; font-size:.76rem; font-weight:600;
  letter-spacing:.1em; color:#1a0d03; background:repeating-linear-gradient(45deg,
    var(--or) 0 14px, var(--or-lo) 14px 28px); }

@media (max-width: 860px){
  .hero{ padding:32px 22px; }
  /* การ์ดทรงใหม่มีหัวเป็นแนวนอน (รูป + ชื่อ) บีบต่ำกว่า ~200px แล้วชื่อเหลือที่นิดเดียว
     ขยับขั้นต่ำจาก 158 เป็น 200 — ได้ 2 คอลัมน์บนมือถือเหมือนเดิมแต่อ่านออก */
  .products{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
  .pcard__head{ gap:10px; padding:13px 13px 0; }
  .phex{ width:52px; height:60px; }
  .pcard__desc, .pcard__sec{ padding-left:13px; padding-right:13px; }
  .pcard__foot{ padding:11px 13px 12px; }
}

/* =====================================================================
   หน้าแจ้งปัญหา
   ===================================================================== */
/*  เลือกประเภทเป็นการ์ดกด ไม่ใช่ดรอปดาวน์ — บนมือถือกดง่ายกว่ามาก
    และเห็นตัวเลือกทั้งหมดพร้อมกันโดยไม่ต้องกางอะไร  */
.rcat{ display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); }
.rcat__one input{ position:absolute; opacity:0; pointer-events:none; }
.rcat__box{
  display:flex; align-items:center; gap:9px; padding:12px 13px; cursor:pointer;
  border-radius:var(--r-sm); border:1px solid var(--hair-2); background:rgba(0,0,0,.22);
  font-size:.8rem; color:var(--dim); transition:.16s var(--ease);
}
.rcat__box .ic{ width:16px; height:16px; flex:none; color:var(--dim-2); }
.rcat__one:hover .rcat__box{ border-color:rgba(var(--o),.35); color:var(--txt); }
.rcat__one input:checked + .rcat__box{
  border-color:rgba(var(--o),.62); background:rgba(var(--o),.1); color:var(--or-hi);
}
.rcat__one input:checked + .rcat__box .ic{ color:var(--or); }
/*  โฟกัสด้วยคีย์บอร์ดต้องเห็นด้วย ไม่ใช่เห็นแค่ตอนใช้เมาส์  */
.rcat__one input:focus-visible + .rcat__box{ outline:2px solid var(--or); outline-offset:2px; }

.ravatar{ width:34px; height:34px; border-radius:99px; flex:none; }

.rtips{ margin:0; padding-left:17px; font-size:.78rem; color:var(--dim-2); line-height:1.8; }
.rtips li{ margin:5px 0; }
.rtips a{ color:var(--or); }


/* =====================================================================
   ป๊อปอัปประชาสัมพันธ์
   ===================================================================== */
.annc{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; }
.annc[hidden]{ display:none; }
.annc__veil{ position:absolute; inset:0; background:rgba(4,2,1,.78); backdrop-filter:blur(3px); }
.annc__card{
  position:relative; width:min(460px,100%); max-height:88vh; overflow:auto;
  border-radius:var(--r-lg); border:1px solid rgba(var(--o),.3);
  background:linear-gradient(180deg, rgba(26,16,9,.98), rgba(9,6,4,.99));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  animation:anncIn .28s var(--ease);
}
@keyframes anncIn{ from{ opacity:0; transform:translateY(14px) scale(.985) } to{ opacity:1 } }
.annc__rail{ position:absolute; inset:0 0 auto 0; height:3px; z-index:2; border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg, transparent, rgba(var(--o),.95) 18%, rgba(var(--o),.95) 82%, transparent); }
/*  ปุ่มปิดต้องลอยเหนือรูปเสมอ ไม่งั้นรูปสว่างแล้วมองไม่เห็นปุ่ม  */
.annc__x{
  position:absolute; top:11px; right:11px; z-index:3;
  width:30px; height:30px; display:grid; place-items:center; cursor:pointer;
  border-radius:99px; border:1px solid var(--hair-2); background:rgba(6,4,3,.75);
  color:var(--dim); transition:.16s var(--ease);
}
.annc__x .ic{ width:14px; height:14px; }
.annc__x:hover{ color:var(--or-hi); border-color:rgba(var(--o),.5); background:rgba(var(--o),.14); }
.annc__img{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#0b0704;
  border-radius:var(--r-lg) var(--r-lg) 0 0; }
.annc__img img{ width:100%; height:100%; object-fit:cover; display:block; }
/*  ไล่เฉดที่ก้นรูปให้ต่อกับเนื้อความ ไม่ให้เห็นรอยต่อเป็นเส้นตรง  */
.annc__img::after{ content:''; position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(180deg, transparent, rgba(9,6,4,.97)); }
.annc__body{ padding:19px 21px 20px; }
.annc__eyebrow{ display:block; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim-2); font-weight:600; }
.annc__body h2{ font-family:var(--f-num); font-size:1.18rem; line-height:1.35;
  color:var(--or-hi); margin:6px 0 0; }
.annc__body p{ font-size:.83rem; color:var(--dim); line-height:1.78; margin-top:10px;
  white-space:pre-line; }
.annc__foot{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:17px;
  padding-top:14px; border-top:1px solid var(--hair); }
.annc__never{ display:flex; align-items:center; gap:7px; cursor:pointer;
  font-size:.72rem; color:var(--dim-2); }
@media (max-width: 520px){
  .annc__foot .btn{ flex:1; justify-content:center; }
  .annc__never{ flex:1 0 100%; margin-bottom:4px; }
}
@media (prefers-reduced-motion: reduce){ .annc__card{ animation:none } }

/*  กติกาลิมิตบนการ์ดสินค้า — เล็ก ๆ ใต้ราคา ไม่แย่งซีนแต่เห็นก่อนกดซื้อ  */
/* =====================================================================
   แนะนำเพื่อน
   ===================================================================== */
.refcode{ display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:15px 17px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--o),.3); background:rgba(var(--o),.07); }
/*  โค้ดคือของชิ้นเดียวที่คนมาหน้านี้เพื่อจะเอาไป — ต้องใหญ่และเลือกคลุมง่าย  */
.refcode__v{ flex:1; min-width:0; font-family:var(--f-num); font-size:1.5rem;
  font-weight:700; letter-spacing:.16em; color:var(--or-hi);
  text-shadow:0 0 18px rgba(var(--o),.4); user-select:all; word-break:break-all; }

.refedit{ border-radius:var(--r-sm); border:1px solid var(--hair); background:rgba(0,0,0,.2); }
.refedit summary{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 13px; cursor:pointer; list-style:none; font-size:.85rem; }
.refedit summary::-webkit-details-marker{ display:none }
.refedit summary .ic{ width:14px; height:14px; color:var(--or); }
.refedit[open] summary{ border-bottom:1px solid var(--hair); }
.refedit__in{ padding:13px; }

/*  ชวนใส่โค้ดแนะนำ — อยู่ในแผงสรุปข้างปุ่มยืนยัน
    เดิมเป็นแบนเนอร์กว้างเต็มจอ ซึ่งยืดจนข้อความลอยกลางที่ว่าง
    และอยู่ไกลจากปุ่มยืนยันเกินกว่าจะรู้สึกว่าเกี่ยวกัน  */
.refmini{
  display:flex; align-items:center; gap:10px; margin-top:12px;
  padding:10px 11px; border-radius:var(--r-sm);
  border:1px dashed rgba(var(--o),.34); background:rgba(var(--o),.055);
  text-decoration:none; color:inherit;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.refmini:hover{ border-style:solid; border-color:rgba(var(--o),.6); background:rgba(var(--o),.12); }
/*  ไอคอนในกรอบหกเหลี่ยม ให้เข้าชุดกับที่อื่นในเว็บ  */
.refmini__ic{ flex:none; width:26px; height:30px; display:grid; place-items:center;
  clip-path:var(--hex); background:rgba(var(--o),.24); }
.refmini__ic .ic{ width:13px; height:13px; color:var(--or-hi); }
.refmini__body{ flex:1; min-width:0; }
.refmini__body b{ display:block; font-size:.78rem; color:var(--txt); }
.refmini__body span{ display:block; font-size:.7rem; color:var(--dim-2);
  margin-top:1px; line-height:1.5; }
.refmini__go{ width:14px; height:14px; flex:none; color:var(--dim-2);
  transition:transform .16s var(--ease), color .16s var(--ease); }
.refmini:hover .refmini__go{ transform:translateX(2px); color:var(--or); }

/*  โค้ดแนะนำเพื่อนในโปรไฟล์ — ย่อจากหน้า /invite เอาแค่ที่หยิบไปใช้ได้ทันที  */
.prefcard{ margin-top:13px; padding:13px 14px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--o),.26); background:rgba(var(--o),.06);
  display:flex; flex-direction:column; gap:10px; }
.prefcard__head{ display:flex; align-items:center; gap:8px; font-size:.82rem; }
.prefcard__head .ic{ width:15px; height:15px; color:var(--or); }
.prefcard__code{ display:flex; align-items:center; gap:9px;
  padding:9px 12px; border-radius:8px; background:rgba(0,0,0,.35); }
/*  user-select:all เพื่อให้คลิกเดียวคลุมทั้งโค้ด — คนส่วนใหญ่ลากคลุมเอง  */
.prefcard__code code{ flex:1; min-width:0; font-family:var(--f-num);
  font-size:1.05rem; font-weight:700; letter-spacing:.14em; color:var(--or-hi);
  user-select:all; word-break:break-all; }
.prefcard__stats{ display:flex; align-items:center; gap:8px;
  font-size:.74rem; color:var(--dim-2); }

/*  ชื่อไฟล์ใต้พรีวิวในกล่องวางรูป — บอกว่าได้ไฟล์ไหนไปแล้วกี่ MB
    วางรูปจากคลิปบอร์ดจะได้ชื่อ image.png เหมือนกันหมด ขนาดจึงเป็นตัวแยก  */
.drop__file{ font-size:.68rem; color:var(--dim-2); word-break:break-all; }


/*  แถวประวัติการส่งของจากตู้สุ่ม (หน้าออเดอร์ของฉัน)  */
.sendrow{
  display:flex; align-items:flex-start; gap:11px; flex-wrap:wrap;
  padding:11px 13px; border-radius:var(--r-sm);
  border:1px solid var(--hair); background:rgba(0,0,0,.22);
}
.sendrow__body{ flex:1; min-width:180px; }


/* =====================================================================
   กล่องยืนยัน "อยู่ในเกมไหม" ก่อนซื้อ / ก่อนส่งของ

   จังหวะสายตาที่ตั้งใจ :  ตราหกเหลี่ยม -> ชื่อตัวละคร -> แผ่นเลข ID -> ปุ่ม
   รู้ผลตั้งแต่ยังไม่ทันอ่านตัวหนังสือ เพราะสีกับทรงบอกไปแล้ว

   ⚠ ส้มใช้เป็น "ตัวหนังสือกับเส้นขอบ" เท่านั้น ไม่ถมพื้นทึบ
     ทั้งเว็บเป็นแบบนี้ทั้งหมด ถมพื้นส้มทีเดียวกล่องนี้จะหลุดออกจากธีมทันที
   ===================================================================== */
/*  เส้นเรืองแสงบนขอบบนเป็นของกลางแล้ว (.modal__box::before ใน theme.css)
    ที่นี่แค่เปลี่ยนสีตามผลตรวจ — เห็นจากหางตาก่อนจะทันโฟกัสอ่าน  */
.igm__card.is-on::before{ background:linear-gradient(90deg, transparent, var(--ok), transparent); }
.igm__card.is-off::before{ background:linear-gradient(90deg, transparent, var(--bad), transparent); }

.igm__body{ display:flex; flex-direction:column; gap:15px; }

/* ---------- ตราหกเหลี่ยม + ชื่อ ---------- */
.igm__hero{ display:flex; align-items:center; gap:14px; }

.igm__hex{ position:relative; width:52px; height:58px; flex:none; display:grid; place-items:center; }
/*  วงนอกเป็นกรอบสี · วงในเป็นพื้นเข้ม = ได้ขอบหกเหลี่ยมบางโดยไม่ต้องใช้ border  */
.igm__hex-ring{
  position:absolute; inset:0; clip-path:var(--hex);
  background:linear-gradient(160deg, var(--dim-2), rgba(255,255,255,.12));
}
.igm__hex-face{
  position:absolute; inset:1.6px; clip-path:var(--hex);
  background:linear-gradient(180deg,#160e07,#0a0605);
}
.igm__hex-ic{
  position:relative; width:22px; height:22px; color:var(--dim-2); stroke-width:2.2;
}

.igm__card.is-on .igm__hex-ring{
  background:linear-gradient(160deg, #7bf0b4, var(--ok) 55%, #1d7a4d);
  box-shadow:0 0 26px -6px rgba(var(--g),.85);
}
.igm__card.is-on .igm__hex-ic{ color:var(--ok); }
.igm__card.is-off .igm__hex-ring{
  background:linear-gradient(160deg, #ff9d9d, var(--bad) 55%, #7a1d1d);
  box-shadow:0 0 22px -8px rgba(var(--b),.7);
}
.igm__card.is-off .igm__hex-ic{ color:#ffb3b3; }
.igm__card.is-wait .igm__hex-ring{
  background:linear-gradient(160deg, var(--or-hi), var(--or) 55%, var(--or-lo));
}
.igm__card.is-wait .igm__hex-ic{ color:var(--or); animation:igmSpin 1.1s linear infinite; }
@keyframes igmSpin{ to{ transform:rotate(360deg) } }

/*  คลื่นกระเพื่อมตอนออนไลน์ — "ยังเล่นอยู่จริง" ไม่ใช่ค่าค้างจากเมื่อกี้  */
.igm__card.is-on .igm__hex::after{
  content:''; position:absolute; inset:-4px; clip-path:var(--hex);
  border:0; background:rgba(var(--g),.35);
  animation:igmPulse 2.4s ease-out infinite; z-index:-1;
}
@keyframes igmPulse{
  0%   { transform:scale(.9); opacity:.55 }
  70%  { transform:scale(1.18); opacity:0 }
  100% { opacity:0 }
}

.igm__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.igm__head{ font-size:1rem; line-height:1.3; }
.igm__card.is-on .igm__head{ color:#a8ecc6; }
.igm__card.is-off .igm__head{ color:#ffb3b3; }
.igm__card.is-wait .igm__head{ color:var(--or-hi); }
.igm__sub{ font-size:.72rem; color:var(--dim-2); }
.igm__name{
  display:inline-flex; align-items:center; gap:5px; margin-top:5px;
  font-size:.78rem; color:var(--txt);
}
.igm__name .ic{ width:12px; height:12px; color:var(--dim-2); flex:none; }

/* ---------- แผ่นเลข ID : พระเอกของกล่อง ---------- */
.igm__plate{
  position:relative; text-align:center;
  padding:13px 14px 11px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--o),.35);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(var(--o),.14), transparent 70%),
    rgba(0,0,0,.34);
}
/*  ขีดมุมสี่มุม — ให้ดูเป็น "แผ่นป้าย" ไม่ใช่กล่องข้อความธรรมดา  */
.igm__plate::before, .igm__plate::after{
  content:''; position:absolute; width:12px; height:12px; pointer-events:none;
  border:1px solid var(--or); opacity:.65;
}
.igm__plate::before{ top:6px; left:6px; border-right:0; border-bottom:0; border-radius:4px 0 0 0; }
.igm__plate::after{ bottom:6px; right:6px; border-left:0; border-top:0; border-radius:0 0 4px 0; }

.igm__plate-l{
  display:block; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim-2);
}
.igm__plate-n{
  display:block; margin:3px 0 4px;
  font-family:var(--f-num); font-size:2.3rem; font-weight:700; line-height:1;
  letter-spacing:.06em; color:var(--or-hi);
  text-shadow:0 0 26px rgba(var(--o),.55);
}
.igm__plate-h{ display:block; font-size:.64rem; color:var(--dim-2); }

/* ---------- เหตุผลตอนไม่ผ่าน ---------- */
.igm__why{
  display:flex; gap:9px; padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--b),.35); background:rgba(var(--b),.08);
  font-size:.76rem; color:#ffc9c9; line-height:1.7;
}
.igm__why .ic{ width:14px; height:14px; flex:none; color:var(--bad); margin-top:2px; }

.igm__note{ font-size:.72rem; color:var(--dim-2); line-height:1.75; text-align:center; }

/* ---------- ปุ่ม ---------- */
.igm__bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid var(--hair);
}
.igm__go .ic{ width:13px; height:13px; transition:transform .16s var(--ease); }
.igm__go:hover .ic{ transform:translateX(3px); }

@media (max-width:420px){
  .igm__plate-n{ font-size:1.9rem; }
  .igm__hex{ width:46px; height:52px; }
}


/*  บรรทัดแจ้ง "ข้อมูลเก็บไว้กี่วัน" — ท้ายหน้าออเดอร์และหน้าคิวส่งของ
    เป็นข้อมูลประกอบ ไม่ใช่คำเตือน จึงเงียบ ๆ ไม่ต้องมีกรอบสี  */
.keepnote{
  display:flex; gap:8px; align-items:flex-start; line-height:1.8;
  padding:11px 13px; border-radius:var(--r-sm);
  border:1px dashed var(--hair-2); background:rgba(0,0,0,.2);
}
.keepnote .ic{ width:13px; height:13px; flex:none; color:var(--dim-2); margin-top:3px; }


/*  หัวการ์ดขั้นตอน (หน้าเติมเครดิต)

    ⚠ เดิมเป็นสองก้อน : หกเหลี่ยมใส่เลขขั้น + ไอคอนลอยข้าง ๆ
      สัญลักษณ์สองอันที่ไม่เกี่ยวกันวางชนกัน อ่านแล้วสะดุดทุกครั้ง
      รวมเป็นก้อนเดียว — ไอคอนเข้าไปอยู่ในหกเหลี่ยม
      เลขขั้นย้ายไปเป็นตัวหนังสือนำหน้าชื่อ ซึ่งอ่านง่ายกว่าเลขในกรอบเล็ก ๆ อยู่แล้ว  */
.stephex{
  position:relative; display:grid; place-items:center; flex:none;
  width:30px; height:34px; clip-path:var(--hex);
  background:linear-gradient(165deg, rgba(var(--o),.85), rgba(var(--o),.35));
}
.stephex::before{
  content:''; position:absolute; inset:1px; clip-path:var(--hex);
  background:linear-gradient(180deg,#20140a,#0b0704);
}
.stephex .ic{ position:relative; width:15px; height:15px; color:var(--or-hi); }

/*  ป้ายบอกขั้น — เล็กและจาง ไม่ต้องแย่งสายตาไปจากชื่อขั้นตอน  */
.stepk{
  display:inline-block; margin-right:9px; padding:2px 8px;
  font-family:var(--f-num); font-size:.56rem; letter-spacing:.06em;
  color:var(--or); vertical-align:middle;
  border:1px solid rgba(var(--o),.35); border-radius:99px;
}