/* ═══ TOPKEY29 design tokens — โทนตามเว็บเดิม (ดำอมแดง marketplace) ═══ */
:root {
  --bg: #0c0709;
  --surface: #171013;
  --surface-2: #1f1418;
  --border: #33222a;
  --border-hot: rgba(255, 70, 85, 0.28);
  --text: #f4eef0;
  --muted: #a8979b;
  --accent: #ff2020;          /* flat red เท่าเว็บหลัก (--color-primary) */
  --accent-2: #ff7a45;
  --accent-grad: linear-gradient(120deg, var(--accent), var(--accent-2));
  --ok: #00c853;              /* status green เท่าเว็บหลัก */
  --warn: #f1c40f;
  --info: #60a5fa;            /* สถานะ "ข้อมูล" (เช่น ป้ายคืนเงินแล้ว) — สกินทับผ่าน --color-info */
  --radius: 16px;
  --glow: 0 12px 42px -12px color-mix(in srgb, var(--accent) 50%, transparent);
  --dock-h: 52px; /* แถบล่างเตี้ยลงเท่าเว็บหลัก */

  /* ── ฟอนต์ display เท่าเว็บหลัก: Kanit (หัวข้อ/ชื่อการ์ด) ── */
  --font-display: 'Kanit', 'Noto Sans Thai', system-ui, sans-serif;
  /* ── ฟอนต์ UI ทั่วไป = Prompt (เว็บหลักบังคับผ่านกฎ * ให้ลิงก์/ข้อความ/ปุ่มเป็น Prompt) ── */
  --font-ui: 'Prompt', sans-serif;

  /* ── Typography engine hooks (แอดมินตั้งค่าที่ inc/typography.php; ปุ่ม A± ราย-เครื่อง) ──
     default = หน้าตาเดิมเป๊ะ (Kanit · scale 1 · ไม่มี spacing) */
  --font-base: 'Kanit', 'Noto Sans Thai', 'Sarabun', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-scale: 1;
  --font-spacing: 0em;
  /* สเกล "ตัวอักษรรอง" (ข้อความเล็ก: หมายเหตุ/คำอธิบาย/ป้าย/เมตา) — คูณทับ --font-scale อีกชั้น
     1 = ขนาดเดิมเป๊ะ · ต่ำกว่า 1 = ตัวรองเล็กลงโดยตัวหลักไม่ขยับ (ตั้งที่ admin/fontsize.php) */
  --font-scale-sm: 1;

  /* ── alias tokens สำหรับคอมโพเนนต์ที่พอร์ตมาจากเว็บหลัก ──
     ต้องครบทุกตัวที่ engine ธีม (inc/theme.php: บุคลิก/สกิน/สะพาน) อ้างถึง —
     ขาดตัวไหน var() จะ invalid ทั้งประกาศ แล้วคุณสมบัตินั้นตกเป็นค่า initial
     (เคสจริง: บุคลิก "ออโรรา" อ้าง --color-pink ที่ยังไม่มี → พื้นหลังหายเงียบ ๆ) */
  --color-primary: var(--accent);
  --color-pink: var(--accent-2);
  --color-bg: var(--bg);
  --color-info: var(--info);
  --color-danger: var(--danger-strong);
  --color-surface: var(--surface);
  --color-surface-soft: var(--surface-2);
  --color-line: var(--border);
  --color-line-soft: var(--border);
  --color-border: var(--border);
  --color-text: var(--text);
  --color-text-soft: var(--muted);
  --color-text-muted: var(--muted);
  --color-success: var(--ok);
  --color-warning: var(--warn);
  --color-neutral-100: var(--surface-2);
  --color-indigo-soft: #8b93ff;
  --grad-primary: var(--accent-grad);
  --grad-heading: linear-gradient(135deg, var(--text) 0%, var(--accent) 55%, var(--accent-2) 100%);
  --shadow-glow: var(--glow);
  --warning-soft: color-mix(in srgb, var(--warn) 15%, transparent);
  --success-soft: color-mix(in srgb, var(--ok) 14%, transparent);
  --success-line: color-mix(in srgb, var(--ok) 30%, transparent);
  --danger-strong: #ff6b6b;

  /* ═══ สถานะ "เลือกแล้ว" (selected) — engine กลาง ═══
     เจ้าของสั่ง 2026-07-27: ขอบตอนเลือกเข้มเกินไป อยากได้เส้นบาง ๆ จาง ๆ
     ทุกการ์ด/ชิป/แถวที่ถูกเลือกต้องอ้าง 3 ตัวนี้ ห้าม hardcode สีเต็ม (var(--accent) ล้วน) อีก */
  --sel-line: color-mix(in srgb, var(--accent) 38%, transparent);  /* ขอบเส้นบาง 1px */
  --sel-bg: color-mix(in srgb, var(--accent) 9%, transparent);     /* พื้นจาง บอกว่าเลือกอยู่ */
  --sel-mark: var(--accent);                                       /* ติ๊กถูก/ไอคอน = สีเต็ม (จุดเดียวที่เข้มได้) */

  /* ═══ ปุ่ม: engine กลาง — ทุกปุ่มทั้งหน้าร้านและหลังบ้านอ้าง token ชุดนี้ ═══
     แก้ที่นี่ที่เดียว = ปุ่มทั้งเว็บเปลี่ยนพร้อมกัน (ห้าม hardcode ขนาด/ฟอนต์ในกฎปุ่มอีก) */
  --btn-font: var(--font-ui);      /* ปุ่มทั่วไป = Prompt (เท่าเว็บหลัก: button ไม่ประกาศฟอนต์ → กฎ *) */
  --btn-font-cta: var(--font-ui);  /* ปุ่มซื้อ/CTA/auth = Prompt เช่นกัน */
  --btn-weight: 600;
  --btn-weight-strong: 700;

  /* สเกล "ข้อความในปุ่ม" — แอดมินตั้งที่หน้าธีม (กลุ่มปุ่ม & รูปทรง) คูณทับทั้ง 5 ระดับ
     1 = ขนาดเดิมเป๊ะ · ต่ำกว่า 1 = ตัวอักษรในปุ่มเล็กลงโดยขนาดฟอนต์ทั้งเว็บไม่ขยับ (กันข้อความล้นปุ่ม) */
  --btn-fs-scale: 1;

  /* ขนาดตัวอักษร 5 ระดับ (เดิมกระจาย 15 ค่า) */
  --btn-fs: calc(.92rem * var(--btn-fs-scale, 1));
  /* นโยบายเจ้าของ 2026-07-15: ปุ่มทุกตัวทั้งเว็บ = ขนาดเดียวตาม knob ปุ่ม & รูปทรง — โทเคนย่อยเป็น alias ห้ามแตกขนาดใหม่ */
  --btn-fs-xs: var(--btn-fs);
  --btn-fs-sm: var(--btn-fs);
  --btn-fs-lg: var(--btn-fs);
  --btn-fs-cta: var(--btn-fs);

  /* ความสูง 4 ระดับ + padding แนวนอน */
  --btn-h: 44px;
  /* นโยบายเจ้าของ 2026-07-15: ความสูง/padding ปุ่มทุกตัว = โทเคนหลักตัวเดียว โทเคนย่อยเป็น alias */
  --btn-h-xs: var(--btn-h);
  --btn-h-sm: var(--btn-h);
  --btn-h-md: var(--btn-h);
  --btn-h-lg: var(--btn-h);
  --btn-pad-x: 18px;
  --btn-pad-x-xs: var(--btn-pad-x);
  --btn-pad-x-sm: var(--btn-pad-x);
  --btn-pad-x-lg: var(--btn-pad-x);

  /* ── สเกลความโค้งมุม (แอดมินปรับได้ในหน้าธีม → ทับทั้งชุดพร้อมกัน) ── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-pill: 999px;
  --card-radius: var(--radius-xl);
  --field-radius: var(--radius-lg);

  --btn-radius: var(--radius-pill);   /* ปุ่มเป็นแคปซูลตามดีไซน์ beta; โหมด "เหลี่ยม" จะทับเป็นมุมคม */
  --btn-radius-pill: 999px;

  /* ช่องกรอก/ดรอปดาวน์ สูงเท่าปุ่มเสมอ (วางข้างกันแล้วเสมอกัน) */
  --field-h: var(--btn-h);

  /* สีข้อความในปุ่ม — ขาวสว่างเต็ม อ่านชัดบนพื้นเข้ม/พื้นสี (ห้ามใช้สีหม่น) */
  /* ── สีตัวอักษร "บนพื้นสี" — engine (inc/theme.php) คำนวณทับให้ตามความสว่างของสีจริง
     ของแต่ละสกิน/สีที่แอดมินตั้ง เพื่อไม่ให้เกิด "ขาวบนพื้นสว่าง" อ่านไม่ออก ── */
  --fg-on-accent: #ffffff;   /* พื้น = สีแบรนด์ (แดง #ff2020 → ขาวอ่านออก) */
  --fg-on-ok: #101418;       /* พื้น = เขียวสำเร็จ (สว่าง → ต้องใช้หมึกเข้ม) */
  --fg-on-danger: #101418;   /* พื้น = แดงอ่อน #ff6b6b */
  --fg-on-warn: #101418;     /* พื้น = เหลือง */
  --fg-on-info: #101418;     /* พื้น = ฟ้าอ่อน */
  --btn-fg: var(--text);          /* ปุ่มพื้นกลาง/โปร่ง = สีตัวอักษรปกติ (สกินสว่างจึงอ่านออก) */
  --btn-fg-on-accent: var(--fg-on-accent);

  /* ── สีแบรนด์/สถานะ เวลาเอาไปใช้เป็น "ตัวอักษร" บนพื้นการ์ด ──
     ธีมเริ่มต้น (ดำแดง) ทุกตัวผ่านเกณฑ์อยู่แล้ว จึงเท่ากับสีเดิม;
     สกิน/สีที่แอดมินตั้งเอง → engine (inc/theme.php) คำนวณค่าที่อ่านออกมาทับให้ ── */
  --accent-text: var(--accent);
  --accent-2-text: var(--accent-2);
  --ok-text: var(--ok);
  --warn-text: var(--warn);
  --info-text: var(--info);
  --danger-text: var(--danger-strong);
  --btn-fg-soft: var(--muted);         /* เฉพาะปุ่มรอง/ปุ่มปิด ที่ตั้งใจให้จาง */
  --font-xs: .72rem;
  --font-sm: .82rem;
  --font-md: .92rem;
  --font-lg: 1.05rem;
  --font-2xl: 1.35rem;
  --font-3xl: 1.7rem;
}

/* ── ฟอนต์เริ่มต้นของ element ทั่วไป = Prompt (พอร์ตกฎ * ของเว็บหลักเป๊ะ) ──
   specificity 0 → แพ้ทุก selector ที่ประกาศ font-family เอง (body/หัวข้อ = var(--font-*) = Kanit,
   ไอคอน FA, กล่อง mono) ผลลัพธ์จึงเท่าเว็บหลัก: ตัวหนังสือทั่วไป Prompt · หัวข้อ/body Kanit
   ระบบเลือกฟอนต์ของแอดมิน (inc/typography.php) เปลี่ยน --font-ui → มีผลทั้งชุด */
* { font-family: var(--font-ui, 'Prompt', sans-serif); }

html {
  font-size: calc(13px * var(--font-scale, 1)); /* root 13px × สเกลฟอนต์ (แอดมิน/ผู้ใช้) */
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip; /* กันคอนเทนต์ล้นดัน layout viewport กว้างเกินจอ (แถบ fixed จะเพี้ยน) */
  /* ENGINE: ห้ามเบราว์เซอร์มือถือดันขนาดตัวอักษรเอง (Chrome Android font boosting)
     ไม่งั้นข้อความเล็ก ๆ (โดยเฉพาะในช่องกรอก) โตเกินค่าที่แอดมินตั้ง = ตัวคูณ
     --font-scale / --font-scale-sm ไม่มีผลจริงบนมือถือ */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* มือถือ root 12px (เท่าเว็บหลัก: breakpoint 767.98px) — ทุกอย่าง scale ลง ~8% */
@media (max-width: 767.98px) { html { font-size: calc(12px * var(--font-scale, 1)); } }

/* พื้นหลังแบบเว็บเดิม: ม่านแดงเรือง ๆ มุมบนซ้าย จางลงเป็นดำ */
body {
  background: var(--app-bg,
    radial-gradient(900px 520px at 12% -6%, rgba(255, 32, 32, 0.20), transparent 62%),
    radial-gradient(700px 420px at 88% -12%, rgba(255, 90, 60, 0.08), transparent 60%),
    linear-gradient(180deg, #150a0d 0%, var(--bg) 480px));
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-base, 'Kanit', -apple-system, sans-serif); /* ฟอนต์ body (แอดมินตั้งได้) */
  letter-spacing: var(--font-spacing, 0);
  min-height: 100vh;
  position: relative;
}

/* พรีวิว "ตัวเอียง" ในหน้า admin/fontsize.php — JS ใส่คลาสที่ <html> ระหว่างพรีวิว
   ตอนบันทึกจริง server พ่น body{font-style:italic} เองจาก tk_typo_head() (inc/typography.php) */
html.tk-italic body { font-style: italic; }

/* ═══ ENGINE: กัน iOS ซูมอัตโนมัติตอนกดช่องกรอก — ย้ายไป assets/iosfield.js แล้ว ═══
   ⛔ ห้ามเอากฎ font-size: max(16px, 1rem) !important กลับมาใส่ที่นี่อีก
   เดิมกฎนั้นครอบ @media (pointer: coarse) = อุปกรณ์สัมผัสทุกชนิด (รวม Android ที่ไม่มีปัญหาซูมเลย)
   → ช่องกรอกทุกช่องบนมือถือถูกยัดเป็น 16px ทับสเกล "ตัวอักษรรอง" ที่แอดมินตั้ง = สไลเดอร์ไม่มีผล
   ตอนนี้กันซูมด้วยการล็อก viewport ชั่วคราวตอนโฟกัส (iOS เท่านั้น) — ขนาดฟอนต์ไม่ถูกแตะอีกต่อไป */

/* ═══ ENGINE: ข้อความจาง ๆ ในช่องกรอก (placeholder) = "ตัวอักษรรอง" — ทั้งเว็บ จุดเดียว ═══
   ครอบทุก input/textarea ทั้งหน้าร้านและหลังบ้าน (admin.css โหลดทับ style.css ก็ยังใช้กฎนี้)
   → เพิ่มช่องกรอกใหม่ที่ไหนก็ได้ขนาดตามสไลเดอร์ "ตัวอักษรรอง" อัตโนมัติ ไม่ต้องไปแปะกฎรายคลาส

   ทำไมต้องตั้ง font-size ให้ placeholder เอง: กฎกัน iOS ซูมด้านบนยัด max(16px,1rem) !important
   ใส่ตัว input — placeholder ที่ไม่มีขนาดของตัวเองจะ inherit ขนาดนั้นมา แล้วบวมบนมือถือ
   (การซูมของ iOS ดูที่ font-size ของ input เท่านั้น ย่อ placeholder ไม่ทำให้ซูม)

   ⛔ ห้ามตั้ง font-size ของ ::placeholder ในกฎรายคลาสอีก (.input / .auth-input / .a-omni ฯลฯ)
      มันจะชนะกฎนี้ด้วย specificity แล้วกลายเป็นเกาะที่สไลเดอร์เอื้อมไม่ถึง — บั๊กเดิมที่เพิ่งแก้ */
input::placeholder,
textarea::placeholder {
  font-size: calc(.88rem * var(--font-scale-sm, 1));
}

/* ═══ ENGINE: พื้นหลังล็อกตอนเปิดป๊อบอัพ (assets/lock.js สั่งใส่/ถอดคลาส .tk-lock) ═══
   เปิดป๊อบอัพอะไรก็ตาม (หน้าร้าน/หลังบ้าน) → พื้นหลังหยุดนิ่ง เลื่อนได้เฉพาะในป๊อบอัพ
   body ต้อง position:fixed ด้วย ไม่ใช่แค่ overflow:hidden — iOS Safari/Chrome มือถือ
   ยังลากพื้นหลังได้ถ้าใช้ overflow อย่างเดียว. --tk-lock-top = ตำแหน่งสกรอลเดิม (กันหน้ากระโดด),
   --tk-lock-sbw = ความกว้างสกรอลบาร์เดสก์ท็อป (กันหน้ากระตุกตอนสกรอลบาร์หาย) */
html.tk-lock { overflow: hidden !important; overscroll-behavior: none; }
html.tk-lock body {
  position: fixed;
  top: var(--tk-lock-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  padding-right: var(--tk-lock-sbw, 0px);
  overflow: hidden !important;
  overscroll-behavior: none;
}
/* กล่องข้อความกลาง (appAlert/appConfirm): เนื้อหายาวกว่าจอ → เลื่อนในกล่องเอง */
.uik-card { max-height: calc(100vh - 36px); overflow-y: auto; overscroll-behavior: contain; }

/* ═══ meteor / shooting-star field (เท่าเว็บหลัก) — เลเยอร์ fixed หลังคอนเทนต์ ═══ */
.sky-meteors {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#app { position: relative; z-index: 1; }
.sky-meteors .meteor {
  position: absolute;
  top: -10%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .6);
  opacity: 0;
  animation: meteor-fall linear infinite;
}
.sky-meteors .meteor::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 90px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #ff7a5a) 75%, transparent), transparent);
}
@keyframes meteor-fall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-42deg); }
  8%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-520px, 520px) rotate(-42deg); }}
.sky-meteors .meteor:nth-child(1) { left: 12%; animation-duration: 4.6s; animation-delay: .2s; }
.sky-meteors .meteor:nth-child(2) { left: 32%; animation-duration: 6.1s; animation-delay: 1.6s; }
.sky-meteors .meteor:nth-child(3) { left: 54%; animation-duration: 5.2s; animation-delay: 3.1s; }
.sky-meteors .meteor:nth-child(4) { left: 72%; animation-duration: 7.0s; animation-delay: .9s; }
.sky-meteors .meteor:nth-child(5) { left: 88%; animation-duration: 5.7s; animation-delay: 2.4s; }
.sky-meteors .meteor:nth-child(6) { left: 20%; animation-duration: 6.6s; animation-delay: 4.2s; }
@media (prefers-reduced-motion: reduce) { .sky-meteors { display: none; }}

/* ═══ ฟอนต์ display Prompt เท่าเว็บหลัก — หัวข้อ/เมนู/ปุ่ม/ชื่อการ์ด ═══ */
h1, h2, h3, .page-title, .hero h1, .eyebrow, .gmenu-item, .gnav-link, .gnav-lang, .game-card .name, .pmodal-title b, .in-card-title, .sec-head h2{
  font-family: var(--font-display);
}
/* ชื่อสินค้าในการ์ด = Prompt เท่าเว็บหลัก (.sp-name ไม่ประกาศฟอนต์ → ตกกฎ * = Prompt) */
.sp-name { font-family: var(--font-ui); }

/* ═══ motion system ═══ */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  0% { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }}
@keyframes shine-sweep {
  from { transform: translateX(-130%) skewX(-18deg); }
  to { transform: translateX(230%) skewX(-18deg); }}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }}
@keyframes flame-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 63, 0.45); }
  55% { box-shadow: 0 0 0 7px rgba(255, 45, 63, 0); }}

.rise {
  opacity: 0;
  animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.pop {
  opacity: 0;
  animation: pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rise, .pop, .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }}

/* ═══ ชิ้นส่วนใช้ซ้ำ ═══ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── สีรายปุ่ม (สตูดิโอปุ่มในหน้าธีม): token --b-<ปุ่ม>-bg/-fg/-bd
   ไม่ตั้งค่า = fallback ไป token ธีมเดิมเป๊ะ · ตั้งแล้ว = ปุ่มนั้นใช้สีของตัวเองทั้งเว็บ ── */
.btn-accent {
  background: var(--b-primary-bg, var(--accent));
  color: var(--b-primary-fg, var(--fg-on-accent));
  font-weight: 600;
  border-radius: var(--btn-radius);
  box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: filter 0.18s ease, transform 0.12s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.btn-accent::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.btn-accent:hover { filter: brightness(1.1); box-shadow: var(--glow); }
.btn-accent:hover::after { animation: shine-sweep 0.75s ease; }
/* :active ย้ายไปกฎกดกลาง (ENGINE) ใต้บล็อกทรงปุ่มมาตรฐาน */
.btn-accent:disabled { filter: grayscale(0.6) brightness(0.7); cursor: not-allowed; box-shadow: none; }

.btn-ghost {
  border: 1px solid var(--b-ghost-bd, var(--border));
  background: var(--b-ghost-bg, color-mix(in srgb, var(--surface) 70%, transparent));
  border-radius: var(--btn-radius);
  color: var(--b-ghost-fg, var(--btn-fg));
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.btn-ghost:hover {
  border-color: var(--border-hot);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--field-radius);
  color: var(--text);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  /* ข้อความในช่องกรอก = "ตัวอักษรรอง" คุมจากสไลเดอร์ตัวรองในหน้าปรับขนาดตัวอักษร
     (จุดเดียวทั้งเว็บ: หน้าร้าน + หลังบ้าน) */
  font-family: inherit;
  font-size: calc(.9rem * var(--font-scale-sm, 1));
  line-height: 1.6;
}
/* ขนาด placeholder = ENGINE ด้านบน (input::placeholder) — ห้ามตั้งซ้ำที่นี่ */
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.text-grad {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge-ok {
  color: var(--ok-text);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

/* eyebrow หัวข้อ section แบบเว็บเดิม (BROWSE / หมวดหมู่สินค้า) */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ═══ การ์ดหมวด/สินค้า แบบเว็บเดิม: รูปเต็มใบ + ชื่อ + ขีดแดง ═══ */
.game-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  aspect-ratio: 3 / 4;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease, box-shadow 0.28s ease;
}
.game-card img,
.game-card .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
}
.game-card .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: var(--surface-2);
}
.game-card::after {
  /* ม่านดำล่างรองชื่อ */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(5, 2, 3, 0.92));
  pointer-events: none;
}
.game-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--border-hot);
  box-shadow: var(--glow),
    0 20px 42px -14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.game-card:hover img,
.game-card:hover .ph {
  transform: scale(1.08);
  filter: brightness(1.06) saturate(1.12);
}
.game-card:active { transform: translateY(-2px) scale(0.99); }

/* ประกายแสงกวาดผ่านตอน hover (glossy sweep) — แสงสะท้อนขาวจาง ไม่แตะสีธีม */
.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%,
    rgba(255, 255, 255, 0.16) 46%, rgba(255, 255, 255, 0.04) 54%, transparent 68%);
  transform: translateX(-130%) skewX(-18deg);
  opacity: 0;
}
.game-card:hover::before {
  opacity: 1;
  animation: shine-sweep 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.game-card .name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.86rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  padding: 0 8px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.game-card:hover .name { transform: translateY(-3px); }
.game-card .name::after {
  /* ขีดแดงใต้ชื่อ — ลายเซ็นของเว็บเดิม */
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 99px;
  background: var(--accent-grad);
  margin: 6px auto 0;
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.game-card:hover .name::after {
  width: 44px;
}

/* entrance การ์ดหมวดหมู่ — rise + scale + fade แบบ cascade
   ใช้ translate/scale (พร็อพแยก) ไม่ใช่ transform → fill:forwards จึงไม่ล็อก
   ปล่อยให้ :hover ใช้ transform ยกการ์ดได้เต็มที่ (แทน .pop ธรรมดาเฉพาะการ์ดเกม) */
@keyframes game-card-in {
  0%   { opacity: 0; translate: 0 26px; scale: 0.9; }
  60%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.game-card.pop {
  animation-name: game-card-in;
  animation-duration: 0.62s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: calc(var(--i, 0) * 75ms);
}

/* ป้าย "ขายดี" = ป้ายเดียวกับ "ลดราคา" (ตำแหน่ง/ทรงเดียวกัน) ขึ้นเมื่อหมวดนั้นไม่มีลดราคา
   ดู .in-cat-sale-badge.is-hot ท้ายไฟล์ */

/* ป้ายสถานะบนการ์ด (มีของ/หมด) */

/* ═══ navbar ═══ */
.gnav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg) 78%, transparent);   /* พื้นแถบเมนูบน — อิง token ไม่งั้นสกินสว่างจะได้แถบดำ */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ═══ หัวเว็บ = "แถบเดียว" ทุกจอ (เจ้าของสั่ง 07-28) ═══
   ⛔ แถบเมนูแถวล่าง (.gmenu / .gmenu-inner) ถูกลบทิ้งถาวรแล้ว — ห้ามเอากลับ
   เดสก์ท็อป ≥1100px = โลโก้ + เมนู + ปุ่มขวา อยู่แถวเดียว (.gnav-bar)
   ต่ำกว่านั้น (รวมมือถือ) = ปุ่มแฮมเบอร์เกอร์ + ลิ้นชัก ซึ่งมีเมนูชุดเดียวกัน
   → หน้าตาแถบเมนูจึง "เหมือนกันทั้งหมด" ไม่มีของ 2 แบบให้ย่อจอแล้วเปลี่ยนหน้าตาอีก
   (เอนจินหุบแถบเมนูตอนเลื่อน .nav-compact ใน app.js เลิกทำงานเอง เพราะไม่มี .gmenu แล้ว) */
.gnav-spacer { display: none; }
@media (min-width: 768px) {
  .gnav { position: fixed; left: 0; right: 0; }
  .gnav-spacer { display: block; height: 65px; }    /* 64 (แถบเดียว) + 1 เส้นขอบล่าง */
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-h);
  height: var(--btn-h);
  border-radius: var(--btn-radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--btn-fg);
  font-size: var(--btn-fs);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.icon-btn:hover { border-color: var(--border-hot); }
.icon-btn:active { transform: scale(0.92); }

/* ═══ header เดสก์ท็อป: ค้นหา + เฟือง + แถบเมนูแถวเดียว (.gnav-bar) ═══ */
.gsearch { display: none; }
/* กันไว้เฉย ๆ: ถ้ามี HTML เก่าค้างแคชที่ยังมีแถวเมนูที่ 2 อยู่ ห้ามให้มันโผล่ */
.gmenu { display: none !important; }
/* มือถือ: ไอคอนแว่นขยายบน top bar กดแล้วแถบค้นหาสไลด์ลง — เฉพาะสมาชิก
   (เว็บหลักตอนโลกเอาต์ไม่มีปุ่มนี้ · ปุ่มเข้าสู่ระบบ/สมัคร จะได้ไม่ตกขอบจอ) */
.search-btn { display: none; }
.gnav:not(.gnav--guest) .search-btn { display: inline-flex; }
/* ช่องค้นหาในลิ้นชักมือถือ */

/* ปุ่มเฟือง/แว่นขยายกรอบแดง (มือถือ+เดสก์ท็อปแบบเว็บหลัก) */
.gear-btn { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* ค้นหามือถือ: กดปุ่มแว่น → dropdown ลอยเกาะขวาใต้ปุ่ม (input+ผลลัพธ์ใน panel เดียว — แบบเว็บหลัก) */
.msearch {
  position: absolute;
  top: 58px;
  left: 50%;                         /* กึ่งกลางแนวนอน */
  right: auto;
  width: min(320px, 82vw);
  z-index: 60;
  display: none;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85);
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .18s ease;
}
.search-open .msearch { display: block; opacity: 1; transform: translate(-50%, 0); }
.msearch form {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  margin: 0;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--muted);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.msearch form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.msearch svg { flex: none; }
.msearch input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: var(--text);
  font: inherit;
  font-size: calc(0.95rem * var(--font-scale-sm, 1));
}
.msearch input::placeholder { color: var(--muted); }
.msearch input::-webkit-search-cancel-button { -webkit-appearance: none; }

@media (min-width: 768px) {
  /* ⚠️ แฮมเบอร์เกอร์ซ่อนเฉพาะจอที่แถบเมนูแถวเดียวขึ้นจริง (≥1100px — ดูบล็อกท้ายไฟล์)
     768–1100px ยังต้องใช้ลิ้นชัก เพราะที่บนแถบไม่พอใส่เมนูทั้งหมด */
  .gnav:not(.gnav--guest) .search-btn { display: none; } /* เดสก์ท็อปใช้ช่อง .gsearch แทนปุ่มแว่น */
  .gnav--guest .gsearch { display: none; }               /* โลกเอาต์ไม่มีช่องค้นหา (ปุ่มเข้าสู่ระบบ/สมัครจะได้ไม่เบียด) */
  .msearch { display: none; }

  .gsearch {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(340px, 32vw);
    height: 40px;
    padding: 0 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--muted);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .gsearch:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  }
  .gsearch svg { flex: none; }
  .gsearch input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: 0;
    color: var(--text);
    font: inherit;
    font-size: calc(0.9rem * var(--font-scale-sm, 1));
  }
  .gsearch input::placeholder { color: var(--muted); }
  .gsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }

  /* ปุ่มเฟืองกรอบแดงแบบเว็บหลัก */
  .gear-btn { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
  .gear-btn:hover svg { transform: rotate(40deg); }
  .gear-btn svg { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

  /* หน้าตาเมนู 1 รายการ — ใช้ร่วมกันทั้งแถบเดียว (.gnav-bar) และในลิ้นชัก
     ⛔ กล่องแถวล่าง .gmenu/.gmenu-inner ถูกลบทิ้งแล้ว (เจ้าของสั่ง 07-28) ห้ามเอากลับ */
  .gmenu-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* ย่อ/ขยายตามความกว้างจอ — จอกว้างได้ขนาดเท่าเว็บหลัก (1.26rem/14px) จอแคบบีบลงจนพอดี ไม่ล้น */
    gap: clamp(4px, .5vw, 7px);
    height: 52px;
    padding: 0 clamp(6px, .8vw, 11px);
    font-size: calc(clamp(.8rem, .3rem + .68vw, 1.16rem) * var(--btn-fs-scale, 1));
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .gmenu-item svg { width: clamp(14px, 1.15vw, 18px); height: clamp(14px, 1.15vw, 18px); flex: none; }
  .gmenu-item .chev { width: 14px; height: 14px; margin-left: -2px; transition: transform 0.2s ease; }
  .gmenu-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
  /* เมนูที่เลือก: ทินต์สีแบรนด์ตามธีม (เดิมขาว 5% ตายตัว → สกินสว่างมองไม่เห็นพื้น) */
  .gmenu-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .gmenu-item.active::after {
    /* ขีดแดงใต้เมนูที่เปิดอยู่ — ลายเซ็นเว็บหลัก */
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent-grad);
  }

  /* dropdown สินค้า — โครงเว็บหลัก (ao-dd): เปิดด้วยการกด · กริดหมวด 2 คอลัมน์ ไม่มีสกรอลล์ */
  .gmenu-drop { position: relative; }
  .gmenu-drop.open .chev { transform: rotate(180deg); }
  .gmenu-panel { position: absolute; top: calc(100% + 2px); left: 0; z-index: 45; min-width: 340px; display: none; animation: pop .18s ease; }
  .gmenu-drop.open .gmenu-panel { display: block; }

  /* ปุ่ม LINE ติดต่อเรา ชิดขวา */
  .gmenu-line {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: calc(0.92rem * var(--btn-fs-scale, 1));   /* knob "ขนาดข้อความในปุ่ม" — เดิม hardcode หลุด Global Engine */
    font-weight: 500;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  }
  .gmenu-line:hover {
    border-color: color-mix(in srgb, #06c755 55%, var(--border));
    background: color-mix(in srgb, #06c755 8%, var(--surface-2));
  }
  .gmenu-line:active { transform: scale(0.97); }
  .line-ic { display: none; } /* เลิกใช้ กล่องเขียวเก่า — เปลี่ยนเป็นโลโก้จริง .line-svg */
}

/* ═══ แผงหมวดหมู่ (ใช้ทั้ง dropdown เดสก์ท็อป และในลิ้นชักมือถือ — engine เดียว) ═══ */
.gmenu-panel {
  padding: 14px;
  background: var(--surface);   /* แผงหมวดหมู่ (เดสก์ท็อป + ในลิ้นชัก) — อิง token */
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85);
}
.gmp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}
.gmp-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.gmp-count { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.gmp-all {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--accent-grad);
  color: var(--fg-on-accent);
  transition: opacity 0.15s ease;
}
.gmp-all:hover { opacity: 0.88; }
.gmp-all-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
}
.gmp-all-tt { display: flex; flex-direction: column; line-height: 1.25; }
.gmp-all-tt b { font-size: 0.94rem; font-weight: 700; }
.gmp-all-tt em { font-size: 0.74rem; font-style: normal; opacity: 0.78; }
.gmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.gmp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s ease;
}
.gmp-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.gmp-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.15s ease;
}
.gmp-item:hover .gmp-dot { background: var(--accent); }
.gmp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ⛔ เมนูโลกเอาต์ชุดเก่า (.gnav-links แถวเดียวคนละสไตล์) ถอดออกแล้ว 07-27 ตามคำสั่งเจ้าของ
   — โลกเอาต์ใช้แถบเมนูชุดเดียวกับตอนล็อกอิน (.gnav-bar แถบเดียว ที่ ≥1100px) */

/* (ปุ่มปรับขนาดตัวอักษรลอยถูกถอดออก — ฟอนต์/ขนาดคุมจากหลังบ้านที่เดียว) */
/* ═══ bottom nav มือถือ (แบบเว็บเดิม: แถบเต็มจอ + active เรืองแดง) ═══ */
.bnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
}
@media (min-width: 768px) {
  /* จอใหญ่ซ่อนแถบล่าง — ต้องทำในนี้เพราะ display:flex ของเรา
     ชนะ .md:hidden ของ Tailwind (unlayered ชนะ layered) */
  .bnav {
    display: none;
  }}
/* สเปกเท่าเว็บหลัก (.aog-bnav): แถบเตี้ย padding 4px, item 6/2/5, ไอคอน 17px,
   active = แคปซูลไล่สี 14%→4% + ไอคอนเรือง + ขีดใต้ 22×2.5px */
.bnav {
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface) 92%, transparent);  /* แถบเมนูล่างมือถือ — อิง token (สกินสว่าง = แถบสว่าง ตัวอักษรอ่านออก) */
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, .6);
}
.bnav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px 5px;
  font-size: calc(10px * var(--btn-fs-scale, 1));   /* ไอคอน svg ฟิก 17px — ย่อเฉพาะตัวหนังสือ */
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--radius-lg);
  position: relative;
  transition: color 0.2s ease, background 0.2s ease;
}
.bnav-item svg { width: 17px; height: 17px; }
.bnav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bnav-item:active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bnav-item.active {
  color: var(--accent-text);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--accent) 4%, transparent));
}
.bnav-item.active svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent)); }
.bnav-item.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 2.5px;
  border-radius: var(--radius-sm);
  background: var(--accent-grad);
}

/* แถบซื้อ sticky ล่างจอมือถือ (หน้าสินค้า) */

/* กันเนื้อหาโดนแถบล่างบัง (เฉพาะจอเล็ก) */
@media (max-width: 767px) {
  .pad-dock {
    padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 24px);
  }
}

/* ═══ ป๊อบอัพซื้อกลางจอ (แบบ modal เว็บเดิม) ═══ */
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }}
/* กล่อง "กำลังจัดส่งคีย์" — ลอยกลางจอทับทุกอย่างระหว่างรอ supplier ออกคีย์
   (เจ้าของสั่ง 07-12: ไม่เด้งออกจากหน้าซื้อ + ให้หมุนกลางหน้าจอ) */
.pm-wait-ov {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 2, 3, .74);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: backdrop-in .2s ease;
}
.pm-wait-card {
  width: min(320px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: 30px 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.75);
}
.pm-wait-spin {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: pm-spin .85s linear infinite;
}
.pm-wait-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--text); }
.pm-wait-sub { font-size: calc(.85rem * var(--font-scale-sm, 1)); color: var(--muted); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .pm-wait-spin { animation-duration: 2.6s; }}

.pmodal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(5, 2, 3, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: backdrop-in 0.22s ease;
}
.pmodal {
  width: min(470px, 100%);
  max-height: calc(100dvh - 3.5rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), var(--glow);
  animation: modal-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
/* มือถือ: กรอบเกือบเต็มจอเท่าเว็บหลัก (ขอบข้างละ 8px) */
@media (max-width: 575.98px) {
  .pmodal-backdrop { padding: 8px; }
  .pmodal { width: 100%; max-width: calc(100% - 16px); max-height: calc(100dvh - 1rem); border-radius: 14px; }
}
.pmodal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.pmodal-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
/* เนื้อหาเลื่อนได้ (รวม hero) — หัว/ท้ายตรึง; hero ใช้ตัวแปรนี้ bleed ออกเต็มขอบ */
.pmodal-body {
  --pm-body-pt: 16px;
  --pm-body-px: 18px;
  padding: var(--pm-body-pt) var(--pm-body-px) 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}
.pmodal-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
/* (โมดัลซื้อ: สไตล์ทั้งหมดอยู่บล็อกกลางท้ายไฟล์ — pm-price-card/pm-footer/pm-radio) */

/* ═══════════════ utilities (แทน Tailwind ที่เคยใช้) ═══════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; color: inherit; }
/* ── ปุ่มทุกตัวใช้ฟอนต์/น้ำหนักจาก token กลาง (ตัวหนังสือในปุ่มอ่านชัดเท่ากันทั้งเว็บ) ── */
button, .btn-danger, .ao-btn, .ao-act-main {
  font-family: var(--btn-font);
  font-weight: var(--btn-weight);
  -webkit-font-smoothing: antialiased;
}
/* ── ทรงปุ่มมาตรฐาน: สูง/ระยะขอบ/ขนาดอักษรจาก token ชุดเดียว ──
   ปุ่มจึงสูงเท่ากันเสมอเมื่อวางข้าง input หรือปุ่มอื่น (เดิมสูงไม่เท่ากันทั้งเว็บ) */
.btn-accent, .btn-ghost, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  font-size: var(--btn-fs);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
/* ขนาดเล็ก (ใช้คู่กับ .btn-* ในตาราง/หัวการ์ด) */
.a-btn-sm, .btn-accent.a-btn-sm, .btn-ghost.a-btn-sm, .btn-danger.a-btn-sm {
  min-height: var(--btn-h-sm);
  padding: 0 var(--btn-pad-x-sm);
  font-size: var(--btn-fs-sm);
}
/* ปุ่ม CTA (ซื้อ/สมัคร/เข้าสู่ระบบ) ใช้ฟอนต์ display ผ่าน token — ต้องอยู่หลังกฎ base */
.btn-accent, .btn-ghost, .sp-buy, .pm-btn-buy, .uik-btn, .ud-verify, .auth-btn {
  font-family: var(--btn-font-cta);
  font-weight: var(--btn-weight);
}
/* ── ENGINE: เอฟเฟคกดกลาง — ทุกปุ่มลูกค้ากดแล้วยุบเท่ากัน (scale .96 / .12s)
   แพ็กอนิเมชั่น (data-anim) ทับด้วย !important ของแพ็กเองได้ตามเดิม
   ปุ่ม disabled ไม่โดน (เบราว์เซอร์ไม่ยิง :active บนปุ่ม disabled) ── */
.btn-accent:active, .btn-ghost:active, .btn-danger:active, .sp-buy:active,
.sp-pill:active, .aps-chip:active, .aps-fbtn:active, .auth-btn:active,
.pm-btn-buy:active, .tpm-btn:active,
.cm-join:active, .ud-verify:active, .aotos-accept:active, .aotos-decline:active,
.tpt-btn:active, .rk-tab:active, .pf-src-btn:active, .pf-remove-btn:active,
.sc-startbtn:active, .pm-close-btn:active, .tpm-x:active, .ssel-close:active,
.hs-empty-cta:active, .pf-hero-cam:active, .od-kv-copy:active, .ao-popup-x:active {
  transform: scale(.96);
}
img { display: block; max-width: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
#app { display: flex; flex-direction: column; flex: 1; }

.wrap { width: 100%; max-width: 1152px; margin: 0 auto; padding: 24px 16px 80px; flex: 1; }
/* footer แบบเว็บหลัก: © ปี TopKey29 + แถวลิงก์ ซื้อสินค้า/ข้อตกลง/LINE */
/* ── ฟุตเตอร์ = โครง .ao-footer ของเว็บหลักเป๊ะ (แถบเต็มจอ + แถวใน 1240px)
   ขนาดฟิกเป็น px ตายตัวตามเว็บหลัก: root เว็บหลัก 13px (≤767.98px = 12px)
   → .82rem = 10.66px · มือถือ .78rem = 9.36px (ไม่ผูกกับ font-scale) ── */
.site-foot { border-top: 1px solid var(--border); padding: 22px 24px; margin-top: 40px; color: var(--text); font-size: 10.66px; }
.foot-row { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.foot-brand b { color: var(--accent-text); font-weight: 700; }
.foot-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;       /* เท่าเว็บหลัก .ao-footer-links */
  padding: 0;
  margin: 0;
  font-size: 10.66px;
}
/* มือถือ ≤575.98px = เท่าเว็บหลัก: padding 18/16 · margin-top 28 · gap 10 · links gap 16 · font .78rem = 12.48px */
@media (max-width: 575.98px) {
  .site-foot { padding: 18px 16px; margin-top: 28px; font-size: 9.36px; }
  .foot-row { flex-direction: column; text-align: center; gap: 10px; }
  .foot-links { justify-content: center; gap: 16px; font-size: 9.36px; }
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;   /* เท่าเว็บหลัก: ไอคอน LINE margin-right 5px */
  color: var(--text);
  transition: color 0.15s ease;
}
.foot-links a:hover { color: var(--accent-text); }

/* ── รายงานร้านเข้าแพลตฟอร์มกลาง (ปุ่มท้ายเว็บ ทุกร้านเช่า) ──
   กติกา hover ของ engine: ห้ามสีสว่าง hardcode (color-mix จาก token) + ห้ามขยับ/เด้ง */
.foot-report-wrap {
  max-width: 1240px;
  margin: 12px auto 0;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.foot-report {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
  background: color-mix(in srgb, var(--warn) 7%, transparent);
  color: color-mix(in srgb, var(--warn) 68%, var(--text));
  font-size: 9.6px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.foot-report:hover {
  border-color: color-mix(in srgb, var(--warn) 65%, var(--border));
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 18%, transparent), 0 3px 12px color-mix(in srgb, var(--warn) 14%, transparent);
}
.foot-report svg { flex: 0 0 auto; }
/* คำอธิบาย RENX + backlink: ซ่อนจากสายตา แต่คงไว้ใน DOM (bot/screen reader ยังอ่านเจอ)
   ใช้ clip แทน display:none — display:none บอทบางตัวถือว่าไม่มีเนื้อหา */
.foot-report-sub,
.foot-powered {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* คีย์บอร์ด Tab มาโดน backlink ต้องเห็นได้ ไม่งั้นโฟกัสหายเข้าที่ว่าง */
.foot-powered:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 6px 0 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  color: var(--muted);
  font-size: 9.6px;
  text-decoration: underline;
}
.foot-powered b { color: inherit; }
@media (max-width: 767px) {
  /* กฎ .site-foot ข้างบนทับ padding ของ .pad-dock — ต้องเว้นที่ให้ bnav เองไม่งั้นแถวลิงก์จมใต้แถบ */
  .site-foot { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 40px); }}

.line-svg { flex: none; }
.foot-links .line-svg { width: 10.66px; height: 10.66px; }
/* ไอคอน contact แบบ generic เป็น span ครอบ svg (contactBrand) — svg ข้างในต้องหดตามกล่อง
   ไม่งั้นล้น 17px ดันลิงก์ "ติดต่อแจ้งปัญหา" ลอยไม่ตรงแนวกับลิงก์ข้างเคียง */
.foot-links .line-svg svg { width: 100%; height: 100%; display: block; }
@media (max-width: 575.98px) { .foot-links .line-svg { width: 9.36px; height: 9.36px; }}

/* ═══ หน้าข้อตกลงการใช้บริการ (policy.php) ═══ */
.pol-wrap { max-width: 820px; margin: 0 auto; }
.pol-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 4px 0 24px;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.65;
}
.pol-notice b { color: var(--text); font-weight: 600; }
.pol-warn-ic { color: var(--warn-text); font-size: 1.15rem; line-height: 1.3; }
.pol-sec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.pol-sec h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.pol-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
  font-size: .82rem;
  font-weight: 700;
}
.pol-sec p { color: var(--muted); font-size: .92rem; font-weight: 300; line-height: 1.75; }
.pol-callout {
  margin-top: 12px;
  padding: 12px 15px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid var(--border-hot);
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
  font-size: .87rem;
  font-weight: 500;
  line-height: 1.65;
}
.pol-note {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 20px;
  margin-top: 22px;
}
.pol-note h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.pol-note p { color: var(--muted); font-size: .92rem; font-weight: 300; line-height: 1.7; }
.pol-thanks { margin-top: 10px; font-weight: 600 !important; color: var(--text) !important; }
.pol-copy { margin-top: 6px; font-size: .82rem !important; }

/* navbar */
.gnav-inner { display: flex; align-items: center; gap: 12px; height: 64px; max-width: 1152px; margin: 0 auto; padding: 0 16px; }
.gnav-logo { flex-shrink: 1; min-width: 0; overflow: hidden; }
.gnav-logo img { height: 32px; width: auto; max-width: 100%; }
.gnav-right { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: .875rem; }
.gnav-right .btn-ghost, .gnav-right .btn-accent { padding: 6px 16px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* มือถือ: ย่อโลโก้เล็กลงให้ปุ่ม login/สมัคร มีที่พอ ไม่ตกขอบ */
@media (max-width: 519px) { .gnav-logo img { height: 26px; } }

.avatar {
  margin-left: 4px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  background: var(--surface-2); transition: transform .15s ease;
}
.avatar:hover { transform: scale(1.05); }
.avatar:active { transform: scale(.95); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar span { font-size: .82rem; font-weight: 700; text-transform: uppercase; color: var(--accent-2-text); }

/* ═══ เมนูบัญชี (dropdown กดที่รูปโปรไฟล์) — เท่าเว็บหลัก ═══ */
.unav { position: relative; display: inline-flex; }
.unav-trig { cursor: pointer; padding: 0; }
.unav-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 90;
  width: 270px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.85);
  padding: 6px; display: none; overflow: hidden;
  /* รายการยาวเกินจอ = เลื่อนอ่านในแผงได้ (เดิมล้นออกนอกจอแล้วเลื่อนไม่ได้) */
  max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* มือถือ: กันแถบเมนูล่าง (.bnav สูง ~59px) ทับรายการท้ายแผง */
@media (max-width: 767px) {
  .unav-menu { max-height: calc(100vh - 148px); max-height: calc(100dvh - 148px); }
}
.unav-menu::-webkit-scrollbar { width: 3px; }
.unav-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); }
.unav-menu::-webkit-scrollbar-track { background: transparent; }
.unav.open .unav-menu { display: block; animation: unav-in .16s ease; }
@keyframes unav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); }}
.unav-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px 16px; }
.unav-head-av {
  width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.unav-head-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface); background: var(--surface-2); }
.unav-head-av span { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--surface); background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; color: var(--accent-2-text); text-transform: uppercase; }
.unav-head-name { font-size: 1.15rem; font-weight: 800; color: var(--text); word-break: break-all; text-align: center; }
.unav-head-credit {
  font-size: .82rem; font-weight: 700; color: var(--accent-2-text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px;
}
.unav-sep { height: 1px; background: var(--border); margin: 4px 8px; }
.unav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-lg);
  color: var(--text); font-size: .92rem; font-weight: 500; transition: background .15s;
}
.unav-item svg { width: 19px; height: 19px; flex: none; color: var(--muted); }
.unav-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.unav-item.unav-danger { color: var(--danger-text); }
.unav-item.unav-danger svg { color: var(--danger-text); }
.unav-item.unav-danger:hover { background: color-mix(in srgb, var(--danger-strong) 10%, transparent); }
/* เจ้าของสั่ง 07-28: จอที่มี "เมนูฝั่งซ้าย" (ลิ้นชัก · <1100px) เมนูรูปโปรไฟล์ไม่ต้องมีของซ้ำอีก
   → รายการที่ติดคลาส .unav-dup (ประวัติสั่งซื้อ · รีเซ็ตอุปกรณ์ · เมนูรอง · จัดการหลังบ้าน) ซ่อนทิ้ง
   เหลือของที่ลิ้นชักไม่มี: ข้อมูลส่วนตัว · ประวัติเติมเงิน · ภาษา · Geo test · ออกจากระบบ
   จอ ≥1100px ไม่มีลิ้นชัก จึงยังโชว์ครบเหมือนเดิม */
@media (max-width: 1099.98px) { .unav-dup { display: none !important; } }

/* Geo test (สตาฟเท่านั้น) — สลับจำลองผู้ชม TH/ต่างชาติผ่าน /geoset.php */
.unav-geo { cursor: default; }
.unav-geo:hover { background: transparent; }
.unav-geo > i { width: 19px; font-size: 1rem; flex: none; color: var(--warn-text); text-align: center; }
.unav-geo-label { flex: 1; font-size: .88rem; }
.unav-geo-pills { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--surface-2); }
.unav-geo-pill {
  padding: 4px 10px; border-radius: 999px; font-size: .69rem; font-weight: 800;
  color: var(--muted); transition: background .15s, color .15s;
}
.unav-geo-pill:hover { color: var(--text); }
.unav-geo-pill.is-th { background: var(--ok); color: var(--fg-on-ok); }
.unav-geo-pill.is-intl { background: var(--warn); color: var(--fg-on-warn); }
@media (max-width: 480px) { .unav-menu { width: 260px; }}

/* ── ลิ้นชักเมนู (off-canvas ซ้าย) — JS สลับ #app.drawer-open (assets/app.js) ── */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 999;
  width: min(300px, 86vw);
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 0 0 40px -8px rgba(0, 0, 0, .6);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform: translateX(-102%);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.drawer > a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: var(--radius-md);
  color: var(--text); text-decoration: none;
  font-size: .92rem; font-weight: 400; line-height: 1.2;
}
.drawer > a i { width: 18px; text-align: center; color: var(--muted); font-size: .95rem; }
.drawer > a:hover { background: var(--surface-2); color: var(--accent-text); }
.drawer > a:hover i { color: var(--accent-text); }
#app.drawer-open .drawer { transform: none; }
#app.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 16px; }

/* ── รายการเมนูในลิ้นชัก = เว็บหลัก (ไอคอนกล่องมน + ตัวหนา + ตัวที่เลือกเป็นแคปซูลสีหลัก) ── */
.drawer-menu { display: flex; flex-direction: column; gap: 4px; }
.drawer-item {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: none; background: none; cursor: pointer;
  border-radius: 12px;
  color: var(--text); text-decoration: none; text-align: left;
  font: inherit; font-size: calc(1rem * var(--btn-fs-scale, 1)); font-weight: 600; line-height: 1.25;
  transition: background .2s ease, color .2s ease;
}
.drawer-ic {                     /* ไอคอนล้วน ไม่มีกรอบ/พื้นหลัง (เจ้าของสั่ง 07-11) */
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-text);
}
.drawer-ic svg { width: 19px; height: 19px; }
.drawer-txt { flex: 1 1 auto; min-width: 0; }
.drawer-chev { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .22s ease; }
.drawer-item:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.drawer-item.active { background: var(--accent-grad); color: var(--btn-fg-on-accent); }
.drawer-item.active .drawer-ic { color: var(--btn-fg-on-accent); }
.drawer-item.active .drawer-chev { color: var(--btn-fg-on-accent); }
.drawer-trig[aria-expanded="true"] .drawer-chev { transform: rotate(180deg); }

/* แผงหมวดหมู่ใต้ "สินค้า" — แผงเดียวกับเดสก์ท็อป (.gmenu-panel/.gmp-*)
   วางแบบ absolute = ลอยทับเมนูข้างล่าง ไม่ดันรายการอื่นให้ขยับ (เท่าเว็บหลัก) */
.drawer-drop { position: relative; }
.drawer-cats {
  display: none;
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  z-index: 30;
  max-height: min(58vh, 460px);
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer-cats.is-open { display: block; animation: pop .18s ease; }
.drawer-cats .gmenu-panel {
  position: static;
  display: block;
  min-width: 0; width: 100%;
  animation: none;
}

/* ปุ่มติดต่อล่างสุด (ปักท้ายลิ้นชักเสมอ) */
.drawer-contact {
  margin-top: auto; margin-bottom: 2px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--btn-h); padding: 0 18px;
  border-radius: var(--btn-radius);
  background: var(--accent-grad); color: var(--btn-fg-on-accent);
  font-size: var(--btn-fs); font-weight: 600; text-decoration: none;
  box-shadow: var(--glow);
}
.drawer-contact:hover { filter: brightness(1.06); }
.drawer-contact .line-svg { flex: none; }
.drawer-head img { height: 28px; width: auto; }

/* hero */
.hero { padding: 16px 0 32px; }
.hero .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 11px; letter-spacing: .18em; font-weight: 500; color: var(--muted); border-radius: 999px; }
.hero h1 { font-size: 1.79rem; font-weight: 800; margin-top: 16px; } /* ~23.26px มือถือ เท่าเว็บหลัก */
.hero p { margin-top: 12px; max-width: 640px; color: var(--muted); font-weight: 300; }
@media (min-width: 640px) { .hero { padding: 32px 0; } .hero h1 { font-size: 2.55rem; }} /* ~33.15px เดสก์ท็อป */

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.sec-head h2 { font-size: 1.25rem; font-weight: 600; margin-top: 4px; }
.sec-head .btn-ghost { padding: 6px 16px; font-size: var(--btn-fs); }

/* grid การ์ด */
/* หมวดหมู่: คอลัมน์เท่าเว็บหลัก (in-cat-grid) — มือถือ 3, เดสก์ท็อป 4, จอจิ๋ว ≤280px = 2
   แอดมินตั้ง "หมวดหมู่ต่อแถว" เองได้ (หลังบ้าน → หมวดหมู่) — มาเป็น --cat-cols-* จากหน้าแรก
   ⛔ ตัวเลขที่ตั้ง = เพดาน ไม่ใช่คำสั่งบีบ: auto-fill + ขั้นต่ำ 150px กันการ์ดเล็กจนผิดสัดส่วน
   พื้นที่ไม่พอ = แสดงเท่าที่พอดีแถวละน้อยลงเอง · ไม่ตั้ง = ค่าเริ่มต้นเดิม (มือถือเพดาน 3 จากเซิร์ฟเวอร์) */
.grid { display: grid; grid-template-columns: repeat(var(--cat-cols-sm, 3), minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .grid { gap: 16px; }}
@media (min-width: 992px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(100% / var(--cat-cols-lg, 4) - 16px)), 1fr)); }}
@media (max-width: 280px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }}
.game-card { text-align: left; width: 100%; cursor: pointer; }

/* ═══ หมวดหมู่แบบ "แบนเนอร์กว้าง" (สลับได้ที่หลังบ้าน > หมวดหมู่) — token กลางล้วน ═══ */
/* แบนเนอร์ 3:1 ต้องกว้างพอให้ข้อความบนรูปอ่านออก — เพดานจากแอดมิน + ขั้นต่ำ 340px (ไม่พอ = ลดแถวเอง) */
.cat-banners { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) {
  .cat-banners { grid-template-columns: repeat(auto-fill, minmax(max(340px, calc(100% / var(--cat-cols-lg, 2) - 16px)), 1fr)); gap: 16px; }}
.cat-banner { display: flex; flex-direction: column; background: color-mix(in srgb, var(--bg) 62%, var(--surface)); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 18px; padding: 12px; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cat-banner:hover { transform: translateY(-3px); border-color: var(--border-hot); box-shadow: 0 12px 34px -14px rgba(0,0,0,.55); }
.cat-banner-img { position: relative; display: block; aspect-ratio: 3 / 1; background: color-mix(in srgb, var(--bg) 62%, var(--surface)); overflow: hidden; border-radius: 10px; }
.cat-banner-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-banner-img .ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2rem; color: var(--muted); }
.cat-banner-img .in-cat-sale-badge { position: absolute; top: 10px; left: 10px; }
.cat-banner-body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 4px 5px; }
.cat-banner-name { font-size: 1.1rem; font-weight: 600; line-height: 1.25; min-width: 0; }
.cat-banner-meta { font-size: .84rem; color: var(--muted); }
.cat-banner-meta i { font-size: .78rem; margin-right: 5px; }
.game-card .name .price { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--accent-2-text); }

/* breadcrumb / heading */

.page-title { font-size: 1.5rem; font-weight: 700; margin: 4px 0 20px; }

/* form */
.form-card { max-width: 384px; margin: 32px auto 0; }
.form-card .card { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
/* ช่องกรอก = สูงเท่าปุ่มเสมอ (--field-h ตามสไลเดอร์ในหน้าธีม) — ห้ามใส่ padding แนวตั้ง
   ไม่งั้นความสูงจริงจะเกิน token แล้ววางข้างปุ่มไม่เสมอกัน (เคยเป็น 41px ขณะปุ่ม 36px) */
.input { width: 100%; min-height: var(--field-h); padding: 0 12px; }   /* ขนาด/ฟอนต์ของช่องกรอก = กฎกลางด้านบน (.input) จุดเดียว — ห้ามใช้ font:inherit ทับ */
textarea.input { min-height: 88px; padding: 10px 12px; }
.form-card .btn-accent { padding: 0 var(--btn-pad-x); cursor: pointer; }

/* หมายเหตุ: .auth-* ทั้งหมดอยู่ในบล็อก "หน้า login / register" ท้ายไฟล์ที่เดียว
   (เดิมมี .auth-logo/.auth-or/.btn-google ค้างจากดีไซน์เก่าตรงนี้ — ลบทิ้งแล้ว ไม่มีหน้าไหนใช้) */

.hint { margin-top: 16px; text-align: center; font-size: .875rem; color: var(--muted); }
.hint a, .link { color: var(--accent-2-text); }
.hint a:hover, .link:hover { text-decoration: underline; }

/* history */
.hist-row { display: flex; align-items: center; gap: 16px; padding: 16px; margin-bottom: 12px; }

/* order / keybox */

.dl dt { color: var(--muted); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: .875rem; }

/* profile */

.pf-body { padding: 0 20px 20px; margin-top: -36px; }

.pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; margin-top: 16px; }
.pf-stats .card { padding: 12px; }
.pf-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.pf-actions a, .pf-actions button { padding: 12px; text-align: center; cursor: pointer; }

/* helpers */
.center { text-align: center; }
.muted { color: var(--muted); }
.empty { padding: 40px; text-align: center; color: var(--muted); }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mb-3 { margin-bottom: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 639px) { .hide-sm { display: none !important; }}
/* 519px: จอ ≤519 ใส่ปุ่มสมัครไม่ไหว header ล้นดันหน้ากว้างเกินจอ (ปุ่มขวาสุดของ bnav ตกขอบ) */
@media (max-width: 519px) { .hide-xs { display: none !important; } }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); }}

/* modal ส่วนที่เหลือ */
.pmodal-head .icon-btn { flex: none; }
.pmodal-title { min-width: 0; flex: 1; }
.pmodal-title b {
  display: block; font-size: calc(13px * var(--pm-scale, 1)); font-weight: 800; line-height: 1.3; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--grad-heading);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pmodal-title small { display: block; color: var(--muted); font-size: calc(9.49px * var(--pm-scale, 1)); font-weight: 500; margin-top: 2px; }
/* ปุ่มปิดหัวโมดัล — สี่เหลี่ยมมุมมน มีเส้นขอบ หมุน 90° ตอน hover (เท่าเว็บหลัก) */
.pm-close-btn {
  width: var(--btn-h); height: var(--btn-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: transparent; color: var(--muted);
  font-size: var(--btn-fs); cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pm-close-btn:hover { background: var(--surface-2); color: var(--text); transform: rotate(90deg); }

/* ═══════════════ การซื้อล่าสุด (marquee เลื่อนเอง) ═══════════════ */
.lp-wrap {
  position: relative;
  margin-top: 40px;
  padding: 18px 0 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 14px;
}
.lp-ic {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .95rem;
}
.lp-title { font-weight: 600; }
.lp-sub { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .04em; }

/* ม่านจาง ๆ ซ้าย/ขวา */
.lp-wrap::before, .lp-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 3; pointer-events: none;
}
.lp-wrap::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.lp-wrap::after { right: 0; background: linear-gradient(-90deg, var(--surface), transparent); }

.lp-viewport { overflow: hidden; touch-action: pan-y; }
.lp-track {
  display: flex;
  width: max-content;
  animation: lp-scroll 34s linear infinite;
  will-change: transform;
}
@keyframes lp-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }}
.lp-viewport:hover .lp-track { animation-play-state: paused; }

.lp-card {
  position: relative;
  flex-shrink: 0;
  width: 320px;
  margin-right: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.lp-card:first-child { margin-left: 18px; }
.lp-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hot);
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 40%, transparent);
}
.lp-img {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--radius-lg); object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface);
}
.lp-info { flex: 1; min-width: 0; }
.lp-time {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted); font-weight: 300;
}
.lp-name {
  font-weight: 600; font-size: .95rem; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-cat {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ระยะเวลา + ราคา = บรรทัดเดียวเสมอ (เจ้าของสั่งให้ราคาอยู่ข้างช่องชั่วโมง ไม่ตกล่าง) */
.lp-badges { display: flex; gap: 5px; margin-top: 7px; flex-wrap: nowrap; min-width: 0; }
.lp-badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto;
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted);
}
.lp-badge.is-price { color: var(--accent-2-text); border-color: var(--border-hot); }
.lp-ava {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: var(--accent-2-text); text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .lp-track { animation: none; }
  .lp-viewport { overflow-x: auto; }}
@media (max-width: 639px) {
  .lp-card { width: 280px; }}

/* ═══════════════ ชุมชนของเรา ═══════════════ */
.cm-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 1024px) {
  .cm-grid.has-media { grid-template-columns: 1fr 2fr; }
  .cm-grid.has-media > .cm-wide { grid-column: 1 / -1; }   /* กล่องแชทเต็มแถวล่าง */
  .cm-grid.has-media:has(> .cm-wide) > .cm-cta { align-self: stretch; }}

.cm-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: start;   /* อย่ายืดสูงเท่าคอลัมน์ media — ไม่งั้น margin-top:auto ดันปุ่มไปติดล่าง เกิดช่องว่างกลางการ์ด */
  padding: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, #5865f2 12%, var(--surface)), var(--surface) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cm-cta-ic {
  width: 56px; height: 56px;
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #5865f2, #7d86f7);
  font-size: 1.5rem;
  box-shadow: 0 10px 26px -10px rgba(88, 101, 242, .8);
}
.cm-cta h3 { margin-top: 18px; font-size: 1.35rem; font-weight: 700; }
.cm-cta p { margin-top: 10px; color: var(--muted); font-weight: 300; line-height: 1.65; }
.cm-links { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 20px; }
.cm-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border-radius: var(--btn-radius); font-weight: 700;
  font-size: var(--btn-fs);   /* เดิม inherit 1rem — ผูกสเกลข้อความในปุ่ม */
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45);   /* พื้นเป็นสีแบรนด์ตายตัว (LINE/Telegram/Discord) — ขาว+เงา อ่านออกทุกสกิน */
  transition: filter .18s ease, transform .12s ease;
}
.cm-btn:hover { filter: brightness(1.12); }
.cm-btn:active { transform: scale(.97); }
.cm-btn.is-discord { background: #5865f2; }
.cm-btn.is-line { background: #06c755; }
.cm-btn.is-telegram { background: #2aabee; }
/* ช่องทาง social เพิ่มเติม — สีแบรนด์ทางการ (tiktok/x พื้นดำ ใส่ขอบกันจมกับสกินมืด) */
.cm-btn.is-facebook { background: #1877f2; }
.cm-btn.is-instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); }
.cm-btn.is-tiktok { background: #121212; border: 1px solid rgba(255, 255, 255, .28); }
.cm-btn.is-youtube { background: #ff0000; }
.cm-btn.is-x { background: #121212; border: 1px solid rgba(255, 255, 255, .28); }

.cm-media {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.cm-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* กล่องแชท Discord (WidgetBot) — สูงคงที่เหมือนเว็บหลัก (ไม่ใช้ 16:9) */
.cm-media.is-chat { aspect-ratio: auto; height: auto; background: var(--surface); }
.cm-media.is-chat widgetbot,
.cm-media.is-chat iframe { position: static; display: block; width: 100% !important; height: 540px !important; border: 0; }
@media (max-width: 767.98px) {
  .cm-media.is-chat widgetbot,
  .cm-media.is-chat iframe { height: 480px !important; }}

/* ═══ หน้าหมวดสินค้า (ตามดีไซน์เว็บเดิม) ═══ */
/* แถวหัวหน้าร้าน: ข้อความ + ชิปหมวด อยู่บรรทัดเดียวกัน (ชิปชิดขวา) */
.sp-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -10px 0 18px;
}
.sp-subtitle {
  color: var(--muted);
  font-weight: 300;
  margin: 0;
  min-width: 0;
  font-size: 1rem;
}
@media (max-width: 479px) {
  .sp-head-row { flex-wrap: wrap; gap: 8px; }   /* จอแคบมาก: ให้ตกบรรทัดได้ ไม่บีบข้อความจนอ่านยาก */
}
.sp-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--warn) 4%, var(--surface));
  font-size: .9rem;
  margin-bottom: 18px;
}
.sp-notice-ico { color: var(--warn-text); font-size: 1.15rem; line-height: 1; }
.sp-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.sp-filter-label { font-size: .9rem; color: var(--muted); margin-right: 2px; }
.sp-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: 999px;
  border: 1px solid var(--b-pill-bd, var(--border));
  background: var(--b-pill-bg, var(--surface));
  color: var(--b-pill-fg, inherit);
  font-size: var(--btn-fs);   /* token ปุ่มกลาง */
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.sp-pill:hover { border-color: var(--border-hot); }
.sp-pill.active {
  background: var(--b-pill-on-bg, var(--accent));
  border-color: transparent;
  color: var(--b-pill-on-fg, var(--fg-on-accent));
  font-weight: 600;
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
/* จำนวนช่อง/แถว — การ์ดใหญ่ขึ้น (เจ้าของสั่ง 07-12: เดิม 2/3/4 แล้วดูเบียด)
   มือถือคง 2 ช่องเสมอ (สั่งไว้ชัด) เพิ่มแค่ช่องไฟ · แท็บเล็ต 3→2 · เดสก์ท็อป 4→3
   แอดมินตั้ง "สินค้าต่อแถว" เองได้ (หลังบ้าน → สินค้า) — ค่ามาเป็น --sp-cols-* จาก SpGrid
   (จอเล็กบีบเพดานให้เอง: มือถือไม่เกิน 2 · แท็บเล็ตไม่เกิน 3) ไม่ตั้ง = ค่าเริ่มต้นเดิม */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(var(--sp-cols-sm, 2), minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 640px) {
  .sp-grid { grid-template-columns: repeat(var(--sp-cols-md, 2), minmax(0, 1fr)); gap: 20px; }}
@media (min-width: 1024px) {
  .sp-grid { grid-template-columns: repeat(var(--sp-cols-lg, 3), minmax(0, 1fr)); gap: 22px; }}
.sp-grid.is-single { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
.sp-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.sp-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hot);
  box-shadow: var(--glow);
}
.sp-card:active { transform: translateY(-1px) scale(.99); }
.sp-card.is-hidden { display: none; }
/* ── การ์ดสินค้า "ปิดปรับปรุง" = เว็บหลัก 1:1 ─────────────────────────────
   รูปสินค้ายังเห็นเต็ม ๆ (เบลอเบา ๆ ~10%) ไม่มีฟิล์มมืด/ไม่ทำสีซีด
   มีแค่เฟืองหมุน + คำว่า MAINTENANCE ที่สเกลตามขนาดการ์ด (container query units)
   เลเยอร์ pointer-events:none → กดซื้อได้ตามปกติ (ระบบเตือนตอนกดยืนยันแทน) */
.sp-card.is-maint .sp-img img {
  filter: blur(2px) brightness(.92);
  transform: scale(1.04);          /* กันขอบเบลอโปร่ง */
}
.sp-maint-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  pointer-events: none;
  line-height: 1;
  container-type: size;            /* ให้ชิ้นส่วนข้างในสเกลตามขนาดรูป ไม่ล้นขอบ */
  overflow: hidden;
}
.sp-maint-stack { display: flex; flex-direction: column; align-items: center; gap: 6cqh; }
.sp-maint-ico { display: flex; align-items: center; justify-content: center; }
.mi-gear {
  width: min(70cqh, 48cqw); height: min(70cqh, 48cqw);
  color: #0d0d0d;   /* เฟืองสีดำ (ตามเดิม) — SVG ใช้ currentColor */
  /* เฟืองดำวางบนรูปมืด → halo ขาวบางให้เห็นขอบชัด (ค่าเดียวกับเว็บหลัก) */
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .85)) drop-shadow(0 0 10px rgba(255, 255, 255, .35));
}
/* ป้าย MAINTENANCE บนรูปสินค้า — แดงเด่น อ่านออกทุกพื้นหลัง (ตัวหนา + ขอบดำ + เรืองแสงแดง) */
.sp-maint-eyebrow {
  font-size: clamp(11px, 16cqh, 36px);
  font-family: 'Anton', var(--font-display), sans-serif;   /* ฟอนต์หนาจริง (ไม่ใช่ synthetic bold) */
  font-weight: 400;                                        /* Anton หนามาในตัวอยู่แล้ว */
  letter-spacing: .2em; margin-right: -.2em; text-transform: uppercase;
  color: #ff2b2b;
  -webkit-text-stroke: .5px rgba(0, 0, 0, .55);
  text-shadow:
    0 2px 4px rgba(0, 0, 0, .9),
    0 0 10px rgba(255, 43, 43, .85),
    0 0 22px rgba(255, 0, 0, .55);
  white-space: nowrap;
  animation: maint-glow 1.8s ease-in-out infinite;
}
@keyframes maint-glow {
  0%, 100% { text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 0 10px rgba(255,43,43,.85), 0 0 22px rgba(255,0,0,.55); }
  50%      { text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 0 16px rgba(255,43,43,1),   0 0 34px rgba(255,0,0,.75); }}
@media (prefers-reduced-motion: reduce) { .sp-maint-eyebrow { animation: none; }}
@media (prefers-reduced-motion: reduce) {
  .mi-gear animateTransform { display: none; }}
.sp-img {
  position: relative;
  /* 1280/833 = สัดส่วนจริงของรูป catalog สินค้าทุกตัว — กรอบตรงรูปพอดี ไม่ครอปหัวท้าย
     (เดิม 16:9 ครอปทิ้ง ~14% ข้อความบนรูปโดนตัด — เจ้าของทัก 07-24 "รูปควรแสดงได้เต็มๆ") */
  aspect-ratio: 1280 / 833;
  background: var(--surface-2);
}
.sp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.sp-img .ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; }
.sp-card:hover .sp-img img { transform: scale(1.04); }
.pf-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: calc(.72rem * var(--font-scale-sm, 1));
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(8, 5, 6, .72);   /* ป้ายวางทับ "รูปสินค้า" → ต้องมืดเสมอทุกสกิน (ไม่ผูกกับพื้นเว็บ) */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .12);
}
.pf-and { color: #3ddc84; }   /* บนชิปมืด — คงสีเขียว Android */
.pf-ios { color: #f4eef0; }   /* บนชิปมืด — ขาว */
.sp-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  flex: 1;                 /* ยืดเต็มความสูงการ์ด — grid ทำให้การ์ดสูงเท่ากัน */
  padding: 16px 16px 18px; /* เนื้อในการ์ดหายใจขึ้น (คู่กับกริดที่ลดจำนวนช่อง) */
  text-align: center;
}

/* ปิดปรับปรุง = ชุดสี danger เท่าเว็บหลัก (.sp-status.is-off ใช้ danger-soft/strong/line) */

/* ═══ ENGINE: จุดสถานะ (.st-dot) + tooltip กลาง ([data-tip]) — ใช้ซ้ำได้ทุกหน้า ═══
   จุดเล็กแทนป้ายเต็มใบ: ประหยัดพื้นที่ในการ์ด แต่ยังสื่อสถานะ + ชี้/โฟกัสแล้วขึ้นคำอธิบาย
   สีอ้าง token → เปลี่ยนตามสกิน/สีที่แอดมินตั้งเองอัตโนมัติ */
.st-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0; display: inline-block; cursor: help;
}
/* 2026-07-29 — จุดสถานะบนมือถือ: ตัวจุดกว้าง 9px = เป้าแตะเล็กเกินนิ้ว และมือถือไม่มี hover
   จึงไม่มีทางเห็นคำอธิบายเลย  แก้ 2 ชั้น:
     1) ::before โปร่งใส = ขยาย "เป้าแตะ" เป็น 34px โดยจุดที่ตาเห็นยังเท่าเดิม (ไม่ดันเลย์เอาต์)
     2) แตะแล้ว app.js ใส่คลาส .is-tip-on → โชว์คำอธิบาย (กฎรวมอยู่ที่ [data-tip] ด้านล่าง)
   ⛔ ไม่เพิ่ม transition/animation ใหม่ */
.st-dot[data-tip]::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; transform: translate(-50%, -50%);
  border-radius: 50%;
}
.st-dot.is-ok    { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); animation: pulse-dot 1.8s infinite; }
.st-dot.is-out   { background: var(--danger-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-strong) 20%, transparent); }
.st-dot.is-maint { background: var(--danger-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-strong) 22%, transparent); }
.st-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* tooltip กลาง: ใส่ data-tip="ข้อความ" ที่ element ไหนก็ได้ */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px; border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
  font-size: calc(.72rem * var(--font-scale-sm, 1));
  font-weight: 600; white-space: nowrap; line-height: 1.4;
  opacity: 0; pointer-events: none; z-index: 20;
  transition: opacity .15s ease, transform .15s ease;
}
/* .is-tip-on = เปิดด้วยการ "แตะ" บนจอสัมผัส (assets/app.js ใส่/ถอดให้ — 2026-07-29) */
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip].is-tip-on::after { opacity: 1; transform: translateX(-50%); }
/* บนมือถือข้อความยาว ("พร้อมใช้งาน · เหลือ N ชิ้น") ถ้า nowrap จะทะลุขอบจอ → ให้ตัดบรรทัดได้ */
[data-tip].is-tip-on::after { white-space: normal; width: max-content; max-width: min(66vw, 250px); text-align: center; }
@media (prefers-reduced-motion: reduce) { .st-dot.is-ok { animation: none; }}

/* ── ชื่อสินค้า = เว็บหลัก 1:1 (.sp-name-box/.sp-name)
   กล่องสูงคงที่ → ทุกการ์ดเส้นคั่นอยู่ระดับเดียวกัน; ชื่อบรรทัดเดียวเสมอ
   (nowrap + overflow hidden + JS fitSpName ย่อทีละ 0.5px ใน assets/app.js)
   ขนาดฟิกเป็น px ตามค่าที่เว็บหลักเรนเดอร์จริง (root 13px/12px × font-scale 1.4) ── */
.sp-name-box {
  position: relative;
  text-align: center;
  align-self: stretch;   /* .sp-body มี align-items:center → ต้อง stretch ไม่งั้นกล่องกว้างตามชื่อแล้วล้นการ์ด */
  width: 100%;
  min-width: 0;
  padding: 8px 6px 12px;
  margin-bottom: 12px;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;   /* เว้นระยะ "จุดสถานะ" กับชื่อสินค้า */
}
.sp-name-box::after {
  content: '';
  position: absolute;
  left: -14px; right: -14px; bottom: 0;
  height: 2px;
  /* ปลายเรียวจางหายไปในพื้นดำ (เจ้าของเคาะ 07-11) — ไม่ใช่เส้นทึบตัดขอบการ์ด */
  background: linear-gradient(90deg, transparent 0%, var(--accent) 26%, var(--accent-2) 74%, transparent 100%);
  opacity: .9;
}
.sp-name {
  flex: 1 1 auto;   /* แบ่งพื้นที่ที่เหลือหลังหัก "จุดสถานะ" — เดิม width:100% จะดันจุดตกขอบ */
  min-width: 0;   /* flex item: ถ้าไม่ใส่ min-width:auto จะยืดตามข้อความ nowrap → JS วัดว่า "ไม่ล้น" แล้วไม่ย่อ */
  font-size: clamp(22.75px, 19.66px + 1.19vw, 27.3px); /* = var(--font-2xl) ของเว็บหลัก */
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow: hidden;
  background: linear-gradient(100deg, var(--text) 30%, var(--accent) 78%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (max-width: 575.98px) {
  .sp-name-box { padding: 6px 2px 10px; margin-bottom: 10px; min-height: 46px; }
  .sp-name-box::after { left: -10px; right: -10px; height: 1.5px; }
  .sp-name { font-size: clamp(15.46px, 14.45px + 0.476vw, 17.64px); } /* = var(--font-lg) ของเว็บหลัก */
}
.sp-buy {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;        /* ดันปุ่มชิดล่างสุด → ปุ่มทุกใบอยู่ระดับเดียวกัน */
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  font-size: var(--btn-fs);   /* token ปุ่มกลาง — ทุกปุ่มเท่ากันจาก knob ความสูง/ขนาดข้อความ */
  font-weight: 600;
  border-radius: var(--radius-lg);  /* บล็อกเต็มความกว้าง (ao-btn--block) แทน pill แคบ */
  /* ไม่ตั้งสีปุ่มซื้อเอง = ตามปุ่มหลัก (มาร์กอัปใช้ .btn-accent ร่วม) */
  background: var(--b-buy-bg, var(--b-primary-bg, var(--accent)));
  color: var(--b-buy-fg, var(--b-primary-fg, var(--fg-on-accent)));
}

/* ═══ modal ซื้อ — สไตล์ตามเว็บเดิม ═══ */
/* รูปสินค้า: เต็มความกว้าง + contain (ไม่ครอป สเกลเท่ากันทุกสินค้า) บนพื้นรูปเดียวกันเบลอแบบเว็บเดิม */
.pm-hero-wrap {
  position: relative;
  margin: calc(-1 * var(--pm-body-pt)) calc(-1 * var(--pm-body-px)) 14px;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  cursor: zoom-in;
}
.pm-hero-wrap::before {
  content: "";
  position: absolute;
  inset: -24px;
  background-image: var(--pm-hero-img);
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(.55) saturate(1.15);
}
.pm-hero-wrap .pmodal-hero {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-height: 240px;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: none;
}
@media (max-width: 480px) {
  .pm-hero-wrap .pmodal-hero { max-height: 190px; }}
.pm-hero-wrap .pf-badge { top: 12px; right: 12px; z-index: 2; }
/* ป๊อบอัพสินค้าที่ปิดปรับปรุง = รูปเบลอเบา ๆ + เฟืองหมุน + MAINTENANCE เหมือนการ์ดหน้าร้านเป๊ะ
   (overlay มาจาก maint_overlay() ตัวเดียวกัน — สไตล์ชิ้นส่วนอยู่ที่ .sp-maint-* ด้านบน) */
.pm-hero-wrap.is-maint .pmodal-hero { filter: blur(2px) brightness(.92); transform: scale(1.04); }
.pm-hero-wrap .sp-maint-overlay { z-index: 3; }
.pm-err {
  color: var(--danger-text);
  font-size: calc(10.92px * var(--pm-scale, 1));
  text-align: center;
  margin-bottom: 10px;
}

/* ═══════════════ หน้าประวัติการสั่งซื้อ (hs-*) — โครงตามเว็บหลัก ปรับ token ดำแดง ═══════════════ */
.hs-hero { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.hs-hero-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hs-hero-txt { min-width: 0; }
.hs-user-av {
  display: inline-block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  flex: none; padding: 2px; background: var(--accent-grad);
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 30%, transparent);
}
.hs-user-av img, .hs-user-av .hs-av-fb {
  width: 100%; height: 100%; object-fit: cover; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface-2);
  font-weight: 700; color: var(--accent-2-text); text-transform: uppercase; font-size: 1.15rem;
}
.hs-user-av:hover { transform: scale(1.06) rotate(-3deg); box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--accent) 40%, transparent); }
.hs-hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.hs-hero-title {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.025em; margin: 0 0 6px; line-height: 1.2;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hs-hero-sub { font-size: .95rem; color: var(--muted); margin: 0; font-weight: 300; }
.hs-count-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px; padding: 9px 18px; font-size: .875rem; font-weight: 700;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.hs-count-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent); }

.hs-notice {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 18px;
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.hs-notice-mark { width: 4px; align-self: stretch; border-radius: 999px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); flex-shrink: 0; min-height: 24px; }
.hs-notice-body { flex: 1; }
.hs-notice-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }
.hs-notice-text { font-size: .95rem; color: var(--muted); line-height: 1.55; margin: 0; font-weight: 300; }

/* ── แบนเนอร์ส่งของ async (history) — คู่กับ #hs-deliver-note ── */
.hs-deliver-note {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: .9rem;
}
.hs-deliver-note .spin { border-color: color-mix(in srgb, var(--accent) 35%, transparent); border-top-color: var(--accent); }
.hs-deliver-fail {
  border-color: color-mix(in srgb, #dc2626 35%, var(--border));
  background: color-mix(in srgb, #dc2626 8%, var(--surface));
}

.hs-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 18%, transparent), 0 2px 6px -3px rgba(0, 0, 0, .4);
}
.hs-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent-grad); opacity: .85; z-index: 2; }
.hs-scroll { overflow-x: auto; }
.hs-table { width: 100%; border-collapse: collapse; }
.hs-table thead tr { background: color-mix(in srgb, var(--accent) 4%, transparent); border-bottom: 1px solid var(--border); }
.hs-table thead th { padding: 14px 20px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; text-align: left; }
.hs-table tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); transition: background .25s ease; }
.hs-table tbody tr:last-child { border-bottom: none; }
.hs-table tbody tr:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, color-mix(in srgb, var(--accent-2) 4%, transparent) 100%); }
.hs-table tbody td { padding: 16px 20px; font-size: .95rem; vertical-align: middle; }
.hs-idx { color: var(--muted); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; width: 50px; }
.hs-product { font-weight: 700; letter-spacing: -.01em; }
.hs-date { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.hs-act { text-align: right; }
.hs-price-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: .875rem; font-variant-numeric: tabular-nums; }
.hs-price-full { color: var(--muted); font-weight: 600; }
.hs-price-old { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 500; }
.hs-price-final { color: var(--accent-text); font-weight: 800; font-size: .95rem; }
.hs-price-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-grad); color: var(--fg-on-accent); border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);
}
.hs-view {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--text); font-size: .875rem; font-weight: 600; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.hs-view:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); }
.hs-view:active { transform: scale(.96); }

.hs-empty { text-align: center; padding: 64px 20px; color: var(--muted); }
.hs-empty-icon {
  width: 56px; height: 56px; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.5rem;
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.hs-empty-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: 4px; letter-spacing: -.015em; }
.hs-empty-sub { font-size: .95rem; color: var(--muted); margin-bottom: 18px; font-weight: 300; }
.hs-empty-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border-radius: 999px;   /* token ปุ่มกลาง */
  background: var(--accent-grad); color: var(--fg-on-accent) !important; font-size: var(--btn-fs); font-weight: 700;
  box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .25s ease, filter .25s ease, box-shadow .3s ease;
}
.hs-empty-cta:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 22px -5px color-mix(in srgb, var(--accent) 45%, transparent); }

@media (max-width: 991.98px) { .hs-hero-title { font-size: 1.7rem; }}
@media (max-width: 575.98px) {
  .hs-hero { margin-bottom: 18px; }
  .hs-hero-title { font-size: 1.4rem; }
  .hs-user-av { width: 52px; height: 52px; }
  .hs-notice { padding: 12px 14px; gap: 12px; border-radius: var(--radius-xl); margin-bottom: 18px; }
  .hs-notice-text { font-size: .875rem; }
  .hs-card { border-radius: var(--radius-xl); }
  /* ตาราง → การ์ดกริดบนมือถือ (แบบเว็บหลักเป๊ะ) */
  .hs-scroll { overflow: visible; }
  .hs-table { display: block; min-width: 0; width: 100%; }
  .hs-table thead { display: none; }
  .hs-table tbody { display: block; width: 100%; }
  .hs-table tbody tr {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "prod btn" "date btn";
    align-items: center; column-gap: 12px; row-gap: 3px;
    padding: 14px 16px; width: 100%;
  }
  .hs-table tbody tr:hover { background: var(--surface-2); }
  .hs-table tbody td { display: block; padding: 0; border: none; text-align: left; min-width: 0; width: auto; }
  .hs-table tbody td.hs-idx { display: none; }
  .hs-table tbody td:nth-child(2) { grid-area: prod; }
  .hs-product { font-size: 1rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
  .hs-table tbody td:nth-child(3) { grid-area: date; }
  .hs-date { font-size: 11px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .hs-date::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); display: inline-block; flex-shrink: 0; }
  .hs-table tbody td:nth-child(4) { grid-area: btn; align-self: center; text-align: right; }
  .hs-view { padding: 7px 14px; font-size: .82rem; }
  .hs-empty { padding: 44px 18px; }
  .hs-empty-icon { width: 42px; height: 42px; font-size: 1.2rem; }}

/* กัน min-content บวมจากคำไทยยาวไม่มีช่องว่าง (ดันทั้งหน้าเกินจอมือถือ) */
.hs-hero-txt, .hs-notice-body { min-width: 0; }
.hs-hero-eyebrow, .hs-hero-title, .hs-hero-sub,
.hs-notice-text, .hs-empty-title, .hs-empty-sub, .hs-product { overflow-wrap: anywhere; }

/* ═══════════ หัวเว็บ "แถบเดียว" (โลโก้ + เมนู + ปุ่มขวา อยู่แถวเดียวกัน) ═══════════
   เจ้าของสั่ง 07-27 (อ้างแบบแถบเมนูร้าน SyncX): ไอคอนสีแบรนด์ ตัวหนังสือสว่าง เว้นช่องโปร่ง
   ⛔ 07-28 เจ้าของสั่งเพิ่ม: "ย่อจอแล้วต้องเหมือนขยายเต็ม ลบคลาสเก่าออกไปเลย"
   → แถวเมนูเก่า 2 แถว (.gmenu) ถูกลบทั้ง markup + CSS แล้ว เหลือแถบเดียวแบบนี้แบบเดียว
   ใช้ตั้งแต่ ≥1100px (วัดจริง 07-28: แคบกว่านี้เมนูไม่พอที่ ต้องใช้ลิ้นชักแทน) */
.gnav-bar, .gnav-line { display: none; }
@media (min-width: 1100px) {
  .gnav-bar {
    display: flex; align-items: center; gap: 12px;
    margin-left: 26px; min-width: 0; flex: 0 1 auto;
  }
  .gnav-right { padding-left: 12px; }
  .menu-btn { display: none; }                             /* จอนี้มีเมนูบนแถบแล้ว ไม่ต้องใช้ลิ้นชัก */
  /* แถบเดียวต้องใส่ทั้งเมนู+ปุ่มขวาในแถวเดียว → ให้หัวเว็บกว้างกว่าเนื้อหา (เนื้อหายัง 1152) */
  .gnav-inner { max-width: min(1360px, 100%); }
  .gnav-spacer { height: 65px; }                           /* หัวเว็บเหลือแถวเดียว */

  /* ไอคอนสีแบรนด์ + ตัวหนังสือสว่าง (แบบต้นแบบ) */
  /* ขนาดคงที่ (ไม่โตตาม vw เหมือนแถวล่าง) = คำนวณที่ว่างบนแถบได้แน่นอน ไม่เบียดปุ่มขวา */
  .gnav-bar .gmenu-item {
    height: 42px; padding: 0 10px; border-radius: var(--radius-lg); gap: 8px;
    font-size: calc(0.95rem * var(--btn-fs-scale, 1));
  }
  .gnav-bar .gmenu-item svg:not(.chev) { width: 18px; height: 18px; }
  /* สีไอคอน = โทเคนสีแบรนด์ "แบบตัวอักษร" (--accent-text) → เอนจินธีมปรับความเข้มให้อ่านออก
     ทั้งสกินมืดและสกินสว่างอัตโนมัติ ⛔ห้ามใส่สีดิบ */
  .gnav-bar .gmenu-item svg:not(.chev) { color: var(--accent-text); }
  .gnav-bar .gmenu-item.active svg:not(.chev) { color: var(--accent-text); }
  .gnav-bar .gmenu-item.active::after { bottom: -11px; }   /* ขีดใต้ให้ชิดขอบล่างแถบ */
  /* พื้นเมนูที่เลือก/ชี้ = ทินต์สีแบรนด์ (เดิมเป็นขาว 5% ตายตัว = สกินสว่างมองไม่เห็น) */
  .gnav-bar .gmenu-item.active { background: color-mix(in srgb, var(--accent) 13%, transparent); }
  .gnav-bar .gmenu-item:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }

  /* ปุ่ม LINE อยู่ท้ายแถบเมนู (ถัดจาก "จัดการหลังบ้าน") · ช่องค้นหาเปลี่ยนเป็นปุ่มแว่น */
  .gnav-bar .gnav-line { display: inline-flex; height: 36px; flex: 0 0 auto; }
  .gnav:not(.gnav--guest) .gsearch { display: none; }
  .gnav:not(.gnav--guest) .search-btn { display: inline-flex; }
  .msearch { top: 60px; left: auto; right: 16px; transform: translate(0, -6px); }
  .search-open .msearch { transform: translate(0, 0); }}
/* ⛔ เจ้าของสั่ง (ย้ำ 07-28): ปุ่ม LINE ต้องมีข้อความ "แจ้งปัญหา & ติดต่อเรา" ทุกความกว้าง
   ห้ามยุบเหลือไอคอนกลมอีก — เดิมช่วง 1280–1360px ซ่อนข้อความทิ้งเพราะที่ไม่พอ
   ทางออก: ช่วงนี้บีบระยะห่าง/ขนาดตัวอักษรเมนูลงแทน (วัดจริง 07-28 บน demo.renx.cloud:
   เมนู 6 รายการเหลือที่ว่าง 141px · 7 รายการเหลือ 48px · ไม่มี overflow) */
@media (min-width: 1100px) and (max-width: 1359.98px) {
  .gnav-bar { gap: 5px; margin-left: 12px; }
  .gnav-bar .gmenu-item { padding: 0 5px; gap: 5px; font-size: calc(0.86rem * var(--btn-fs-scale, 1)); }
  .gnav-bar .gmenu-item svg:not(.chev) { width: 16px; height: 16px; }
  .gnav-bar .gnav-line { padding: 0 9px; gap: 5px; font-size: calc(0.82rem * var(--btn-fs-scale, 1)); }
  .gnav-bar .gnav-line .line-svg { width: 15px; height: 15px; }
  .gnav-right { padding-left: 8px; }
}

/* 1100–1280px: บีบอีกขั้น (เมนู 7 รายการ + ปุ่ม LINE เต็มข้อความ ยังต้องอยู่ครบในแถวเดียว) */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .gnav-bar { gap: 3px; margin-left: 8px; }
  .gnav-bar .gmenu-item { padding: 0 3px; gap: 4px; font-size: calc(0.8rem * var(--btn-fs-scale, 1)); }
  .gnav-bar .gmenu-item svg:not(.chev) { width: 15px; height: 15px; }
  .gnav-bar .gnav-line { padding: 0 8px; gap: 4px; font-size: calc(0.78rem * var(--btn-fs-scale, 1)); }
  .gnav-bar .gnav-line .line-svg { width: 14px; height: 14px; }
  .gnav-right { padding-left: 6px; }
}

/* 768–1100px: ไม่มีที่พอใส่เมนูบนแถบ → ใช้ปุ่มแฮมเบอร์เกอร์ + ลิ้นชัก (เมนูชุดเดียวกับบนแถบ)
   ⛔ ห้ามเอาแถวเมนูที่ 2 กลับมาแทน (เจ้าของสั่ง 07-28) */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .menu-btn { display: inline-flex; }
}

/* ═══════════════ หน้ารายละเอียดออเดอร์ (od-*) — โครงตามเว็บหลัก ปรับ token ดำแดง ═══════════════ */
.od-wrap { max-width: 720px; margin: 0 auto; }

.od-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .875rem; color: var(--muted); margin-bottom: 16px;
  transition: color .15s ease;
}
.od-back:hover { color: var(--text); }

/* ── Hero ── */
.od-hero { margin-bottom: 22px; }
.od-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.od-hero-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.od-hero-text { flex: 1; min-width: 0; }
.od-hero-title {
  font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 6px; line-height: 1.2;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.od-hero-title .od-hero-name {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.od-hero-id {
  font-size: .875rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); padding: 3px 10px; border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.od-hero-sub { font-size: .95rem; color: var(--muted); margin: 0; font-weight: 300; overflow-wrap: anywhere; }
.od-support {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: .875rem; font-weight: 600; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.od-support:hover { border-color: color-mix(in srgb, #06c755 55%, var(--border)); background: color-mix(in srgb, #06c755 8%, var(--surface)); }
.od-support:active { transform: scale(.97); }

/* ── Card ── */
.od-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 16px; }
.od-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 16px 20px 0; margin: 0;
}
.od-card-body { padding: 12px 20px 20px; }

/* ── แถวข้อมูล ──
   กล่อง "ข้อมูลการสั่งซื้อ" = "ตัวอักษรรอง" ของ engine (แอดมินคุมที่หน้าธีม → กล่องปรับขนาดตัวอักษร) */
.od-rows { display: grid; gap: 1px; background: color-mix(in srgb, var(--border) 60%, transparent); border-radius: var(--radius-lg); overflow: hidden; }
.od-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); padding: 8px 14px; font-size: calc(.95rem * var(--font-scale-sm, 1)); line-height: 1.35;
}
/* กรอบ "ข้อมูลการสั่งซื้อ" กระชับกว่าการ์ดอื่น — เจ้าของสั่งย่อ (กล่องนี้เท่านั้น ผ่าน :has(.od-rows)) */
.od-card:has(.od-rows) .od-section-title { padding-top: 12px; }
.od-card:has(.od-rows) .od-card-body { padding: 8px 20px 14px; }
.od-row-label { color: var(--muted); font-weight: 500; flex-shrink: 0; }
.od-row-val { font-weight: 600; text-align: right; word-break: break-word; min-width: 0; }
.od-row-val.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }
.od-row-val .od-price { font-size: calc(1.05rem * var(--font-scale-sm, 1)); letter-spacing: -.01em; }

/* ราคาแบบมีส่วนลด — บรรทัดเดียว: ราคาเดิม · ราคาสุทธิ · ป้ายส่วนลด · ประหยัด (เจ้าของสั่งย่อ ไม่ stack แนวตั้ง) */
.od-price-stack { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 3px 8px; line-height: 1.2; }
.od-price-old { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; font-size: calc(.875rem * var(--font-scale-sm, 1)); font-weight: 500; font-variant-numeric: tabular-nums; }
.od-price-final { color: var(--ok-text); font-weight: 700; font-size: calc(1.05rem * var(--font-scale-sm, 1)); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.od-price-tag {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px; padding: 2px 9px;
  font-size: calc(11px * var(--font-scale-sm, 1)); font-weight: 700; letter-spacing: .02em;
}
.od-price-save { font-size: calc(11px * var(--font-scale-sm, 1)); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* สถานะ */
.od-status { display: inline-flex; align-items: center; gap: 7px; font-size: calc(.875rem * var(--font-scale-sm, 1)); font-weight: 600; }
.od-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); flex-shrink: 0;
}

/* ── กล่องคีย์ ── */
.od-keys {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem; line-height: 1.7; word-break: break-all; margin-bottom: 12px;
}
.od-key-actions { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
/* ปุ่มหน้าออเดอร์ยืดเต็มความกว้างการ์ด — 1 ปุ่ม = เต็มแถว, 2 ปุ่ม = แบ่งครึ่ง (กดง่าย/อ่านง่ายกว่าปุ่มเล็ก) */
.od-key-actions .od-btn-soft { flex: 0 0 auto; width: 100%; }
/* เดสก์ท็อป/แท็บเล็ต: 2 ปุ่มแบ่งครึ่งเต็มแถว (มือถือแนวตั้งอยู่แล้ว จึงไม่ใช้ flex-basis
   — basis ในแนว column = ความสูง ทำให้ปุ่มบวมทั้งจอ) */
@media (min-width: 576px) {
  .od-key-actions .od-btn-soft { flex: 1 1 220px; width: auto; }
}
/* ลิสต์ดาวน์โหลดเป็นแนวตั้ง — ห้ามใช้ flex-basis (จะกลายเป็นความสูง ปุ่มบวม) ใช้ stretch พอ */
.od-dl-list .od-btn-soft { flex: 0 0 auto; width: 100%; }
.od-btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border-radius: var(--btn-radius);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--btn-fg); font-size: var(--btn-fs); font-weight: 600; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.od-btn-soft:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.od-btn-soft:active { transform: scale(.97); }

/* ── กล่องวิธีใช้ + ดาวน์โหลด ── */
/* กล่อง "วิธีการใช้งาน" = "ตัวอักษรรอง" ของ engine (แอดมินคุมที่หน้าธีม → กล่องปรับขนาดตัวอักษร)
   เดิมใช้ .95rem ตายตัว จึงใหญ่เท่าเนื้อหาหลักและปรับตามสไลเดอร์ตัวรองไม่ได้ */
.od-help {
  background: var(--surface-2); border-radius: var(--radius-lg); padding: 14px 16px;
  font-size: calc(.95rem * var(--font-scale-sm, 1)); line-height: 1.7; overflow-wrap: anywhere;
}
.od-dl-list { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.od-dl-list.has-divider { margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }

/* ── ไม่พบรายการ ── */
.od-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-xl); padding: 60px 20px; text-align: center; }
.od-empty-icon { font-size: 2rem; margin-bottom: 12px; opacity: .5; }
.od-empty-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
.od-empty-sub { font-size: .95rem; color: var(--muted); }

/* ── คีย์แบบแยกฟิลด์ตาม products.pattern (eml:psw ฯลฯ) — คู่กับ order.php ── */
.od-kv-row {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 10px;
  align-items: center; padding: 6px 0;
}
.od-kv-row:not(:last-child) { border-bottom: 1px dashed var(--border); }
.od-kv-key {
  color: var(--muted); font-weight: 600; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.od-kv-val { color: var(--text); font-weight: 500; word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.od-kv-copy {
  border: 0; background: transparent; cursor: pointer; font-size: 1rem;
  padding: 2px 6px; border-radius: var(--radius-md); opacity: .7;
}
.od-kv-copy:hover { opacity: 1; background: color-mix(in srgb, var(--text) 8%, transparent); }
@media (max-width: 520px) { .od-kv-row { grid-template-columns: 1fr auto; } .od-kv-key { grid-column: 1 / -1; }}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .od-hero { margin-bottom: 18px; }
  .od-hero-title { font-size: 1.25rem; }
  .od-hero-sub, .od-back { font-size: .82rem; }
  .od-support { height: 34px; padding: 0 14px; font-size: .82rem; }
  .od-section-title { padding: 14px 16px 0; }
  .od-card-body { padding: 10px 16px 16px; }
  .od-row { padding: 7px 12px; font-size: calc(.875rem * var(--font-scale-sm, 1)); }   /* ตัวอักษรรอง (ต้องคูณที่นี่ด้วย ไม่งั้นมือถือทับกฎบน) · padding ย่อตามคำสั่งเจ้าของ */
  .od-card:has(.od-rows) .od-card-body { padding: 7px 16px 12px; }
  .od-keys { padding: 12px 14px; font-size: .875rem; }
  .od-key-actions { flex-direction: column; align-items: stretch; }
  .od-key-actions .od-btn-soft, .od-dl-list .od-btn-soft { flex: 0 0 auto; width: 100%; justify-content: center; }
  .od-help { padding: 12px 14px; font-size: calc(.875rem * var(--font-scale-sm, 1)); }   /* ตัวอักษรรอง (ต้องคูณที่นี่ด้วย ไม่งั้นมือถือทับกฎบน) */
}

/* ป้ายแพลตฟอร์มใน hero ออเดอร์ — pf-badge ปกติเป็น absolute (ของการ์ดสินค้า) ต้องคืนเป็น inline */
.od-hero-title .pf-badge { position: static; top: auto; right: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   โมดัลซื้อ — พอร์ต 1:1 จากเว็บหลัก (ajax/modal_purchase.php) แปลง token→beta
   Global Engine: สไตล์อยู่กลางที่นี่ที่เดียว, app.js แค่พ่นโครง class เดียวกัน
   ═══════════════════════════════════════════════════════════════════════ */
/* หมายเหตุใต้ hero */
.pm-notice {
  display: flex; align-items: flex-start; gap: 8px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 14px;
  font-size: calc(10.14px * var(--pm-scale, 1)); color: var(--muted); line-height: 1.5;
}
.pm-notice b { color: var(--text); font-weight: 700; }
.pm-notice-ic { color: var(--warn-text); line-height: 1.3; flex: none; }

/* คำอธิบายสินค้า — มินิมอล: ข้อความล้วน ไม่มีกล่อง/ไม่มีเฟดทับ
   ย่อด้วย line-clamp 4 บรรทัด (ไม่มีอะไรมาบังตัวหนังสือ) แล้ววาง "อ่านเพิ่มเติม" เป็นลิงก์ใต้ข้อความ */
.pm-desc-wrap { position: relative; margin-bottom: 16px; }
.pm-desc {
  font-size: calc(11.44px * var(--pm-scale, 1));
  color: var(--muted);
  /* line-height เป็น px คงที่ (ไม่ใช่ตัวคูณ) — ข้อความมีอิโมจิ ถ้าไม่ล็อก บรรทัดที่มีอิโมจิ
     จะสูงกว่าเพื่อน แล้วตอนย่อจะโดนตัดครึ่งบรรทัด (เจ้าของเจอ: "มันบัง")
     22px = เผื่อสระบน/วรรณยุกต์/สระล่างของไทย ไม่ให้โดนกล่องบรรทัดตัดหัวตัดหาง */
  line-height: calc(22px * var(--pm-scale, 1));
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  white-space: pre-line;
  max-height: none;
  overflow: visible;
}
/* ย่ออยู่ = ตัดที่ 4 บรรทัดพอดี (ไม่มีครึ่งบรรทัดโผล่ ไม่มีเฟดทับ)
   ⚠ ต้องล็อก max-height เท่ากับ 4 บรรทัดด้วย — lamp อย่างเดียวไม่พอเมื่อข้อความมี
   การขึ้นบรรทัดเอง (white-space: pre-line) จะมีบรรทัดที่ 5 โผล่มาครึ่งบรรทัด */
.pm-desc-wrap.pm-desc-clip:not(.pm-desc-open) .pm-desc {
  /* 8 บรรทัดพอดี: บรรทัดแรกเริ่ม +12px ไล่ทีละ 22px → บรรทัดที่ 8 จบที่ 183px (+3 เผื่อสระล่าง)
     และ "เลื่อนอ่านในกล่องได้เอง" โดยไม่ต้องกดกาง (เจ้าของสั่ง) */
  max-height: calc(186px * var(--pm-scale, 1));
  overflow-y: auto;
  overscroll-behavior: contain;          /* เลื่อนสุดแล้วไม่ไปลากทั้งโมดัลต่อ */
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}
/* กางแล้ว = โชว์เต็ม แต่ไม่ให้ยาวจนดันปุ่มซื้อหาย → เลื่อนอ่านในตัวเอง */
.pm-desc-wrap.pm-desc-open .pm-desc { max-height: 42vh; overflow-y: auto; padding-right: 4px; }
/* ย่อหน้าในคำอธิบาย — เว้นระยะกระชับ (ครึ่งบรรทัด) แทนบรรทัดว่างเต็ม ๆ
   \n เดี่ยวภายในย่อหน้ายังขึ้นบรรทัดตามที่พิมพ์ (white-space:pre-line ของ .pm-desc) */
.pm-desc-p { margin: 0 0 calc(10px * var(--pm-scale, 1)); }
.pm-desc-p:last-child { margin-bottom: 0; }
.pm-desc::-webkit-scrollbar { width: 3px; }
.pm-desc::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); }
.pm-desc::-webkit-scrollbar-track { background: transparent; }

.pm-desc-fade { display: none; }   /* ไม่ใช้เฟดแล้ว (เคยบังตัวหนังสือ) */

.pm-desc-toggle {
  display: none; align-items: center; gap: 5px;
  margin: 6px 0 0; padding: 0;
  border: none; background: none;
  color: var(--accent-text);
  font-size: calc(10.14px * var(--pm-scale, 1)); font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: opacity .18s ease;
}
.pm-desc-wrap.pm-desc-clip .pm-desc-toggle { display: inline-flex; }
.pm-desc-toggle:hover { opacity: .75; }
.pm-desc-toggle i { font-size: calc(8.58px * var(--pm-scale, 1)); line-height: 1; transition: transform .2s ease; }
.pm-desc-wrap.pm-desc-open .pm-desc-toggle i { transform: rotate(180deg); }

/* หัวข้อ "เลือกแพ็กเกจ" */
.pm-label { font-size: calc(9.88px * var(--pm-scale, 1)); font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; }

/* ลิสต์แพ็ก — การ์ดมินิมอล: [ราคาเดิม] / [ราคา บาท] / [ระยะเวลา · สต็อก]
   ไม่มีชิปกรอบซ้อนกันหลายชั้น · ตัวการ์ดคือปุ่มเลือก · ที่เลือก = ขอบสี + ติ๊กมุมขวาบน */
.pm-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));   /* เดสก์ท็อปได้ 3 ใบ/แถว · มือถือ 2 ใบ/แถว */
  gap: 8px; margin-bottom: 4px;
}
.pm-price-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 12px 13px; min-height: 84px;
  cursor: pointer; background: var(--surface);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.pm-price-card:hover:not(.pm-price-disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  transform: translateY(-1px);
}
.pm-price-card.pm-price-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.pm-price-disabled { opacity: .5; cursor: not-allowed; background: var(--surface-2); }

/* ติ๊กถูกมุมขวาบน = ใบที่เลือก */
.pm-radio {
  position: absolute; top: 8px; right: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); color: var(--fg-on-accent);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5);
  transition: opacity .16s ease, transform .16s cubic-bezier(.2,1.5,.45,1);
}
.pm-radio::after { content: '\2713'; font-size: 9px; font-weight: 900; line-height: 1; }
.pm-price-selected .pm-radio { opacity: 1; transform: scale(1); }
.pm-price-disabled .pm-radio { display: none; }

/* ป้ายส่วนลด — กรอบเม็ดยาไล่เฉด (แบบเดิมตามที่เจ้าของขอ) มุมซ้ายบน ไม่กินบรรทัดในการ์ด */
.pm-price-badge {
  position: absolute; top: 7px; left: 7px;
  background: linear-gradient(135deg, #ef4444 0%, var(--warn) 100%);
  color: var(--fg-on-warn);
  font-size: calc(7.54px * var(--pm-scale, 1)); font-weight: 800; padding: 2px 7px; border-radius: 999px;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}

/* เนื้อในการ์ด */
.pm-price-line { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; width: 100%; }
.pm-pl-old { color: var(--muted); font-weight: 500; font-size: calc(8.84px * var(--pm-scale, 1)); text-decoration: line-through; line-height: 1.3; }
.pm-pl-main { display: inline-flex; align-items: baseline; gap: 3px; }
/* ราคาปกติ (ไม่ลดราคา) = สีตัวอักษรหลักของธีม (สกินมืด = ขาวสว่าง / สกินสว่าง = เข้มชัด)
   ตัวหนาขึ้น + ใหญ่ขึ้นนิด ให้เด่นที่สุดในกรอบ · ราคาที่ลดราคา = แดง แยกออกทันที */
.pm-pl-price {
  color: var(--text);
  font-weight: 900; font-size: calc(15.6px * var(--pm-scale, 1)); letter-spacing: -.02em; line-height: 1.25;
}
.pm-pl-price.is-sale { color: var(--danger-text); }
.pm-pl-unit { color: var(--muted); font-weight: 600; font-size: calc(9.36px * var(--pm-scale, 1)); }
.pm-pl-meta {
  margin-top: 5px; display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(9.1px * var(--pm-scale, 1)); font-weight: 600; color: var(--muted); line-height: 1.3;
}
.pm-pl-meta > span + span::before { content: '·'; margin-right: 6px; opacity: .6; }

.pm-price-disabled .pm-pl-price, .pm-price-disabled .pm-pl-unit, .pm-price-disabled .pm-pl-meta { color: var(--muted); }
.pm-price-card.is-trial .pm-pl-price { color: var(--accent-text); font-size: calc(13px * var(--pm-scale, 1)); }

.pm-price-side { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; width: 100%; margin-top: 6px; }
.pm-price-stock {
  font-size: calc(8.58px * var(--pm-scale, 1)); color: var(--muted); font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.pm-price-stock.in-stock { color: var(--ok-text); background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pm-price-stock.in-stock::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent); flex-shrink: 0; }
.pm-price-stock.out-stock { color: var(--danger-text); background: color-mix(in srgb, var(--danger-strong) 8%, transparent); border-color: color-mix(in srgb, var(--danger-strong) 35%, transparent); }
.pm-no-price { text-align: center; padding: 24px 16px; color: var(--muted); font-size: calc(11.05px * var(--pm-scale, 1)); border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }

/* footer + ปุ่มซื้อ — ตรึงท้ายกล่องเสมอ ไม่มีปุ่ม "ปิด" (เท่าเว็บหลัก) */
.pm-footer { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.pm-btn-buy {
  width: 100%; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border: none; border-radius: var(--radius-lg); font-size: var(--btn-fs); font-weight: 600;   /* token ปุ่มกลาง */
  letter-spacing: -.005em;
  /* สีรวมกับปุ่ม "ซื้อเลย" บนการ์ด (ช่อง buy ช่องเดียวในสตูดิโอปุ่ม) — เจ้าของสั่งรวม 2026-07-15 */
  background: var(--b-buy-bg, var(--b-primary-bg, var(--accent))); color: var(--b-buy-fg, var(--b-primary-fg, var(--fg-on-accent))); cursor: pointer; display: none;
  box-shadow: var(--glow);
  transition: transform .12s ease, box-shadow .3s, filter .25s;   /* transform .12s = จังหวะกดกลางเท่าปุ่มอื่น */
}
/* จุดโหลดบนปุ่มซื้อ — ใช้ตอน "กำลังจัดส่งคีย์" (รอในหน้าซื้อ ไม่เด้งออกไปไหน) */
.pm-spin {
  display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: pm-spin .8s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); }}
@media (prefers-reduced-motion: reduce) { .pm-spin { animation-duration: 2.4s; }}
.pm-btn-buy:disabled { cursor: progress; filter: saturate(.85); }

/* (ถอดกฎหรี่สีปุ่มจ่ายเงิน @supports oklch ออกแล้ว 2026-07-15 — เจ้าของสั่งให้ปุ่มโมดัลสีเดียวกับปุ่ม "ซื้อเลย" บนการ์ดเป๊ะ ผ่านช่อง buy ช่องเดียว) */
.pm-btn-buy.pm-btn-visible { display: flex; align-items: center; justify-content: center; }   /* จัดกลางแนวตั้งเมื่อความสูงมาจาก --btn-h */
.pm-btn-buy:hover { filter: brightness(1.08); }   /* hover สว่างขึ้นเหมือนปุ่มหลัก — เลิก translateY เฉพาะตัว (เคย specificity สูงกว่าจนทับเอฟเฟคกดกลาง) · disabled กันด้วยกฎ !important ด้านล่างอยู่แล้ว */
.pm-btn-buy:disabled { background: var(--surface-2) !important; color: var(--muted) !important; border: 1px solid var(--border); cursor: not-allowed; box-shadow: none !important; transform: none !important; filter: none !important; }

@media (max-width: 575.98px) {
  .pm-price-grid { gap: 8px; }
  .pm-price-card { padding: 10px 12px; min-height: 50px; gap: 10px; }
  .pm-radio { width: 17px; height: 17px; }
  .pm-pl-price { font-size: calc(14.56px * var(--pm-scale, 1)); }   /* มือถือ: ยังใหญ่/หนาให้เด่น */
  .pm-pl-unit { font-size: calc(9.62px * var(--pm-scale, 1)); }
  .pm-pl-meta { font-size: calc(8.84px * var(--pm-scale, 1)); }
  .pm-price-badge { font-size: calc(7.8px * var(--pm-scale, 1)); }
  .pmodal-head { padding: 14px 14px; gap: 10px; }
  .pmodal-thumb { width: 40px; height: 40px; }
  .pmodal-title b { font-size: calc(11.96px * var(--pm-scale, 1)); }
  .pmodal-body { --pm-body-pt: 14px; --pm-body-px: 14px; padding: var(--pm-body-pt) var(--pm-body-px) 6px; }
  .pm-desc { font-size: calc(10.92px * var(--pm-scale, 1)); padding: 10px 12px; max-height: 140px; }
  .pm-notice { font-size: calc(9.49px * var(--pm-scale, 1)); padding: 9px 11px; }
  .pm-footer { padding: 12px 14px 14px; }
  /* .pm-btn-buy มือถือ: ไม่ override แล้ว — ขนาดมาจาก token ปุ่มกลางเท่ากันทุกจอ */
}

/* ═══════════════════════════════════════════════════════════════
   หน้าแรก: news ticker + การ์ดข่าว/เติมเงิน + ป้ายลดราคา (พอร์ตจากเว็บหลัก)
   ═══════════════════════════════════════════════════════════════ */
/* News ticker (วิ่งวนไร้รอยต่อ) */
.in-ticker { display: flex; align-items: stretch; gap: 0; margin: 4px 0 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.in-ticker-tag { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 0 16px; font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--fg-on-accent); background: var(--accent); }
.in-ticker-tag i { font-size: .8rem; }
.in-ticker-viewport { flex: 1; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.in-ticker-track { display: inline-flex; align-items: center; gap: 34px; padding: 9px 20px; white-space: nowrap; animation: in-ticker-run 34s linear infinite; }
.in-ticker:hover .in-ticker-track { animation-play-state: paused; }
.in-ticker-item { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; color: var(--text); }
.in-ticker-bullet { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); flex-shrink: 0; }
.in-ticker-date { color: var(--muted); font-size: .76rem; font-weight: 300; }
@keyframes in-ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); }}
@media (prefers-reduced-motion: reduce) { .in-ticker-track { animation: none; }}

/* Activity panel: News + Topup side-by-side */
.in-activity { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0; }
@media (min-width: 900px) { .in-activity { grid-template-columns: 1fr 1fr; }}
.mn-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.in-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.in-card-head-left { display: inline-flex; align-items: center; gap: 10px; }
.in-card-icon { width: 34px; height: 34px; border-radius: var(--radius-lg); display: grid; place-items: center; font-size: .95rem; color: var(--fg-on-accent); background: var(--accent); }
.in-card-icon.is-news { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.in-card-icon.is-topup { background: linear-gradient(135deg, #f59e0b, #f97316); }
.in-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.in-live { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--ok-text); }
.in-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse-dot 1.6s infinite; }
.in-card-body { padding: 8px 16px 14px; }
.in-empty { text-align: center; color: var(--muted); font-size: .86rem; padding: 22px 0; }
.in-empty i { display: block; font-size: 1.6rem; opacity: .5; margin-bottom: 8px; }
.in-news-item { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.in-news-item:last-child { border-bottom: 0; }
.in-news-bullet { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: .8rem; }
.in-news-text { font-size: .88rem; line-height: 1.5; }
.in-news-date { font-size: .74rem; color: var(--muted); margin-top: 3px; }
.in-topup-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.in-topup-row:last-child { border-bottom: 0; }
.in-topup-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.in-topup-info { flex: 1; min-width: 0; }
.in-topup-user { font-weight: 600; font-size: .88rem; }
.in-topup-method { font-size: .74rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; }
.in-topup-method.is-key { color: #a78bfa; }
.in-topup-method.is-angpao { color: var(--warn-text); }
.in-topup-method.is-slip { color: var(--info-text); }
.in-topup-amounts { text-align: right; flex-shrink: 0; }
.in-topup-bonus { display: block; font-size: .72rem; color: var(--warn-text); font-weight: 600; }
.in-topup-amount { font-weight: 700; color: var(--ok-text); font-size: .92rem; }

/* ป้ายลดราคา — หมวดหน้าแรก + การ์ดสินค้า */
.in-cat-sale-badge { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: calc(.68rem * var(--font-scale-sm, 1)); font-weight: 700; color: var(--fg-on-accent); background: var(--accent); box-shadow: 0 2px 8px -2px rgba(0,0,0,.5); }
/* ป้าย "ขายดี" — ตำแหน่ง/ทรงเดียวกับลดราคา ต่างแค่ไล่สี + จังหวะไฟ */
.in-cat-sale-badge.is-hot { background: var(--accent-grad); animation: flame-pulse 2.4s ease-out infinite; }
.sp-sale-badge { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: calc(.68rem * var(--font-scale-sm, 1)); font-weight: 700; color: var(--fg-on-accent); background: var(--accent); box-shadow: 0 2px 8px -2px rgba(0,0,0,.5); }
.sp-sale-badge .sp-sale-pct { background: color-mix(in srgb, var(--fg-on-accent) 22%, transparent); color: var(--fg-on-accent); border-radius: 999px; padding: 1px 7px; }
/* ป้าย "ยอดนิยม" บนการ์ดสินค้า — ทรง/ตำแหน่งเดียวกับป้ายลดราคา (ขึ้นทีละใบ ไม่ซ้อนกัน) */
.sp-hot-badge { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: calc(.68rem * var(--font-scale-sm, 1)); font-weight: 700; color: var(--fg-on-accent); background: var(--accent-grad); box-shadow: 0 2px 8px -2px rgba(0,0,0,.5); animation: flame-pulse 2.4s ease-out infinite; }

/* ═══ ราคา / คลัง / ยอดขาย บนการ์ดสินค้า (เปิดเมื่อส่ง meta — ใช้ที่แถวสินค้าหน้าแรก) ═══
   ทุกสีอ้าง token → เปลี่ยนตามสกินอัตโนมัติ · ไม่มี transform/hover เพิ่ม (การ์ดห้ามขยับเกินเดิม) */
.sp-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; margin: -2px 0 4px; flex-wrap: wrap; }
.sp-price { font-weight: 800; font-size: calc(1rem * var(--font-scale-sm, 1)); color: var(--accent-text, var(--accent)); white-space: nowrap; }
.sp-price.is-none { color: var(--muted); font-weight: 600; font-size: calc(.84rem * var(--font-scale-sm, 1)); }
.sp-stock { font-size: calc(.8rem * var(--font-scale-sm, 1)); color: var(--muted); white-space: nowrap; }
/* margin-top บวกกับ gap 11px ของ .sp-body → ระยะจริงจากปุ่มถึงเส้นคั่น
   เดิม 10px = 21px ห่างกว่าช่วง "ราคา→ปุ่ม" (13px) เห็นเป็นหลุมกลางการ์ด (เจ้าของทัก 08-09)
   ตอนนี้ 2px = 13px เท่าช่วงบน → จังหวะการ์ดสม่ำเสมอ */
.sp-sold { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border); font-size: calc(.78rem * var(--font-scale-sm, 1)); color: var(--muted); }
.sp-sold i { font-size: .9em; opacity: .85; }
/* ยังไม่มียอดขาย = จองที่ไว้เฉย ๆ ไม่ให้ปุ่มซื้อของการ์ดข้าง ๆ เหลื่อมกัน */
.sp-sold.is-empty { visibility: hidden; }
@media (max-width: 575.98px) {
  .sp-meta { gap: 4px; margin: -2px 0 2px; }
  .sp-price { font-size: calc(.88rem * var(--font-scale-sm, 1)); }
  .sp-stock { font-size: calc(.72rem * var(--font-scale-sm, 1)); }
  /* มือถือการ์ดแคบ ระยะเดิม 8+11=19px ยิ่งเห็นเป็นหลุมชัด → 0+11=11px */
  .sp-sold { margin-top: 0; padding-top: 8px; font-size: calc(.7rem * var(--font-scale-sm, 1)); }
}

/* ═══ แถวสินค้าใต้หมวดหมู่บนหน้าแรก (สินค้าแนะนำ / สินค้าทั้งหมด) ═══ */
.hp-count { display: inline-flex; align-items: center; margin-left: 10px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2, var(--surface)); color: var(--muted); font-size: calc(.72rem * var(--font-scale-sm, 1)); font-weight: 600; vertical-align: middle; white-space: nowrap; }
/* พับ = โชว์แค่ N ใบแรก · ใบที่เกินถูกติดคลาสมาจากเซิร์ฟเวอร์ (HOME_ALL_PREVIEW = แหล่งเดียว) */
/* ⛔ 2026-08-09 เดิมผูกกับ .hp-all อย่างเดียว → แถว "สินค้าแนะนำ" พับไม่ได้
   เปลี่ยนเป็นจับที่ .hp-prods ทุกแถวที่ติด is-folded จึงพับได้เหมือนกันหมด */
.hp-prods.is-folded .sp-card.is-fold-extra { display: none; }
.hp-toggle { white-space: nowrap; }

/* ═══ สวิตช์ เปิดขาย/ปิดปรับปรุง บนการ์ดสินค้า — เห็นเฉพาะแอดมิน (engine: admin_status_switch) ═══
   วางเป็นแถวล่างสุดของการ์ด (ไม่ทับป้ายลดราคา/ป้ายระบบบนรูป) · ยืดหดเองทุกความกว้าง */
.sp-adm {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  align-self: stretch; width: 100%; min-width: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.sp-adm-sw {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px;                 /* พื้นที่นิ้วกดบนมือถือ */
  padding: 2px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-weight: 700;
  font-size: calc(.72rem * var(--font-scale-sm, 1));
  color: var(--ok-text);
  transition: color .2s ease, opacity .2s ease;
}
.sp-adm-sw.is-off { color: var(--danger-text); }
.sp-adm-sw:disabled { opacity: .55; cursor: progress; }
.sp-adm-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.sp-adm-track {
  position: relative; flex: none;
  width: 38px; height: 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 62%, transparent);
  transition: background .2s ease;
}
.sp-adm-sw.is-off .sp-adm-track { background: color-mix(in srgb, var(--danger-strong) 62%, transparent); }
.sp-adm-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transform: translateX(18px);
  transition: transform .2s ease;
}
.sp-adm-sw.is-off .sp-adm-knob { transform: none; }
.sp-adm-txt { white-space: nowrap; }
.sp-adm-tag {
  flex: none;
  font-size: calc(.62rem * var(--font-scale-sm, 1));
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--border); border-radius: 999px;
  padding: 2px 8px;
}
@media (prefers-reduced-motion: reduce) {
  .sp-adm-knob, .sp-adm-track, .sp-adm-sw { transition: none; }}

/* ═══ UI kit: appAlert / appConfirm / appLoading (แทน alert/confirm เนทีฟ) ═══ */
.uik-overlay { position: fixed; inset: 0; z-index: 1000050; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(8,4,6,.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s ease; }
.uik-overlay.in { opacity: 1; }
.uik-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 26px 22px 20px; text-align: center; box-shadow: 0 24px 64px -18px rgba(0,0,0,.7); transform: translateY(12px) scale(.97); transition: transform .22s cubic-bezier(.22,1,.36,1); }
.uik-overlay.in .uik-card { transform: none; }
.uik-ic { font-size: 2.4rem; line-height: 1; margin-bottom: 12px; }
.uik-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
/* คำบรรยายในป๊อบอัพ = "ตัวอักษรรอง" ของ engine (แอดมินคุมที่หน้าธีม → กล่องปรับขนาดตัวอักษร) */
.uik-text { color: var(--muted); line-height: 1.6; white-space: pre-line; }   /* ขนาด = ENGINE ข้อความในป๊อบอัพ */
/* กล่อง "โปรดอ่านก่อนยืนยันการสั่งซื้อ" ในป๊อบอัพยืนยัน — ตัวอักษรรองเช่นกัน (เดิม inline style ใน app.js) */
.uik-notice {
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-radius: 12px; padding: 10px 12px;
  font-size: calc(.86rem * var(--font-scale-sm, 1)); line-height: 1.6;
  max-height: 46vh; overflow: auto;
}
.uik-notice-head { font-weight: 700; margin-bottom: 5px; color: var(--warn); }
.uik-actions { display: flex; gap: 10px; margin-top: 20px; }
.uik-btn { flex: 1; }   /* หน้าตาปุ่ม = engine กลาง (.btn-accent / .btn-ghost ในมาร์กอัพ) — ที่นี่คุมแค่การวาง */
.uik-spin { width: 46px; height: 46px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin: 4px auto 14px; animation: scSpin .9s linear infinite; }
@keyframes scSpin { to { transform: rotate(360deg); }}

/* ═══ modal: lightbox ซูมรูปสินค้า ═══ */
/* ป้ายแว่นขยายมุมล่างขวาของรูป — เป็นป้ายบอกใบ้เฉย ๆ (คลิกที่รูปทั้งใบเพื่อดูเต็มจอ) */
.pm-hero-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 30px; height: 30px; border-radius: var(--radius-md); border: none; background: rgba(0,0,0,.45); color: #fff; font-size: calc(10.14px * var(--pm-scale, 1)); display: flex; align-items: center; justify-content: center; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pm-lightbox { position: fixed; inset: 0; z-index: 1000060; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.9); cursor: zoom-out; }
.pm-lightbox img { max-width: 100%; max-height: 92vh; border-radius: var(--radius-lg); }

/* ป้ายหมวดมุมขวาบน หน้าหมวดสินค้า (แทน breadcrumb/H1 แบบเว็บหลัก) */
.sp-cat-pill { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; margin: 0; padding: 5px 14px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: .86rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-hot); }

/* ── typeahead dropdown ── */
.gsearch-dd { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 50px -18px rgba(0,0,0,.85); padding: 6px; max-height: 60vh; overflow-y: auto; display: none; }
.gsearch-dd.open { display: block; }
.gsearch-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); color: var(--text); }
.gsearch-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.gsearch-item img, .gsearch-ph { width: 36px; height: 36px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; background: var(--surface-2); display: grid; place-items: center; }
.gsearch-tt { min-width: 0; display: flex; flex-direction: column; }
.gsearch-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-cat { font-size: .74rem; color: var(--muted); }

/* สถานะ prompt / loading / error / ไม่พบ — ไอคอนกลาง + ข้อความ (มิเรอร์ #aoSearchResults เว็บหลัก) */
.gsearch-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px 16px; text-align: center; color: var(--muted); font-size: .86rem; }
.gsearch-hint-ic { display: grid; place-items: center; color: var(--muted); opacity: .45; }
.gsearch-hint--err { color: var(--danger); }
.gsearch-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--accent) 28%, transparent); border-top-color: var(--accent); animation: gsearch-spin .7s linear infinite; }
@keyframes gsearch-spin { to { transform: rotate(360deg); }}
/* มือถือ: ผลลัพธ์อยู่ใน panel เดียวกับ input (JS ต่อ .gsearch-dd ท้าย .msearch) → ไหลปกติ ไม่ลอยทับ */
.msearch > .gsearch-dd { position: static; margin-top: 8px; padding: 0; background: transparent; border: 0; box-shadow: none; max-height: 58vh; }

/* ป้ายทดลองในประวัติการสั่งซื้อ */
.hs-trial-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--warn-text); background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); vertical-align: middle; }

/* ═══════════════════════════════════════════════════════════════════
   CSS ต่อหน้า (ย้ายมาจาก inline <style> ของแต่ละหน้า — global engine)
   ลำดับ cascade เท่าเดิม: มาหลังสไตล์กลางทั้งหมด
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════ apihistory.php ══════════ */
/* ─── ประวัติร้าน API (ahx-*) — โครงเว็บหลัก สกิน beta tokens ─── */
.ahx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ahx-key .ic { color: var(--accent-2-text); }
.ahx-pill.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok-text); }
.ahx-pill.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-text); }
.ahx-pill.bad { background: color-mix(in srgb, var(--danger-strong) 18%, transparent); color: var(--danger-text); }

/* ══════════ apishop.php ══════════ */
/* ─── ร้าน API (aps-*) — โครงเว็บหลัก สกิน beta tokens ─── */
.aps-head { margin-bottom: 22px; }
.aps-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 6px;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aps-sub { color: var(--muted); font-size: .88rem; line-height: 1.6; font-weight: 300; }
.aps-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--b-chip-bd, var(--border)); background: var(--b-chip-bg, var(--surface));
  color: var(--b-chip-fg, var(--muted)); border-radius: var(--radius-lg); min-height: var(--btn-h); padding: 0 var(--btn-pad-x) 0 8px; font-size: var(--btn-fs); font-weight: 700;   /* token ปุ่มกลาง (ซ้าย 8px ชิดรูปไอคอน) */
  cursor: pointer; transition: .12s; white-space: nowrap; flex: none; font-family: inherit; }
.aps-chip.aps-chip-all { padding: 0 var(--btn-pad-x); }
.aps-chip img { width: 24px; height: 24px; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg); }
.aps-chip:hover { color: var(--text); border-color: var(--border-hot); }
.aps-chip.is-on { background: var(--b-chip-on-bg, var(--accent)); border-color: var(--b-chip-on-bg, var(--accent)); color: var(--b-chip-on-fg, var(--fg-on-accent)); }
.aps-fbtn { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--bg);
  color: var(--muted); border-radius: var(--radius-lg); min-height: var(--btn-h); padding: 0 var(--btn-pad-x); font-size: var(--btn-fs); font-weight: 700;   /* token ปุ่มกลาง */
  cursor: pointer; transition: .12s; font-family: inherit; }
.aps-fbtn:hover { color: var(--btn-fg); }
/* เลือกแล้ว = เส้นบางจาง (โทเคน --sel-line) พื้นจางบอกสถานะแทนขอบเข้ม */
.aps-fbtn.is-on { border-color: var(--sel-line); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--btn-fg); }
.aps-fbtn[data-v="available"].is-on { border-color: color-mix(in srgb, var(--ok) 38%, transparent); background: color-mix(in srgb, var(--ok) 11%, var(--bg)); }
.aps-fbtn[data-v="maintenance"].is-on { border-color: color-mix(in srgb, var(--warn) 38%, transparent); background: color-mix(in srgb, var(--warn) 11%, var(--bg)); }
.aps-fbtn[data-v="available"] .ic { color: var(--ok-text); }
.aps-fbtn[data-v="maintenance"] .ic { color: var(--warn-text); }
.aps-fbtn[data-v="android"] .ic { color: #3ddc84; }
.aps-fbtn[data-v="ios"] .ic { color: var(--muted); }
.aps-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.aps-card:hover { transform: translateY(-2px); border-color: var(--border-hot); box-shadow: var(--glow); }
.aps-badge.android { background: linear-gradient(135deg, #3ddc84, #1aa3ff); }
.aps-badge.ios { background: linear-gradient(135deg, #7d7d7d, #3a3a3a); }
.aps-tier:hover:not(.is-off) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.aps-tier.is-off { opacity: .55; cursor: not-allowed; }

/* โมดัลผลลัพธ์/ยืนยัน */
.aps-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 240; padding: 20px; }
.aps-modal.open { display: flex; }   /* หน้าตาปุ่ม = engine กลาง (.btn-accent / .btn-ghost ในมาร์กอัพ) */
.aps-mbtn + .aps-mbtn { margin-left: 8px; }

/* ══════════ community.php ══════════ */
.cm-wrap{max-width:920px;margin:0 auto}
.cm-head{text-align:center;margin-bottom:26px}
.cm-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cm-eyebrow::before,.cm-eyebrow::after{content:'';width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--border))}
.cm-eyebrow::after{background:linear-gradient(90deg,var(--border),transparent)}
.cm-title{font-size:1.9rem;font-weight:800;margin:0 0 6px;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cm-sub{font-size:.95rem;color:var(--muted);max-width:560px;margin:0 auto;font-weight:300}
.cm-sec{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:800;margin:30px 0 6px}
.cm-sec .ic{width:30px;height:30px;border-radius: var(--radius-md);display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid var(--border-hot);color: var(--accent-text)}
.cm-secsub{font-size:.82rem;color:var(--muted);margin:0 0 14px 40px}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.cm-card{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius: var(--radius-xl);padding:18px;transition:transform .22s,border-color .22s,box-shadow .22s}
.cm-card:hover{transform:translateY(-3px);border-color:var(--border-hot);box-shadow:var(--glow)}
.cm-ch{display:flex;align-items:flex-start;gap:12px}
.cm-ico{width:44px;height:44px;border-radius: var(--radius-lg);flex-shrink:0;display:grid;place-items:center;color:#fff}
.cm-ico.line{background:linear-gradient(135deg,#06c755,#04a344)}
.cm-ico.discord{background:linear-gradient(135deg,#5865f2,#7289da)}
.cm-ico.telegram{background:linear-gradient(135deg,#2aabee,#229ed9)}
.cm-ico.facebook{background:linear-gradient(135deg,#1877f2,#0f5bd7)}
.cm-ico.instagram{background:linear-gradient(45deg,#f58529,#dd2a7b 55%,#8134af)}
.cm-ico.tiktok{background:#121212;border:1px solid rgba(255,255,255,.28)}
.cm-ico.youtube{background:linear-gradient(135deg,#ff2c2c,#d90000)}
.cm-ico.x{background:#121212;border:1px solid rgba(255,255,255,.28)}
.cm-ico.generic{background:var(--accent-grad)}
.cm-nm{font-weight:700;line-height:1.35;word-break:break-word}
.cm-plat{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.cm-join{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--btn-h);padding:0 var(--btn-pad-x);border-radius: var(--radius-lg);font-size:var(--btn-fs);font-weight:700;text-decoration:none;color: var(--fg-on-accent);background:var(--accent-grad)}   /* token ปุ่มกลาง */
.cm-join:hover{filter:brightness(1.1)}
/* ── การ์ดกลุ่มแบบมีข้อมูลจริง (ปก/สมาชิก/แฮชแท็ก) — ไม่มีข้อมูล = การ์ดเรียบแบบเดิม ── */
.cm-card.cm-rich{padding:0;overflow:hidden}
.cm-card.cm-rich .cm-ch,.cm-card.cm-rich .cm-about-wrap{margin-left:16px;margin-right:16px}
.cm-card.cm-rich .cm-ch{margin-top:2px}
.cm-card.cm-rich .cm-join{margin:auto 16px 16px}   /* top:auto = ตรึงปุ่มก้นการ์ด ทุกใบเท่ากัน (ระยะขั้นต่ำมาจาก gap ของการ์ด) */
.cm-cover{position:relative;aspect-ratio:2/1;background-size:cover;background-position:center;background-color:var(--surface-2)}
.cm-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--surface) 96%,transparent) 100%)}
.cm-plat-chip{position:absolute;top:10px;right:10px;z-index:1;display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.02em;background:color-mix(in srgb,#000 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,#fff 18%,transparent)}
.cm-plat-chip.line{color:#3ddc68}
.cm-plat-chip.discord{color:#8ea1ff}
.cm-plat-chip.facebook{color:#6fa8ff}
.cm-plat-chip.instagram{color:#ff7ab8}
.cm-plat-chip.tiktok{color:#e8e8ee}
.cm-plat-chip.youtube{color:#ff6b6b}
.cm-plat-chip.x{color:#e8e8ee}
.cm-plat-chip.telegram{color:#54b7ff}
.cm-plat-chip.generic{color:var(--muted)}
.cm-members{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:.78rem;font-weight:700;color:var(--accent-text,var(--accent))}
.cm-members i{font-size:.72rem}
.cm-about{margin:0;font-size:.8rem;line-height:1.6;color:var(--muted)}   /* จอใหญ่โชว์เต็ม · มือถือย่อ 3 บรรทัด + อ่านเพิ่มเติม */
.cm-about-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cm-more{display:none;border:0;background:none;padding:0;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:700;color:var(--accent-text,var(--accent))}
.cm-more i{font-size:.65rem;transition:transform .28s ease}
.cm-about-wrap.open .cm-more i{transform:rotate(180deg)}
@media (max-width:640px){
  .cm-about-wrap:not(.open) .cm-about{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .cm-more{display:inline-flex;align-items:center;gap:5px}}
.cm-cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.cm-contact{display:flex;align-items:center;gap:13px;text-decoration:none;background:var(--surface);border:1px solid var(--border);border-radius: var(--radius-xl);padding:16px 18px;transition:transform .22s,border-color .22s;color:inherit}
.cm-contact:hover{transform:translateY(-2px);border-color:var(--border-hot)}
.cm-contact .cm-ico{width:40px;height:40px}
.cm-cn{font-weight:700}
.cm-cs{font-size:11px;color:var(--muted);margin-top:2px}
.cm-arrow{margin-left:auto;color:var(--muted)}
.cm-empty{text-align:center;padding:34px 18px;background:var(--surface);border:1px dashed var(--border);border-radius: var(--radius-xl);color:var(--muted);font-size:.9rem}
.cm-note{display:flex;gap:10px;align-items:flex-start;margin-top:26px;padding:13px 16px;border-radius: var(--radius-lg);background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-size:.86rem;line-height:1.55}
@media(max-width:560px){.cm-grid,.cm-cgrid{grid-template-columns:1fr}.cm-secsub{margin-left:0}}

/* ══════════ gift.php ══════════ */
.ud-wrap{max-width:520px;margin:24px auto 56px}
.ud-card{background:var(--surface);border:1px solid var(--border);border-radius: var(--radius-xl);padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.ud-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.ud-logo{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:#f0b90b;color:#1c1c1c;font-weight:800;font-size:1.4rem}
.ud-title{font-size:1.15rem;font-weight:800;line-height:1.2;font-family:var(--font-display)}
.ud-sub{font-size:.85rem;color:#f0b90b;margin-top:2px}
.ud-banner{margin:18px 0;padding:15px;border-radius: var(--radius-lg);text-align:center;font-weight:700;color:#f0b90b;background:rgba(240,185,11,.12);border:1px solid rgba(240,185,11,.25)}
.ud-list{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:11px}
.ud-list li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.92rem}
.ud-list i{color:#2ebd85;width:18px;text-align:center}
.ud-field-label{font-size:.72rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.ud-input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius: var(--field-radius);padding:16px;color:var(--text);font-size:calc(1rem * var(--font-scale-sm, 1));letter-spacing:.06em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:16px;outline:none;transition:.15s;text-transform:uppercase}
.ud-input:focus{border-color:#f0b90b;box-shadow:0 0 0 3px rgba(240,185,11,.12)}
.ud-verify{width:100%;border:none;border-radius: var(--radius-lg);min-height:var(--btn-h);padding:0 var(--btn-pad-x);cursor:pointer;background:#f0b90b;color:#1c1c1c;font-weight:800;font-size:var(--btn-fs);display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;font-family:var(--font-display)}   /* token ปุ่มกลาง (สีเหลืองแบรนด์คงเดิม) */
.ud-verify:hover{filter:brightness(1.05)}
.ud-verify:disabled{opacity:.6;cursor:not-allowed}
.ud-msg{margin-top:16px;padding:14px;border-radius: var(--radius-lg);font-size:.92rem;text-align:center;display:none}
.ud-msg.ok{display:block;background:rgba(46,189,133,.12);color:#2ebd85;border:1px solid rgba(46,189,133,.3)}
.ud-msg.err{display:block;background:rgba(246,70,93,.10);color:#f6465d;border:1px solid rgba(246,70,93,.3)}
.ud-bal{text-align:center;color:var(--muted);font-size:.9rem;margin:16px 0 18px}
.ud-bal b{color:#f0b90b;font-size:1.05rem}
.ud-rate{font-size:.85rem;color:var(--muted);text-align:center;margin-top:12px}
.ud-rate b{color:var(--text)}
.ud-notice{margin-top:18px;padding:16px;border-radius: var(--radius-lg);background:rgba(246,70,93,.10);color:#f6465d;border:1px solid rgba(246,70,93,.3);text-align:center}
.ud-help{margin-top:14px;font-size:.82rem;color:var(--muted);text-align:center;line-height:1.6}

/* ══════════ historytm.php ══════════ */
.tm-wrap{max-width:840px;margin:0 auto}
.tm-hero{margin-bottom:20px}
.tm-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.tm-table thead th{text-align:left;font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:12px 14px;background:var(--surface-2)}
.tm-table td{padding:13px 14px;border-top:1px solid var(--border);font-size:.9rem;vertical-align:middle}
.tm-mth{display:flex;align-items:center;gap:9px;font-weight:600}
.tm-mth .e{font-size:1.15rem}
.tm-amt{font-weight:800;color: var(--accent-2-text)}
.tm-bonus{font-size:.76rem;color: var(--ok-text)}
.tm-badge{display:inline-block;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid var(--border)}
.tm-badge.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent);color: var(--ok-text)}
.tm-badge.warn{background:rgba(241,196,15,.14);border-color:rgba(241,196,15,.3);color: var(--warn-text)}
.tm-badge.err{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--border-hot);color: var(--accent-2-text)}
.tm-date{font-size:.8rem;color:var(--muted);font-family:ui-monospace,Menlo,monospace}
.tm-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.tm-empty .e{font-size:2.4rem}
@media(max-width:575.98px){
  .tm-table thead{display:none}
  .tm-table,.tm-table tbody,.tm-table tr,.tm-table td{display:block;width:100%;box-sizing:border-box}
  .tm-table tr{border-top:1px solid var(--border);padding:6px 0}
  .tm-table tr:first-child{border-top:none}
  .tm-table td{border:none;padding:5px 14px;display:flex;justify-content:space-between;gap:12px}
  .tm-table td::before{content:attr(data-l);color:var(--muted);font-size:.78rem;font-weight:600}}

/* ══════════ profile.php ══════════ */
/* ─── Profile — โครงแบบเว็บเดิม แปลง token เป็นของ beta ─── */
.pf-wrap { max-width: 980px; margin: 0 auto; }
.pf-flash { padding: 12px 16px; border-radius: var(--radius-lg); margin-bottom: 16px; font-size: .9rem; font-weight: 500; border: 1px solid; }
.pf-flash.ok { color: var(--ok-text); border-color: color-mix(in srgb, var(--ok) 42%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.pf-flash.err { color: var(--danger-text); border-color: rgba(248,113,113,.42); background: color-mix(in srgb, var(--danger-strong) 8%, var(--surface)); }

.pf-hero {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 26px 26px 24px; margin-bottom: 18px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
}
.pf-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent-grad); opacity: .85; }
.pf-hero-av-wrap { position: relative; }
.pf-hero-ring {
  width: 104px; height: 104px; border-radius: 50%; padding: 3px;
  background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.pf-hero-av {
  width: 98px; height: 98px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--surface-2); border: 3px solid var(--surface);
}
.pf-hero-av-fb {
  width: 98px; height: 98px; border-radius: 50%; border: 3px solid var(--surface);
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: var(--muted);
}
.pf-hero-cam {
  position: absolute; bottom: 2px; right: 2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--text); color: var(--bg); border: 3px solid var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: .8rem; cursor: pointer;
  transition: transform .15s ease;
}
.pf-hero-cam:hover { transform: scale(1.08); }
.pf-hero-cam:active { transform: scale(.94); }
.pf-hero-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.pf-hero-name {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 8px;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  word-break: break-all;
}
.pf-hero-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.pf-hero-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border); text-transform: uppercase; letter-spacing: .06em;
}
.pf-hero-pill.email { text-transform: none; letter-spacing: 0; font-weight: 600; }
.pf-balance {
  position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 14px 20px 14px 18px; min-width: 190px;
}
.pf-balance::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent-grad); }
.pf-balance-label { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pf-balance-val { font-size: 1.45rem; font-weight: 800; color: var(--accent-2-text); margin-top: 2px; }

.pf-grid { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .pf-grid { grid-template-columns: 1fr; } .pf-hero { grid-template-columns: auto 1fr; } .pf-balance { grid-column: 1 / -1; }}
.pf-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 18px; }
.pf-card-title { font-weight: 700; font-size: .95rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

.pf-srcs { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-src-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border-radius: var(--btn-radius);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  font-size: var(--btn-fs-sm); font-weight: 600; cursor: pointer; transition: all .15s;
}
.pf-src-btn:hover { color: var(--btn-fg); border-color: var(--border-hot); }
.pf-src-btn.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--btn-fg); border-color: var(--border-hot); }
.pf-remove-btn {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border-radius: var(--btn-radius);
  border: 1px solid rgba(248,113,113,.4); color: var(--danger-text); background: color-mix(in srgb, var(--danger-strong) 8%, transparent);
  font-size: var(--btn-fs-sm); font-weight: 600; cursor: pointer; transition: all .15s;
}
.pf-remove-btn:hover { background: color-mix(in srgb, var(--danger-strong) 16%, transparent); border-color: var(--danger-text); }

.pf-info-list { display: flex; flex-direction: column; }
.pf-info-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.pf-info-row:last-child { border-bottom: none; }
.pf-info-label { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.pf-info-value { font-size: .86rem; font-weight: 600; text-align: right; word-break: break-all; }

.pf-stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 640px) { .pf-stats3 { grid-template-columns: 1fr; }}
.pf-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px 18px; }
.pf-stat-ico { font-size: 1.25rem; margin-bottom: 8px; }
.pf-stat-label { font-size: .74rem; color: var(--muted); margin-bottom: 3px; }
.pf-stat-val { font-size: 1.15rem; font-weight: 800; }
.pf-stat.cash .pf-stat-val { color: var(--ok-text); }
.pf-stat.key .pf-stat-val { color: var(--accent-2-text); }
.pf-stat.bonus .pf-stat-val { color: var(--warn-text); }

.pf-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pf-form-row label { font-size: .8rem; color: var(--muted); }

/* ══════════ rank.php ══════════ */
.rk-wrap{max-width:840px;margin:0 auto}
.rk-tabs{display:inline-flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px;margin-bottom:22px}
.rk-tab{display:inline-flex;align-items:center;min-height:var(--btn-h);padding:0 var(--btn-pad-x);border-radius:999px;font-size:var(--btn-fs);font-weight:700;color:var(--muted);text-decoration:none;transition:.2s}
.rk-tab.on{background:var(--accent-grad);color: var(--fg-on-accent)}
.rk-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:12px;align-items:end;margin-bottom:24px}
.rk-pod{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 12px 16px;text-align:center;position:relative;overflow:hidden}
.rk-pod::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--pc,var(--accent-grad))}
.rk-pod.p1{--pc:linear-gradient(90deg,#f59e0b,#fbbf24);transform:translateY(-8px)}
.rk-pod.p2{--pc:linear-gradient(90deg,#94a3b8,#cbd5e1)}
.rk-pod.p3{--pc:linear-gradient(90deg,#b45309,#d97706)}
/* ป้ายอันดับโพเดียม = .rk-rank-badge ของเว็บหลัก (วงกลมไล่สีทอง/เงิน/ทองแดงตาม --pc ของโพเดียม) */
.rk-medal{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:.8rem;font-weight:800;line-height:1;color:var(--btn-fg);background:var(--pc,var(--accent-grad))}
.rk-av{width:58px;height:58px;border-radius:50%;margin:8px auto;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;border:2px solid var(--border)}
.rk-av img{width:100%;height:100%;object-fit:cover}
.rk-av .fb{font-weight:800;color:var(--muted)}
.rk-pod .nm{font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-pod .amt{font-weight:800;color: var(--accent-2-text);margin-top:4px}
.rk-pod .tx{font-size:.72rem;color:var(--muted);margin-top:2px}
.rk-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.rk-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border)}
.rk-row:first-child{border-top:none}
.rk-row.me{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rk-no{width:30px;text-align:center;font-weight:800;color:var(--muted);flex-shrink:0}
.rk-ra{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--border)}
.rk-ra img{width:100%;height:100%;object-fit:cover}
.rk-ra .fb{font-size:.78rem;font-weight:800;color:var(--muted)}
.rk-info{flex:1;min-width:0}
.rk-info .n{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-info .s{font-size:.74rem;color:var(--muted)}
.rk-amt{font-weight:800;color: var(--accent-2-text);white-space:nowrap}
.rk-empty{text-align:center;padding:44px 20px;color:var(--muted)}
.rk-empty .e{font-size:2.2rem}
/* การ์ด "อันดับของคุณ" (rank.php) — prefix rkme- แยกจาก rk- เพราะ rk- ถูกใช้ซ้ำโดยหน้า /reset_key */
.rkme{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border));border-radius:var(--radius);padding:14px 18px;margin-bottom:22px;position:relative;overflow:hidden}
.rkme::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-grad)}
.rkme-rank{display:flex;flex-direction:column;align-items:center;min-width:86px;flex-shrink:0}
.rkme-rank .lbl{font-size:.7rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.rkme-rank .big{font-size:clamp(1.4rem,4vw,1.9rem);font-weight:800;line-height:1.15;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rkme-body{flex:1;min-width:200px}
.rkme-sum{font-size:.86rem;color:var(--muted)}
.rkme-sum b{color:var(--accent-2-text);font-weight:800}
.rkme-goal{font-size:.95rem;font-weight:600;margin-top:3px}
.rkme-goal b{color:var(--accent-2-text);font-weight:800}
.rkme-goal .fa-crown{color:var(--accent-text);margin-right:4px}
.rkme-cta{flex-shrink:0}
@media (max-width:480px){.rkme{gap:12px;padding:13px 14px}.rkme-rank{min-width:64px}.rkme-body{min-width:150px}.rkme-cta{flex-basis:100%;text-align:center}}
/* การ์ด "เลเวลสมาชิก" (rank.php) — บันไดยศจาก rank_tiers; สียศมาจาก DB ผ่าน --lp-c (ข้อมูล ไม่ใช่สไตล์) */
.rkml{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:22px}
.rkml-step .ic{font-size:1.15rem;line-height:1}
.rkml-step .nm{font-size:.72rem;font-weight:700}
.rkml-step .pt{font-size:.62rem;color:var(--muted)}
.rkml-step.next{opacity:.55}
.rkml-step.past{border-color:color-mix(in srgb,var(--lp-c) 45%,var(--border))}
.rkml-step.cur{border-color:color-mix(in srgb,var(--lp-c) 70%,transparent);background:color-mix(in srgb,var(--lp-c) 10%,var(--surface-2));box-shadow:0 0 12px -2px color-mix(in srgb,var(--lp-c) 45%,transparent)}
.rkml-step.cur .nm{color:color-mix(in srgb,var(--lp-c) 70%,var(--text,#fff))}
.rkml-link.on{background:var(--accent-grad)}
.rkml-next.top{color:var(--accent-text);font-weight:700}
@keyframes rkml-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ══════════ status.php ══════════ */
.stx-wrap{max-width:820px;margin:0 auto}
.stx-card{background:var(--surface);border:1px solid var(--border);border-radius: var(--radius-xl);overflow:hidden;margin-bottom:20px}
.stx-ch{background:var(--accent-grad);padding:14px 20px;color: var(--fg-on-accent);font-size:.95rem;font-weight:800;letter-spacing:.3px}
.stx-table{width:100%;border-collapse:collapse}
.stx-table thead th{padding:11px 16px;font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);background:var(--surface-2);text-align:center}
.stx-table thead th:first-child{text-align:left}
.stx-table tbody td{padding:12px 16px;font-size:.9rem;text-align:center;border-bottom:1px solid var(--border);vertical-align:middle}
.stx-table tbody td:first-child{text-align:left;font-weight:600}
.stx-table tbody tr:last-child td{border-bottom:none}
.stx-badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.76rem;font-weight:700}
.stx-on{background:color-mix(in srgb,var(--ok) 14%,transparent);color: var(--ok-text);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.stx-off{background:color-mix(in srgb,var(--accent) 14%,transparent);color: var(--accent-2-text);border:1px solid var(--border-hot)}
.stx-dash{color:var(--muted)}
.stx-specs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stx-spec{background:var(--surface);border:1px solid var(--border);border-radius: var(--radius-xl);padding:20px}
.stx-spec-t{font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.stx-row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.88rem}
.stx-row:last-child{border-bottom:none}
.stx-lbl{font-weight:700;color:var(--muted);min-width:110px;flex-shrink:0}
.stx-val{color:var(--text);line-height:1.5}
@media(max-width:640px){.stx-specs{grid-template-columns:1fr}.stx-lbl{min-width:80px}}

/* ══════════ topup.php ══════════ */
.tp-wrap{max-width:1040px;margin:0 auto}
.tp-hero{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:22px}
.tp-credit{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 20px;position:relative;overflow:hidden;min-width:200px}
.tp-credit::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent-grad)}
.tp-credit .lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tp-credit .val{font-size:1.5rem;font-weight:800;color: var(--accent-2-text);margin-top:2px}
.tp-promo{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 14%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:var(--radius);padding:14px 18px;margin-bottom:22px}
.tp-promo .ico{font-size:1.6rem;line-height:1}
.tp-promo .t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color: var(--warn-text);margin-bottom:6px}
.tp-promo .chips{display:flex;flex-wrap:wrap;gap:6px}
.tp-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:999px;padding:3px 4px 3px 12px;font-size:13px;font-weight:700;color:var(--text)}
.tp-chip b{background:var(--accent-grad);color: var(--fg-on-accent);border-radius:999px;padding:2px 9px;font-size:12px}
.tp-sec{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px}
.tp-sec .h{font-size:1.05rem;font-weight:800}
.tp-sec .n{font-size:13px;color:var(--muted);border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:4px 12px}
.tp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}
@media(max-width:768px){.tp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tp-grid{grid-template-columns:1fr}}
.tp-card{position:relative;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 18px 16px;cursor:pointer;overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .25s,box-shadow .35s;width:100%;display:block;color:inherit}
.tp-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--tp-accent,var(--accent-grad))}
.tp-card:hover{transform:translateY(-4px);border-color:var(--border-hot);box-shadow:var(--glow)}
.tp-card.tw{--tp-accent:linear-gradient(90deg,#f97316,#ef4444)}
.tp-card.slip{--tp-accent:linear-gradient(90deg,#3b82f6,#6366f1)}
.tp-card.gc{--tp-accent:linear-gradient(90deg,#8b5cf6,#ec4899)}
.tp-card.usdt{--tp-accent:linear-gradient(90deg,#f0b90b,#f8d12f)}
.tp-card .ic{font-size:1.7rem;width:50px;height:50px;display:grid;place-items:center;border-radius: var(--radius-xl);background:var(--surface-2);margin-bottom:14px;color: var(--accent-text)}
.tp-card.tw .ic{color: var(--warn-text)}
.tp-card.slip .ic{color:#6366f1}
.tp-card.gc .ic{color:#ec4899}
.tp-card.usdt .ic{color:#f0b90b}
.tp-card .tt{font-size:1.05rem;font-weight:800;margin-bottom:5px}
.tp-card .dc{font-size:.86rem;color:var(--muted);line-height:1.55;min-height:2.8em}
.tp-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.tp-tag{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;border:1px solid var(--border);color:var(--muted)}
.tp-tag.auto{background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent);color: var(--ok-text)}
.tp-tag.fee0{color: var(--accent-2-text)}
.tp-tag.fee{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.3);color: var(--warn-text)}
.tp-ribbon{position:absolute;top:12px;right:12px;background:var(--accent-grad);color: var(--fg-on-accent);font-weight:800;font-size:11px;padding:3px 10px;border-radius:999px;z-index:2}
.tp-note{display:flex;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px}
.tp-note .mk{width:4px;border-radius:999px;background:var(--accent-grad);flex-shrink:0}
.tp-note .tt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.tp-note p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.6}
/* modal */
.tpm{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.66);backdrop-filter:blur(4px)}
.tpm.open{display:flex}
.tpm-box{background:var(--surface);border:1px solid var(--border);border-radius: var(--radius-xl);width:100%;max-width:440px;max-height:90vh;overflow-y:auto;position:relative}
.tpm-box::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:18px 18px 0 0;background:var(--b-topup-bg, var(--tpm-accent,var(--accent-grad)))}
.tpm-head{display:flex;gap:12px;padding:22px 22px 12px}
.tpm-ic{width:44px;height:44px;border-radius: var(--radius-lg);display:grid;place-items:center;font-size:1.4rem;background:var(--surface-2);flex-shrink:0}
.tpm-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tpm-title{font-size:1.1rem;font-weight:800;margin-top:2px}
.tpm-sub{font-size:.84rem;color:var(--muted);margin-top:4px;line-height:1.5}
.tpm-x{position:absolute;top:12px;right:12px;width:var(--btn-h);height:var(--btn-h);border-radius: var(--radius-lg);border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-size:20px;cursor:pointer;display:grid;place-items:center}
.tpm-body{padding:0 22px 22px}
.tpm-label{display:block;font-size:.86rem;font-weight:700;margin-bottom:8px}
.tpm-input{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--border);border-radius: var(--field-radius);background:var(--surface-2);color:var(--text);font-size:calc(.95rem * var(--font-scale-sm, 1));outline:none}
.tpm-input:focus{border-color:var(--accent)}
.tpm-input.mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.03em}
.tpm-hint{display:flex;gap:8px;align-items:flex-start;font-size:calc(.78rem * var(--font-scale-sm, 1));line-height:1.5;margin-top:10px;padding:9px 12px;border-radius: var(--radius-lg);border:1px solid var(--border);color:var(--muted)}
.tpm-hint > i, .tpm-fee > i, .sc-noname > span:first-child{flex:0 0 auto; margin-top:2px}
.tpm-hint > span, .tpm-fee > span{flex:1 1 auto; min-width:0}
.tpm-hint.warn{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:var(--border-hot);color: var(--accent-2-text)}
.tpm-hint.info{background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent);color: var(--ok-text)}
.tpm-fee{display:flex;gap:9px;align-items:flex-start;margin-top:10px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.28);border-radius: var(--radius-lg);padding:11px 13px;font-size:calc(.78rem * var(--font-scale-sm, 1));color: var(--warn-text);line-height:1.55}
.tpm-btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:16px;min-height:var(--btn-h);padding:0 var(--btn-pad-x);border:none;border-radius:999px;font-size: var(--btn-fs);font-weight:800;color: var(--btn-fg);cursor:pointer;background:var(--tpm-accent,var(--accent-grad));transition:transform .12s ease}   /* token ปุ่มกลาง + จังหวะกดกลาง */
.tpm-btn:disabled{opacity:.55;cursor:not-allowed}
.tpm-res{display:none;margin-top:14px;padding:11px 14px;border-radius: var(--radius-lg);font-size:.85rem;text-align:center;line-height:1.5}
.tpm-res.ok{display:block;background:color-mix(in srgb,var(--ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);color: var(--ok-text)}
.tpm-res.err{display:block;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid var(--border-hot);color: var(--accent-2-text)}

.tpm-acct{background:var(--surface-2);border:1px solid var(--border);border-radius: var(--radius-lg);padding:12px 14px;font-size:.85rem;margin-bottom:12px}
.tpm-acct .row{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.tpm-acct .row b{font-family:ui-monospace,Menlo,monospace}
/* slipcheck (flow เว็บหลัก, สกิน beta) */
.sc-warnline{display:flex;gap:8px;align-items:flex-start;font-size:calc(.78rem * var(--font-scale-sm, 1));color:var(--muted);line-height:1.55;padding:9px 12px;border-radius: var(--radius-lg);background:color-mix(in srgb,var(--warn) 8%,transparent);border:1px solid color-mix(in srgb,var(--warn) 22%,transparent);margin-bottom:12px}
.sc-warnline .dot{width:6px;height:6px;border-radius:50%;background:var(--warn);flex-shrink:0;margin-top:6px;box-shadow:0 0 0 2px color-mix(in srgb,var(--warn) 20%,transparent)}
.sc-warnline b{color:var(--text)}
.sc-qrcard{border:1px solid var(--border);border-radius: var(--radius-lg);overflow:hidden;margin-bottom:12px;background:var(--surface-2)}
.sc-qrcard .cap{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;padding:9px 12px;border-bottom:1px solid var(--border)}
.sc-qrcard img{display:block;width:100%;height:auto;background:#fff}
.sc-noname{display:flex;gap:9px;align-items:flex-start;background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 28%,transparent);border-left:3px solid var(--warn);border-radius: var(--radius-lg);padding:11px 13px;font-size:calc(.8rem * var(--font-scale-sm, 1));line-height:1.6;color: var(--warn-text)}
.sc-noname a{color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.sc-noname b{color:var(--text)}
.sc-sessionbox{background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);border-radius: var(--radius-lg);padding:15px 14px;text-align:center;margin-bottom:12px}
.sc-sessionbox .lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color: var(--ok-text)}
.sc-sessionbox .amt{font-size:1.9rem;font-weight:800;line-height:1.15;margin:5px 0;letter-spacing:-.02em}
.sc-sessionbox .exp{font-size:.84rem;color:var(--muted)}
.sc-sessionbox .exp span{font-weight:700;color:var(--text);font-family:ui-monospace,Menlo,monospace}
.sc-inrow{display:flex;gap:8px;margin-bottom:8px}
.sc-inrow .tpm-input{flex:1}
.sc-startbtn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 var(--btn-pad-x);border:none;border-radius: var(--radius-lg);background:var(--tpm-accent,var(--accent-grad));color: var(--btn-fg);font-size: var(--btn-fs);font-weight:800;cursor:pointer;white-space:nowrap}
.sc-startbtn:disabled{opacity:.55;cursor:not-allowed}
.sc-must{display:flex;align-items:center;justify-content:center;gap:6px;background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);border-radius: var(--radius-lg);padding:9px 12px;margin-top:10px;font-size:.84rem;color: var(--ok-text);font-weight:600;text-align:center}
.sc-must b{color:var(--text);font-weight:700}
.sc-uploadzone{border:1.5px dashed color-mix(in srgb,#6366f1 40%,var(--border));border-radius: var(--radius-lg);padding:24px 14px;text-align:center;cursor:pointer;background:color-mix(in srgb,#6366f1 5%,var(--surface-2));transition:border-color .25s,transform .25s}
.sc-uploadzone:hover{border-color:#3b82f6;transform:translateY(-1px)}
.sc-uploadzone .ico{width:44px;height:44px;margin:0 auto 10px;border-radius:999px;display:grid;place-items:center;font-size:1.2rem;color:#fff;background:linear-gradient(135deg,#3b82f6,#6366f1)}
.sc-uploadzone .t{font-size:.92rem;font-weight:600}
.sc-uploadzone .s{font-size:.8rem;color:var(--muted);margin-top:2px}
.sc-load{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.5);opacity:0;transition:opacity .18s}
.sc-load.in{opacity:1}
.sc-load .box{background:var(--surface);border:1px solid var(--border);border-radius: var(--radius-xl);padding:26px 22px 20px;max-width:300px;width:100%;text-align:center}
.sc-load .sp{width:50px;height:50px;border:4px solid var(--border);border-top-color:#3b82f6;border-radius:50%;margin:0 auto 14px;animation:scSpin .9s linear infinite}
.sc-load .t{font-size:.98rem;font-weight:700;margin-bottom:4px}
.sc-load .s{font-size:.86rem;color:var(--muted);line-height:1.5}
@keyframes scSpin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════════
   หน้า login / register — ผูกกับ Global Engine เต็มตัว (ไม่มีสี/ฟอนต์เป็นของตัวเอง)
   · สี      = token กลาง/สกินที่แอดมินตั้ง (--accent/--surface/--border/--text/--muted)
   · พื้นหลัง = --app-bg ของ body (สกินทับได้) + ม่านเรืองสีธีมใน .auth-bg (โปร่ง ไม่บังพื้น)
   · ฟอนต์   = engine typography (--font-base/--font-ui/--font-display × --font-scale)
   · ปุ่ม/ฟิลด์ = token ปุ่มกลาง (--btn-h-lg/--field-h/--btn-radius/--field-radius/--btn-fs-lg)
   ⚠️ เดิมบล็อกนี้ประกาศ :root ของตัวเอง (--a/--bg/--card/--line/--field) ซึ่งธีมเอนจินไม่รู้จัก
      → เปลี่ยนสกินแล้ว 2 หน้านี้ไม่เปลี่ยนตาม + ยังไปทับ --bg/--text/--muted ของทั้งเว็บด้วย
   ══════════════════════════════════════════════════════════════════ */
.auth-body{
  -webkit-font-smoothing:antialiased;
  /* alias เฉพาะหน้า auth — derive จาก token ธีมทั้งหมด (ไม่ leak ออกนอก .auth-body) */
  --auth-line-soft: color-mix(in srgb, var(--border) 62%, var(--text) 20%);
  --auth-accent-press: color-mix(in srgb, var(--accent) 82%, #000);
}
.auth-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 82% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(52vw 52vw at 8% 108%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 60%);
}
.auth-wrap{
  position:relative; z-index:1; min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center; padding:40px 18px;
}
.auth-card{
  /* ขนาดทุกค่าตรงกับหน้า login ของเว็บหลัก (การ์ด 420px · padding 36/34/30 · ช่องกรอก 50px · ปุ่ม 44px)
     ⚠️ หน้านี้ตรึงเป็น px: ไม่ผูกกับสเกลฟอนต์ทั้งเว็บ/สไลเดอร์ปุ่ม (เจ้าของสั่ง 07-12 — ต้องเท่าเว็บหลักเสมอ
     เหมือนที่ป๊อบอัพสินค้าแยก --pm-scale ของตัวเอง) */
  width:100%; max-width:420px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border); border-radius: var(--card-radius); padding:36px 34px 30px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  animation:auth-in .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes auth-in{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.auth-card{animation:none}}

.auth-logo{text-align:center; margin-bottom:28px}
.auth-logo img{height:52px; width:auto; margin:0 auto 12px; display:block; object-fit:contain}
.auth-eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.auth-title{font-family: var(--font-display); font-size:29.6px; font-weight:700; line-height:1.2; margin:0 0 6px; letter-spacing:-.025em; color:var(--text)}
.auth-sub{font-size:14.4px; color:var(--muted); margin:0}
.auth-sub a,.auth-alt a,.auth-back a{color: var(--accent-text); font-weight:600; text-decoration:none}
.auth-sub a:hover,.auth-alt a:hover{text-decoration:underline}

.auth-form{margin:0}
.auth-field{margin-bottom:14px}
.auth-field label{display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:7px}
.auth-input{
  /* สูงตาม knob "ความสูงปุ่ม / ฟิลด์" (หน้าธีม) — เดิม 50px ตายตัว ช่องกรอกหน้าล็อกอิน/สมัคร
     จึงไม่ขยับตามสไลเดอร์ ทั้งที่ป้ายบอกว่าคุมฟิลด์ด้วย · ไม่ตั้งค่า = 50px เท่าเดิม */
  width:100%; min-height:var(--field-h, 50px); padding:0 14px; border:1px solid var(--border);
  border-radius: var(--field-radius); background:var(--surface-2); color:var(--text);
  /* ข้อความในช่องกรอก = "ตัวอักษรรอง" สูตรเดียวกับ .input (เดิมฮาร์ดโค้ด 16.8px จึงไม่ขยับตามสไลเดอร์)
     กัน iOS ซูม = assets/iosfield.js (ล็อก viewport ตอนโฟกัส) ไม่มีการบังคับ 16px ทับขนาดอีกแล้ว */
  font-family:inherit; font-size:calc(.9rem * var(--font-scale-sm, 1)); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.auth-input::placeholder{color:color-mix(in srgb, var(--muted) 68%, transparent)}  /* ขนาด = ENGINE placeholder */
.auth-input:hover{border-color:var(--auth-line-soft)}
.auth-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}

.auth-err{color: var(--danger-text); font-size:13.5px; margin:4px 0 12px; font-weight:500}
.auth-ok{color: var(--ok-text); font-size:13.8px; margin:0 0 16px; padding:11px 14px;
  background:color-mix(in srgb, var(--ok) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius: var(--radius-lg)}

.auth-hint{margin:8px 0 0; text-align:right; font-size:13px}
.auth-hint a{color:var(--accent-text); font-weight:600; text-decoration:none}
.auth-hint a:hover{text-decoration:underline}
.auth-note{font-size:13.4px; color:var(--muted); line-height:1.6; margin:0 0 16px; text-align:center}
.auth-note--dim{margin:16px 0 0; font-size:12.6px; opacity:.85}

.auth-captcha{display:flex; justify-content:center; align-items:center; width:100%; margin:16px 0 6px; min-height:65px}

.auth-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border-radius: var(--btn-radius); cursor:pointer;
  font-family: var(--btn-font-cta); font-weight: var(--btn-weight); font-size: var(--btn-fs);   /* token ปุ่มกลาง — สูง/ขนาดอักษร/ระยะขอบเท่าปุ่มอื่นทั้งเว็บ */
  text-decoration:none; border:1px solid transparent; margin-top:8px;
  transition:transform .12s, background .15s, border-color .15s, opacity .15s;
}
.auth-btn--solid{background:var(--b-auth-bg, var(--accent)); color: var(--b-auth-fg, var(--btn-fg)); border-color:var(--b-auth-bg, var(--accent))}
.auth-btn--solid:hover{background:var(--auth-accent-press); border-color:var(--auth-accent-press)}
.auth-btn--solid:disabled{cursor:not-allowed; opacity:.5; background:var(--surface-2); color:var(--muted); border-color:var(--border)}
.auth-btn--outline{background:transparent; color:var(--text); border-color:var(--auth-line-soft)}
.auth-btn--outline:hover{border-color:var(--accent); color: var(--accent-text)}
.auth-btn--oauth{background:var(--b-oauth-bg, var(--surface-2)); color:var(--b-oauth-fg, var(--text)); border-color:var(--b-oauth-bd, var(--auth-line-soft))}
.auth-btn--oauth:hover{border-color:var(--accent)}

.auth-divider{display:flex; align-items:center; gap:14px; margin:24px 0 14px; color:var(--muted); font-size:11.5px; font-weight:500; text-transform:uppercase; letter-spacing:.18em}
.auth-divider::before,.auth-divider::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--auth-line-soft),transparent)}

.auth-alt{text-align:center; font-size:14px; color:var(--muted); margin:18px 0 0}
.auth-back{text-align:center; font-size:13px; margin:14px 0 0}
.auth-back a{color:var(--muted); font-weight:500}
.auth-back a:hover{color:var(--text)}

@media (max-width:480px){
  /* ค่ามือถือตรงกับเว็บหลัก (@480): การ์ด 28/22/24 · มุม 14px · ช่องกรอก 48px — rem คิดจาก root 12px */
  .auth-wrap{padding:20px 14px; padding-top:5vh; align-items:flex-start}
  .auth-card{padding:28px 22px 24px; border-radius:14px}
  .auth-logo{margin-bottom:22px}
  .auth-title{font-size:21px}
  .auth-sub{font-size:12px}
  .auth-input{min-height:48px}   /* font-size ปล่อยให้กฎกลาง (ตัวอักษรรอง) + engine กัน iOS ซูม คุมเอง */
  /* .auth-btn มือถือ: ไม่ override แล้ว — ขนาดมาจาก token ปุ่มกลางเท่ากันทุกจอ */
}

/* ══════════════════════════════════════════════════════════════════
   ENGINE: ตัวเลือกแบบค้นหาได้ (searchable select) — ใช้แทน <select> เนทีฟทุกหน้า
   พอร์ตจาก include/searchable_select.php ของเว็บหลัก แต่ใช้ token สกิน beta
   markup/JS อยู่ assets/admin.js (auto-enhance ทุก <select> ที่ไม่ติด data-no-search)
   ══════════════════════════════════════════════════════════════════ */
.ssel-trigger {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: var(--field-h); padding: 0 12px 0 14px;   /* สูงเท่าปุ่ม/ช่องกรอกอื่นเสมอ */
  border: 1px solid var(--border); border-radius: var(--field-radius);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: .85rem; text-align: left; cursor: pointer;
  box-sizing: border-box; transition: border-color .15s ease, background .15s ease;
}
.ssel-trigger:hover { border-color: var(--border-hot); }
.ssel-trigger .ssel-trig-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssel-trigger.is-empty .ssel-trig-label { color: var(--muted); }
.ssel-trigger .ssel-trig-chev { width: 14px; height: 14px; flex: none; color: var(--muted); }
.ssel-trigger.is-disabled { opacity: .55; cursor: not-allowed; }

/* <select> จริงยังอยู่ใน DOM (ฟอร์ม/JS เดิมใช้ได้เหมือนเดิม) แค่ซ่อนแบบยัง focus ได้ */
.ssel-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-height: 0 !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important;
}

.ssel-overlay {
  position: fixed; inset: 0; z-index: 30000;
  background: var(--bg); display: flex; flex-direction: column;
  animation: sselFade .12s ease;
}
@keyframes sselFade { from { opacity: 0 } to { opacity: 1 }}
.ssel-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; background: var(--bg); overflow: hidden; }
.ssel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); flex: none; }
.ssel-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.ssel-close {
  border: none; background: var(--surface-2); color: var(--muted);
  width: var(--btn-h); height: var(--btn-h); border-radius: var(--radius-md); font-size: 1.25rem; line-height: 1;   /* token ปุ่มกลาง */
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.ssel-close:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.ssel-searchwrap { position: relative; padding: 12px 16px; flex: none; }
.ssel-search-ic { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.ssel-search {
  width: 100%; height: 44px; padding: 0 14px 0 40px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: .95rem; outline: none; box-sizing: border-box;
  transition: border-color .15s ease;
}
.ssel-search:focus { border-color: var(--border-hot); }
.ssel-list { flex: 1; overflow-y: auto; padding: 4px 8px 14px; -webkit-overflow-scrolling: touch; }
.ssel-flat { padding-top: 6px; }
.ssel-group { margin-top: 6px; }
.ssel-group-h {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px;
  background: var(--bg); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.ssel-group-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: 0;
}
.ssel-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 11px 12px;
  border: none; border-radius: var(--radius-lg); background: transparent; color: var(--text);
  font: inherit; font-size: .92rem; text-align: left; cursor: pointer;
  transition: background .12s ease;
}
.ssel-row:hover { background: var(--surface-2); }
.ssel-row-main { flex: 1; min-width: 0; font-weight: 600; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.ssel-row-tag { flex: none; align-self: flex-start; margin-top: 2px; font-size: .74rem; font-weight: 700; color: var(--muted); }
.ssel-row-check { flex: none; align-self: flex-start; margin-top: 2px; width: 18px; height: 18px; color: var(--text); opacity: 0; }
/* เลือกแล้ว = พื้นจาง + เส้นบาง 1px (โทเคนกลาง --sel-*) — เดิมพื้นไล่สี 24% ขอบเข้ม เจ้าของว่าจัดจ้านไป */
.ssel-row.is-selected { background: var(--sel-bg); box-shadow: 0 0 0 1px var(--sel-line) inset; }
/* หน้าซื้อ /product: กฎ .bp-tier อยู่ใน <style> ของหน้า (บันเดิล) — ตัวนี้ specificity สูงกว่าเพื่อให้ CSS
   ที่อัปตรงมีผลทันทีโดยไม่ต้อง deploy บันเดิล; ค่าเดียวกับในหน้า deploy รอบหน้าจึงไม่ชนกัน */
.bp-tiers .bp-tier.is-sel { border-color: var(--sel-line); box-shadow: none; background-image: linear-gradient(var(--sel-bg), var(--sel-bg)); }
.ssel-row.is-selected .ssel-row-check { opacity: 1; color: var(--sel-mark); }
.ssel-empty { padding: 36px 16px; text-align: center; color: var(--muted); font-size: .9rem; line-height: 1.6; }

@media (min-width: 560px) {
  .ssel-overlay { background: rgba(0,0,0,.6); align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .ssel-panel {
    flex: none; max-width: 560px; height: min(82vh, 720px);
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.55);
    animation: sselPop .2s cubic-bezier(.16,1,.3,1);
  }
  @keyframes sselPop { from { transform: scale(.97); opacity: .4 } to { transform: scale(1); opacity: 1 } }}

/* ── กลับเข้าแอปหลัง OAuth (/api/app/oauth_finish.php) ── */

@keyframes oafSpin { to { transform: rotate(360deg) } }

/* ── หน้า error 5xx (/5xx.php — ไม่พึ่ง PHP engine เพราะเสิร์ฟตอนระบบล่ม) ── */
.err-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.err-card { max-width: 540px; width: 100%; padding: 38px 30px 30px; text-align: center; }
.err-code {
  font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; line-height: 1;
  margin: 0 0 10px; color: var(--accent-text);
}
.err-title { font-size: 1.18rem; font-weight: 700; margin: 0 0 4px; }
.err-en { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 20px; }
.err-msg { font-size: .88rem; line-height: 1.7; color: var(--muted); margin: 0 0 20px; }
.err-ref {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 7px 16px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em;
}
.err-ref-lbl { color: var(--muted); letter-spacing: .12em; }
.err-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.err-hint { margin-top: 16px; font-size: .76rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 480px) {
  .err-card { padding: 28px 20px 22px; }
  .err-code { font-size: 2.6rem; }}

/* ═══ utility กลาง (ใช้ได้ทั้งหน้าร้าน+หลังบ้าน — admin.css โหลดต่อจากไฟล์นี้) ═══
   มีไว้แทน inline style ที่เคยกระจายในหน้าเพจ · เพิ่มใหม่ต้องคิดก่อนว่าควรเป็นคลาสคอมโพเนนต์ไหม */
.u-hide.u-hide { display: none; }   /* ซ่อนแบบ utility — เขียนคลาสซ้ำเพื่อดัน specificity (0,2,0)
                                       ให้ชนะ base ของคอมโพเนนต์ (.pagi-wrap{display:flex} ฯลฯ) โดยไม่ต้องใช้ !important
                                       — !important ไม่ได้ เพราะ JS ยังต้อง override ด้วย element.style.display */

.u-right   { text-align: right; }

.u-mb-0    { margin-bottom: 0; }

/* ═══ [merge 07-11] คลาสแทน inline style — layout engine + หน้าร้าน + app.js ═══ */
/* ═══════════════════════════════════════════════════════════════════
   LAYOUT ENGINE — คลาสแทน inline style ของ inc/layout.php + inc/loyalty.php
   (ป๊อบอัพประกาศ · ข้อตกลงแรกเข้า · ข้อตกลงรายเดือน · ชิ้นเล็กใน nav/footer · badge ยศ)
   สีทั้งหมดอ้าง token กลาง — ยกเว้นสีแบรนด์ (Telegram #229ed9) และ rgba เงา/ฉากหลังเดิม
   ═══════════════════════════════════════════════════════════════════ */

/* ── ป๊อบอัพประกาศทั่วเว็บ (settings: popup_*) ────────────────────────
   display:none = สถานะเริ่มต้น · assets/app.js เปิดด้วย ov.style.display='flex'
   (ห้ามใช้ .is-hidden ตรงนี้ — !important จะบล็อก JS)
   ขนาด "พอดีจอ" ทั้งมือถือ/เดสก์ท็อป: กว้าง min(760px, เต็มจอลบขอบ) สูงไม่เกิน ~90dvh
   หัว+ท้ายตรึง เลื่อนเฉพาะเนื้อหา · สีทั้งหมดอ้าง token ธีม (ห้าม hardcode) */
.ao-popup-ov {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  justify-content: center;
  align-items: center;
  padding: clamp(10px, 3vw, 28px);
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.ao-popup-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: 88vh;
  max-height: min(90dvh, 900px);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 20px;
  box-shadow: 0 34px 90px -18px rgba(0, 0, 0, .65);
}
/* แถบไฮไลต์สีธีมบนหัวการ์ด */
.ao-popup-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-grad, var(--accent));
}
.ao-popup-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border: none;
  border-radius: 50%;
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ao-popup-x:hover {
  background: color-mix(in srgb, var(--fg) 15%, transparent);
  color: var(--fg);
}
.ao-popup-head { padding: 24px 58px 14px 28px; }
.ao-popup-eyebrow {
  margin-bottom: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent));
}
.ao-popup-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.25;
}
.ao-popup-scroll {
  overflow-y: auto;
  padding: 0 28px 8px;
  overscroll-behavior: contain;
}
.ao-popup-img {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  border-radius: 14px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.ao-popup-body {
  line-height: 1.9;
  color: color-mix(in srgb, var(--fg) 86%, var(--muted));
  white-space: pre-line;
}   /* ขนาด = ENGINE ข้อความในป๊อบอัพ */
.ao-popup-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 28px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.btn-accent.ao-popup-ok { --btn-pad-x: 48px; width: min(320px, 100%); }
.ao-popup-note {
  font-size: .74rem;
  color: var(--muted);
}
@media (max-width: 640px) {
  .ao-popup-inner { border-radius: 16px; }
  .ao-popup-head { padding: 20px 52px 10px 18px; }
  .ao-popup-scroll { padding: 0 18px 6px; }
  .ao-popup-foot { padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }}

/* ── หน้าต้อนรับผู้เยี่ยมชมครั้งแรก /welcome (welcome.php · settings: welcome_*) ──
   landing แยกเต็มหน้า — สีทั้งหมดอ้าง token กลาง ธีม/สกินเปลี่ยนแล้วตามเอง */
.wlp { max-width: 1080px; margin: 0 auto; padding: 0 18px 70px; }
.wlp-sec { padding-top: 74px; }
.wlp-eyebrow {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: calc(.82rem * var(--font-scale-sm, 1));
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}
.wlp-h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  font-weight: 800;
  text-align: center;
}
.wlp-h2sub { margin: 0 0 26px; color: var(--muted); text-align: center; font-size: calc(.95rem * var(--font-scale-sm, 1)); }

/* ── hero ── */
/* overflow-x:clip = กันไอสี ::before (inset ยื่น -40px ข้างละ) ดันจอเลื่อนแนวนอนบนมือถือ — เจอจริง 07-27 */
.wlp-hero { position: relative; padding: 54px 0 8px; text-align: center; overflow-x: clip; }
.wlp-hero::before {
  content: "";
  position: absolute;
  inset: -80px -40px auto;
  height: 430px;
  background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.wlp-title {
  margin: 18px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.22;
}
.wlp-sub {
  max-width: 640px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.85;
  white-space: pre-line;
}
.wlp-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: calc(.95rem * var(--font-scale-sm, 1));
}
.wlp-flow b { color: var(--accent); font-weight: 700; }
.wlp-flow-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 65%, transparent);
}
.wlp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
/* ขนาดปุ่ม = knob ปุ่มกลางของเว็บ (--btn-h/--btn-fs/--btn-pad-x จาก .btn-accent/.btn-ghost)
   ⛔ ห้าม hardcode padding/font-size ที่นี่ — แอดมินปรับขนาดปุ่มจากหน้าธีมแล้วต้องติดทั้งหน้า */
.btn-accent.wlp-btn, .btn-ghost.wlp-btn { text-decoration: none; }
.wlp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.wlp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  font-size: calc(.82rem * var(--font-scale-sm, 1));
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.wlp-chip i { color: var(--accent); font-size: .78rem; }

/* ── ข้อความวิ่ง ── */
.wlp-marq {
  overflow: hidden;
  margin-top: 40px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wlp-marq-track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 11px 20px;
  white-space: nowrap;
  width: max-content;
  animation: wlp-marq-run 36s linear infinite;
}
.wlp-marq:hover .wlp-marq-track { animation-play-state: paused; }
.wlp-marq-item { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: calc(.9rem * var(--font-scale-sm, 1)); }
.wlp-marq-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
@keyframes wlp-marq-run { from { transform: translateX(0); } to { transform: translateX(-50%); }}
@media (prefers-reduced-motion: reduce) { .wlp-marq-track { animation: none; }}

/* ── สถิติ ── */
.wlp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 880px;
  margin: 38px auto 0;
}
.wlp-stat {
  padding: 18px 12px;
  text-align: center;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.wlp-stat-n {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  font-weight: 800;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--text)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wlp-stat-l { margin-top: 4px; color: var(--muted); font-size: calc(.88rem * var(--font-scale-sm, 1)); }

/* ── split + browser mockup ── */
.wlp-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
  margin-top: 10px;
}
.wlp-checks { display: grid; gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.wlp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  line-height: 1.65;
}
.wlp-checks li:last-child { border-bottom: 0; }
.wlp-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 50%;
}
.wlp-split-btn { margin-top: 22px; }
/* mockup ย้ายขึ้น hero (ใต้ปุ่ม CTA) — เจ้าของสั่ง 07-16 · เช็กลิสต์เดิมเป็นกล่องกลางหน้า */
.wlp-hero .wlp-mock-wrap { max-width: 780px; margin: 38px auto 0; text-align: left; }
.wlp-checks-box { max-width: 620px; margin: 0 auto; text-align: center; }
.wlp-checks-box .wlp-checks { text-align: left; }
.wlp-mock-wrap { position: relative; padding: 26px 10px; }
.wlp-mock {
  --wlp-tilt: 1.2deg;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  overflow: hidden;
  transform: rotate(var(--wlp-tilt));
}
.wlp-mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, rgba(0, 0, 0, .35));
}
.wlp-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 40%, transparent); }
.wlp-mock-dot:nth-child(1) { background: #f26d6d; }
.wlp-mock-dot:nth-child(2) { background: #f2c94c; }
.wlp-mock-dot:nth-child(3) { background: #6fcf97; }
.wlp-mock-url {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  padding: 4px 16px;
  font-size: .78rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.wlp-mock-url i { font-size: .68rem; color: var(--ok); }
.wlp-mock-body { padding: 16px 18px 20px; }
.wlp-mock-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wlp-mock-logo { font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.wlp-mock-pill {
  padding: 5px 14px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--fg-on-accent);
  background: var(--accent);
  border-radius: 999px;
}
.wlp-mock-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 999px;
}
.wlp-mock-h { margin: 10px 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; }
.wlp-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wlp-mock-cat {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.wlp-mock-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wlp-mock-cat span {
  position: absolute;
  inset: auto 0 0;
  padding: 16px 8px 6px;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85));
}
.wlp-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  background: color-mix(in srgb, var(--surface) 88%, rgba(0, 0, 0, .5));
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  animation: wlp-float-y 5s ease-in-out infinite;
}
.wlp-float b { display: block; font-size: calc(.82rem * var(--font-scale-sm, 1)); }
.wlp-float small { display: block; color: var(--muted); font-size: calc(.72rem * var(--font-scale-sm, 1)); }
.wlp-float-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 9px;
}
.wlp-float-1 { top: 0; right: -6px; }
.wlp-float-2 { bottom: 44px; left: -14px; animation-delay: 1.6s; }
.wlp-float-3 { bottom: -8px; right: 22px; animation-delay: 3.1s; }
@keyframes wlp-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); }}
@media (prefers-reduced-motion: reduce) { .wlp-float { animation: none; }}

/* ── ภาพจากหลังบ้าน ── */
.wlp-shot { max-width: 860px; margin: 56px auto 0; }
.wlp-shot img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

/* ── การซื้อล่าสุด (ใช้ lp-* จากหน้าแรก) ── */
.wlp-lp { margin-top: 74px; }

/* ── หมวดสินค้า ── */
.wlp-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wlp-cat {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease;
}
.wlp-cat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.wlp-cat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.wlp-cat:hover img { transform: scale(1.05); }
.wlp-cat-nm {
  position: absolute;
  inset: auto 0 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  color: #fff;
  font-weight: 700;
}

/* ── FAQ ── */
.wlp-faq { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
/* กล่อง FAQ อิง knob ปุ่ม & รูปทรง (--btn-radius/--btn-fs/--btn-pad-x) — เจ้าของสั่ง 07-16 */
.wlp-qa {
  background: var(--surface);
  border: 1px solid var(--border);
  /* ตามรูปทรง knob แต่ capped 18px — ทรงแคปซูลเต็ม ๆ จะกินข้อความตอนกล่องกางออก */
  border-radius: min(var(--btn-radius), 18px);
  overflow: hidden;
}
.wlp-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--btn-h);
  padding: 14px var(--btn-pad-x);
  font-size: var(--btn-fs);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.wlp-qa summary::-webkit-details-marker { display: none; }
.wlp-qa summary i { color: var(--muted); font-size: .8rem; transition: transform .22s ease; }
.wlp-qa[open] summary i { transform: rotate(180deg); }
.wlp-qa[open] summary { color: var(--accent); }
.wlp-qa-a {
  padding: 0 var(--btn-pad-x) 16px;
  color: var(--muted);
  line-height: 1.8;
  /* คำตอบ = "ตัวอักษรรอง" ของ engine (แอดมินคุมที่หน้าธีม → กล่องปรับขนาดตัวอักษร) */
  font-size: calc(.9rem * var(--font-scale-sm, 1));
}

/* ── CTA ปิดท้าย ── */
.wlp-final { padding-top: 74px; }
.wlp-final-card {
  padding: 46px 26px;
  text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 20px;
}
.wlp-final-t {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  font-weight: 800;
}
.wlp-final-s { margin: 0 0 24px; color: var(--muted); }

/* ── อนิเมชั่น /welcome — เล่นตอนเลื่อนถึง (ต่อยอด engine .reveal เดิมใน app.js)
   ทั้งชุดใช้แค่ transform/opacity + เคารพ prefers-reduced-motion (กติกา global ด้านบน) ── */
.wlp-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 85ms),
    transform .55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 85ms);
}
.wlp-stagger.in > * { opacity: 1; transform: none; }

/* หน้าต่างจำลอง: สไลด์เข้า + การ์ดลอยตามมาทีละใบ แล้วค่อยลอยวนต่อ */
.wlp-mock-wrap.reveal .wlp-mock {
  opacity: 0;
  transform: rotate(var(--wlp-tilt)) scale(.95) translateY(14px);
  transition: opacity .7s cubic-bezier(0.22, 1, 0.36, 1), transform .7s cubic-bezier(0.22, 1, 0.36, 1);
}
.wlp-mock-wrap.reveal.in .wlp-mock { opacity: 1; transform: rotate(var(--wlp-tilt)); }
.wlp-mock-wrap.reveal .wlp-float { opacity: 0; transition: opacity .6s ease; }
.wlp-mock-wrap.reveal.in .wlp-float { opacity: 1; }
.wlp-mock-wrap.reveal.in .wlp-float-1 { transition-delay: .45s; }
.wlp-mock-wrap.reveal.in .wlp-float-2 { transition-delay: .7s; }
.wlp-mock-wrap.reveal.in .wlp-float-3 { transition-delay: .95s; }

/* แสงไล่บนหัวข้อ/ตัวเลข (เฉพาะหน้านี้) + hero หายใจ + ปุ่มหลัก pulse เบา ๆ */
.wlp .text-grad, .wlp-stat-n { background-size: 200% auto; animation: wlp-sheen 4.5s linear infinite; }
@keyframes wlp-sheen { to { background-position: 200% center; }}
.wlp-hero::before { animation: wlp-breathe 7s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes wlp-breathe { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); }}
.wlp .btn-accent.wlp-btn { animation: wlp-cta-pulse 2.8s ease-in-out infinite; }
@keyframes wlp-cta-pulse {
  0%, 100% { box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
  50% { box-shadow: 0 6px 26px -4px color-mix(in srgb, var(--accent) 85%, transparent); }}

/* FAQ เปิดนุ่ม ๆ */
.wlp-qa[open] .wlp-qa-a { animation: wlp-qa-in .32s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes wlp-qa-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; }}

/* ── responsive ── */
@media (max-width: 920px) {
  .wlp-split { grid-template-columns: 1fr; gap: 26px; }
  .wlp-mock-wrap { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 680px) {
  .wlp-hero { padding-top: 38px; }
  /* ชิปจุดเด่น: แถวเดียวเสมอ (เจ้าของสั่ง) — เกินจอ = เลื่อนข้างได้ ไม่โชว์แถบเลื่อน */
  .wlp-chips {
    flex-wrap: nowrap;
    justify-content: safe center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wlp-chips::-webkit-scrollbar { display: none; }
  .wlp-chip { flex: 0 0 auto; gap: 4px; padding: 4px 8px; font-size: calc(.68rem * var(--font-scale-sm, 1)); white-space: nowrap; }
  .wlp-chip i { display: none; }   /* จอเล็กตัดไอคอนทิ้ง — 3 ชิปถึงพอดีแถวเดียวไม่ล้น */
  .wlp-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wlp-stat { padding: 14px 8px; }
  .wlp-sec { padding-top: 52px; }
  .wlp-h2sub { margin-bottom: 20px; }
  .wlp-lp { margin-top: 52px; }
  .wlp-split { gap: 20px; }
  .wlp-split-btn { width: 100%; justify-content: center; }

  /* mockup: เต็มความกว้าง + การ์ดลอยทับแบบเดสก์ท็อป (ย่อการ์ดให้ไม่บังเนื้อหาหลัก) */
  .wlp-mock-wrap { padding: 34px 0 26px; margin: 0 -8px; }
  .wlp-mock { --wlp-tilt: 0.6deg; }
  .wlp-mock-body { padding: 14px 14px 18px; }
  .wlp-mock-cat span { font-size: .62rem; padding: 12px 6px 5px; }
  .wlp-float { padding: 8px 13px 8px 8px; gap: 8px; border-radius: 11px; }
  .wlp-float b { font-size: calc(.74rem * var(--font-scale-sm, 1)); }
  .wlp-float small { font-size: calc(.64rem * var(--font-scale-sm, 1)); }
  .wlp-float-ic { width: 27px; height: 27px; font-size: .74rem; border-radius: 8px; }
  .wlp-float-1 { top: 2px; right: 0; }        /* เหนือกรอบ มุมขวา — ไม่บังแถบ URL */
  .wlp-float-2 { bottom: 70px; left: 0; }     /* ซ้ายล่าง ทับขอบการ์ดหมวดพอดี ๆ */
  .wlp-float-3 { bottom: 2px; right: 4px; }   /* มุมขวาล่าง ยื่นใต้กรอบ */

  .wlp-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wlp-cat-nm { font-size: .84rem; padding: 20px 10px 9px; }
  .wlp-final-card { padding: 36px 18px; }}

/* ── ชิ้นเล็กใน gnav / drawer / footer ─────────────────────────────── */
.gnav-lang { font-weight: 700; }                       /* ปุ่มสลับภาษา (โลกเอาต์) */
.unav-lang-name { flex: 1; }                           /* ชื่อภาษาในเมนูบัญชี */
.unav-lang-tag {                                       /* ป้าย TH/EN ท้ายรายการ */
  font-size: .72rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}
/* ตัวย่อชื่อ = สำรองเมื่อรูปโหลดไม่ขึ้น (onerror → style.display='flex')
   ต้อง specificity สูงกว่า `.unav-head-av span` และห้าม !important */
.unav-head-av span.unav-head-init { display: none; }
.gmenu-tg-ic { color: #229ed9; font-size: 18px; }      /* โลโก้ Telegram — สีแบรนด์ */
.foot-tg-ic { color: #229ed9; margin-right: 5px; }

/* ── ข้อตกลงแรกเข้า (blocking overlay) ───────────────────────────── */
.aotos-ov {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(8, 4, 6, .72);
  backdrop-filter: blur(4px);
}
.aotos-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .7);
}
.aotos-head {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}
.aotos-ic {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 18px;
  color: var(--btn-fg-on-accent);
  background: var(--accent);
}
.aotos-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}
.aotos-sub {
  font-size: .82rem;
  color: var(--muted);
}
.aotos-body {
  padding: 16px 22px;
  overflow-y: auto;
  /* เนื้อข้อตกลง = "ตัวอักษรรอง" ของ engine (แอดมินคุมที่หน้าธีม) */
  font-size: calc(12.5px * var(--font-scale-sm, 1));
  line-height: 1.65;
  color: var(--muted);
}
.aotos-lead { margin: 0 0 12px; color: var(--text); }
.aotos-p { margin: 0 0 9px; }
.aotos-p--last { margin: 0; }
.aotos-h { color: var(--text); }                        /* หัวข้อย่อย <b> ในเนื้อข้อตกลง */
.aotos-agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 22px 0;
  font-size: calc(13px * var(--font-scale-sm, 1));
  line-height: 1.5;
  cursor: pointer;
}
.aotos-cb {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  accent-color: var(--accent);
}
.aotos-hint { color: var(--muted); }
.aotos-foot {
  display: flex;
  gap: 10px;
  padding: 14px 22px 18px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.aotos-decline {
  flex: 0 0 auto;
  min-width: 108px;
  min-height: var(--btn-h);   /* token ปุ่มกลาง */
  padding: 0 var(--btn-pad-x);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--btn-fs);
  font-weight: 600;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
/* opacity เริ่มต้น .55 (ยังกดไม่ได้) — app.js สลับเป็น 1 ผ่าน style.opacity เมื่อติ๊กยอมรับ */
.aotos-accept {
  flex: 1;
  min-height: var(--btn-h);   /* token ปุ่มกลาง */
  padding: 0 var(--btn-pad-x);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--btn-fs);
  font-weight: 600;
  cursor: pointer;
  color: var(--btn-fg-on-accent);
  background: var(--accent);
  border: 1px solid transparent;
  opacity: .55;
}

/* ── ข้อตกลงประจำเดือน ───────────────────────────────────────────── */
.mtos-ov {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(4px);
}
.card.mtos-card {
  width: 100%;
  max-width: 460px;
  max-height: 82vh;
  overflow: auto;
  padding: 24px;
}
.mtos-ic { font-size: 1.6rem; }
.mtos-title { margin: 10px 0 6px; font-weight: 700; }
.mtos-text { font-size: calc(.88rem * var(--font-scale-sm, 1)); line-height: 1.65; font-weight: 300; }
.mtos-agree {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 14px 0;
  font-size: calc(.88rem * var(--font-scale-sm, 1));
  cursor: pointer;
}
.mtos-cb {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--accent);
}
.mtos-actions { display: flex; gap: 10px; }
.btn-ghost.mtos-no { padding: 11px 16px; }
/* opacity/cursor เริ่มต้น = ยังกดไม่ได้ — app.js สลับผ่าน style.opacity/style.cursor */
.btn-accent.mtos-ok {
  flex: 1;
  padding: 0 var(--btn-pad-x);
  opacity: .5;
  cursor: not-allowed;
}

/* ── badge ยศสมาชิก (inc/loyalty.php · lp_badge)
   สียศมาจาก DB (rank_tiers.color) → ส่งเป็น custom property --lp-c
   ค่า alpha คงเดิมเป๊ะ: เดิม hex+1a = 10.2% · hex+40 = 25.1%
   ⚠️ คนละคอมโพเนนต์กับ .lp-badge (ชิปในการ์ดออเดอร์ index.php) — อย่ารวมกัน */
.lp-rank {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: var(--lp-c);
  background: color-mix(in srgb, var(--lp-c) 10.2%, transparent);
  border: 1px solid color-mix(in srgb, var(--lp-c) 25.1%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   FRONT — คลาสแทน inline style ของหน้าร้าน (Global Engine)
   ที่มา: topup / profile / index / status / rank / apishop / shop /
          order / historytm / history / apihistory
   กติกา: สีอ้าง token กลางเท่านั้น · ค่าที่ย้ายมาจาก inline คงค่าเดิมเป๊ะ
          (ไม่มีการเปลี่ยนพิกเซล) · hex ที่เหลือคือค่าเดิมจากหน้าเพจ ไม่ใช่ของใหม่
   หมายเหตุ specificity: กฎที่ "ทับ" คลาสเดิม เขียนเป็น compound selector
          (เช่น .card.tp-login) เพื่อให้ชนะแน่นอนไม่ว่าจะ merge ไว้ตำแหน่งใด
   ═══════════════════════════════════════════════════════════════════════ */

/* ── utility เสริม (ต่อจากชุด utility กลางท้ายไฟล์) ── */
.u-minw-0 { min-width: 0; }
.u-italic { font-style: italic; }

/* ══════════ topup.php (tp- / tpm- / tpt-) ══════════ */
.tp-hero .page-title { margin: 0 0 4px; }
.tp-hero .tp-hero-sub { font-weight: 300; margin: 0; }
.card.tp-login { padding: 18px; }

/* สีหัวโมดัลต่อช่องทาง — ชุดเดียวกับ .tp-card.tw/.slip/.gc/.usdt (ค่าเดิมจากหน้าเพจ) */
.tpm.is-tw   { --tpm-accent: linear-gradient(135deg, #f97316, #ef4444); }
.tpm.is-slip { --tpm-accent: linear-gradient(135deg, #3b82f6, #6366f1); }
.tpm.is-gc   { --tpm-accent: linear-gradient(135deg, #8b5cf6, #ec4899); }
.tpm.is-usdt { --tpm-accent: linear-gradient(135deg, #f0b90b, #f8d12f); }

/* กระเป๋า USDT — เลขยาวต้องตัดบรรทัดได้ */
.tpm-break { word-break: break-all; }

/* ── ข้อตกลงก่อนเติมเงิน (blocking gate) ── */
.tpt-overlay {
  position: fixed; inset: 0; z-index: 1000000;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(8, 4, 6, .72);
  backdrop-filter: blur(4px);
}
.tpt-box {
  width: 100%; max-width: 480px; max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}
.tpt-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.tpt-ic {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn-text); font-size: 1.2rem;
}
.tpt-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.tpt-sub { font-size: .8rem; color: var(--muted); }
.tpt-text {
  overflow: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  /* เนื้อข้อตกลง = "ตัวอักษรรอง" ของ engine (แอดมินคุมที่หน้าธีม → กล่องปรับขนาดตัวอักษร) */
  font-size: calc(.88rem * var(--font-scale-sm, 1)); line-height: 1.7; color: var(--text);
  margin-bottom: 12px;
}
.tpt-agree {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: calc(.9rem * var(--font-scale-sm, 1)); color: var(--text); margin-bottom: 14px;
}
.tpt-agree-cb {
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px;
  accent-color: var(--accent);
}
.tpt-actions { display: flex; gap: 10px; }
.tpt-btn {
  flex: 1; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border-radius: var(--radius-lg);
  font-family: var(--font-display); font-weight: 600; cursor: pointer;
  font-size: var(--btn-fs);   /* knob "ขนาดข้อความในปุ่ม" — เดิมไม่ประกาศ เลยโตตามสเกลฟอนต์ทั้งเว็บ */
}
.tpt-btn.is-decline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
.tpt-btn.is-accept {
  background: var(--accent);
  color: var(--fg-on-accent);
  border: 1px solid transparent;
}
/* ปุ่มยอมรับเริ่มต้น = จาง (ยังไม่ติ๊ก) — JS สลับ opacity ตอนติ๊ก/ปลดติ๊ก */
.tpt-btn.is-accept:disabled { opacity: .45; }
.tpt-err {
  color: var(--danger-text);
  font-size: .82rem; margin-top: 10px;
  text-align: center; min-height: 1em;
}

/* ══════════ profile.php (pf-) ══════════ */
.pf-col { display: flex; flex-direction: column; gap: 18px; }
.pf-realname-form { margin-top: 14px; }
.pf-field-label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.pf-label-note { font-weight: 400; }
.pf-inline-row { display: flex; gap: 8px; }
.pf-realname-input { flex: 1; }
.btn-ghost.pf-save-btn { padding: 9px 16px; }
.btn-accent.pf-pass-btn { padding: 10px 20px; }

.pf-card-title.pf-card-title-row { justify-content: space-between; gap: 10px; }
.pf-title-link { font-size: .8rem; font-weight: 400; }
.pf-rank-txt b, .pf-next-txt b { color: var(--text); }
.pf-next-txt { font-size: .78rem; margin: 8px 0 0; }
.pf-top-txt { font-size: .8rem; margin: 0; }

.pf-oauth-note { font-size: .86rem; }
.pf-turnstile { margin: 4px 0 12px; }
.pf-pass-note { font-size: .76rem; margin-bottom: 12px; }
/* .pf-actions ฐานเป็น column — inline เดิมเติมแค่ wrap/gap/margin (ไม่แตะ direction) */
.pf-actions.pf-actions-wrap { flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ══════════ index.php (in- / lp-) ══════════ */
/* ป้าย "News feed" — ไม่ใช่สถานะ live (จุดยังเขียวเหมือนเดิมจาก ::before) */
.in-live.is-static { color: var(--muted); pointer-events: none; }
/* อวาตาร์ fallback = ตัวอักษรแรกบนพื้น accent */
.in-topup-avatar.is-fb {
  display: grid; place-items: center;
  font-size: .8rem; color: var(--fg-on-accent); background: var(--accent);
}
/* รูปสินค้า fallback ในรายการซื้อล่าสุด */
.lp-img.is-fb { display: flex; align-items: center; justify-content: center; }

/* ══════════ status.php (stx-) ══════════ */
.stx-wrap > .page-title { margin: 0 0 18px; }
.stx-scroll { overflow-x: auto; }
/* แถวว่าง: ต้องชนะ .stx-table tbody td:first-child{text-align:left} → ระบุ :first-child ด้วย */
.stx-table tbody td.stx-empty,
.stx-table tbody td.stx-empty:first-child { text-align: center; padding: 24px; }

/* ══════════ rank.php (rk-) ══════════ */
.rk-wrap > .page-title { margin: 0 0 4px; }
.rk-sub { font-weight: 300; margin: 0 0 18px; }
.rk-empty p { margin: 10px 0 0; }

/* ══════════ apishop.php (aps-) ══════════ */
.aps-empty-ic { font-size: 2.4rem; opacity: .4; }

/* ══════════ shop.php (sp-) ══════════ */
/* แจ้งเตือนทดลองใช้ไม่สำเร็จ (ค่าสีเดิมจากหน้าเพจ) */
.card.sp-trial-err {
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: .9rem;
  color: var(--danger-text);
  border-color: rgba(248, 113, 113, .4);
}

/* ══════════ order.php (od-) ══════════ */
.card.od-success {
  padding: 14px 16px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 18px;
  font-size: calc(.9rem * var(--font-scale-sm, 1));   /* ตัวอักษรรอง ข้อ 6 — เจ้าของสั่ง 07-12 */
}
/* หมายเหตุ "เปลี่ยนเครื่องเล่น?" = "ตัวอักษรรอง" ของ engine (แอดมินคุมที่หน้าธีม) */
.od-reset-note { font-size: calc(.78rem * var(--font-scale-sm, 1)); font-weight: 300; margin-top: 10px; }

/* ══════════ historytm.php (tm-) ══════════ */
.tm-hero .page-title { margin: 0 0 4px; }
.tm-hero-sub { font-weight: 300; margin: 0; }
.tm-hero-sub b { color: var(--text); }
.tm-empty p { margin: 10px 0 0; }
.tm-empty .btn-accent { margin-top: 14px; display: inline-block; }

/* ══════════ history.php (hs-) ══════════ */
.hs-hero-badge { margin-top: 8px; }
.hs-table thead th.hs-act { text-align: right; }

/* ══════════ apihistory.php (ahx-) ══════════ */
.ahx-empty-ic { font-size: 2.2rem; opacity: .4; }

/* ============================================================================
   js-bundles.css — คลาสกลางแทน inline style="" ที่เคยฝังในสตริง HTML ของ JS
   ที่มา: assets/app.js (หน้าร้าน) + assets/admin.js (หลังบ้าน)
   วิธีใช้: คัดลอกบล็อก FRONT ต่อท้าย assets/style.css
            คัดลอกบล็อก ADMIN ต่อท้าย assets/admin.css
   ทุกกฎ = ค่าที่ยกมาจาก inline เดิมเป๊ะ ๆ (ไม่เปลี่ยนหน้าตา)
   ============================================================================ */

/* ==== FRONT ==== */
/* → ต่อท้าย assets/style.css | มาจาก assets/app.js */

/* ── โมดัลสินค้า: ลิงก์ [buy:ID] ในคำอธิบาย (renderDesc) ── */
.pm-desc-buy {
  color: var(--accent-text);
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
}

/* ── โมดัลสินค้า: ปุ่มท้ายโมดัลตอนยังไม่ล็อกอิน (เป็น <a> จึงต้องจัดกลาง/ตัดขีดเส้นใต้) ── */
.pm-btn-buy.pm-btn-login {
  text-align: center;
  text-decoration: none;
}

/* หมายเหตุ: .pm-hero-wrap ยังคง style="--pm-hero-img:url(...)" ไว้โดยตั้งใจ
   เพราะเป็น "ข้อมูล" (URL รูปจาก JS) ส่งผ่าน custom property ตามกติกา ไม่ใช่สไตล์ */

/* ═══════════════════════════════════════════════════════════════════════════
   ตัวอักษรรอง (--font-scale-sm) — knob ที่ 2 ของ Global Typography Engine
   ขอบเขต (เจ้าของสั่งทีละจุด — ห้ามเพิ่มเอง):
     1) แถบหมายเหตุหน้าหมวด (.sp-notice + ไอคอน) — เลเยอร์นี้
     2) แถบหมายเหตุในโมดัลสินค้า (.pm-notice) + กล่องรายละเอียด (.pm-desc) + ปุ่มอ่านเพิ่มเติม (.pm-desc-toggle)
        → แก้ในกฎเดิมของมันเอง (ทั้งเดสก์ท็อปและ @media มือถือ) ไม่ยกมาไว้เลเยอร์นี้ เพราะจะทับขนาดมือถือ
     3) กล่องเตือนกรอกฟอร์ม (.tk-vmsg) — เจ้าของสั่ง 07-12
     4) ช่องกรอกหน้าสมัคร/ล็อกอิน (.auth-input + placeholder) — เจ้าของสั่ง 07-12
        → แก้ในกฎเดิมของมันเอง (เดิมฮาร์ดโค้ด 16.8px/16px จึงไม่ขยับตามสไลเดอร์)
     5) ข้อความในป๊อบอัพ/แจ้งเตือน "ทุกตัว" — เจ้าของสั่ง 07-12 → ENGINE ด้านล่าง (ห้ามตั้ง font-size ซ้ำในกฎรายป๊อบอัพ)
     6) แถบ "ซื้อสำเร็จ! นี่คือสินค้าของคุณ" หน้าออเดอร์ (.card.od-success) — เจ้าของสั่ง 07-12
        → แก้ในกฎเดิมของมันเอง (ส่วน order.php)
   ⛔ ห้ามขยายไปกฎอื่นเองเด็ดขาด — จะเพิ่ม element ไหน เจ้าของจะสั่งเอง
   ค่าเริ่มต้น 1 = ขนาดเดิมเป๊ะ · คูณทับ --font-scale (ตัวหลักไม่ขยับ)
   ═══════════════════════════════════════════════════════════════════════════ */
.sp-notice { font-size: calc(11.7px * var(--pm-scale, 1)); }
.sp-notice .sp-notice-ico { font-size: calc(1.15rem * var(--font-scale-sm, 1)); }

/* ═══ ENGINE: ข้อความในป๊อบอัพ/แจ้งเตือนทั้งเว็บ = "ตัวอักษรรอง" — กฎเดียว ═══
   ครอบทุก engine ป๊อบอัพที่ beta มี ทั้งหน้าร้านและหลังบ้าน:
     .uik-text/.uik-check   = appAlert/appConfirm หน้าร้าน (app.js)
     .acd-text              = appAlert/appConfirm หลังบ้าน (admin.js)
     .swal2-html-container  = appFormModal หลังบ้าน (admin.js)
     .aps-modal-msg         = โมดัลผล/ยืนยัน ร้านสินค้าอื่นๆ (apishop.php)
     .ao-popup-body         = ป๊อบอัพประกาศ (layout.php)
   ⛔ ป๊อบอัพใหม่ให้ใส่คลาสข้อความมาต่อในลิสต์นี้ อย่าไปตั้ง font-size ในกฎของป๊อบอัพเอง */
.uik-text,
.uik-check span,
.acd-text,
.swal2-html-container,
.aps-modal-msg,
.ao-popup-body {
  font-size: calc(.9rem * var(--font-scale-sm, 1));
}

/* ── กล่องเตือนกรอกฟอร์ม — แทนป็อปอัพของเบราว์เซอร์ที่ CSS แตะไม่ได้ (engine: assets/vmsg.js) ── */
.tk-vmsg {
  position: absolute;
  z-index: 9999;
  display: none;
  width: max-content;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2);
  border: 1px solid var(--border-hot, var(--border));
  color: var(--text);
  font-family: inherit;
  font-size: calc(.88rem * var(--font-scale-sm, 1)); /* สูตรเดียวกับ ENGINE placeholder — ข้อความรองในฟอร์มขนาดเดียวกันหมด */
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .65);
  pointer-events: none;
}
.tk-vmsg.is-on { display: block; }
.tk-vmsg::before {
  content: '';
  position: absolute;
  top: -5px; left: 14px;
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: inherit;
  border-left: 1px solid var(--border-hot, var(--border));
  border-top: 1px solid var(--border-hot, var(--border));
}

/* ── ป้ายบนรูปสินค้า: "ลดราคา" (ซ้าย) + "ANDROID/iOS" (ขวา) อยู่บรรทัดเดียวกัน ──
   เดิมคนละ top/padding/ขนาด → ดูเหลื่อมกัน และการ์ดแคบบนมือถือทำให้ทับกัน
   จัดให้: top เดียวกัน · ความสูงเท่ากัน · แต่ละใบกว้างได้ไม่เกินครึ่งการ์ด (ไม่มีวันชนกัน)
   ขนาดตัวอักษรยังผูก --font-scale-sm (ตัวรอง) เหมือนเดิม */
.sp-img .sp-sale-badge,
.sp-img .pf-badge {
  top: 8px;
  padding: 4px 9px;
  gap: 5px;
  line-height: 1.35;
  font-size: calc(.68rem * var(--font-scale-sm, 1));
  max-width: calc(50% - 10px);
  white-space: nowrap;
  overflow: hidden;
}
.sp-img .sp-sale-badge { left: 8px; right: auto; }
.sp-img .pf-badge     { right: 8px; left: auto; letter-spacing: .04em; }
@media (max-width: 575.98px) {
  .sp-img .sp-sale-badge,
  .sp-img .pf-badge {
    top: 6px;
    padding: 3px 7px;
    gap: 4px;
    font-size: calc(.62rem * var(--font-scale-sm, 1));
  }
  .sp-img .sp-sale-badge { left: 6px; }
  .sp-img .pf-badge { right: 6px; letter-spacing: 0; }
  .sp-img .pf-badge svg { width: 11px; height: 11px; }}

/* ── สินค้าปิดปรับปรุง: คำ "ปิดปรับปรุง" แทนจุดสถานะ + ปุ่มซื้อสีจืด (ยังกดได้ แต่ไม่ชวนกด) ──
   สีอ้าง token ทั้งหมด (เข้าได้ทุกสกิน) · ขนาดตัวอักษรผูก --font-scale-sm (ตัวรอง) */
.st-word {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: calc(.66rem * var(--font-scale-sm, 1));
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.st-word.is-maint {
  color: var(--danger-text);
  background: color-mix(in srgb, var(--danger-strong) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger-strong) 40%, transparent);
}
.sp-card.is-maint .sp-buy {
  /* ปุ่มสินค้าปิดปรับปรุง = ชุดสี "อันตราย/แดง" ของธีม (derive จาก token --danger-strong ล้วน
     → เข้าได้ทุกสกิน) ยังเป็นปุ่มเต็มใบที่กดได้ แค่สื่อว่าอยู่ระหว่างปิดปรับปรุง
     ค่าเริ่มต้น = แดง (เจ้าของเคาะ) · override รายจุดได้ผ่าน --b-maint-* */
  background: var(--b-maint-bg, color-mix(in srgb, var(--danger-strong) 16%, var(--surface)));
  background-image: none;
  color: var(--b-maint-fg, var(--danger-text));
  border: 1px solid var(--b-maint-bd, color-mix(in srgb, var(--danger-strong) 48%, transparent));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--danger-strong) 18%, transparent) inset;
}
/* ⛔ เจ้าของสั่ง 2026-07-28: ปุ่ม "ปิดปรับปรุง" ห้ามมีลูกเล่นตอนเอาเมาส์ชี้
   ให้นิ่งเหมือนปุ่มปกติ — ตัดเงาเรืองแสง/การขยับทั้งหมด เหลือแค่เปลี่ยนสีเล็กน้อย */
.sp-card.is-maint .sp-buy:hover,
.sp-card.is-maint .sp-buy:focus-visible {
  background: color-mix(in srgb, var(--danger-strong) 26%, var(--surface));
  border-color: color-mix(in srgb, var(--danger-strong) 65%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--danger-strong) 18%, transparent) inset;
  transform: none;
  animation: none;
  filter: none;
}
.sp-card.is-maint .sp-buy:active {
  background: color-mix(in srgb, var(--danger-strong) 32%, var(--surface));
  transform: none;
}
/* ไอคอนเฟืองบนปุ่มก็ต้องไม่หมุน/ไม่ขยับ */
.sp-card.is-maint .sp-buy .sp-buy-ic,
.sp-card.is-maint .sp-buy:hover .sp-buy-ic {
  animation: none;
  transform: none;
  transition: none;
}
.sp-buy-ic { font-size: .95em; line-height: 1; }   /* ไอคอนเฟืองบนปุ่มปิดปรับปรุง */

/* ── แถว "ติ๊กยอมรับ" ในป๊อบอัพยืนยัน (appConfirm opts.checkbox) — engine กลาง ──
   มีเมื่อไหร่ ปุ่มยืนยันจะกดไม่ได้จนกว่าจะติ๊ก (JS คุมใน assets/app.js) */
.uik-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 14px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  font-size: calc(.84rem * var(--font-scale-sm, 1));
  line-height: 1.55;
  color: var(--text);
}
.uik-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: .12em;
  accent-color: var(--warn);
  cursor: pointer;
}
.uik-btn.ok:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.35);
}

/* ── ปุ่ม "กรุณาเลือกแพ็กเกจ" = ปุ่มเลื่อนลัด (เจ้าของสั่ง 07-12: เลื่อนในป๊อบอัพเองยากบนพีซี)
      กดแล้วกล่องเลื่อนลงไปที่รายการแพ็ก + ไฮไลต์แวบ · หัวข้อ "เลือกแพ็กเกจ" กดได้เหมือนกัน ── */
.pm-btn-jump {
  background: var(--surface-2);
  color: var(--text);
  border: 1px dashed var(--border-hot);
  box-shadow: none;
  cursor: pointer;
}
.pm-btn-jump:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.pm-btn-jump i { font-size: .9em; opacity: .85; }
#pm-pk-label { cursor: pointer; scroll-margin-top: 12px; }
#pm-pk-label:hover { color: var(--accent-text); }

@keyframes pm-pk-flash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }}
.pm-pk-flash { border-radius: var(--radius-lg); animation: pm-pk-flash .9s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .pm-pk-flash { animation: none; }}

/* ═══════════════ วงล้อเสี่ยงโชค (wheel.php) ═══════════════ */
.wh-balance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .9rem; }
.wh-balance b { font-size: 1.15rem; color: var(--accent-text); }

.wh-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 1024px) { .wh-grid { grid-template-columns: 1fr 1fr; align-items: start; }}

.wh-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 20px 24px; }
.wh-stage canvas { width: min(100%, 440px); height: auto; }
.wh-pointer {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 2;
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 26px solid var(--accent);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
.wh-spin { min-width: 200px; min-height: 48px; font-size: 1.02rem; }
.wh-limit { font-size: .86rem; margin: 0; }
.wh-empty { padding: 32px; text-align: center; }

.wh-side { display: flex; flex-direction: column; gap: 16px; }
.wh-prizes { padding: 20px; }
.wh-prizes h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.wh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wh-list li {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-2); font-size: .92rem;
}
.wh-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.wh-name { font-weight: 600; }
.wh-tag { font-size: .8rem; color: var(--muted); }
.wh-tag--ok { color: var(--ok-text); font-weight: 600; }
.wh-left-tag { margin-left: auto; font-size: .78rem; color: var(--muted); }
.wh-time { margin-left: auto; font-size: .78rem; }
.wh-note { font-size: .84rem; margin: 12px 0 0; }

/* ══ หน้ารีเซ็ตอุปกรณ์แยก (/reset_key) — prefix rk- ══
   โทน/โทเคนเดียวกับ .hs-/.od- ทุกอย่าง (surface/border/accent-grad) ปุ่มใช้โทเคนกลาง --btn-* */
.rk-wrap { max-width: 720px; margin: 0 auto; }
.rk-sub { font-size: .95rem; color: var(--muted); margin: 0; font-weight: 300; line-height: 1.6; }

.rk-list { display: flex; flex-direction: column; gap: 14px; }
.rk-item.is-off { opacity: .62; }
.rk-item.is-off::before { background: var(--border); }

.rk-empty { text-align: center; padding: 56px 20px; }

@media (max-width: 560px) {   /* คีย์ยาว ๆ ปุ่มคัดลอกจะโดนบีบจนอ่านไม่ออก */
}
.rk-paste-msg.is-ok {
  color: var(--ok-text); border-color: color-mix(in srgb, var(--ok) 30%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.rk-paste-msg.is-err {
  color: var(--warn-text); border-color: var(--border-hot);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ═══════════ INSET MEDIA CARD ENGINE — ภาษาดีไซน์กลาง "แบบการ์ดหมวดหมู่" (2026-07) ═══════════
   สูตรเดียวทั้งเว็บ: การ์ดพื้นกลืนเข้ม + padding · รูปอยู่ข้างในมีมุมโค้งของตัวเอง · ข้อความใต้รูป
   ทุกค่าอิง token → ใช้ได้ทุกสกิน · อยากแก้ฟีลนี้ทั้งเว็บ = แก้ที่บล็อกนี้จุดเดียว (ห้ามแตกรายหน้า) */

/* — การ์ดหมวดหมู่ (กริดโปสเตอร์ หน้าแรก) — */
.game-card { aspect-ratio: auto; padding: 10px; background: color-mix(in srgb, var(--bg) 62%, var(--surface)); border-color: color-mix(in srgb, var(--border) 70%, transparent); }
.game-card img, .game-card .ph { position: static; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 10px; }
.game-card .name { position: static; display: block; margin-top: 10px; padding: 0 2px; text-align: left; color: var(--text); text-shadow: none; }
.game-card .name::after { margin-left: 2px; margin-right: auto; }
.game-card .in-cat-sale-badge { top: 18px; left: 18px; }

/* — การ์ดสินค้า (หน้าร้าน shop) — */
.sp-card { padding: 12px; background: color-mix(in srgb, var(--bg) 62%, var(--surface)); border-color: color-mix(in srgb, var(--border) 70%, transparent); }
.sp-img { border-radius: 10px; overflow: hidden; }
.sp-card .sp-body { padding: 13px 4px 6px; }
/* มือถือ (2 คอลัมน์ การ์ดแคบ): ตัดขอบ inset ทิ้ง — รูปสินค้าชนขอบการ์ดเต็มความกว้างเท่าก่อนรีโนเวทเป๊ะ
   (เจ้าของทัก 07-24 ว่ารูปเล็กลง · จอใหญ่ยังเป็นลุค inset ตามดีไซน์ใหม่) */
@media (max-width: 640px) {
  .sp-card { padding: 0; }
  .sp-img { border-radius: 0; }               /* รูปเต็มขอบ ใช้มุมโค้งของการ์ดเอง (การ์ด overflow:hidden อยู่แล้ว) */
  .sp-card .sp-body { padding: 12px 12px 10px; }
}

/* — การ์ดหมวดในหน้าต้อนรับ (/welcome) — */
.wlp-cat { aspect-ratio: auto; padding: 8px; background: color-mix(in srgb, var(--bg) 62%, var(--surface)); }
.wlp-cat img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; }
.wlp-cat .wlp-cat-nm { position: static; display: block; padding: 9px 4px 2px; background: none; color: var(--text); }

/* — การ์ดกลุ่มพูดคุย (community — ปกกลุ่ม) — */
.cm-card.cm-rich { padding: 12px; }
.cm-card.cm-rich .cm-cover { border-radius: 10px; overflow: hidden; }
.cm-card.cm-rich .cm-ch, .cm-card.cm-rich .cm-about-wrap { margin-left: 4px; margin-right: 4px; }
.cm-card.cm-rich .cm-join { margin: auto 4px 4px; }

/* — แบนเนอร์หมวดที่ "วาดด้วย CSS" (cat-banner-gen) — ใช้เมื่อหมวดไม่มีรูปแบนเนอร์อัปโหลดเอง
   ทุกสี (แถบ/ชื่อ/กริด/แสง) อ้าง token → สลับสกิน = เปลี่ยนสีตามทันที ไม่ต้องเจนรูปใหม่ */
.cat-banner-img.cat-banner-gen { container-type: inline-size; background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 39px, color-mix(in srgb, var(--text) 4%, transparent) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--text) 4%, transparent) 39px 40px),
    color-mix(in srgb, var(--bg) 62%, var(--surface)); }
.cat-banner-img.cat-banner-gen::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); border-radius: 0 3px 3px 0; }
.cbg-text { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); z-index: 2; max-width: 58%; min-width: 0; }
.cbg-text b { display: block; font-family: var(--font-display); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); font-size: clamp(15px, 8.2cqw, 42px); line-height: 1.12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbg-text small { display: block; margin-top: clamp(3px, 1.6cqw, 9px); font-size: clamp(8px, 2.5cqw, 13px); letter-spacing: .14em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbg-art { position: absolute; right: 4.5%; top: 50%; transform: translateY(-50%); z-index: 1; width: 26cqw; max-width: 150px; aspect-ratio: 1; pointer-events: none; }
.cbg-art img { position: absolute; inset: 0; width: 86%; height: 86%; object-fit: cover; border-radius: 16%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(0,0,0,.55); }
.cbg-art img:first-child { transform: rotate(6deg) translate(-14%, -3%); filter: brightness(.92); }
.cbg-art img:last-child { transform: rotate(-5deg) translate(9%, 6%); }

/* ═══════════ ⛔ เว็บนิ่ง — ไม่มีอนิเมชั่น/ทรานสิชั่นทั้งเว็บ (เจ้าของสั่ง 2026-07-27) ═══════════
   "ลบคือลบให้หมด ไม่ต้องมีอะไร" — ทั้งชุดอนิเมชั่น/บุคลิกธีม/พาร์ติเคิลสกิน/หน้าโหลด/เอฟเฟกต์กด
   ถูกถอดจากเอนจินแล้ว (lib/tk/theme.ts) · บล็อกนี้เก็บกวาดจังหวะที่เหลือใน style.css เอง
   วิธี: ย่นเวลาให้เป็น 0.01ms (ไม่ใช่ animation:none) เพื่อให้ end-state ของ animation ...forwards
   ยังถูกใช้ = เนื้อหาที่เริ่มด้วย opacity:0 ไม่หายไป (สูตรเดียวกับบล็อก prefers-reduced-motion เดิม)
   ย้อนกลับ = ลบบล็อกนี้ทิ้ง */
*, *::before, *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
}
.rise, .pop, .reveal { opacity: 1 !important; transform: none !important; }
html { scroll-behavior: auto !important; }
/* เลเยอร์ตกแต่งที่เคลื่อนไหว — ไม่ต้องมีเลย */
.sky-meteors, #gm-embers, .gm-ember { display: none !important; }

/* ── หมายเหตุ "เว็บนิ่ง" กับหน้าโหลด (Loading Screen) ──
   เจ้าของสั่งเปิดหน้าโหลดกลับ 2026-07-27 ("ทุกระบบถ้ามีการประมวลผลก็ต้องขึ้นหน้าโหลด")
   ไม่ต้องมีข้อยกเว้นที่นี่: assets/loader.css ตั้งจังหวะผ่าน "คลาส" (.tkl-*) + #tk-loader
   ซึ่ง specificity สูงกว่า selector `*` ด้านบน → สปินเนอร์หมุนได้เองแม้ทั้งเว็บถูกย่นเป็น 0.01ms
   ⛔ ถ้าวันหลังเพิ่มสไตล์หน้าโหลดใหม่ ต้องผูก animation ไว้กับคลาส (ห้ามพึ่ง selector สากล) */

/* ── ข้อยกเว้นเดียวของบล็อก "เว็บนิ่ง": แถบ "การซื้อล่าสุด" ต้องไหลต่อเนื่อง ──
   (เจ้าของแจ้ง 2026-07-27: "อันนี้มันไม่เลื่อน") — ไม่ใช่เอฟเฟกต์ตกแต่ง แต่เป็นวิธีแสดงเนื้อหา
   ที่กว้างเกินจอ · ชี้เมาส์ค้างยังหยุดเหมือนเดิม (.lp-viewport:hover) ·
   คนที่ตั้ง "ลดการเคลื่อนไหว" ในเครื่องยังได้แถบนิ่ง + เลื่อนเองด้วยมือ (กฎ @media reduce ด้านล่าง) */
@media (prefers-reduced-motion: no-preference) {
  .lp-track {
    animation-duration: 34s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ── ไม่มี "ขยาย/ยุบ/ยก" ตอนชี้หรือกด (เจ้าของสั่ง 2026-07-27: ลบอนิเมชั่นการกดให้หมด) ──
   ทรานสิชั่นถูกย่นเป็น 0.01ms แล้ว แต่ตัว transform ของ :hover/:active ยังทำให้ปุ่ม "เด้ง" อยู่
   → ล้าง transform เฉพาะสถานะ hover/active/focus · เว้นของที่ JS ตั้ง transform เอง (inline style) */
a:not([style*="transform"]):hover, a:not([style*="transform"]):active, a:not([style*="transform"]):focus,
button:not([style*="transform"]):hover, button:not([style*="transform"]):active, button:not([style*="transform"]):focus,
label:not([style*="transform"]):hover, label:not([style*="transform"]):active,
[role="button"]:hover, [role="button"]:active,
.card:hover, .card:active, .game-card:hover, .game-card:active, .sp-card:hover, .sp-card:active,
.cat-banner:hover, .aps-card:hover, .cm-card:hover, .cm-contact:hover, .tp-card:hover,
.wlp-cat:hover, .hs-user-av:hover, .avatar:hover, .avatar:active, .sc-uploadzone:hover {
  transform: none !important;
}
/* ลูกที่ขยายตามตอนชี้การ์ด/ปุ่ม */
.game-card:hover .name, .sp-card:hover .sp-img img, .wlp-cat:hover img,
.gear-btn:hover svg, .pm-close-btn:hover, .hs-empty-cta:hover { transform: none !important; }
/* ═══ จอสัมผัส (มือถือ/แท็บเล็ต): ห้าม "ค้างเอฟเฟกต์ hover" หลังแตะ ═══
   เบราว์เซอร์บนจอสัมผัสจะค้างสถานะ :hover ไว้หลังนิ้วปล่อย → การ์ด/ปุ่มเรืองแสงค้าง
   บล็อก "เว็บนิ่ง" ด้านบนล้างแค่ transform ไม่ได้ล้าง เงา/ขอบ/ฟิลเตอร์
   (เจ้าของแจ้ง 2026-07-28 เรื่องของขยับตอนชี้ · ตรวจมือถือเจอว่าค้างทั้งเว็บ) */
@media (hover: none), (pointer: coarse) {
  .aps-card:hover, .cm-card:hover, .cm-contact:hover, .cat-banner:hover,
  .tp-card:hover, .wlp-cat:hover, .card:hover, .game-card:hover,
  .btn-accent:hover, .sp-buy:hover, .btn:hover, button:hover, [role="button"]:hover {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }
  /* การ์ดสินค้าแยกออกมา: ล้างเฉพาะตอน "ไม่ได้เปิดท่าขยับการ์ด"
     ถ้าเปิดอยู่ เงาเรือง/ขอบคือตัวท่าเอง ไม่ใช่เอฟเฟกต์ค้างจากการแตะ — ล้างแล้วไฟดับ */
  html:not([data-cardanim]) .sp-card:hover,
  html[data-cardanim="none"] .sp-card:hover {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }
  /* ขอบ: คืนค่าเดิมของแต่ละชิ้น (ใช้ currentColor ไม่ได้ → ปล่อยให้ inherit จากสถานะปกติ) */
  .aps-card:hover, .cm-card:hover, .cm-contact:hover, .cat-banner:hover {
    border-color: var(--line, rgba(255, 255, 255, .05)) !important;
  }
  html:not([data-cardanim]) .sp-card:hover,
  html[data-cardanim="none"] .sp-card:hover {
    border-color: var(--line, rgba(255, 255, 255, .05)) !important;
  }
  /* ปุ่มปิดปรับปรุงยังต้องคงสีแดงของมันไว้ (ไม่ใช่ขอบเทา) */
  .sp-card.is-maint .sp-buy:hover {
    border-color: color-mix(in srgb, var(--danger-strong) 48%, transparent) !important;
  }
  /* รูปการ์ดปิดปรับปรุงยังต้องสเกลค้างไว้เหมือนเดิม (กันขอบเบลอโปร่ง) */
  .sp-card.is-maint:hover .sp-img img { transform: scale(1.04) !important; }
}

/* ⛔ ยกเว้นการ์ด "ปิดปรับปรุง": รูปมันถูกสเกล 1.04 ค้างไว้ตั้งแต่แรกเพื่อกันขอบเบลอโปร่ง
   ถ้าโดนบล็อก "เว็บนิ่ง" ข้างบนรีเซ็ตเป็น none ตอนชี้เมาส์ = รูปหด/ขยับให้เห็น
   (เจ้าของแจ้ง 2026-07-28 "เอาเมาส์ไปชี้แล้วรูปมันซูม") → ตรึงค่าเดิมไว้ = นิ่งสนิทเหมือนการ์ดปกติ */
.sp-card.is-maint:hover .sp-img img,
.sp-card.is-maint:active .sp-img img { transform: scale(1.04) !important; }

/* ═══════════ แถบสถิติหน้าแรก (.hstats) — ของเพิ่มตามคำสั่งเจ้าของ 07-27 ═══════════
   เปิด/ปิด + เลือกได้ 4 ช่องที่ หลังบ้าน > สถิติหน้าแรก (lib/tk/homestats.ts)
   ภาษาภาพเดียวกับการ์ดสถิติในแดชบอร์ด (.dash-stat ของ admin.css) แต่ผูก token
   ของหน้าร้านล้วน ⛔ห้าม hardcode สี — เปลี่ยนธีม/สกินแล้วต้องเปลี่ยนตามเอง */
.hstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 4px 0 26px;
}
.hstat {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 18px 16px;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%, var(--surface) 55%, color-mix(in srgb, var(--accent) 3%, var(--surface)) 100%);
}
.hstat-ic {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg, 12px);
  font-size: 1.1rem;
  color: var(--accent-text, var(--accent));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  position: relative; z-index: 1;
}
.hstat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; z-index: 1; }
.hstat-label { font-size: calc(.8rem * var(--font-scale-sm, 1)); font-weight: 600; color: var(--muted); line-height: 1.3; }
.hstat-nrow { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hstat-n {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) 62%, var(--text));
}
.hstat-nrow small { font-size: calc(.78rem * var(--font-scale-sm, 1)); color: var(--muted); font-weight: 500; white-space: nowrap; }
.hstat-wm {
  position: absolute; right: -12px; bottom: -18px;
  font-size: 88px; line-height: 1; color: var(--accent); opacity: .07;
  pointer-events: none; transform: rotate(-8deg);
}
@media (max-width: 900px) { .hstats { grid-template-columns: repeat(2, 1fr); gap: 10px; }}
@media (max-width: 460px) {
  .hstat { padding: 14px 12px; gap: 10px; }
  .hstat-ic { width: 38px; height: 38px; font-size: 1rem; }
  .hstat-wm { font-size: 68px; }}

/* ── แก้ข้อความไทยถูกตัด/เบียด (เจ้าของแจ้ง 2026-07-27) ─────────────────────
   ภาษาไทยมีสระบน+วรรณยุกต์ซ้อน 2 ชั้น กล่องที่ line-height ≤1.15 + overflow:hidden
   จะตัดหัวมาร์กทิ้ง · และ letter-spacing ติดลบทำให้มาร์กเบียดตัวข้าง
   (หัวข้อ h1-h6 แก้ที่เอนจินฟอนต์ lib/tk/typography.ts แล้ว — ที่นี่คือกล่องเฉพาะจุด) */
.cbg-text b { line-height: 1.3; }                 /* ชื่อหมวดบนแบนเนอร์ — เดิม 1.12 ตัดสระล่าง */
.hstat-n { line-height: 1.25; }                   /* ตัวเลข/ข้อความสถิติหน้าแรก — เดิม 1.05 */
.sp-maint-eyebrow { line-height: 1.25; }          /* ป้ายปิดปรับปรุงบนการ์ด — เดิม 1.0 */
.hs-empty-title { letter-spacing: 0; }            /* เดิม -.015em ทำให้ "ยังไม่มีประวัติ…" เบียด */

/* ── แถบโหมดทดลอง (เฉพาะร้านเดโม่ — components/tk/Chrome.tsx + demobar.js) ──
   ใช้ตัวแปร sel-state ของเอนจิน (--sel-line/--sel-bg/--sel-mark) — เปลี่ยนธีม/สีร้านตามอัตโนมัติ */
.demo-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  width: min(1200px, calc(100% - 24px)); margin: 10px auto 0; padding: 8px 14px;
  border: 1px solid var(--sel-line); border-radius: 12px; background: var(--sel-bg);
  color: var(--text); font-size: .92rem; text-align: center; line-height: 1.45;
}
.demo-bar i { color: var(--sel-mark); flex: none; }
.demo-bar .demo-bar-clock { font-variant-numeric: tabular-nums; color: var(--accent-text); }
.demo-bar--over { opacity: .88; }
@media (max-width: 640px) { .demo-bar { font-size: .85rem; padding: 7px 10px; }}

/* ─── ปุ่มพับ/กาง "ดูสินค้าทั้งหมด" — ทรงแคปซูลขอบเรืองแสง (ตามภาพที่เจ้าของส่ง 2026-08-09)
   ลูกศรหมุน 180° เมื่อกาง · ใช้สีหลักของสกินร้าน จึงเปลี่ยนตามธีมอัตโนมัติ */
.hp-toggle-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: .95rem; line-height: 1;
  color: var(--accent); background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hp-toggle-pill:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 34%, transparent);
}
.hp-toggle-pill:active { transform: scale(.97); }
.hp-toggle-chev { font-size: .8em; transition: transform .2s ease; }
.hp-toggle-pill[aria-expanded="true"] .hp-toggle-chev { transform: rotate(180deg); }