/* Catalog PP Home Center — ธีมเดียวกับเว็บ pphomecenter.co.th: กรมท่า #1E2D3B / แดง #E60012 (ราคา+ปุ่ม) / เหลือง #FFB400 (ปุ่มค้นหา+หัวข้อบนพื้นเข้ม) */
:root {
  --shadow: 0 8px 30px rgba(30,45,59,.08);
  --shadow-lg: 0 18px 44px rgba(30,45,59,.14);
  --navy: #1E2D3B;
  --mid-navy: #26394B;
  --red: #E60012;
  --red-light: #FFB400;
  --off-white: #F8F9FB;
  --gray: #6B7280;
  --border: #E5E7EB;
  --green: #22C55E;
  --font-heading: 'Kanit', sans-serif;
  --font-body: 'Sarabun', sans-serif;
  /* ═══ โทเคนดีไซน์ "A · คลาสสิกพีพี" (เจ้าของเลือก 29 ก.ย. 2026 จาก mockup 3 แบบ) ═══
     ต่อยอดจากเว็บเดิม www.pphomecenter.co.th: มุมเหลี่ยม 3px · เส้นขอบบาง 1px · ปุ่มร้านค้าแดงเข้ม #990000
     · ปุ่มค้นหาเหลือง · เมนูที่เปิดอยู่แคปซูลเทาเข้ม · ปุ่มฮีโร่แคปซูลแดงสด · ไอคอนจุดเด่นในวงกลมพื้นครีม
     ⚠ ราคายังเป็นแดง --red (#E60012) ไม่ใช่ --btn · ⚠ กฎที่ใช้โทเคนพวกนี้รวมอยู่ในบล็อกท้ายไฟล์ */
  --btn: #990000;          /* ปุ่มร้านค้า (หยิบใส่ตะกร้า/ซื้อเลย/โทร) */
  --btn-hover: #7A0000;
  --btn-radius: 3px;       /* มุมปุ่ม/ชิป/ช่องกรอก */
  --card-radius: 3px;      /* มุมการ์ด/กล่อง */
  --hero-cta: #F70000;     /* ปุ่มแคปซูลบนฮีโร่หน้าแรก (สีเดียวกับเว็บเดิม) */
  --yellow: #FFB400;       /* ปุ่มค้นหา / หัวข้อบนพื้นเข้ม */
  --cream: #FFF4D6;        /* วงกลมหลังไอคอนจุดเด่น */
  --nav-on: #333;          /* เมนูที่เปิดอยู่ */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ⚠ hidden ต้องหายจริงเสมอ — UA stylesheet ให้ [hidden]{display:none} มา "แบบอ่อน" คลาสที่ตั้ง
   display:flex/inline-flex ทับได้ทันที (specificity เท่ากันแต่มาทีหลัง) → element ที่ JS สั่งซ่อนยังโผล่
   เจอจริง 11 ก.ย.: .card-terms (งวดผ่อนโผล่ตอนเลือก "บัตรเครดิต จ่ายเต็มจำนวน"),
   ปุ่ม "สร้าง QR ใหม่" (.btn), แถบ "กำลังโหลด..." (.more-loading) */
[hidden] { display: none !important; }
body { font-family: var(--font-body); color: var(--navy); background: var(--off-white); line-height: 1.7; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.3; }
a { color: inherit; }
img { max-width: 100%; height: auto; }   /* height:auto — attribute width/height เป็น hint ทั้งสองแกน ถ้า CSS คุมแค่ width รูปจะยืดตามเลข height */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Topbar + header + footer (ร่วมกับหน้าแรก) */
.topbar { background: var(--navy); color: #fff; font-size: 14px; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 500; }
/* ⚠ ตัวที่หนึบคือ .header-stack (ครอบแถบบน + หัวเว็บ) ไม่ใช่ .site-header — เจ้าของสั่ง 24 ก.ย.
   ให้แถบบนหนึบด้วย · ให้ทั้งสองอันหนึบแยกกันไม่ได้ เพราะต้องฝังความสูงแถบบนเป็น top ของหัวเว็บ
   ⚠ .site-header ต้องยัง "positioned" อยู่ — แผงค้นหาที่กางลงมาเป็น absolute เกาะกับมัน
   ⚠⚠ **ห้ามตั้งชื่อคลาสนี้ว่า `.topbar`** — ชื่อนั้นถูกใช้ไปแล้วข้างบน (แถบพื้นน้ำเงิน ตัวอักษรขาว)
      ครอบหัวเว็บด้วยคลาสนั้น = ลิงก์ทั้งแถบกลายเป็นขาวบนพื้นขาว หายไปทั้งเมนู (เจอจริง 24 ก.ย.) */
.header-stack { position: sticky; top: 0; z-index: 50; background: #fff; }
.site-header { background: #fff; border-bottom: 1px solid var(--border); position: relative; }
.site-header .container { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; padding-bottom: 12px; }
.site-header .logo img { height: 48px; display: block; }
/* ⚠ โลโก้ห้ามหดตามแถว flex — เมนูยาวขึ้นแล้วโลโก้ถูกบีบแบน (เจ้าของแจ้ง 30 ก.ย.) · ให้ช่องค้นหาเป็นตัวหดแทน */
.site-header .logo { flex-shrink: 0; }
.site-header .logo img { width: auto; max-width: none; }
.site-header nav { display: flex; gap: 24px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.site-header nav a { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.site-header nav a:hover, .site-header nav a.active { color: var(--red); border-color: var(--red); }
.site-footer { background: var(--navy); color: #9CA3AF; padding: 36px 0; text-align: center; font-size: 14px; margin-top: 64px; }
.site-footer img { height: 60px; margin-bottom: 12px; }
.site-footer .slogan { font-family: var(--font-heading); color: var(--red-light); font-size: 18px; margin-bottom: 6px; }

/* Buttons */
/* ⚠ `background: transparent` ต้องอยู่ตรงนี้เสมอ — ถ้าไม่ตั้ง <button> จะได้พื้นเทา
   ของเบราว์เซอร์ (buttonface) ส่วน <a> ได้พื้นใส ปุ่มหน้าตาเดียวกันจึงออกมาคนละสี
   แล้วแต่ว่าใครเขียนด้วยแท็กอะไร (เจ้าของเจอที่ปุ่ม "สั่งซ้ำรายการชุดนี้" 17 ก.ย.)
   ปุ่มที่ต้องการพื้นสีให้ตั้งเองในคลาสตัวแปร (.btn-red ฯลฯ) ซึ่งเขียนทีหลังจึงชนะ */
.btn { font-family: var(--font-heading); font-weight: 600; font-size: 16px; padding: 12px 26px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #B8000E; }
.btn-outline-navy { border: 2px solid var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--off-white); }

/* Catalog hero */
.catalog-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--mid-navy) 100%); color: #fff; padding: 20px 0; }
.catalog-hero h1 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 900; }
.catalog-hero p { color: #C7CCDA; font-size: 14px; margin-top: 2px; }

/* Layout */
.catalog-layout { display: grid; grid-template-columns: 250px 1fr; gap: 32px; padding-top: 32px; }

/* Filters */
.filters { position: sticky; top: 90px; align-self: start; }
.filter-block { margin-bottom: 24px; }
.filter-label { font-family: var(--font-heading); font-weight: 700; font-size: 15px; margin-bottom: 8px; display: block; }
.search-row { display: flex; gap: 6px; }
.search-row input { flex: 1; padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 15px; }
.search-row input:focus { outline: 2px solid var(--red-light); border-color: transparent; }
.btn-search { background: var(--red); border: none; border-radius: 8px; padding: 0 14px; cursor: pointer; font-size: 16px; }
.filter-list { list-style: none; }
.filter-list li a { display: flex; justify-content: space-between; text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: 15px; }
.filter-list li a:hover { background: var(--off-white); }
.filter-list li a.active { background: var(--navy); color: #fff; font-weight: 700; }
.filter-list .count { color: var(--gray); font-size: 13px; }
.filter-list li a.active .count { color: #C7CCDA; }
.brand-list { max-height: 320px; overflow-y: auto; }

/* Product grid */
.active-filters { background: #fff; border: none; box-shadow: var(--shadow); border-radius: 12px; padding: 10px 16px; margin-bottom: 18px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.active-filters .clear { color: var(--red); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.active-filters .clear svg.lucide { width: 15px; height: 15px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
/* ดีไซน์ A: กรอบการ์ดอยู่ที่ .card-wrap (มุม 3px ขอบ 1px) เพราะปุ่มใส่ตะกร้าอยู่นอก <a> แต่ต้องอยู่ "ในการ์ด"
   ⚠ .product-card เองไม่มีขอบ/เงา/ขยับตอน hover แล้ว — hover ให้เงาที่ .card-wrap ทั้งใบ */
.product-card { border: none; box-shadow: none; border-radius: 0; overflow: hidden; text-decoration: none; background: #fff; display: flex; flex-direction: column; }
/* ปุ่มหัวใจ "รายการโปรด" (เจ้าของสั่ง 24 ก.ย.)
   ⚠ .card-wrap กลายเป็นลูกของตะแกรงแทนการ์ด — ต้องสูงเต็มช่องเอง ไม่งั้นการ์ดในแถวเดียวกันสูงไม่เท่ากัน
   ⚠ ปุ่มต้องอยู่เหนือการ์ด (z-index) และ **ไม่ขยับตาม transform ของการ์ดตอน hover**
     จึงวางบน .card-wrap ไม่ใช่ในตัวการ์ด */
.card-wrap { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.card-wrap:hover { box-shadow: var(--shadow); border-color: #D1D5DB; }
.card-wrap > .product-card { flex: 1; min-width: 0; }
.fav-form { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.fav-btn { position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(255,255,255,.92); color: var(--gray); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: color .15s, border-color .15s, background .15s; }
.fav-form .fav-btn { position: static; }
.fav-btn:hover { color: var(--red); border-color: var(--red); background: #fff; }
.fav-btn svg.lucide { width: 18px; height: 18px; }
/* กดแล้ว = หัวใจทึบสีแดง · ⚠ ต้อง fill ด้วย ไม่ใช่แค่เปลี่ยนสีเส้น ไม่งั้นแยกไม่ออกว่ากดหรือยัง */
/* ปุ่มใส่ตะกร้าใต้ราคา (เจ้าของสั่ง 24 ก.ย. ให้กดใส่ตะกร้าได้จากการ์ด · 29 ก.ย. "รถเข็นไม่ต้องเป็นปุ่ม
   [กลมลอย] เหมือนเว็บต้นแบบ ให้เป็นดีไซน์ของแบรนด์ร้านเอง") → ดีไซน์ A: ปุ่มเหลี่ยม 3px แดงเข้ม มีข้อความ
   ⚠ ยังอยู่นอก <a> ของการ์ด (form ซ้อนลิงก์ไม่ได้) — เป็นลูกคนสุดท้ายของ .card-wrap (flex column) จึงอยู่ก้นการ์ด
   ⚠ คลาส .card-add / .card-add-form / .card-add--pick คือ hook ของ JS ใน layouts/app.blade.php และเทสต์ ห้ามเปลี่ยนชื่อ
   ⚠ "เลือกตัวเลือก" (หลายตัวเลือก) = แบบเส้นขอบ · "หยิบใส่ตะกร้า" (ตัวเลือกเดียว) = ทึบ — ลูกค้าแยกได้ว่าปุ่มไหนกดแล้วลงตะกร้าทันที */
.card-add { display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 6px 10px 10px; padding: 9px 10px; border-radius: var(--btn-radius); border: 1px solid var(--btn);
  background: var(--btn); color: #fff; cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; line-height: 1.2; white-space: nowrap;
  transition: background .15s, color .15s; }
.card-add:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; }
.card-add:active { background: var(--btn-hover); }
.card-add svg.lucide { width: 16px; height: 16px; }
.card-add--pick { background: #fff; color: var(--btn); }
.card-add--pick:hover { background: #FFF5F5; border-color: var(--btn); color: var(--btn); }
.card-add-form { margin: 0; display: block; }
.card-add-form .card-add { width: calc(100% - 20px); }

/* แผ่นเลือกตัวเลือกจากการ์ด (เจ้าของสั่ง 24 ก.ย. "เอาเข้าตะกร้าให้ขึ้นตัวเลือกมาเลย")
   ⚠ กฎเปิดต้องเป็น :not([hidden]) — CSS ของเราชนะ [hidden] ของเบราว์เซอร์เสมอ
     (กับดักเดิมจาก .pdp-bar / .pk-backdrop / .share-opt) */
.opt-sheet:not([hidden]) { position: fixed; inset: 0; z-index: 95; display: flex;
  align-items: center; justify-content: center; }
.opt-backdrop { position: absolute; inset: 0; background: rgba(15,18,30,.5); }
.opt-panel { position: relative; background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg);
  width: min(380px, calc(100vw - 28px)); max-height: 82vh; display: flex; flex-direction: column;
  padding: 16px 18px 18px; }
/* ── หัวแผ่น (ติดบน) ────────────────────────────────────────────────
   ⚠⚠ ของที่ "เหมือนกันทุกแถว" ต้องอยู่ตรงนี้ครั้งเดียว ห้ามซ้ำในแถว —
     86% ของสินค้าหลายตัวเลือกราคาเท่ากันหมด แถวจะโชว์เลขเดิม 10-20 ครั้ง
     โดยไม่ให้ข้อมูลอะไร แถมเบียดพื้นที่ชื่อจนชื่อโดนตัด (นี่คือต้นเหตุจริงที่แผ่น "ดูยาก") */
.opt-head { margin-bottom: 10px; }
.opt-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.opt-head b { font-family: var(--font-heading); font-weight: 600; font-size: 15.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.opt-head-sub { font-size: 12.5px; color: var(--gray); margin-top: 3px; }
.opt-head-sub[hidden] { display: none; }
/* ⚠ [hidden] แพ้ CSS ของเรา → ต้องผูก display ไว้กับ :not([hidden]) เสมอ */
.opt-head-price:not([hidden]) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.opt-head-price .opt-price { font-size: 18px; }
.opt-x { border: none; background: var(--off-white); border-radius: 50%; width: 30px; height: 30px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); }
.opt-x .lucide { width: 16px; height: 16px; }

/* ── รายการ (โซนที่เลื่อน) ─────────────────────────────────────────
   ⚠ ตัวที่เลื่อนคือรายการ ไม่ใช่ทั้งแผ่น — สินค้าจริงมีได้ถึง 86 ตัวเลือก
     หัวกับท้ายต้องอยู่กับที่ ไม่งั้นเงื่อนไขราคาเงินสดไปอยู่ท้ายสุดที่ไม่มีใครเลื่อนไปเห็น */
.opt-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
  overscroll-behavior: contain; padding-bottom: 6px; }
.opt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
  align-items: center; width: 100%; text-align: left; min-height: 52px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  padding: 9px 12px; cursor: pointer; font-family: var(--font-body); color: var(--navy);
  contain: content; }
/* มีรูป = เพิ่มคอลัมน์รูปหน้าสุด · ไม่มีรูปสักตัวเลือก = ไม่มีคอลัมน์นี้เลย
   (กล่องเปล่า 20 อันเรียงกันดูเหมือนของพัง มากกว่าดูเหมือนดีไซน์) */
.opt-list--img .opt-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
.opt-row:hover { border-color: var(--red); }
.opt-row:active { background: #FFF5F5; }   /* มือถือไม่มี hover — ต้องมีการตอบสนองตอนแตะ */
.opt-row:disabled { opacity: .55; cursor: default; }
/* ⚠⚠ แถวที่เลือกอยู่ — **ต้องอยู่หลัง :hover/:active เสมอ** น้ำหนัก selector เท่ากันทั้งคู่ (0,2,0)
     วางไว้ก่อน = โดนทับโดยไม่มี error และเทสต์เขียวหมด (แผลเดิม .hero-lead กับ .hero p 25 ก.ย.)
   ⚠ ชมพูอ่อน + ขอบแดง ไม่ใช่แดงทึบ — เจ้าของสั่งไว้แล้วที่การ์ดโหมดรับของ (commit fbfed9d) */
.opt-row[aria-pressed="true"] { background: #FFF5F5; border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }

/* ── แถวจำนวน + ปุ่มใส่ตะกร้า (เจ้าของสั่ง 25 ก.ย. "ทำให้มีปรับจำนวนด้วย") ──
   ⚠ อยู่ในโซนท้ายที่ติดล่างเสมอ — สินค้าจริงมีได้ถึง 86 ตัวเลือก ปุ่มซื้อห้ามไปอยู่ท้ายรายการ
   ⚠ เรนเดอร์ไว้ตลอด (ปุ่ม disabled ตอนยังไม่เลือก) ไม่ใช่โผล่ทีหลัง — แผ่นสูงสุด 76vh
     ถ้าความสูงเปลี่ยนตอนแตะ รายการที่กำลังเลื่อนจะขยับใต้นิ้วลูกค้า */
.opt-buy { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.opt-buy .opt-add { flex: 1; min-width: 0; justify-content: center; padding: 10px 14px; font-size: 14.5px; }
/* ⚠ ปุ่มแดงของเว็บนี้คือ `.btn-red` **ไม่มี `.btn-primary`** (เขียนผิดคลาส = ปุ่มใสไม่มีสี
     และไม่มี error อะไรเลย) · กฎนี้ 3 คลาสจึงชนะ `.btn-red` ได้ไม่ว่าอยู่ตรงไหนในไฟล์ */
.opt-buy .opt-add:disabled { background: #EFF1F6; color: var(--gray); cursor: default; }

.opt-img { width: 48px; height: 48px; border-radius: 8px; background: #fff; border: 1px solid #EEF0F4;
  overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
/* ⚠ contain ไม่ใช่ cover — รูปสินค้าชุดนี้พื้นขาว ใช้ cover จะโดนตัดขอบสินค้าหาย */
.opt-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* ⚠⚠ ตัวเลือกที่ยังไม่มีรูป = **ช่องว่างเปล่า ไม่มีกรอบ ไม่มีโลโก้** (เจ้าของสั่ง 24 ก.ย.)
     เว้นที่ไว้เท่าเดิมเพื่อให้ชื่อทุกแถวเรียงตรงแนวเดียวกัน แต่ไม่วาดอะไรลงไป
     ⚠ ห้ามเอารูปปกสินค้ามาใส่แทน = บอกลูกค้าว่าตัวเลือกนั้นหน้าตาแบบนั้น
       (เช่นรูปสีขาวไปโผล่ในแถว "สีดำ") */
.opt-img.is-none { background: transparent; border-color: transparent; }

/* ⚠ ต้องมี min-width:0 ไม่งั้น -webkit-line-clamp ไม่ทำงานในลูกของ grid */
.opt-txt { min-width: 0; }
.opt-name { font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* ⚠ ชื่อขนาดจริงมีแบบไม่มีช่องว่างเลย เช่น 355x3.0x25.4mm(14"x1/8"x1")
     ไม่มี anywhere = สตริงเดียวดันคอลัมน์ราคาตกขอบจอ */
  overflow-wrap: anywhere; }
.opt-sub { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt-tier { font-family: var(--font-heading); font-weight: 600; font-size: 11px; color: #B91C1C;
  background: #FFF1F1; border-radius: 999px; padding: 1px 7px; flex-shrink: 0; }

/* คอลัมน์ราคา — flex-shrink:0 + nowrap เพื่อให้ชื่อยาวไปตัดตัวเอง ไม่ใช่มาบีบราคา */
.opt-pr { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.opt-price { font-family: var(--font-heading); font-weight: 700; color: var(--red); font-size: 16px;
  white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.3; }
.opt-unit { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--gray); }
/* ⚠ ราคาเงินสดต้องเล็กกว่าราคาปกติเสมอ — ราคาปกติคือยอดที่ตะกร้าคิดจริง
     และต้องบอกเงื่อนไขในตัว ("สแกนจ่าย") ห้ามเป็นเลขลอยๆ
   ⚠⚠ **เป็นข้อความเปล่า ไม่ใช่ป้ายมีพื้นหลัง** (เจ้าของแจ้ง 24 ก.ย. "ดีไซน์พัง") —
     ป้ายมีพื้นหลังทำให้ขอบขวาของมันไปชิดขอบการ์ดเหลือ 1px (วัดแล้วที่จอ 430px)
     และสินค้าจริงอย่างสีสเปรย์มี 41 ตัวเลือก = แถบเขียว 41 แถบเรียงกันทั้งหน้า
     ข้อความเปล่าจัดชิดขวาตรงแนวเดียวกับราคาด้านบนพอดี อ่านเป็นคู่กันทันที */
.opt-cash { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: #0B8A4A;
  white-space: nowrap; line-height: 1.3; font-variant-numeric: tabular-nums; }

/* ── ท้ายแผ่น (ติดล่าง) ──────────────────────────────────────────── */
.opt-foot { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.opt-note { font-size: 12px; color: #3F6B54; line-height: 1.5; text-align: center; margin-bottom: 6px; }
.opt-note[hidden] { display: none; }
.opt-more { display: block; text-align: center; font-size: 13.5px; color: var(--gray); text-decoration: none; }
.opt-more:hover { color: var(--red); }

@media (min-width: 561px) { .opt-name { -webkit-line-clamp: 3; } }
@media (max-width: 560px) {
  .opt-sheet:not([hidden]) { align-items: flex-end; }
  .opt-panel { width: 100%; border-radius: 18px 18px 0 0; max-height: 76vh;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .opt-list--img .opt-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .opt-img { width: 44px; height: 44px; }
  .opt-price { font-size: 15px; }
}
.fav-btn.is-on { color: var(--red); border-color: var(--red); }
.fav-btn.is-on svg.lucide { fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .fav-btn { transition: none; } }
/* ⚠ กรอบรูปต้องเป็นสี่เหลี่ยมจัตุรัสเป๊ะ — `aspect-ratio` อย่างเดียวไม่พอ (เจ้าของแจ้ง 19 ก.ย.
     "รูปบางอันไม่ใช่ 1:1"): .card-image เป็นลูก flex ของ .product-card (flex-direction:column)
     ค่า min-height อัตโนมัติของลูก flex = ความสูงขั้นต่ำของเนื้อหาข้างใน ซึ่งก็คือรูปที่กาง
     เต็มความกว้างตามสัดส่วนจริง → รูปแนวตั้ง 300x400 ดัน .card-image เป็น 281x369 ทับ aspect-ratio
     แก้ 2 ชั้น: min-height:0 (ปลดพื้นขั้นต่ำ) + ถอดรูปออกจาก flow ด้วย position:absolute
     ⚠ ป้าย .flag อยู่หลังรูปใน DOM จึงวางทับได้ตามเดิม ไม่ต้องใส่ z-index */
.card-image { position: relative; aspect-ratio: 1; min-height: 0; background: #fff;
  border-bottom: 1px solid var(--off-white); display: flex; align-items: center; justify-content: center; }
/* ไม่มี padding — รูปสินค้าเกือบทั้งหมดเป็นภาพจัตุรัสที่ขอบออกแบบมาให้ชนกรอบอยู่แล้ว
   (เจ้าของแจ้ง 19 ก.ย. "ช่องว่างเยอะเกิน") */
.card-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.no-image { opacity: .18; width: 44%; }
.no-image.big { opacity: .15; width: 38%; margin: 0 auto; }
.flag { position: static; font-family: var(--font-heading); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #FEF9C3; color: #854D0E; display: inline-block; }
.card-image .flag { position: absolute; top: 8px; left: 8px; }
.card-image .flag + .flag { top: 34px; }
.flag-net { background: #FEF08A; color: #713F12; }
.flag-no-vat { background: #DBEAFE; color: #1E40AF; }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card-brand { font-size: 12px; font-weight: 700; color: var(--gray); letter-spacing: .5px; }
/* ชื่อสินค้าตัดที่ 2 บรรทัด — เดิมเป็น flex:1 ปล่อยให้ยืดเต็มที่ ชื่อยาว 4 บรรทัดจึงดันความสูง
   ทั้งแถว แล้วการ์ดชื่อสั้นในแถวเดียวกันก็เหลือช่องว่างกลางการ์ดเป็นแถบใหญ่
   ⚠ ห้ามใส่ min-height จอง 2 บรรทัด — แถวที่ชื่อสั้นทุกใบจะสูงขึ้นฟรีๆ โดยไม่ได้อะไรกลับมา
     (ราคาชิดก้นการ์ดอยู่แล้วด้วย margin-top:auto ช่องว่างจึงไปกองใต้ชื่อเองโดยอัตโนมัติ)
   ชื่อเต็มยังอยู่ใน DOM ครบ (ตัดด้วย CSS เฉยๆ) — ไม่กระทบ SEO */
/* ⚠ ชื่อสินค้าไม่หนาและไม่ใหญ่ (เจ้าของสั่ง 24 ก.ย. "ไม่ต้องตัวหนาขนาดนี้และลดขนาดฟอนต์")
     ตัวหนา 600 ที่ 15px แข่งความเด่นกับราคา ทั้งที่ราคาคือสิ่งที่ลูกค้ากวาดตาหาบนการ์ด */
.card-name { font-family: var(--font-heading); font-weight: 500; font-size: 13.5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ราคา+จำนวนขนาด ชิดก้นการ์ดเสมอ → ทั้งแถวอ่านราคาได้ในระดับสายตาเดียว */
.card-price { color: var(--red); font-family: var(--font-heading); font-weight: 700; font-size: 17px; margin-top: auto; padding-top: 4px; }
/* ⚠ สัญลักษณ์ ฿ แทนคำว่า "บาท" (เจ้าของสั่ง 24 ก.ย.) — สั้นกว่า เหลือที่ให้ตัวเลข */
.card-price .baht { font-size: 13px; color: var(--gray); font-weight: 400; }
/* คำว่า "เริ่ม" นำหน้าราคาเมื่อตัวเลือกราคาไม่เท่ากัน — ต้องเบากว่าตัวเลขชัดเจน */
.card-price .price-from { font-size: 12px; color: var(--gray); font-weight: 400; }
/* ป้าย "ส่งฟรี" ใต้ราคา — กล่องเส้นขอบบางๆ + ไอคอนรถ (เจ้าของสั่ง 24 ก.ย.)
   ⚠ เส้นขอบอย่างเดียว ไม่ทึบ — ป้ายทึบสีจะไปแข่งความเด่นกับราคาและปุ่มใส่ตะกร้า
   ⚠ width: fit-content + align-self: flex-start — .card-body เป็น flex column
     ไม่ใส่จะยืดเต็มความกว้างการ์ด (แผลเดิมจากป้าย .card-tier) */
.card-ship { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  width: fit-content; margin-top: 5px; padding: 2px 8px; border: 1px solid #A7D8BE;
  border-radius: 7px; color: #0B8A4A; font-size: 11.5px; font-weight: 600; line-height: 1.5; }
.card-ship svg.lucide { width: 14px; height: 14px; }
.pk-ship { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 5px 11px; border: 1px solid #A7D8BE; border-radius: 9px;
  color: #0B8A4A; font-size: 13.5px; font-weight: 600; }
.pk-ship svg.lucide { width: 17px; height: 17px; flex-shrink: 0; }
/* CTA แทนราคาสำหรับ guest ที่ยังไม่มีราคาปลีก (การ์ด + การ์ดลอย) — ตัวเล็กสีแดง ไม่ตัวหนา */
.card-member-cta { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: var(--red); line-height: 1.3; }
.fc-price .card-member-cta { font-size: 11px; }
/* CTA ในช่องราคาตารางสินค้า (ลิงก์ไป /register) */
.member-price-cta { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--red); color: var(--red); border-radius: 999px; padding: 4px 12px; font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.member-price-cta:hover { background: var(--red); color: #fff; }
.member-price-cta svg.lucide { width: 13px; height: 13px; }
.vt-cta-cell { text-align: center; vertical-align: middle; background: #FFF9F9 !important; }
.vt-cta-box { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 20px 12px; }
.vt-cta-box > svg.lucide { width: 28px; height: 28px; color: var(--red); }
.vt-cta-title { font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; color: var(--navy); }
.vt-cta-btn { padding: 11px 24px; font-size: 15px; }
.vt-cta-sub { font-size: 12.5px; color: var(--gray); }
.vt-cta-sub a { color: var(--red); font-weight: 600; }
.price-cta-login { font-size: 13px; color: var(--gray); align-self: center; }
.price-cta-login a { color: var(--red); font-weight: 600; }
.vt-no-order { color: var(--gray); }
/* สถานะ pending: แทน CTA "สมัครสมาชิก" ด้วยข้อความ "รอทีมงานติดต่อกลับเปิดระบบ" */
.card-pending-note { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: #A16207; line-height: 1.3; }
.fc-price .card-pending-note { font-size: 11px; }
.member-price-note { display: inline-flex; align-items: center; gap: 5px; background: #FEF9C3; border: 1px solid #FDE68A; color: #854D0E; border-radius: 999px; padding: 4px 12px; font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; }
.member-price-note svg.lucide { width: 13px; height: 13px; flex-shrink: 0; }
.vt-cta-box--pending > svg.lucide { color: #A16207; }
.vt-cta-box--card.vt-cta-box--pending { background: #FEFCE8; border-color: #FDE68A; }
/* ป้ายส่วนลดในตาราง/การ์ดราคา (เดิมเป็น inline style ซ้ำ 3 ที่) */
.flag-discount { background: #FEE2E2; color: #B91C1C; font-size: 11px; }

/* ── ตารางราคาแบบการ์ดสำหรับมือถือ (แสดงเฉพาะ ≤600px — ดู media query ท้ายไฟล์) ──
   เดิมตารางถูกบังคับ min-width 520px บนจอ 390px → ปุ่มสั่งซื้อ/CTA หลุดนอกจอ
   จึงเปลี่ยนเป็นการ์ดต่อ variant: ขนาด/บรรจุ/ราคา/ปุ่ม ซ้อนกันในความกว้างจอจริง */
.vt-cards { display: none; }
.vt-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); }
.vt-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vt-card-size { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--navy); }
.vt-card-pack { font-size: 13px; color: var(--gray); text-align: right; }
.vt-card-rows { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--off-white); display: flex; flex-direction: column; gap: 5px; }
.vt-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vt-card-label { font-size: 13px; color: var(--gray); flex-shrink: 0; }
.vt-card-val { text-align: right; font-family: var(--font-heading); font-weight: 700; color: var(--red); overflow-wrap: anywhere; }
.vt-card-val .price-note { font-size: 12px; color: var(--gray); font-weight: 400; font-family: var(--font-body); }
.vt-card-row--special .vt-card-label { color: var(--red); font-weight: 600; }
.vt-card-order { margin-top: 10px; display: flex; justify-content: flex-end; }
.vt-card-order .vt-order-form { display: flex; align-items: center; gap: 8px; width: 100%; }
.vt-card-order .vt-cart-btn--wide { flex: 1; width: auto; height: 40px; gap: 7px; padding: 0 14px; font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; border-radius: 12px; }
.vt-cta-box--card { background: #FFF9F9; border: 1px solid #FCA5A5; border-radius: 14px; text-align: center; }
.vt-cta-box--card .vt-cta-btn { max-width: 100%; }
.card-meta { font-size: 12px; color: var(--gray); }

.empty-state { text-align: center; padding: 64px 0; color: var(--gray); }
.empty-state .btn { margin-top: 16px; }
.pagination-wrap { margin-top: 28px; display: flex; justify-content: center; }

/* Product detail */
.product-page { padding-top: 24px; }
.breadcrumb { font-size: 14px; color: var(--gray); margin-bottom: 20px; }
.breadcrumb a { color: var(--gray); text-decoration: none; }
.breadcrumb a:hover { color: var(--red); }
.product-detail { display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: start; }
/* กัน grid blowout: ลูก grid มี min-width:auto โดย default → min-content ของตาราง (5 คอลัมน์)
   ดันคอลัมน์กว้างเกิน viewport ทำให้หน้าล้นแนวนอน; min-width:0 ให้ track หดได้ .vt-scroll จึงเลื่อนเองได้ */
.product-detail > * { min-width: 0; }
/* ตารางตัวเลือกสินค้าเลื่อนแนวนอนได้ทุกขนาดจอ (เดิมอยู่เฉพาะ ≤560px → tablet/แนวนอนล้น) */
.vt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.detail-image { border: none; box-shadow: var(--shadow); border-radius: 18px; background: var(--off-white); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.detail-image img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.detail-brand { font-weight: 700; color: var(--gray); letter-spacing: 1px; font-size: 14px; }
/* แถวแบรนด์ + ป้ายของแท้ เหนือชื่อสินค้า (เจ้าของสั่ง 20 ก.ย.) */
.detail-idline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.genuine-tag { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  color: #0F8A4A; background: #EFFaf3; border: 1px solid #CDEBDA; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: 1; padding: 5px 11px; }
.genuine-tag svg.lucide { width: 14px; height: 14px; }
/* (สไตล์บรรทัด 2 ราคาตามวิธีรับของ `.pk-dual` ถูกถอดออก 24 ก.ย. — เจ้าของสั่งให้ลูกค้า
   เห็นราคาเดียวคือราคาของสิทธิ์ตัวเอง + ราคาจ่ายเงินสด ทีมงานเป็นคนเลือกให้ว่าได้ราคาไหน) */
/* บรรทัดผ่อน 0% ใต้ราคา — ขึ้นเฉพาะตอนเปิดผ่อนจริงในหน้าตั้งค่าการชำระเงิน (ดูหมายเหตุในบเลด) */
.pk-inst { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  color: var(--navy); font-size: 14px; }
.pk-inst svg.lucide { width: 17px; height: 17px; color: var(--gray); flex-shrink: 0; }
.pk-inst b { font-family: var(--font-heading); font-weight: 700; }
.detail-info h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin: 4px 0 10px; }
/* ปุ่มแชร์สินค้า — รองลงมาจากปุ่มสั่งซื้อ จึงเป็นปุ่มโครงบาง ไม่ใช่ปุ่มแดงทึบ */
.detail-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--gray); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s; }
.share-btn:hover { border-color: var(--navy); color: var(--navy); }
.share-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.share-btn .lucide { width: 16px; height: 16px; }
.share-done { font-size: 13.5px; font-weight: 600; color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .share-btn { transition: none; } }

/* แผงเลือกช่องทางแชร์ (เจ้าของสั่ง 24 ก.ย. — Facebook / LINE / คัดลอกลิงก์)
   ⚠ กฎเปิดต้องเป็น `:not([hidden])` — element ที่ส่งมาพร้อม hidden แพ้ `display:flex` ของเราเสมอ
     (author > user-agent) แพตเทิร์นเดียวกับ .pdp-bar / .pk-backdrop
   ⚠ จอแคบให้เลื่อนขึ้นจากล่างจอเหมือนแผ่นตัวเลือก จอกว้างลอยกลางจอ */
.share-sheet:not([hidden]) { position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; }
.share-backdrop { position: absolute; inset: 0; background: rgba(15, 18, 30, .5); }
.share-panel { position: relative; background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg);
  width: min(360px, calc(100vw - 32px)); padding: 16px 18px 18px; }
.share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.share-head b { font-family: var(--font-heading); font-size: 16px; }
.share-x { border: none; background: var(--off-white); border-radius: 50%; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gray); }
.share-x .lucide { width: 16px; height: 16px; }
.share-opts { display: flex; flex-direction: column; gap: 8px; }
.share-opt { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  color: var(--navy); font-family: var(--font-body); font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.share-opt:hover { border-color: var(--navy); background: var(--off-white); }
.share-opt:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.so-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; background: var(--off-white); color: var(--gray); }
.so-ic .lucide { width: 18px; height: 18px; }
/* ⚠ โลโก้แบรนด์เป็น path ทึบ — ต้อง fill ไม่ใช่ stroke ไม่งั้นกฎกลาง svg.lucide{stroke-width:2}
   ทำให้เส้นบวมจนอ่านไม่ออก (บทเรียนเดิมจากโลโก้ LINE ในเมนูล่างจอ) */
.so-fb .so-ic { background: #E7F0FD; color: #1877F2; }
.so-msgr .so-ic { background: #E8F1FF; color: #0084FF; }
.so-line .so-ic { background: #E6F7EC; color: #06A94D; }
/* ⚠⚠ ต้องมีบรรทัดนี้ — `.share-opt{display:flex}` เป็นกฎของเรา ซึ่งชนะ `[hidden]` ของเบราว์เซอร์เสมอ
   (author > user-agent) ปุ่มที่ส่งออกมาพร้อม hidden รอ JS เปิด (Messenger / แชร์ไปแอปอื่น)
   จะโผล่ให้กดตั้งแต่แรกบนเครื่องที่ใช้ไม่ได้ = ปุ่มหลอก · กับดักเดียวกับ .pdp-bar / .pk-backdrop */
.share-opt[hidden] { display: none; }
@media (max-width: 560px) {
  .share-sheet:not([hidden]) { align-items: flex-end; }
  .share-panel { width: 100%; border-radius: 18px 18px 0 0; padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .share-opt { transition: none; } }
.detail-flags { display: flex; gap: 8px; margin-bottom: 14px; }
/* ⚠ ไม่ใช้ white-space: pre-line อีกแล้ว — คำอธิบายถูกแปลงเป็น <p>/<ul>/<dl> จริงโดย
   App\Support\DescriptionFormatter ตั้งแต่ 18 ก.ย. (ดูบล็อก .pd-* ท้ายไฟล์) */
.detail-desc { color: var(--gray); margin-bottom: 18px; }
.variant-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.variant-table th { font-family: var(--font-heading); background: var(--navy); color: #fff; text-align: left; padding: 10px 14px; font-weight: 600; }
.variant-table th.special { background: var(--red); }
.variant-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.variant-table tr:nth-child(even) td { background: var(--off-white); }
.variant-table .price { color: var(--red); font-weight: 700; font-family: var(--font-heading); white-space: nowrap; }
.variant-table .price-note { font-size: 12px; color: var(--gray); font-weight: 400; font-family: var(--font-body); }
.sku-tag { display: block; font-size: 11px; color: var(--gray); font-weight: 400; font-family: var(--font-body); margin-top: 2px; }
.detail-source { font-size: 13px; color: var(--gray); margin-top: 10px; }
.detail-cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.related { margin-top: 56px; }
.related h2 { font-size: 24px; margin-bottom: 18px; }

/* สินค้าอื่นๆ (สุ่มทั้งร้าน + infinite scroll) */
.more-products { margin-top: 40px; }
.more-products h2 { font-size: 24px; margin-bottom: 18px; }
.section-divider { border: 0; border-top: 1px solid var(--off-white, #EEF0F4); margin: 44px 0 32px; }
.more-status { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 26px; min-height: 44px; }
.more-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--gray, #667); font-size: 15px; }
.more-loading i, .more-loading svg { width: 18px; height: 18px; animation: spin 0.9s linear infinite; }
.more-btn { min-width: 180px; }
.more-sentinel { height: 1px; }
/* ตัวโหลดต่อเนื่องของแคตตาล็อก — เดสก์ท็อปไม่ใช้ (มีปุ่มแบ่งหน้าอยู่แล้ว) เปิดเฉพาะ ≤900px */
.cat-more { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .product-detail { grid-template-columns: 1fr; }
  .site-header nav { gap: 14px; font-size: 13px; }
  .site-header .logo img { height: 38px; }
}

/* Lucide icons */
svg.lucide { width: 1em; height: 1em; stroke-width: 2; vertical-align: -0.12em; }
.btn-search svg.lucide { color: #fff; }

/* Pagination */
.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-family: var(--font-heading); }   /* wrap: หน้าเยอะๆ ปุ่มเลขจะไม่ทะลุขอบจอมือถือ */
.pager-btn { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; box-shadow: var(--shadow); text-decoration: none; font-weight: 600; font-size: 15px; transition: transform .12s, box-shadow .12s; }
.pager-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--red); }
.pager-btn.current { background: var(--navy); color: #fff; }
.pager-btn.disabled { opacity: .35; pointer-events: none; }
.pager-dots { color: var(--gray); padding: 0 4px; }
/* display:contents = ตัวห่อไม่กินที่ในแถว flex เลย ปุ่มเลขเรียงเหมือนเดิมทุกประการ */
.pager-nums { display: contents; }
.pager-now { display: none; }

/* Footer แบบเว็บเดิม: ข้อมูลบริษัท + DBD */
.footer-grid { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 32px; text-align: left; align-items: start; }
.footer-col h4 { color: #fff; font-family: var(--font-heading); font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.footer-brand { text-align: center; }
.footer-brand .f-logo { height: 84px; margin-bottom: 10px; }
.footer-info { list-style: none; }
.footer-info li { display: flex; gap: 9px; align-items: baseline; padding: 5px 0; font-size: 14px; line-height: 1.6; }
.footer-info svg.lucide { color: var(--red-light); flex-shrink: 0; transform: translateY(2px); }
.footer-info a { color: #fff; text-decoration: none; font-weight: 600; }
.footer-info a:hover { color: var(--red-light); }
.footer-trust { text-align: center; }
.dbd-card { background: #fff; border-radius: 12px; padding: 10px 16px; display: inline-block; }
.dbd-card img { height: 58px; display: block; }
.f-channels { font-size: 12.5px; margin-top: 12px; line-height: 1.6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 18px; text-align: center; font-size: 13px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-info li { justify-content: center; text-align: left; } }

/* Header เหมือนหน้าแรก */
.announce { background: var(--navy); color: #fff; font-family: var(--font-heading); font-size: 13px; }
.announce .container { display: flex; justify-content: center; gap: 34px; padding: 8px 20px; flex-wrap: wrap; }
/* ⚠ ไอคอนแบรนด์ต้องเป็น inline SVG — lucide ที่ host ไว้ไม่มีไอคอนโซเชียลสักตัว
   ⚠ path ทึบต้อง fill:currentColor (ไม่ใช่ stroke) ไม่งั้นเส้นบวมจนอ่านไม่ออกที่ขนาดเล็ก */
/* แถบบนแบบเว็บเดิม (เจ้าของสั่ง 30 ก.ย.): คำโฆษณา(ซ้าย) · เข้าสู่ระบบ/สมัครสมาชิก + ไอคอนโซเชียลวงกลมสี(ขวา)
   ⚠ ห้ามตกบรรทัดที่สอง — แถบบนสูงขึ้น = หัวเว็บที่หนึบสูงตาม ของที่หนึบต่อเลื่อนตามทั้งหมด */
.announce { background: #1F2A36; }
.announce .an-row { justify-content: space-between; align-items: center; gap: 16px; flex-wrap: nowrap; padding-top: 7px; padding-bottom: 7px; }
.an-tagline { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-right { display: flex; align-items: center; gap: 20px; }
.an-social { display: flex; align-items: center; gap: 7px; }
.an-social a { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform .15s, filter .15s; }
.an-social a:hover { transform: translateY(-1px); filter: brightness(1.1); }
.an-social .soc-fb { background: #4267B2; }
.an-social .soc-yt { background: #E62117; }
.an-social .soc-line { background: #06C755; }
.an-social .soc-tt { background: #000; }
.an-social .soc-shopee, .an-social .soc-laz { background: none; }
.an-ic { width: 16px; height: 16px; display: block; }
.an-brand { width: 28px; height: 28px; display: block; }
.an-nav { display: flex; align-items: center; gap: 18px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
.an-nav a { color: #fff; text-decoration: none; white-space: nowrap; transition: color .15s; }
.an-nav a:hover { color: var(--yellow); }
.announce span { display: flex; align-items: center; gap: 6px; }
.announce .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red-light); display: inline-block; }
.site-header { box-shadow: 0 1px 0 var(--border); border-bottom: none; }
.site-header .container { padding-top: 14px; padding-bottom: 14px; gap: 20px; }
.site-header .logo img { height: 46px; }
.site-header nav { gap: 26px; font-weight: 500; align-items: center; }
/* ⚠ ห้ามให้ชื่อเมนูตัดกลางคำ — จอแคบลงนิดเดียวแล้ว "แคตตาล็อกสินค้า" จะแตกเป็น 2 บรรทัด
   หัวเว็บสูงขึ้นทั้งแถบ (เจ้าของแจ้ง 24 ก.ย. "หน้าอื่นๆ เมนูพัง") · ให้เมนูหดด้วยการลด gap แทน */
.site-header nav a { border-bottom: none; position: relative; white-space: nowrap; }
.site-header nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px; background: var(--red); }
.site-header nav a:hover, .site-header nav a.active { color: var(--red); }
/* a.nav-cta ต้อง specificity สูงกว่า .site-header nav a (padding 4px 0) ไม่งั้นเลขชนขอบมนของ pill */
.site-header nav a.nav-cta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; background: var(--red); color: #fff !important; padding: 9px 20px; border-radius: 999px; font-weight: 600; }
.site-header nav a.nav-cta:hover { background: #B8000E; }
.site-header nav a.nav-cta::after { display: none !important; }
@media (max-width: 900px) { .site-header nav { gap: 12px; } .site-header nav a.nav-cta { padding: 7px 14px; } }

/* Gallery admin */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, 110px); gap: 10px; }
.g-item { position: relative; width: 110px; height: 110px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; cursor: grab; }
.g-item img { width: 100%; height: 100%; object-fit: contain; }
.g-item.dragging { opacity: .4; }
.g-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(30,45,59,.75); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.g-cover { display: none; position: absolute; left: 4px; bottom: 4px; background: var(--red); color: #fff; font-family: var(--font-heading); font-size: 10.5px; padding: 1px 8px; border-radius: 999px; }
.g-item.is-cover .g-cover { display: block; }
.g-drop { width: 110px; height: 110px; border: 2px dashed var(--border); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--gray); font-size: 11.5px; text-align: center; cursor: pointer; }
.g-drop.over { border-color: var(--red); color: var(--red); background: #FFF1F2; }
.g-drop svg.lucide { width: 22px; height: 22px; }
.variant-table .vi { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; }

/* เทียบราคาคู่แข่ง: แถวปุ่มเปิดผลค้นหา (หน้าแก้ไขสินค้า) */
.competitor-compare .cc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-input { flex: 1 1 240px; min-width: 200px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 15px; }
.cc-input:focus { outline: 2px solid var(--red-light); border-color: transparent; }
.cc-btn { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--navy); color: var(--navy); background: #fff; border-radius: 8px; padding: 8px 14px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cc-btn:hover { background: var(--navy); color: #fff; }
.cc-btn svg.lucide { width: 15px; height: 15px; }

/* คอลัมน์ราคาตลาด (คู่แข่ง) ในตารางราคา */
.variant-table td.market-col { background: #F8FAFC; vertical-align: top; }
.variant-table tr:nth-child(even) td.market-col { background: #F1F5F9; }
.variant-table td.market-col .vi { display: block; }
.v-market-info { margin-top: 5px; }
.mk-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; line-height: 1.4; white-space: normal; }
.mk-lower { background: #DCFCE7; color: #15803D; }        /* เราถูกกว่า = เขียว */
.mk-higher { background: #FEE2E2; color: #B91C1C; }       /* เราแพงกว่า = แดงอ่อน */
.mk-eq { background: #E5E7EB; color: #374151; }
.mk-hint { display: inline-block; font-size: 11.5px; color: var(--gray); }
.mk-use { border: 1px solid var(--red); color: var(--red); background: #fff; border-radius: 6px; padding: 2px 8px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; cursor: pointer; margin-top: 3px; }
.mk-use:hover { background: var(--red); color: #fff; }
.mk-old { font-size: 11px; font-weight: 700; color: #92400E; background: #FEF3C7; border-radius: 5px; padding: 2px 7px; margin-top: 5px; display: inline-block; }

/* Gallery หน้าลูกค้า */
.gallery-strip { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gs-thumb { width: 64px; height: 64px; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; padding: 0; }
.gs-thumb.active { border-color: var(--red); }
.gs-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ราคาตั้งขีดฆ่า */
.list-price { text-decoration: line-through; color: var(--gray); font-weight: 400; font-size: 13px; }

/* Page loader: กันฟอนต์/เลย์เอาต์กระพริบตอนโหลด */
#page-loader { position: fixed; inset: 0; background: #fff; z-index: 999; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; transition: opacity .35s; }
#page-loader.done { opacity: 0; pointer-events: none; }
#page-loader img { width: 150px; animation: loaderPulse 1.1s ease-in-out infinite; }
#page-loader .bar { width: 120px; height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
#page-loader .bar::after { content: ""; display: block; width: 40%; height: 100%; background: var(--red); border-radius: 999px; animation: loaderBar 1s ease-in-out infinite; }
@keyframes loaderPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes loaderBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.card-image { background: linear-gradient(100deg, #F1F3F7 40%, #E9ECF2 50%, #F1F3F7 60%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.card-image:has(img[data-loaded]), .card-image:not(:has(img)) { animation: none; background: #fff; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Footer v2: LINE + social */
.footer-grid { display: grid; grid-template-columns: 1fr 1.5fr .85fr .85fr; gap: 30px; text-align: left; align-items: start; }
.footer-col h4 { color: #fff; font-family: var(--font-heading); font-size: 15.5px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.footer-col h4 svg.lucide { color: var(--red-light); }
.footer-brand { text-align: center; }
.footer-brand .f-logo { height: 76px; margin-bottom: 8px; }
footer .slogan { font-family: var(--font-script); color: var(--red-light); font-size: 19px; margin-bottom: 14px; line-height: 1.5; }
.f-social { display: flex; gap: 10px; justify-content: center; }
.f-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: background .15s, transform .15s; }
.f-social a:hover { background: var(--red); transform: translateY(-2px); }
.f-social svg.lucide { width: 17px; height: 17px; }
.footer-info { list-style: none; }
.footer-info li { display: flex; gap: 9px; align-items: baseline; padding: 4px 0; font-size: 14px; line-height: 1.6; }
.footer-info svg.lucide { color: var(--red-light); flex-shrink: 0; transform: translateY(2px); }
.footer-info a { color: #fff; text-decoration: none; font-weight: 600; }
.footer-info a:hover { color: var(--red-light); }
.f-channels { font-size: 12.5px; margin-top: 10px; line-height: 1.6; color: var(--gray-light); }
.f-channels span { color: #fff; font-family: var(--font-heading); }
.footer-line, .footer-trust { text-align: center; }
.footer-line h4, .footer-trust h4 { justify-content: center; }
.line-card, .dbd-card { background: #fff; border-radius: 14px; padding: 10px; display: inline-block; }
.line-card img { width: 128px; display: block; border-radius: 6px; }
.dbd-card img { height: 54px; display: block; }
.f-hint { font-size: 12.5px; margin-top: 10px; line-height: 1.6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 18px; text-align: center; font-size: 13px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-col:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-info li { justify-content: flex-start; } }

/* Admin panel */
.admin-body { display: flex; min-height: 100vh; background: var(--off-white); }
.admin-side { width: 232px; background: var(--navy); color: #C7CCDA; display: flex; flex-direction: column; position: fixed; left: 0; top: 0; height: 100vh; flex-shrink: 0; overflow-y: auto; z-index: 60; }
.admin-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px 18px; text-decoration: none; color: #fff; font-family: var(--font-heading); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-logo img { height: 58px; width: auto; }
.admin-nav { display: flex; flex-direction: column; padding: 12px 10px; gap: 2px; flex: 1; }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; color: #C7CCDA; text-decoration: none; font-family: var(--font-heading); font-size: 14.5px; }
.admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav a.active { background: var(--red); color: #fff; }
.admin-nav svg.lucide { width: 17px; height: 17px; }
.admin-side-foot { padding: 12px 14px 18px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.admin-side-foot a, .admin-side-foot button { color: #9CA3AF; text-decoration: none; background: none; border: none; cursor: pointer; font-family: var(--font-heading); font-size: 13.5px; display: flex; align-items: center; gap: 8px; padding: 0; }
.admin-side-foot a:hover, .admin-side-foot button:hover { color: #fff; }
.admin-main { flex: 1; min-width: 0; margin-left: 232px; }
.admin-top { background: #fff; box-shadow: 0 1px 0 var(--border); padding: 14px 26px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 40; }
.admin-top-title { font-family: var(--font-heading); font-weight: 700; font-size: 19px; }
.admin-top-user { color: var(--gray); font-size: 14px; display: flex; gap: 7px; align-items: center; }
.admin-content { padding: 24px 26px 48px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.stat-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 18px 20px; text-decoration: none; display: block; }
.stat-card .stat-num { font-family: var(--font-heading); font-weight: 900; font-size: 28px; color: var(--navy); }
.stat-card .stat-label { font-size: 13px; color: var(--gray); }
a.stat-card:hover { box-shadow: var(--shadow-lg); }
.admin-content .variant-table { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
/* Admin form building blocks (shared desktop + used by mobile collapse) */
.admin-panel { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 14px 18px; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 15px; }
.admin-input:focus { outline: 2px solid var(--red-light); border-color: transparent; }
.edit-top-grid { display: grid; grid-template-columns: 1fr 260px; gap: 20px; }
.admin-panel summary, .row-edit summary { list-style: none; cursor: pointer; }
.admin-panel summary::-webkit-details-marker, .row-edit summary::-webkit-details-marker { display: none; }
.row-edit { display: inline-block; }
.row-edit > summary { display: inline-flex; }
.row-edit-form { display: flex; flex-direction: column; gap: 5px; width: 280px; max-width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.row-edit-form .filter-label { margin: 4px 0 0; }
@media (max-width: 800px) { .admin-side { position: fixed; left: -240px; } .admin-main { margin-left: 0; } }
.v-del { border: none; background: #FEF2F2; color: #B91C1C; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.v-del:hover { background: #FEE2E2; }

/* ===== Mobile app-style (≤900px) ===== */
.hamburger { display: none; border: none; background: none; cursor: pointer; color: var(--navy); padding: 6px; }
.hamburger svg.lucide { width: 26px; height: 26px; }

/* Drawer */
.drawer-overlay { position: fixed; inset: 0; background: rgba(15,18,28,.5); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.drawer-overlay.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; bottom: 0; left: -300px; width: 288px; background: #fff; z-index: 95; transition: left .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(30,45,59,.18); }
.drawer.open { left: 0; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.drawer-head img { height: 40px; }
.drawer-head button { border: none; background: var(--off-white); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.drawer-nav { flex: 1; overflow-y: auto; padding: 10px 12px; }
.drawer-nav a, .drawer-nav button { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; text-decoration: none; font-family: var(--font-heading); font-weight: 500; font-size: 15px; color: var(--navy); border: none; background: none; width: 100%; cursor: pointer; }
.drawer-nav a:active, .drawer-nav a:hover { background: var(--off-white); color: var(--red); }
.drawer-nav svg.lucide { width: 18px; height: 18px; color: var(--gray); }
.drawer-label { font-size: 12px; color: var(--gray-light, #9CA3AF); font-family: var(--font-heading); letter-spacing: 1px; padding: 12px 12px 4px; }
.drawer-sub { font-size: 14px !important; padding: 8px 12px 8px 18px !important; font-weight: 400 !important; }
.drawer-sub svg.lucide { width: 14px !important; height: 14px !important; }
.drawer-call { margin: 12px 16px calc(16px + env(safe-area-inset-bottom)); justify-content: center; }

/* Bottom nav */
.bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: #fff; box-shadow: 0 -4px 20px rgba(30,45,59,.1); z-index: 80; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 7px; text-decoration: none; color: var(--gray); font-family: var(--font-heading); font-size: 11px; }
.bottom-nav a.active { color: var(--red); }
.bottom-nav a.active svg.lucide { color: var(--red); }
.bottom-nav svg.lucide { width: 21px; height: 21px; }
/* ปุ่ม LINE ในเมนูล่างจอ — ใช้สีเขียวแบรนด์ให้ลูกค้ากวาดตาแล้วเจอทันที (ไอคอนอื่นเป็นเทา/แดงตามสถานะ) */
.bottom-nav a.bn-line svg.lucide { color: #06A94D; }

@media (max-width: 900px) {
  /* ⚠ ต้องเป็น longhand ซ้าย/ขวา ห้ามใช้ shorthand `padding: 0 14px` —
     หลายหน้าใส่คลาสตัวเองไว้บน element เดียวกับ .container แล้วตั้ง padding-top/bottom เอง
     (เช่น .cart-page) shorthand จะล้างค่าพวกนั้นเป็น 0 เงียบๆ */
  .container { padding-left: 14px; padding-right: 14px; }
  .hamburger { display: inline-flex; }
  .bottom-nav { display: flex; }
  body { padding-bottom: 64px; }
  .site-header nav { display: none; }
  .site-header .container { justify-content: flex-start; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .site-header .logo { margin-right: auto; }
  .site-header .logo img { height: 34px; }
  .announce { display: none; }

  /* Catalog มือถือ: การ์ด 2 คอลัมน์ + filter เป็น bottom sheet
     ระยะห่างบีบให้กระชับกว่าเดสก์ท็อปทั้งชุด (เจ้าของสั่ง 17 ก.ย. "ให้กระชับในโทรศัพท์") */
  .catalog-layout { grid-template-columns: 1fr; padding-top: 10px; gap: 0; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card-body { padding: 9px 10px 11px; }
  .card-name { font-size: 13.5px; line-height: 1.32; }
  .card-price { font-size: 15px; margin-top: 2px; }
  /* แบ่งหน้าบนมือถือ (หน้าอื่นๆ ที่ไม่ใช่แคตตาล็อก เช่น ออเดอร์ของฉัน/หลังบ้าน):
     26 หน้า = ปุ่มเลข 13 ปุ่มล้นเป็น 3 แถว → เหลือ [‹] หน้า X จาก Y [›] แถวเดียว
     ⚠ ซ่อนปุ่มเลขด้วย display:none ไม่ใช่ลบออกจาก HTML — Google ต้องไต่ลิงก์หน้าถัดๆ ไปได้ */
  .pagination-wrap { margin-top: 18px; }
  .pager { flex-wrap: nowrap; gap: 10px; }
  .pager-nums { display: none; }
  .pager-now { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); font-weight: 600; font-size: 14.5px; color: var(--navy); white-space: nowrap; }

  /* แคตตาล็อกบนมือถือ: ไม่มีปุ่มแบ่งหน้าเลย เลื่อนลงแล้วโหลดต่อ (เจ้าของสั่ง 17 ก.ย.)
     ⚠ scope ที่ .catalog-layout — .pagination-wrap ใช้ร่วมกับหลังบ้านอีก 8 หน้า + ออเดอร์ของฉัน
       ถ้าซ่อนลอยๆ หน้าพวกนั้นจะเปลี่ยนหน้าไม่ได้เลยบนมือถือ
     ⚠ ซ่อน ไม่ใช่ลบ — ลิงก์หน้าถัดไปยังอยู่ใน HTML ให้ Google ไต่เก็บสินค้าหน้า 2 เป็นต้นไป
       (สคริปต์เลื่อนโหลดไม่ทำงานสำหรับบอทที่ไม่รันจาวาสคริปต์) */
  .catalog-layout .pagination-wrap { display: none; }
  .cat-more { display: flex; }
  .catalog-hero { padding: 16px 0; }
  .catalog-hero h1 { font-size: 21px; }
  .catalog-hero p { font-size: 13.5px; }
  /* แคตตาล็อกรวม: เอาแถบน้ำเงินออกจากสายตา แต่ h1 ยังอยู่ใน DOM + accessibility tree
     ⚠ ห้ามเปลี่ยนเป็น display:none — h1 จะหายจาก screen reader และเสียน้ำหนัก SEO */
  .catalog-hero--plain { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .filter-block--search { display: none; }   /* ช่องค้นหาย้ายไปแถบบนแล้ว */
  /* ⚠ .catalog-bar { display: flex } อยู่ในบล็อก @media ท้ายไฟล์ ไม่ใช่ตรงนี้ —
     กฎ .catalog-bar พื้นฐาน (display:none) เขียนอยู่ล่างกว่าบล็อกนี้ ถ้าตั้งตรงนี้จะโดนทับ
     (ปุ่ม .filter-fab เดิมต้องใส่ !important ก็เพราะเรื่องนี้) */

  .filters { position: fixed; left: 0; right: 0; bottom: -100%; top: auto; max-height: 78vh; overflow-y: auto; background: #fff; z-index: 95; border-radius: 20px 20px 0 0; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(30,45,59,.2); transition: bottom .3s cubic-bezier(.4,0,.2,1); }
  .filters.open { bottom: 0; }

  /* หน้า detail */
  .product-detail { grid-template-columns: 1fr; gap: 20px; }
  .variant-table { font-size: 13.5px; }
  .variant-table th, .variant-table td { padding: 8px 10px; }
  .detail-cta .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
}
/* แถบค้นหา + ตัวกรอง บนสุดของแคตตาล็อก — มือถือเท่านั้น (เดสก์ท็อปมี sidebar อยู่แล้ว)
   แทนที่ปุ่ม .filter-fab "ตัวกรอง / ค้นหา" เดิมที่ต้องกดเปิด sheet ก่อนถึงจะพิมพ์ค้นหาได้ */
/* หนึบไว้ใต้หัวเว็บตอนเลื่อน — ค่า top ตั้งจากความสูงจริงของ .site-header ด้วย JS ในหน้า
   (หัวเว็บเป็น sticky top:0 z-index:50 → แถบนี้ต้อง z-index ต่ำกว่า ไม่งั้นทับโลโก้) */
/* ⚠ ระยะบน-ล่าง 6px · ซ้าย-ขวา 5px ตามที่เจ้าของสั่ง 24 ก.ย.
   ⚠⚠ ค่าชุดนี้ต้องตรงกับ .hdr-search-panel เป๊ะ — เป็นช่องค้นหาเดียวกันในสายตาลูกค้า
     คนละหน้ากันเท่านั้น (เจ้าของแจ้ง 'ช่องค้นหาไม่เท่ากัน' เพราะ .hs-form ไม่มี padding บน-ล่าง)
   แถบนี้หนึบอยู่ทุกหน้าบนมือถือ ทุก px ที่กินคือพื้นที่ดูสินค้าที่หายไป */
.catalog-bar { display: none; position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--border); padding: 6px 0; margin-bottom: 1px; }
/* ⚠ ชิดขอบจอ 5px ตามที่เจ้าของสั่ง 24 ก.ย. — .container ปกติเว้น 20px ซึ่งกินความกว้าง
     ช่องพิมพ์ไปฟรีๆ บนจอแคบ (ทับเฉพาะในแถบนี้ ห้ามแตะ .container กลาง) */
.catalog-bar .container { display: flex; gap: 8px; padding-left: 5px; padding-right: 5px;
  /* ⚠ .catalog-bar เป็น flex (มีเดียคิวรีท้ายไฟล์) → .container กลายเป็น flex item ที่กว้างตามเนื้อหา
     ไม่ใช่เต็มแถว · ต้อง flex:1 ไม่งั้นช่องค้นหาหดลอยกลางจอบนจอแคบ */
  flex: 1; min-width: 0; }
.catalog-bar .cb-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--off-white); border: 1px solid var(--border); border-radius: 11px; padding: 3px 5px 3px 11px; }
.catalog-bar .cb-search svg.lucide { width: 18px; height: 18px; color: var(--gray); flex-shrink: 0; }
/* ⚠ ต้อง 16px — ต่ำกว่านี้ iOS จะซูมหน้าเว็บทันทีที่จิ้มช่องค้นหา
   ⚠⚠ **ต้องตั้ง line-height เองเสมอ** — ค่าที่ตกทอดมาจาก body คือ 1.7 ซึ่งกับตัวอักษร 16px
     แปลว่าความสูงบรรทัด 27.2px ทั้งที่ตัวอักษรสูงจริงราว 20px · นั่นคือที่มาของ "แถบค้นหายังดูห่าง"
     ที่แก้ด้วยการลด padding ของแถบไม่หาย (เจ้าของถาม 24 ก.ย. — ลด padding เหลือ 2px แล้วยังห่าง) */
.catalog-bar .cb-search input { flex: 1; min-width: 0; border: none; outline: none; background: none;
  padding: 3px 0; font-family: var(--font-body); font-size: 16px; line-height: 1.25; color: var(--navy); }
/* ปุ่มค้นหาสีแดงในช่อง — ชุดเดียวกับ .hs-go ของแถบค้นหาบนหัวเว็บ */
/* ⚠⚠ ปุ่มนี้คือตัวที่กำหนดความสูงของแถบ ไม่ใช่ช่องพิมพ์ — line-height ที่ตกทอดมาจาก body (1.7)
   ทำให้ปุ่มสูงกว่าตัวอักษรจริงเกือบ 10px · ตั้ง line-height เองเสมอ (เจ้าของถาม 24 ก.ย.
   ว่าทำไมลด padding แล้วแถบยังห่าง — คำตอบคือความสูงมาจากในปุ่ม/ช่องพิมพ์ ไม่ใช่ padding ของแถบ) */
.catalog-bar .cb-go { flex-shrink: 0; border: 0; border-radius: 8px; background: var(--red); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; line-height: 1.25;
  padding: 6px 14px; margin: 0; cursor: pointer; }
.catalog-bar .cb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* ปุ่มตัวกรอง — กล่องไอคอนล้วน ชุดเดียวกับ .hs-filter ของหน้าอื่น
   ⚠ **ห้ามตั้ง height ตายตัว** (เจ้าของแจ้ง 24 ก.ย. "ตัวกรองเล็กไม่เท่าช่องค้นหา") —
     ความสูงของช่องค้นหามาจาก font-size 16px ที่บังคับไว้กัน iOS ซูม + padding ซึ่งเปลี่ยนตามฟอนต์
     ตั้งเลขตายตัวเมื่อไหร่ก็เตี้ยกว่าช่องค้นหาทันที · ใช้ align-self:stretch ให้สูงเท่ากันเสมอ */
.catalog-bar .cb-filter { flex-shrink: 0; align-self: stretch; display: inline-flex;
  align-items: center; justify-content: center;
  width: 42px; padding: 0; background: var(--off-white); color: var(--navy);
  border: 1px solid var(--border); border-radius: 11px; cursor: pointer; }
.catalog-bar .cb-filter svg.lucide { width: 18px; height: 18px; }
.catalog-bar .cb-filter.has-filter { background: var(--red); color: #fff; border-color: var(--red); }   /* กรองอยู่ = เห็นได้โดยไม่ต้องเปิด sheet */
.filter-sheet-head { display: none; }
/* ⚠ ช่องค้นหาใน sidebar ถูกซ่อน **ทุกจอ** ตั้งแต่ 24 ก.ย. — ย้ายขึ้นไปอยู่บนหัวเว็บแล้ว
   (เดสก์ท็อป = .hdr-searchbox · มือถือ = .catalog-bar ที่หนึบใต้หัวเว็บ)
   ⚠ ยังต้องอยู่ใน DOM — มันอยู่ในฟอร์มเดียวกับตัวกรอง ถ้าลบทิ้ง กดกรองแล้วคำค้นจะหายไปด้วย */
.filter-block--search { display: none; }
@media (max-width: 900px) {
  .catalog-bar { display: flex; }
  .filter-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
  .filter-sheet-head button { border: none; background: var(--off-white); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; }
}

/* Admin มือถือ: sidebar เป็น drawer */
.admin-burger { color: var(--navy); }
@media (min-width: 801px) { .admin-burger { display: none; } }
@media (max-width: 800px) {
  .admin-side { position: fixed; left: -260px; z-index: 95; transition: left .28s; height: 100vh; }
  .admin-side.open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,.3); }
  .admin-burger { display: inline-flex; }
  .admin-content { padding: 16px 14px 40px; }
  .admin-top { padding: 12px 14px; gap: 10px; }
  .admin-content .variant-table { display: block; overflow-x: auto; white-space: nowrap; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  /* ฟอร์ม grid 2 คอลัมน์ → 1 คอลัมน์ */
  .admin-form-grid, .edit-top-grid { grid-template-columns: 1fr; }
  /* ปุ่ม/อินพุตขนาดนิ้วกด */
  .admin-content .btn, .admin-content .btn-search, .admin-content .admin-input,
  .admin-content .search-row input, .admin-content .search-row select,
  .admin-content details.admin-panel > summary { min-height: 42px; }
  .admin-content .btn-search { min-width: 46px; }
}

/* Admin: ตาราง list → การ์ดบนมือถือ (≤560px) — scope แคบที่ .admin-cards เท่านั้น
   (variant-table หน้าบ้าน + ตารางราคาในหน้าแก้ไขสินค้าไม่โดน) */
@media (max-width: 560px) {
  .admin-content .admin-cards { display: block; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .admin-content .admin-cards thead { display: none; }
  .admin-content .admin-cards tbody { display: block; }
  .admin-content .admin-cards tr { display: block; background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 12px; }
  .admin-content .admin-cards td { display: block; border: none; padding: 6px 0; white-space: normal; }
  .admin-content .admin-cards tr:nth-child(even) td { background: transparent; }
  .admin-content .admin-cards td::before { content: attr(data-label); display: block; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px; letter-spacing: .3px; color: var(--gray); margin-bottom: 3px; }
  .admin-content .admin-cards td[data-label=""]::before,
  .admin-content .admin-cards td:not([data-label])::before { content: none; }
  .row-edit, .row-edit > summary { display: block; }
  .row-edit > summary { width: 100%; justify-content: center; }
  .row-edit-form { width: 100%; }
  /* กันปุ่มล้นขวาในฟอร์มแถวเดียว (add/search/in-card): input เต็มแถว ปุ่มตกบรรทัดถัดไป */
  .admin-content .search-row { flex-wrap: wrap; }
  .admin-content .search-row > input { flex: 1 1 100% !important; min-width: 0 !important; }
  .admin-content .admin-cards td form { flex-wrap: wrap; }
  .admin-content .admin-cards td form > input { flex: 1 1 100% !important; min-width: 0 !important; }
  .admin-content .detail-cta { flex-wrap: wrap; }
  .admin-content .detail-cta > .btn { flex: 1 1 auto; justify-content: center; }
}

/* Footer v3: กล่องขาว LINE/DBD จัดกลางจริง (รูป crop ขอบขาวแล้ว) + มือถือกระชับกลางจอ */
@media (min-width: 901px) { .footer-grid { grid-template-columns: 1.15fr 1.45fr .85fr .85fr; } }
footer .slogan { font-size: 15px; white-space: nowrap; letter-spacing: 0; }
.line-card { width: 148px; height: 148px; display: flex; align-items: center; justify-content: center; margin: 0 auto; padding: 0; }
.line-card img { width: 120px; height: 120px; object-fit: contain; border-radius: 0; }
.dbd-card { width: auto; height: auto; display: inline-flex; align-items: center; justify-content: center; padding: 14px 18px; margin: 0 auto; }
.dbd-card img { height: 50px; width: auto; max-width: none; display: block; }
.f-channels .ch { display: inline-block; background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px 11px; margin: 2px 1px; color: #E5E7EB; font-size: 12px; }
.f-line-btn { display: none; align-items: center; justify-content: center; gap: 9px; background: #06C755; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 16px; border-radius: 999px; padding: 13px 22px; max-width: 300px; margin: 0 auto; text-decoration: none; }
.f-line-btn svg.lucide { width: 20px; height: 20px; }
/* ปุ่มเข้าสู่ระบบ/สมัครด้วย LINE ในหน้า login/register — full-width pill เขียว LINE */
.line-login-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: #06C755; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 16px; border-radius: 999px; padding: 12px 22px; text-decoration: none; }
.line-login-btn:hover { background: #05b148; }
.line-login-btn svg.lucide { width: 20px; height: 20px; }
.or-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--gray); font-size: 14px; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.footer-info .nb { white-space: nowrap; }
/* ⚠ overflow-x: hidden ต้องอยู่ที่ <html> เท่านั้น ห้ามใส่ที่ <body> ด้วย
   ถ้า body มี overflow ไม่ใช่ visible body จะกลายเป็น scroll container ของตัวเอง
   แล้ว position:sticky ทุกตัวที่เป็นลูกของ body จะ "ไม่หนึบ" — เลื่อนหายไปกับหน้าเงียบๆ
   ทั้งที่เขียน sticky ไว้ถูกแล้ว (หัวเว็บ / แถบค้นหาแคตตาล็อก / sidebar ตัวกรอง / กล่องสรุปยอดตะกร้า
   ตั้งใจให้หนึบมาตั้งแต่ต้น แต่ไม่เคยทำงานเลยเพราะบรรทัดนี้ — เจอ 17 ก.ย.)
   ใส่ที่ html อย่างเดียวยังกันหน้าเลื่อนซ้ายขวาได้เหมือนเดิม (ค่านี้ถูกส่งต่อไปที่ viewport) */
html { overflow-x: hidden; max-width: 100vw; }
body { max-width: 100vw; }

/* มือถือ: เรียงกลางจอ กระชับ + ปุ่ม LINE แทน QR (สแกนจอตัวเองไม่ได้) */
@media (max-width: 560px) {
  .site-footer { padding: 28px 0 24px; }
  .footer-grid { gap: 22px; }
  footer .slogan { white-space: normal; font-size: 19px; line-height: 1.45; }
  .footer-brand .f-logo { height: 62px; }
  .footer-col { text-align: center; }
  .footer-col h4 { justify-content: center; }
  .footer-info { display: inline-block; text-align: left; }
  .line-card { display: none; }
  .f-line-btn { display: flex; }
  .f-hint-add { display: none; }
  .footer-bottom { margin-top: 20px; padding-top: 14px; font-size: 12.5px; }
}

/* Lightbox ดูรูปสินค้าเต็มจอ */
.lightbox { position: fixed; inset: 0; background: rgba(15,18,28,.94); z-index: 200; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 10px; background: #fff; }
.lb-btn { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.lb-btn:hover { background: rgba(255,255,255,.28); }
.lb-btn svg.lucide { width: 24px; height: 24px; }
.lb-close { top: calc(14px + env(safe-area-inset-top)); right: 14px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: #fff; font-family: var(--font-heading); font-size: 14px; background: rgba(255,255,255,.12); padding: 3px 14px; border-radius: 999px; }
.detail-image { cursor: zoom-in; position: relative; }
/* ลูกศรเลื่อนรูป + เลขหน้าในกรอบรูปสินค้า (เจ้าของสั่ง 20 ก.ย.)
   ⚠ .detail-image เป็น overflow:hidden อยู่แล้ว — ปุ่มต้องอยู่ในกรอบ ไม่ล้ำออกนอกขอบมน
   ⚠ cursor กลับเป็น pointer บนปุ่ม ไม่งั้นได้ zoom-in ที่สืบมาจากกรอบ = ดูเหมือนกดแล้วซูม */
.detail-image .di-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .92);
  color: var(--navy); cursor: pointer; padding: 0; box-shadow: 0 2px 10px rgba(30,45,59, .12); }
.detail-image .di-nav:hover { background: #fff; border-color: var(--red); color: var(--red); }
.detail-image .di-nav svg.lucide { width: 22px; height: 22px; }
.detail-image .di-prev { left: 10px; }
.detail-image .di-next { right: 10px; }
.detail-image .di-count { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  background: rgba(30,45,59, .72); color: #fff; font-family: var(--font-heading); font-weight: 600;
  font-size: 12.5px; line-height: 1; padding: 6px 12px; border-radius: 999px; pointer-events: none; }
@media (max-width: 900px) {
  /* มือถือใช้นิ้วสไลด์เป็นหลัก — ลูกศรเล็กลงให้บังรูปน้อยที่สุด แต่ยังกดติด (36px) */
  .detail-image .di-nav { width: 36px; height: 36px; }
  .detail-image .di-nav svg.lucide { width: 20px; height: 20px; }
}

/* Admin มือถือ v2: การ์ดกระชับ (สินค้า/หมวดหมู่/แบรนด์) */
@media (max-width: 560px) {
  .admin-content { padding: 12px 12px 36px; }
  .admin-content h1 { font-size: 22px; }

  /* หมวดหมู่ + แบรนด์: ชื่อ+บันทึกบรรทัดบน · slug · N สินค้า · ปุ่มลบ บรรทัดล่าง */
  .admin-content .ac-line tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; margin-bottom: 8px; }
  .admin-content .ac-line td { display: block; padding: 0; }
  .admin-content .ac-line td::before { content: none; }
  .admin-content .ac-line td:first-child { flex: 1 1 100%; }
  .admin-content .ac-line td:first-child form { flex-wrap: nowrap; }
  .admin-content .ac-line td:first-child form > input { flex: 1 1 auto !important; }
  .admin-content .ac-line td[data-label="slug"] { font-size: 12px; color: var(--gray); }
  .admin-content .ac-line td[data-label="จำนวนสินค้า"] { font-size: 12px; color: var(--gray); }
  .admin-content .ac-line td[data-label="จำนวนสินค้า"]::after { content: " สินค้า"; }
  .admin-content .ac-line td:last-child { margin-left: auto; }
  .admin-content .ac-line td:last-child > div { flex-wrap: nowrap !important; gap: 8px !important; }

  /* สินค้า: รูปซ้าย + ชื่อ · meta เทาบรรทัดเดียว · ปุ่มแถวล่าง */
  .admin-content .ac-products tr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; padding: 10px 12px; margin-bottom: 8px; }
  .admin-content .ac-products td { display: block; padding: 0; }
  .admin-content .ac-products td::before { content: none; }
  /* ช่องติ๊กเลือกอยู่หน้าสุดของการ์ด — กว้างพอให้นิ้วแตะโดนโดยไม่ไปโดนรูป */
  .admin-content .ac-products td[data-label="เลือก"] { order: 0; flex: 0 0 26px; }
  .admin-content .ac-products td[data-label="รูป"] { order: 1; }
  .admin-content .ac-products td[data-label="สินค้า"] { order: 2; flex: 1 1 calc(100% - 102px); font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; line-height: 1.35; }
  .admin-content .ac-products td[data-label="หน้า"] { order: 3; font-size: 12px; color: var(--gray); }
  .admin-content .ac-products td[data-label="หน้า"]::before { content: "หน้า "; display: inline; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: 0; margin: 0; }
  .admin-content .ac-products td[data-label="แบรนด์"] { order: 4; font-size: 12px; color: var(--gray); }
  .admin-content .ac-products td[data-label="ขนาด/ราคา"] { order: 5; font-size: 12px; color: var(--gray); flex: 1 1 auto; }
  /* ตัวคั่นบังคับขึ้นบรรทัดใหม่ก่อนกลุ่มปุ่ม — ::after ของ flex container นับเป็น flex item
     เดิมความยาว "ขนาด/ราคา" ไม่เท่ากันทำให้จุด wrap เลื่อน ปุ่มแต่ละใบจึงเรียงเป็นขั้นบันได */
  .admin-content .ac-products tr::after { content: ""; flex: 0 0 100%; height: 0; order: 6; }
  .admin-content .ac-products td[data-label="ข้อมูล"] { order: 7; margin-top: 4px; }
  .admin-content .ac-products td[data-label="แสดงบนเว็บ"] { order: 8; margin-top: 4px; }
  .admin-content .ac-products td[data-label="จัดการ"] { order: 9; margin-top: 4px; margin-left: auto; }
}

/* ============================================================
   ตะกร้าสินค้า (Phase 1) — badge / stepper / cart page / toast
   ============================================================ */

/* Badge ตัวเลขบนไอคอนตะกร้า (header desktop + bottom nav) */
.cart-badge { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-family: var(--font-heading); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.cart-badge[hidden] { display: none; }

/* ไอคอนตะกร้าใน header (เฉพาะ desktop nav) */
.header-cart { position: relative; display: inline-flex; align-items: center; color: var(--navy); }
.header-cart:hover { color: var(--red); }
.header-cart svg.lucide { width: 22px; height: 22px; }

/* Account dropdown (เมนูบัญชี — desktop; มือถือ nav ถูกซ่อน) */
.acct-menu { position: relative; display: inline-flex; }
.acct-btn { display: inline-flex; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; color: var(--navy); font-family: var(--font-heading); font-weight: 500; font-size: 15px; padding: 4px 2px; }
.acct-btn:hover { color: var(--red); }
.acct-btn svg.lucide { width: 21px; height: 21px; }
.acct-btn .acct-caret { width: 15px; height: 15px; transition: transform .18s ease; }
.acct-menu.open .acct-btn .acct-caret { transform: rotate(180deg); }
.acct-menu.open .acct-btn { color: var(--red); }
.acct-dropdown { position: absolute; top: calc(100% + 12px); right: 0; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 34px rgba(30,45,59,.16); padding: 6px; z-index: 60; }
.acct-dropdown[hidden] { display: none; }
.acct-menu .acct-dropdown a, .acct-menu .acct-dropdown button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--navy); font-family: var(--font-heading); font-weight: 500; font-size: 14.5px; background: none; border: none; cursor: pointer; text-align: left; white-space: nowrap; }
.acct-menu .acct-dropdown a:hover, .acct-menu .acct-dropdown button:hover { background: var(--off-white); color: var(--red); }
.acct-dropdown svg.lucide { width: 17px; height: 17px; flex-shrink: 0; }
.acct-name { display: block; padding: 8px 12px 6px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; }
.acct-divider { height: 1px; background: var(--border); margin: 5px 4px; }

/* wrap ไอคอน bottom nav ให้ badge เกาะมุม */
.bn-icon { position: relative; display: inline-flex; }

/* Stepper −/+ (ใช้ทั้งหน้าตะกร้าและตารางสินค้า) */
.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
.qty-stepper .qty-btn { width: 34px; height: 34px; border: none; background: #fff; color: var(--navy); font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.qty-stepper .qty-btn:hover { background: var(--off-white); color: var(--red); }
.qty-stepper .qty-input { width: 40px; height: 34px; border: none; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--navy); background: #fff; -moz-appearance: textfield; }
.qty-stepper .qty-input::-webkit-outer-spin-button, .qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper.sm .qty-btn { width: 28px; height: 28px; font-size: 16px; }
.qty-stepper.sm .qty-input { width: 32px; height: 28px; font-size: 13.5px; }

/* คอลัมน์ "สั่งซื้อ" ในตารางสินค้า */
.vt-order-cell { white-space: nowrap; }
.vt-order-form { display: inline-flex; align-items: center; gap: 6px; }
.vt-cart-btn { width: 34px; height: 34px; border: none; border-radius: 10px; background: var(--red); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vt-cart-btn:hover { background: #B8000E; }
.vt-cart-btn svg.lucide { width: 17px; height: 17px; }

/* หน้าตะกร้า */
.cart-page { padding-top: 30px; padding-bottom: 56px; }   /* longhand: อย่าใช้ shorthand — จะล้าง padding ซ้ายขวา 20px ของ .container ที่อยู่ element เดียวกัน */
.cart-page h1 { font-size: 26px; margin-bottom: 6px; }
.cart-page .cart-sub { color: var(--gray); font-size: 14.5px; margin-bottom: 20px; }
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
/* ⚠ position:relative + ป้ายลำดับเป็น absolute — ถ้าปล่อยให้ป้ายอยู่ใน flow ปกติ
   มันจะกลายเป็นลูกตัวที่ 2 ของ flex แล้วรูปจะเบียดไปทางขวาแทนที่จะอยู่กลางกรอบ */
.cart-item-img { position: relative; width: 84px; height: 84px; border-radius: 12px; background: var(--off-white); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cart-item-no { position: absolute; top: 0; left: 0; z-index: 1; min-width: 22px; padding: 2px 5px; background: var(--navy); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 11.5px; line-height: 1.5; text-align: center; border-radius: 12px 0 10px 0; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-img .no-img { width: 46px; opacity: .5; }
.cart-item-name { font-family: var(--font-heading); font-weight: 600; font-size: 15.5px; color: var(--navy); line-height: 1.35; }
.cart-item-variant { font-size: 13px; color: var(--gray); margin-top: 2px; }
.cart-item-unit { font-size: 13px; color: var(--gray); margin-top: 4px; }

/* ขั้นราคาตามจำนวน — ป้าย + คำใบ้ในตะกร้า/หน้ายืนยัน (21 ก.ย. 2026)
   ⚠ ต้องบอกลูกค้าทั้งตอน "ได้ลด" และตอน "ใกล้ถึงขั้น" — ลดจำนวนแล้วราคากลับขึ้น
      ถ้าเงียบ ลูกค้าจะคิดว่าระบบคิดเงินผิด (กติกาเดียวกับส่วนลดสแกนจ่าย) */
.ct-tier { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px;
  background:#FEE2E2; color:#B91C1C; font-size:11px; font-weight:700; vertical-align:middle; white-space:nowrap; }
.cart-item-tier { font-size: 12px; color: var(--gray); margin-top: 3px; line-height: 1.5; }
.cart-item-tier.is-on { color: #B91C1C; font-weight: 600; }
.cart-item-controls { display: flex; align-items: center; gap: 14px; }
.cart-item-line { font-family: var(--font-heading); font-weight: 700; color: var(--red); font-size: 16px; white-space: nowrap; min-width: 78px; text-align: right; }
.cart-remove { border: none; background: none; color: var(--gray); cursor: pointer; padding: 6px; display: inline-flex; border-radius: 8px; }
.cart-remove:hover { color: var(--red); background: #FFF1F2; }
.cart-remove svg.lucide { width: 18px; height: 18px; }

.cart-summary { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); position: sticky; top: 20px; }
.cart-summary h2 { font-size: 18px; margin-bottom: 14px; }
.cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; padding: 6px 0; color: var(--navy); }
.cart-summary-row.muted { color: var(--gray); font-size: 14px; }
.cart-summary-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 12px; font-family: var(--font-heading); font-weight: 700; }
.cart-summary-total .amt { color: var(--red); font-size: 22px; }
.cart-summary .btn { width: 100%; justify-content: center; margin-top: 16px; }
.cart-summary .coupon-form .btn { width: auto; margin-top: 0; }
/* Popup สั่งซื้อสำเร็จ */
.order-success-overlay { position: fixed; inset: 0; background: rgba(15,18,28,.55); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; transition: opacity .3s; }
.order-success-overlay.is-out { opacity: 0; pointer-events: none; }
.order-success-modal { background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); max-width: 430px; width: 100%; padding: 34px 28px 28px; text-align: center; animation: osPop .3s cubic-bezier(.34,1.4,.64,1); }
@keyframes osPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.order-success-modal .os-icon { width: 74px; height: 74px; border-radius: 50%; background: #F0FDF4; color: #16A34A; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.order-success-modal .os-icon svg.lucide { width: 40px; height: 40px; }
.order-success-modal h2 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.order-success-modal .os-no { font-family: var(--font-heading); font-weight: 900; font-size: 26px; color: var(--red); margin: 6px 0 10px; }
.order-success-modal p { color: var(--gray); font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.order-success-modal .btn { width: 100%; justify-content: center; }
.cart-summary-note { font-size: 12.5px; color: var(--gray); text-align: center; margin-top: 10px; line-height: 1.5; }
.cart-continue { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--gray); font-size: 14px; text-decoration: none; }
.cart-continue:hover { color: var(--red); }

/* ตะกร้าว่าง */
.cart-empty { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 54px 24px; box-shadow: var(--shadow); }
.cart-empty .ce-icon { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; background: var(--off-white); display: flex; align-items: center; justify-content: center; color: var(--gray); }
.cart-empty .ce-icon svg.lucide { width: 36px; height: 36px; }
.cart-empty h2 { font-size: 21px; margin-bottom: 6px; }
.cart-empty p { color: var(--gray); font-size: 15px; margin-bottom: 20px; }

/* Toast แจ้งเตือน "เพิ่มลงตะกร้าแล้ว" */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; font-family: var(--font-heading); font-weight: 500; font-size: 14.5px; padding: 11px 20px; border-radius: 999px; box-shadow: var(--shadow-lg); display: inline-flex; align-items: center; gap: 8px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg.lucide { width: 18px; height: 18px; color: var(--green); }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
/* ตารางราคาหน้าสินค้า: ≤600px สลับจากตาราง (ล้นนอกจอ) เป็นการ์ดต่อ variant
   เดสก์ท็อป >600px ใช้ตารางเดิมทุกประการ */
@media (max-width: 600px) {
  .vt-desktop { display: none; }
  .vt-cards { display: flex; flex-direction: column; gap: 10px; }
}
/* มือถือ: การ์ดตะกร้าเดิมสูง 138–158px (รูป 68px + ข้อความ 3 บรรทัด + แถวปุ่มเต็มความกว้างอีกแถว)
   เห็นได้ทีละ 2 รายการ — บีบเหลือ ~97–117px ด้วย 4 อย่าง:
     1) รูปกินสองแถว แถวปุ่มขึ้นมาอยู่ใต้ชื่อในคอลัมน์เดียวกัน
     2) ขนาด/บรรจุ/SKU กับ ราคาต่อหน่วย รวมเป็นบรรทัดเดียว (display:inline) — ประหยัด 20px
     3) บีบ gap/margin/padding ระหว่างแถว
     4) ชื่อยาวตัดที่ 2 บรรทัด — กันการ์ดเดียวยืดจนกินทั้งจอ
   ⚠ อย่าใส่ margin-top ให้ .cart-item-variant/-unit ในนี้ — display:inline ไม่รับ margin แนวตั้ง
     จะดูเหมือนตั้งค่าแล้วแต่ไม่มีผล */
@media (max-width: 560px) {
  .cart-items { gap: 8px; }
  .cart-item { grid-template-columns: 52px 1fr; gap: 4px 10px; padding: 8px; border-radius: 14px; align-items: start; }
  .cart-item-img { width: 52px; height: 52px; border-radius: 10px; grid-row: span 2; }
  .cart-item-name { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cart-item-variant, .cart-item-unit { display: inline; font-size: 12px; }
  .cart-item-unit::before { content: "· "; }
  .cart-item-controls { grid-column: 2; justify-content: space-between; gap: 8px; margin-top: 0; }
  .cart-item-line { font-size: 15px; min-width: 0; }
  .cart-remove { padding: 7px; }   /* เป้านิ้ว ~32px เท่าปุ่ม +/- หลังการ์ดแคบลง */
  /* ⚠ scope ที่ .cart-item — .qty-stepper ใช้ร่วมกับหน้าสินค้า/หลังบ้าน ถ้าย่อทั้งเว็บจะไปโดนที่อื่นด้วย */
  .cart-item .qty-stepper .qty-btn { width: 32px; height: 30px; }
  .cart-item .qty-stepper .qty-input { height: 30px; }
  .cart-page h1 { font-size: 22px; }
  .toast { bottom: 76px; }
}

/* =====================================================================
   Phase 2 — Checkout / ออเดอร์ / Admin orders
   mobile-first; กฎ desktop อยู่ใน @media (min-width:901px) ท้ายบล็อก
   ===================================================================== */

/* --- Checkout --- */
.checkout-page { padding-top: 28px; padding-bottom: 60px; }   /* longhand — เหตุผลเดียวกับ .cart-page */
.checkout-page > h1 { font-size: 24px; display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.checkout-page > h1 svg.lucide { color: var(--red); }
.checkout-errors { display: flex; gap: 10px; background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.checkout-errors svg.lucide { flex-shrink: 0; margin-top: 2px; }
.checkout-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.checkout-form { display: flex; flex-direction: column; gap: 16px; }
.co-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 18px 20px; }
.co-card h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.co-card h2 svg.lucide { color: var(--red); width: 19px; height: 19px; }
.co-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.co-field { display: flex; flex-direction: column; gap: 5px; }
.co-field > span { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.co-field > span b { color: var(--red); }
.co-field > span em { font-weight: 400; font-style: normal; color: var(--gray); font-size: 12.5px; }
.co-field input, .co-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 15px; background: #fff; }
.co-field input:focus, .co-field textarea:focus { outline: 2px solid var(--red-light); border-color: transparent; }
.co-field textarea { resize: vertical; }
.co-account { border: 1.5px dashed #FCA5A5; }
.co-account-note { font-size: 13px; color: var(--gray); margin: -4px 0 12px; }
.co-login-link { font-size: 13.5px; color: var(--gray); margin-top: 10px; }
.co-login-link a { color: var(--red); font-weight: 700; }

/* การรับสินค้า (checkout): เลือกให้ร้านส่ง / มารับเอง */
.ship-modes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ship-mode { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.ship-mode:hover { border-color: var(--navy); }
.ship-mode input { margin-top: 3px; accent-color: var(--red); width: 17px; height: 17px; flex: none; }
.ship-mode:has(input:checked) { border-color: var(--red); background: #FFF5F5; box-shadow: inset 0 0 0 1px var(--red); }
.ship-mode-body { display: flex; flex-direction: column; gap: 3px; }
.ship-mode-title { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.ship-mode-title svg.lucide { width: 17px; height: 17px; color: var(--red); }
.ship-mode-desc { font-size: 12.5px; color: var(--gray); line-height: 1.5; }
/* คำเตือน "ราคาไม่รวมค่าส่ง" ในตัวเลือกให้ร้านจัดส่ง (24 ก.ย.)
   สีเหลืองเตือน ไม่ใช่แดง — ไม่ใช่ error แค่บอกว่าราคาจะเปลี่ยน */
.ship-mode-warn { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px;
  background: #FEF9C3; border: 1px solid #FDE68A; color: #854D0E; border-radius: 10px;
  padding: 8px 11px; font-size: 12.5px; line-height: 1.55; }
.ship-mode-warn svg.lucide { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.ship-mode-warn b { font-weight: 700; }
/* ⚠ [hidden] แพ้ CSS ของเรา — ต้องผูกกฎ display ไว้กับ :not([hidden]) เสมอ */
.co-ship-warn:not([hidden]) { display: flex; gap: 7px; align-items: center; margin-bottom: 10px;
  background: #FFF5F5; border: 1px solid var(--red); color: var(--navy); border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.5; }
.co-ship-warn svg.lucide { width: 17px; height: 17px; flex-shrink: 0; color: var(--red); }
.ship-carrier { margin-top: 14px; }
.ship-carrier.ship-carrier--hidden { display: none; }
.ship-carrier em { font-weight: 400; font-style: normal; color: var(--red); font-size: 12.5px; }

/* สมุดที่อยู่ (checkout) + บล็อกกรอกใหม่ */
.addr-picker { margin-bottom: 14px; }
.addr-default-tag { background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
.addr-new.addr-new--hidden { display: none; }

/* ใบกำกับภาษี */
.tax-toggle, .tax-same { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 15px; color: var(--navy); }
.tax-toggle input, .tax-same input { margin-top: 2px; accent-color: var(--red); width: 17px; height: 17px; flex: none; }
.tax-toggle em { font-weight: 400; font-style: normal; color: var(--gray); font-size: 12.5px; }
.tax-same { margin-top: 14px; }
.tax-fields { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.tax-fields.tax-fields--hidden { display: none; }
.tax-entity { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.tax-radio { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14.5px; color: var(--navy); }
.tax-radio input { accent-color: var(--red); width: 16px; height: 16px; flex: none; }
.tax-branch { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tax-branch.tax-branch--hidden { display: none; }
.tax-branch-label { font-weight: 600; color: var(--navy); font-size: 14px; }
.tax-branch-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tax-branch-code { max-width: 180px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 14px; }
.tax-branch-code.tax-branch-code--hidden { display: none; }
.tax-addr.tax-addr--hidden { display: none; }
.tax-new.tax-new--hidden { display: none; }
.tax-picker { margin-bottom: 4px; }
.tax-lookup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; width: 100%; }
.tax-lookup-status { display: block; font-size: 12.5px; color: var(--gray); margin-top: 6px; }
/* เลขผู้เสียภาษี + ปุ่มแว่นขยายดึงข้อมูลกรมสรรพากร (ช่องแรกสุดของฟอร์มใบกำกับ) */
.tax-id-row { display: flex; align-items: stretch; gap: 8px; }
.tax-id-row input { flex: 1 1 auto; min-width: 0; }
.tax-lookup-btn { flex: none; width: 46px; min-height: 42px; border: 1.5px solid var(--border); border-radius: 8px; background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s, color .15s; }
.tax-lookup-btn:hover { border-color: var(--red); color: var(--red); }
.tax-lookup-btn:focus-visible { outline: 2px solid var(--red-light); outline-offset: 1px; }
.tax-lookup-btn:disabled { opacity: .5; cursor: default; }
.tax-lookup-btn .lucide { width: 20px; height: 20px; }
.tax-lookup-btn--hidden, .tax-lookup-status--hidden { display: none; }
/* ดึงไม่สำเร็จ = ต้องเห็นชัดว่ากรอกเองต่อได้ (เทาจางเกินไป ลูกค้าไม่ทันเห็น) */
.tax-lookup-status--err { color: #B45309; font-weight: 600; }
.tax-lookup-status--ok { color: #15803D; font-weight: 600; } /* เขียวเข้ม — var(--green) #22C55E อ่อนไปสำหรับตัวเล็ก */

/* บัญชีของฉัน — จัดหน้าใหม่ 24 ก.ย. (ตัวตน → สิ่งที่ยังไม่ครบ → ทางลัด → กลุ่มการ์ด)
   ⚠ .account-page เป็น flex column + gap — เดิมไม่มีกฎระยะห่างระหว่าง .co-card เลย
     การ์ดทุกใบจึงชนติดกันเป็นพืดทั้งหน้า (.co-card ไม่มี margin ของตัวเอง) */
.account-page { max-width: 860px; padding-top: 18px; padding-bottom: 60px;
  display: flex; flex-direction: column; gap: 14px; }

/* การ์ดตัวตน — ตอบ "ฉันเป็นใคร · บัญชีเปิดใช้แล้วหรือยัง · เห็นราคาแบบไหน" ในจอเดียว */
.acct-hero { background: linear-gradient(135deg, var(--navy) 0%, #2C3450 100%); color: #fff;
  border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow); }
.acct-id { display: flex; align-items: center; gap: 14px; }
.acct-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 24px; line-height: 1; }
.acct-eyebrow { font-family: var(--font-heading); font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--red-light); margin-bottom: 1px; }
.acct-hero h1 { font-size: clamp(20px, 2.6vw, 25px); font-weight: 900; color: #fff; margin: 0; line-height: 1.25; }
.acct-sub { display: flex; flex-wrap: wrap; gap: 3px 16px; margin-top: 4px; font-size: 13.5px; color: #C7CCDA; }
.acct-sub span { display: inline-flex; align-items: center; gap: 5px; }
.acct-sub svg.lucide { width: 14px; height: 14px; }
.acct-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.acct-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading);
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #E8EBF2; }
.acct-pill svg.lucide { width: 14px; height: 14px; }
.acct-pill--ok { background: #16A34A; color: #fff; }
.acct-pill--wait { background: #FDE68A; color: #854D0E; }
.acct-pill--line { background: #06A94D; color: #fff; }

/* สิ่งที่ยังทำไม่ครบ — ⚠ ไม่มีอะไรค้าง = บเลดไม่เรนเดอร์กล่องนี้เลย ห้ามมีสถานะ "ครบแล้ว" */
.acct-todo { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 16px; padding: 14px 16px; }
.acct-todo-head { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: #854D0E;
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.acct-todo-head svg.lucide { width: 18px; height: 18px; }
.acct-todo-row { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid #FDE68A; font-size: 13.5px; color: #78350F; line-height: 1.5; }
.acct-todo-row > svg.lucide { width: 17px; height: 17px; flex-shrink: 0; color: #B45309; }
.acct-todo-row span { flex: 1; }
.acct-todo-cta { flex-shrink: 0; background: var(--red); color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.acct-todo-cta:hover { background: #B8000E; }

/* ทางลัด 3 ช่อง พร้อมตัวเลขจริง */
.acct-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.acct-tile { background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 14px 10px; text-decoration: none; color: var(--navy);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color .15s, transform .15s; }
.acct-tile:hover { border-color: var(--red); transform: translateY(-2px); }
.acct-tile svg.lucide { width: 20px; height: 20px; color: var(--red); }
.acct-tile b { font-family: var(--font-heading); font-weight: 900; font-size: 22px; line-height: 1.25; }
.acct-tile span { font-size: 12.5px; color: var(--gray); }

/* หัวกลุ่มคั่นการ์ด — ⚠ ห้าม text-transform:uppercase (ไม่มีผลกับไทย) และ letter-spacing ต้องน้อย */
.acct-group { font-family: var(--font-heading); font-size: 13.5px; font-weight: 700;
  letter-spacing: .4px; color: var(--gray); margin: 12px 0 -2px; padding-left: 2px; }

.acct-ok { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600;
  color: #15803D; margin-bottom: 8px; line-height: 1.5; }
.acct-ok svg.lucide { width: 17px; height: 17px; flex-shrink: 0; }

/* กล่องพับที่เป็นเนื้อหาหลักของการ์ด (ไม่ใช่ส่วนต่อท้าย) จึงไม่ต้องมีเส้นคั่นด้านบน */
.acct-add--flush { margin-top: 0; border-top: none; padding-top: 0; }
.acct-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

@media (max-width: 560px) {
  .acct-hero { padding: 16px 16px 18px; }
  .acct-avatar { width: 44px; height: 44px; font-size: 20px; }
  .acct-quick { gap: 8px; }
  .acct-tile { padding: 12px 6px; }
  .acct-tile b { font-size: 19px; }
  .acct-tile span { font-size: 11.5px; }
  .acct-todo-row { flex-wrap: wrap; }
  .acct-todo-cta { margin-left: auto; }
}
.acct-count { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--gray); background: var(--off-white); border: 1px solid var(--border); padding: 2px 10px; border-radius: 999px; }
.acct-empty { font-size: 13.5px; color: var(--gray); line-height: 1.6; margin: 4px 0 14px; }
.acct-addr-list { display: flex; flex-direction: column; gap: 12px; }
.acct-addr { border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 15px; }
.acct-addr-title { font-family: var(--font-heading); font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.acct-addr-title svg.lucide { width: 17px; height: 17px; color: var(--red); }
.acct-addr-line { font-size: 13.5px; color: var(--gray); margin-top: 4px; line-height: 1.55; }
.acct-addr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.acct-del { background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; }
.acct-edit, .acct-add { margin-top: 11px; }
.acct-edit summary, .acct-add summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 6px; }
.acct-add { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 16px; }
.acct-addr-form { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.acct-tax-addr-label { font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.acct-tax-addr-label em { font-weight: 400; font-style: normal; color: var(--gray); font-size: 12px; }
.od-tax { background: #FFFBEB; border: 1px solid #FDE68A; }
.ud-book { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
.ud-book-head { font-weight: 600; font-size: 13px; color: var(--navy); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ud-book-head svg.lucide { width: 15px; height: 15px; color: var(--red); }
.ud-book-item { font-size: 13px; color: var(--gray); line-height: 1.6; padding: 3px 0; }
.co-account--in { border-style: solid; border-color: #BBF7D0; background: #F0FDF4; }
.co-loggedin { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #15803D; }
.co-loggedin svg.lucide { color: #15803D; }
.co-member-tag { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; margin-left: 4px; }

/* dropdown ที่อยู่ไทย */
.addr-field { position: relative; }
.addr-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); margin-top: 4px; max-height: 320px; overflow-y: auto; }
.addr-suggest-item { padding: 9px 13px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--off-white); }
.addr-suggest-item:last-child { border-bottom: none; }
.addr-suggest-item.active, .addr-suggest-item:hover { background: var(--off-white); }
.addr-suggest-item strong { color: var(--navy); font-weight: 700; }
.addr-suggest-path { color: var(--gray); font-size: 12.5px; }

/* สรุป checkout */
.checkout-summary { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 18px 20px; }
.checkout-summary h2 { font-size: 17px; margin: 0 0 14px; }
.co-sum-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; max-height: 320px; overflow-y: auto; }
.co-sum-line { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; }
.co-sum-thumb { position: relative; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.co-sum-thumb img { width: 100%; height: 100%; object-fit: contain; }
.co-sum-qty { position: absolute; top: -6px; right: -6px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.co-sum-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.co-sum-variant { font-size: 12px; color: var(--gray); }
.co-sum-amt { font-family: var(--font-heading); font-weight: 700; font-size: 14px; }
.co-sum-rows { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.co-sum-row { display: flex; justify-content: space-between; font-size: 14px; }
.co-sum-row.muted { color: var(--gray); }
.co-sum-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; font-weight: 700; }
.co-sum-total .amt { font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--red); }
.co-submit { width: 100%; margin-top: 14px; justify-content: center; }
.co-submit-note { display: flex; gap: 6px; font-size: 12.5px; color: var(--gray); margin-top: 10px; }
.co-submit-note svg.lucide { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; }
/* ความน่าเชื่อถือก่อนกดจ่าย (18 ก.ย.) — เงียบกว่าการ์ดอื่นโดยตั้งใจ
   เป็นข้อมูลให้คนลังเลอ่าน ไม่ใช่ของที่ต้องแย่งสายตากับปุ่ม "ยืนยันสั่งซื้อ" */
.co-trust { margin-top: 16px; padding: 14px; background: var(--off-white); border: 1px solid var(--border); border-radius: 14px; }
.co-trust-head { display: flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-weight: 700;
  font-size: 14.5px; color: var(--navy); margin-bottom: 9px; }
.co-trust-head svg.lucide { width: 18px; height: 18px; color: #15803D; }
.co-trust-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.co-trust-list li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.55; color: #4A5163; }
.co-trust-list svg.lucide { flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px; color: var(--gray); }
.co-trust-help { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.co-trust-help-t { font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; color: var(--navy); margin-bottom: 8px; }
.co-trust-btns { display: flex; gap: 8px; }
/* ⚠ .co-trust .btn ต้อง override `.cart-summary .btn{width:100%}` ที่ใช้ร่วมกันอยู่ ไม่งั้นปุ่มซ้อนกันเต็มความกว้าง */
.co-trust-btns .btn { flex: 1; min-width: 0; justify-content: center; margin-top: 0; padding: 0 10px;
  min-height: 40px; font-size: 13.5px; white-space: nowrap; }
.co-trust-hours { margin-top: 7px; font-size: 12px; color: var(--gray); text-align: center; }

.co-back { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; color: var(--gray); text-decoration: none; font-size: 14px; }
.cart-myorders { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; color: var(--navy); font-weight: 600; text-decoration: none; font-size: 14px; }

/* --- status pill (ใช้ทั้ง tracking / admin) --- */
.status-pill { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.status-new { background: #FEF3C7; color: #92400E; }
.status-awaiting_payment { background: #FEE2E2; color: #B91C1C; }
.status-payment_review { background: #E0E7FF; color: #3730A3; }
.status-paid { background: #DCFCE7; color: #15803D; }
.status-shipped { background: #DBEAFE; color: #1D4ED8; }
.status-done { background: #D1FAE5; color: #065F46; }
.status-payment_rejected { background: #FEF2F2; color: #991B1B; }
.status-cancelled { background: #F3F4F6; color: #6B7280; }

/* --- Order tracking --- */
.track-page { padding-top: 28px; padding-bottom: 60px; }   /* longhand — เหตุผลเดียวกับ .cart-page */
.track-flash { display: flex; align-items: center; gap: 8px; background: #F0FDF4; border: 1px solid #BBF7D0; color: #15803D; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; }
.track-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.track-label { font-size: 12.5px; color: var(--gray); }
.track-head h1 { font-size: 26px; margin: 2px 0 0; }
.track-cancel { display: flex; align-items: center; gap: 8px; background: #F9FAFB; border: 1px solid var(--border); color: var(--gray); border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; font-weight: 600; }

.order-timeline { display: flex; justify-content: space-between; position: relative; margin: 0 0 26px; padding: 6px 0; }
.order-timeline::before { content: ""; position: absolute; top: 24px; left: 24px; right: 24px; height: 3px; background: var(--border); z-index: 0; }
.ot-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; text-align: center; }
.ot-dot { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 3px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gray); }
.ot-dot svg.lucide { width: 18px; height: 18px; }
.ot-text { font-size: 11.5px; color: var(--gray); font-weight: 600; line-height: 1.25; }
.ot-step.done .ot-dot { border-color: var(--green); background: var(--green); color: #fff; }
.ot-step.done .ot-text { color: #15803D; }
.ot-step.current .ot-dot { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 0 0 5px rgba(255,0,0,.14); }
.ot-step.current .ot-text { color: var(--red); font-weight: 700; }

.track-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.track-main { display: flex; flex-direction: column; gap: 18px; }
.track-side { display: flex; flex-direction: column; gap: 18px; }
.track-main h2, .track-side h2 { font-size: 16px; display: flex; align-items: center; gap: 7px; margin: 0 0 12px; }
.track-main h2 svg.lucide, .track-side h2 svg.lucide { color: var(--red); width: 18px; height: 18px; }
.pay-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 18px 20px; border: 1.5px solid #FCA5A5; }
.pay-placeholder { display: flex; gap: 12px; align-items: flex-start; }
.pay-placeholder > svg.lucide { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.pay-placeholder p { font-size: 13.5px; color: var(--gray); margin: 4px 0 12px; }
.track-items, .track-info-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 18px 20px; }
.track-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--off-white); }
.track-item-name { font-size: 14.5px; font-weight: 600; }
.track-item-variant { font-size: 12.5px; color: var(--gray); }
.track-item-amt { font-family: var(--font-heading); font-weight: 700; white-space: nowrap; }
.track-totals { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.tt-row { display: flex; justify-content: space-between; font-size: 14px; }
/* ⚠ `[hidden]` เป็นกฎของเบราว์เซอร์ แพ้ `display:flex` ข้างบนเสมอ — แถวส่วนลดสแกนจ่ายที่ JS
   ซ่อนไว้รอเปิดจะโผล่ทุกบิลถ้าไม่มีบรรทัดนี้ (กับดักเดียวกับ .pdp-bar / .pk-backdrop) */
.tt-row[hidden] { display: none; }
.tt-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; font-weight: 700; }
.tt-total .amt { font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--red); }
.track-addr { font-size: 14px; line-height: 1.7; }
.track-carrier, .track-note { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--gray); margin-top: 10px; }
.track-carrier svg.lucide, .track-note svg.lucide { width: 15px; height: 15px; color: var(--red); }
.track-help { font-size: 13.5px; color: var(--gray); text-align: center; margin-top: 4px; }
.track-help a { color: var(--red); font-weight: 700; }

/* --- ออเดอร์ของฉัน --- */
.mine-page { padding-top: 28px; padding-bottom: 60px; }   /* longhand — เหตุผลเดียวกับ .cart-page */
.mine-page > h1 { font-size: 24px; display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.mine-list { display: flex; flex-direction: column; gap: 12px; }
.mine-card { display: block; background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; text-decoration: none; color: var(--navy); position: relative; }
.mine-card:hover { box-shadow: var(--shadow-lg); }
.mine-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mine-no { font-family: var(--font-heading); font-weight: 700; }
.mine-card-mid { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--gray); }
.mine-total { font-family: var(--font-heading); font-weight: 700; color: var(--navy); }
.mine-card-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--border); }
.mine-item { display: flex; flex-direction: column; gap: 8px; }
.mine-reorder { display: flex; justify-content: flex-end; }
.mine-reorder .btn, .track-reorder .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 7px 14px; }
.mine-reorder .btn svg.lucide, .track-reorder .btn svg.lucide { width: 15px; height: 15px; }
.track-reorder { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--off-white); }
/* pickup (มารับเอง) — ป้ายเขียวทั้งหน้า track ลูกค้า และหน้า admin */
.track-carrier--pickup { color: var(--navy); font-weight: 600; }
.track-carrier--pickup svg.lucide { color: var(--green); }
.od-carrier--pickup { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.od-carrier--pickup svg.lucide { color: #059669; }

/* --- Admin: order list --- */
.order-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ofp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); text-decoration: none; color: var(--navy); font-size: 13.5px; font-weight: 600; }
.ofp span { background: var(--off-white); color: var(--gray); font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.ofp.active { background: var(--navy); color: #fff; }
.ofp.active span { background: rgba(255,255,255,.2); color: #fff; }
.admin-badge { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }

/* --- Admin: order detail --- */
.admin-back { display: inline-flex; align-items: center; gap: 6px; color: var(--gray); text-decoration: none; font-size: 14px; margin-bottom: 14px; }
.admin-back:hover { color: var(--red); }
.od-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.od-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.od-main { display: flex; flex-direction: column; gap: 16px; }
.od-side { display: flex; flex-direction: column; gap: 16px; }
.od-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; }
.od-card h3 { font-size: 15px; display: flex; align-items: center; gap: 7px; margin: 0 0 12px; }
.od-card h3 svg.lucide { color: var(--red); width: 17px; height: 17px; }
.od-cust { font-size: 14px; line-height: 1.7; }
.od-note { color: var(--gray); font-size: 13px; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.od-carrier { margin-top: 12px; padding: 10px 12px; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 10px; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.od-carrier svg.lucide { color: #C2410C; width: 16px; height: 16px; }
.od-carrier--none { background: var(--off-white); border-color: var(--border); color: var(--gray); }
.od-carrier--none svg.lucide { color: var(--gray); }
.od-totals { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.odt-row { display: flex; justify-content: space-between; font-size: 14px; }
.odt-total { display: flex; justify-content: space-between; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; font-family: var(--font-heading); font-weight: 700; }
.od-ship-form { display: flex; gap: 8px; }
.od-ship-form input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; }
.od-ship-form input:focus { outline: 2px solid var(--red-light); border-color: transparent; }
.od-hint { font-size: 12.5px; color: var(--gray); margin: 8px 0 0; }
.od-copy { display: flex; gap: 8px; }
.od-copy input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--gray); background: var(--off-white); }

/* --- Phase 3: กล่องชำระเงิน (tracking) --- */
.pay-amount { font-size: 14px; color: var(--navy); margin-bottom: 14px; }
.pay-amount b { font-family: var(--font-heading); font-weight: 900; color: var(--red); font-size: 18px; margin-left: 4px; }
.pay-channel { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 16px; }
.pay-channel:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.pay-channel-head { font-size: 13.5px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.pay-channel-head svg.lucide { width: 17px; height: 17px; color: var(--red); }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--off-white); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.qr-render { width: 240px; max-width: 100%; line-height: 0; }
.qr-render img { width: 100%; height: auto; image-rendering: pixelated; border-radius: 6px; background: #fff; }
.qr-amount { font-family: var(--font-heading); font-weight: 900; font-size: 22px; color: var(--navy); }
.qr-name { font-size: 13.5px; color: var(--gray); text-align: center; margin-top: -4px; }
.pay-slip { margin-top: 14px; }
.pay-slip-head { font-size: 13px; color: var(--gray); margin-bottom: 8px; }
/* กล่องโอนเข้าบัญชีธนาคาร */
.bank-box { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--off-white); border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-align: center; }
.bank-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.bank-no { font-family: var(--font-heading); font-weight: 900; font-size: 24px; letter-spacing: 1px; color: var(--navy); word-break: break-word; }
.bank-acct-name { font-size: 13.5px; color: var(--gray); margin-top: -2px; }
.bank-amount { font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--red); margin-top: 2px; }
.bank-box .btn { margin-top: 6px; }
@media (max-width: 480px) { .bank-no { font-size: 21px; letter-spacing: .5px; } }
.slip-form { display: flex; flex-direction: column; gap: 10px; }
.slip-input { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1.5px dashed var(--border); border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--gray); background: #fff; }
.slip-input:hover { border-color: var(--red); color: var(--navy); }
.slip-input svg.lucide { width: 18px; height: 18px; flex-shrink: 0; }
.slip-input input[type=file] { display: none; }
.slip-input-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slip-err, .od-err { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #B91C1C; background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 8px; padding: 8px 12px; }
.slip-err svg.lucide, .od-err svg.lucide { width: 15px; height: 15px; }
.slip-preview { display: block; text-decoration: none; }
.slip-preview img { width: 100%; max-width: 320px; border-radius: 12px; border: 1px solid var(--border); }
.slip-preview span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--red); font-weight: 600; margin-top: 8px; }
.slip-preview span svg.lucide { width: 15px; height: 15px; }
.slip-reupload { margin-top: 14px; }
.slip-reupload summary { font-size: 13px; color: var(--gray); cursor: pointer; }
.slip-reupload[open] summary { margin-bottom: 10px; }
.reject-note { display: flex; gap: 10px; align-items: flex-start; background: #FEF2F2; border: 1.5px solid #FCA5A5; color: #991B1B; border-radius: 14px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; }
.reject-note svg.lucide { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; }
.pay-omise-wait { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gray); background: var(--off-white); border-radius: 10px; padding: 12px 14px; }
.pay-omise-wait svg.lucide { width: 17px; height: 17px; color: #C2410C; }
.pay-line-box { display: flex; gap: 12px; align-items: flex-start; }
.pay-line-box > svg.lucide { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.pay-line-box p { font-size: 13.5px; color: var(--gray); margin: 4px 0 12px; }

/* --- Phase 3: admin สลิป + payment-settings --- */
.od-slip { display: block; }
.od-slip img { width: 100%; max-width: 260px; border-radius: 10px; border: 1px solid var(--border); }
.od-reject-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.od-reject-form input { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.od-reject-form input:focus { outline: 2px solid var(--red-light); border-color: transparent; }
.pay-settings { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.ps-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 18px 20px; }
.ps-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ps-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ps-switch { flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; background: var(--border); position: relative; transition: background .18s; margin-top: 2px; }
.ps-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ps-toggle input:checked + .ps-switch { background: var(--green); }
.ps-toggle input:checked + .ps-switch::after { transform: translateX(20px); }
.ps-toggle input:focus-visible + .ps-switch { outline: 2px solid var(--red); outline-offset: 2px; }
.ps-toggle-label b { display: block; font-size: 15px; color: var(--navy); }
.ps-toggle-label small { display: block; font-size: 12.5px; color: var(--gray); margin-top: 2px; line-height: 1.5; }
.ps-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ps-field span { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.ps-field input { width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; font-size: 15px; }
.ps-field input:focus { outline: 2px solid var(--red-light); border-color: transparent; }
.ps-err { display: block; color: #B91C1C; font-size: 12.5px; margin-top: 5px; font-style: normal; }
.ps-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--gray); margin: 12px 0 0; line-height: 1.5; }
.ps-note svg.lucide { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.ps-note code { background: var(--off-white); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.ps-omise-status { margin-top: 14px; }
.ps-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.ps-badge svg.lucide { width: 15px; height: 15px; }
.ps-badge--ok { background: #DCFCE7; color: #15803D; }
/* ช่องทางย่อยของ Beam (เปิด/ปิดรายช่อง + งวดผ่อน) */
.ps-beam-channels { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.ps-beam-head { font-size: 14px; font-weight: 700; color: var(--navy); }
.ps-toggle--sub .ps-switch { width: 40px; height: 23px; }
.ps-toggle--sub .ps-switch::after { width: 17px; height: 17px; }
.ps-toggle--sub input:checked + .ps-switch::after { transform: translateX(17px); }
.ps-toggle--sub .ps-toggle-label b { font-size: 14.5px; }
.ps-beam-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 14px; background: var(--off-white); border-radius: 12px; }
.ps-beam-terms-label { font-size: 13px; font-weight: 600; color: var(--navy); width: 100%; }
.ps-chk { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14px; color: var(--navy); }
.ps-chk input { accent-color: var(--red); width: 16px; height: 16px; flex: none; }
.ps-chk em { font-style: normal; color: var(--gray); font-size: 12.5px; }
/* หมายเหตุเงื่อนไขขั้นต่ำ ก่อนลูกค้าเลือกช่องทางชำระเงิน (หน้า track) */
/* เงื่อนไขขั้นต่ำ: ไอคอน i มุมขวาบนของการ์ด hover/แตะค่อยกาง (ไม่กินพื้นที่ถาวร) */
.pay-card { position: relative; }
.pay-hint { position: absolute; top: 15px; right: 16px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--gray); cursor: help; }
.pay-hint:hover, .pay-hint:focus-visible { color: var(--red); background: var(--off-white); outline: none; }
.pay-hint > svg.lucide { width: 17px; height: 17px; }
.pay-hint-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; display: flex; flex-direction: column; gap: 4px; width: max-content; max-width: min(330px, 76vw); padding: 11px 13px; background: var(--navy); color: #fff; border-radius: 11px; box-shadow: var(--shadow-lg); font-size: 12.5px; font-weight: 400; line-height: 1.65; text-align: left; cursor: auto; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.pay-hint:hover .pay-hint-pop, .pay-hint:focus .pay-hint-pop, .pay-hint:focus-within .pay-hint-pop { opacity: 1; visibility: visible; transform: none; }
.pay-hint-pop b { color: #fff; font-weight: 700; }
.pay-hint-ok { color: #86EFAC; font-weight: 700; font-style: normal; }
@media (prefers-reduced-motion: reduce) { .pay-hint-pop { transition: none; } }
/* เลือกช่องทางชำระเงินในหน้าออเดอร์ — กล่องสี่เหลี่ยมจัตุรัสสูงสุด 3 กล่อง */
/* กล่องสี่เหลี่ยมจัตุรัส — คุมความกว้างต่อกล่องไว้ ไม่งั้นจอกว้างกล่องจะยืดจนสูงเกินหน้าจอ */
.pay-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 146px)); gap: 10px; }
.pay-pick--2 { grid-template-columns: repeat(2, minmax(0, 146px)); }
.pay-pick--1 { grid-template-columns: minmax(0, 320px); }
.pay-opt { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 12px 10px; background: #fff; border: 1.5px solid var(--border); border-radius: 16px; cursor: pointer; font: inherit; color: var(--navy); text-decoration: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.pay-opt:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(0, 0, 0, .07); color: var(--navy); }
.pay-opt:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.pay-opt svg.lucide { width: 30px; height: 30px; color: var(--red); flex-shrink: 0; }
.pay-opt-body { display: flex; flex-direction: column; gap: 3px; }
.pay-opt-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.pay-opt-desc { font-size: 12.5px; color: var(--gray); line-height: 1.4; }
.pay-opt.is-active { border-color: var(--red); background: #FFF5F5; box-shadow: 0 4px 14px rgba(255, 0, 0, .1); }
/* ช่องทางที่ยังใช้ไม่ได้ — ยังโชว์ให้เห็นว่ามีทางเลือกนี้ พร้อมบอกเงื่อนไข แต่กดไม่ได้ */
.pay-opt--off { background: var(--off-white); border-style: dashed; cursor: not-allowed; }
.pay-opt--off:hover { border-color: var(--border); box-shadow: none; }
.pay-opt--off svg.lucide { color: #B9BEC9; }
.pay-opt--off .pay-opt-title { color: var(--gray); }
.pay-opt--off .pay-opt-desc { color: #B45309; font-weight: 600; }
.pay-pick--1 .pay-opt { aspect-ratio: auto; flex-direction: row; gap: 12px; justify-content: flex-start; text-align: left; padding: 16px 18px; }
@media (max-width: 480px) {
  .pay-pick, .pay-pick--2 { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
  .pay-pick--1 { grid-template-columns: 1fr; }
  .pay-opt { padding: 10px 6px; gap: 7px; border-radius: 13px; }
  .pay-opt svg.lucide { width: 26px; height: 26px; }
  .pay-opt-title { font-size: 13.5px; }
  .pay-opt-desc { font-size: 11.5px; }
}
/* ฟอร์มบัตรในหน้าเรา — ช่องกรอกไม่มี name และไม่อยู่ใน form ใดๆ (เลขบัตรไปหา gateway ตรง) */
.card-pay { display: flex; flex-direction: column; gap: 14px; background: var(--off-white); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.card-terms { display: flex; flex-direction: column; gap: 8px; }
.card-terms-label { font-size: 13px; font-weight: 700; color: var(--navy); }
.card-terms-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.card-term { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 9px 14px; background: #fff; border: 1.5px solid var(--border); border-radius: 11px; cursor: pointer; font: inherit; color: var(--navy); }
.card-term b { font-size: 13.5px; }
.card-term span { font-size: 11.5px; color: var(--gray); }
.card-term.is-active { border-color: var(--red); background: #FFF5F5; }
.card-term:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* บัตรที่บันทึกไว้ — โชว์แค่ยี่ห้อ/4 ตัวท้าย/วันหมดอายุ (ไม่มีข้อมูลลับอยู่ในหน้าเว็บ) */
.saved-cards { display: flex; flex-direction: column; gap: 10px; }
.saved-card-list { display: flex; flex-direction: column; gap: 8px; }
.saved-card { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; }
.saved-card:has(input:checked) { border-color: var(--red); background: #FFF5F5; }
.saved-card input { accent-color: var(--red); width: 17px; height: 17px; flex: none; }
.saved-card-body { display: flex; flex-direction: column; gap: 1px; }
.saved-card-body b { font-size: 14px; letter-spacing: .3px; }
.saved-card-body span { font-size: 12px; color: var(--gray); }
.card-field--half { max-width: 190px; }
.card-switch { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: none; font: inherit; font-size: 13px; color: var(--mid-navy); text-decoration: underline; cursor: pointer; }
.card-switch i, .card-switch svg { width: 15px; height: 15px; }
/* ยินยอมบันทึกบัตร — บรรทัดเดียว คำอธิบายยาวซ่อนหลังปุ่ม i (ดู track.blade.php) */
.card-save { display: flex; gap: 10px; align-items: center; padding: 11px 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.card-save-main { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; cursor: pointer; }
.card-save input { accent-color: var(--red); width: 17px; height: 17px; flex: none; }
.card-save-main b { font-size: 13.5px; }
/* ปุ่ม i + คำอธิบาย: hover/โฟกัสสำหรับเมาส์-คีย์บอร์ด, .is-open สำหรับแตะบนมือถือ */
.card-info { position: relative; flex: none; display: inline-flex; }
.card-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--gray); cursor: pointer; }
.card-info-btn:hover, .card-info-btn:focus-visible { background: var(--off-white); color: var(--mid-navy); }
.card-info-btn i, .card-info-btn svg { width: 17px; height: 17px; }
.card-info-pop { position: absolute; right: -6px; bottom: calc(100% + 10px); z-index: 30; width: min(300px, 74vw); padding: 11px 13px; background: var(--navy); color: #fff; border-radius: 11px; font-size: 11.5px; line-height: 1.6; box-shadow: 0 10px 28px rgba(30,45,59,.28); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; }
.card-info-pop b { color: #fff; font-weight: 700; }
.card-info-pop::after { content: ''; position: absolute; right: 15px; top: 100%; border: 6px solid transparent; border-top-color: var(--navy); }
.card-info:hover .card-info-pop, .card-info:focus-within .card-info-pop, .card-info.is-open .card-info-pop { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .card-info-pop { transition: none; } }
.card-dead-tag { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; font-size: 11.5px; font-weight: 600; }
.card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-field { display: flex; flex-direction: column; gap: 5px; }
.card-field--full { grid-column: 1 / -1; }
.card-field > span { font-size: 13px; font-weight: 600; color: var(--navy); }
.card-field > span em { font-weight: 400; color: var(--gray); font-style: normal; }
.card-field input { width: 100%; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; background: #fff; color: var(--navy); }
.card-field input:focus { outline: none; border-color: var(--red); }
.card-field input::placeholder { color: #9CA3AF; font-size: 14px; }
.card-submit { width: 100%; justify-content: center; }
.card-submit:disabled { opacity: .6; cursor: not-allowed; }
.card-secure { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--gray); line-height: 1.55; }
.card-secure svg.lucide { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: #15803D; }
.card-fallback { font-size: 12.5px; color: var(--gray); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.card-fallback:hover { color: var(--red); }
@media (max-width: 420px) { .card-fields { grid-template-columns: 1fr; } }
/* ปุ่มรอง — ลูกค้าส่วนใหญ่ไม่ต้องกด (ระบบยืนยันให้เอง) จึงไม่ควรเด่นแข่งกับกล่องเลือกช่องทาง */
.pay-recheck { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; background: none; border: 0; font: inherit; font-size: 13px; color: var(--gray); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pay-recheck:hover { color: var(--red); }
.pay-recheck svg.lucide { width: 14px; height: 14px; }
/* แผง QR ที่เปิดในหน้าเรา (Beam Charges API) */
.pay-panel { margin-top: 14px; }
.pay-panel[hidden] { display: none; }
.qr-live-status { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--gray); text-align: center; line-height: 1.6; }
.qr-live-status svg.lucide { width: 15px; height: 15px; flex-shrink: 0; }
.qr-live-status--err { color: #B45309; font-weight: 600; }
.qr-live-status--ok { color: #15803D; font-weight: 700; }
.qr-expiry { font-size: 12.5px; color: var(--gray); }
.qr-expiry b { font-variant-numeric: tabular-nums; color: var(--navy); }
.qr-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--red); border-radius: 50%; animation: qr-spin .8s linear infinite; }
@keyframes qr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qr-spin { animation-duration: 3s; } }
/* วงกลมหมุนในกล่อง "กำลังดำเนินการ" ตอนกดชำระเงิน (ดู track.blade.php #payBusy)
   ใช้กรอบ .order-success-modal ร่วมกับป๊อปอัปสั่งซื้อ/ชำระสำเร็จ — ที่เพิ่มมีแค่วงหมุน */
.pay-busy-spin { width: 46px; height: 46px; margin: 0 auto 16px; border: 4px solid var(--border); border-top-color: var(--red); border-radius: 50%; animation: qr-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pay-busy-spin { animation-duration: 2.4s; } }
.ps-badge--warn { background: #FEF3C7; color: #92400E; }

@media (min-width: 901px) {
  .checkout-layout { grid-template-columns: 1.6fr 1fr; }
  .checkout-summary { position: sticky; top: 90px; }
  .co-grid { grid-template-columns: 1fr 1fr; }
  .co-col-2 { grid-column: 1 / -1; }
  .track-layout { grid-template-columns: 1.7fr 1fr; }
  .od-layout { grid-template-columns: 1.7fr 1fr; }
}

@media (max-width: 560px) {
  .track-head h1 { font-size: 22px; }
  .ot-dot { width: 32px; height: 32px; }
  .order-timeline::before { top: 21px; left: 18px; right: 18px; }
  .ot-text { font-size: 10.5px; }
  .co-sum-items { max-height: none; }
}

/* --- คูปองส่วนลด (Phase 4) --- */
.coupon-box { margin: 12px 0; padding-top: 12px; border-top: 1px dashed var(--border); }
.coupon-form { display: flex; gap: 8px; }
.coupon-form input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 14px; text-transform: uppercase; }
.coupon-form input::placeholder { text-transform: none; }
.coupon-form .btn { white-space: nowrap; padding: 9px 16px; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 12px; padding: 10px 12px; }
.coupon-applied-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.coupon-applied-info > svg.lucide { color: var(--green); flex-shrink: 0; }
.coupon-applied-code { font-family: var(--font-heading); font-weight: 700; color: #15803D; letter-spacing: .5px; }
.coupon-applied-amt { font-size: 13px; color: #15803D; }
.coupon-remove { background: none; border: none; cursor: pointer; color: #6B7280; padding: 4px; display: flex; }
.coupon-remove:hover { color: var(--red); }
.coupon-error { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: #B91C1C; }
.coupon-error > svg.lucide { width: 16px; height: 16px; flex-shrink: 0; }

/* --- admin: pill สถานะคูปอง (ปุ่ม toggle) + หมายเหตุ --- */
.status-pill.pill-on { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; cursor: pointer; gap: 5px; }
.status-pill.pill-off { background: #F3F4F6; color: #6B7280; border: 1px solid var(--border); cursor: pointer; gap: 5px; }
.status-pill.pill-on > svg.lucide, .status-pill.pill-off > svg.lucide { width: 14px; height: 14px; }
.pill-note { font-size: 11.5px; color: #B45309; margin-top: 4px; }

/* ===== ระบบอนุมัติสมาชิก (B2B ราคาพิเศษ) ===== */
/* หน่วยราคาต่อท้าย เช่น /ตัว */
.price-unit { font-size: 0.82em; font-weight: 400; color: var(--gray); }

/* กล่อง CTA ใต้ตารางราคา (guest = สมัคร / pending = รออนุมัติ) */
.price-cta { border-radius: 12px; padding: 14px 16px; margin-top: 14px; font-size: 14.5px; }
.price-cta > svg.lucide, .price-cta-text > svg.lucide { width: 20px; height: 20px; flex-shrink: 0; }
.price-cta--guest { background: #FFF1F2; border: 1px solid #FECDD3; }
.price-cta-text { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.price-cta-text b { color: var(--red); }
.price-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.price-cta--pending { background: #FEF9C3; border: 1px solid #FDE68A; color: #854D0E; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.price-cta--pending a { color: #854D0E; font-weight: 700; }

/* แถบ pending ใต้ header */
.pending-banner { background: #FEF3C7; border-bottom: 1px solid #FDE68A; color: #92400E; font-size: 13.5px; }
.pending-banner .container { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.pending-banner span { display: flex; align-items: center; gap: 7px; }
.pending-banner svg.lucide { width: 16px; height: 16px; }
.pending-banner button { background: none; border: none; color: #92400E; cursor: pointer; padding: 2px; line-height: 0; }

/* บรรทัดราคาต่อหน่วยในสรุป checkout */
.co-sum-unit { font-size: 12.5px; color: var(--gray); margin-top: 2px; }

/* ===== admin: ผู้ใช้ + อนุมัติ ===== */
/* หัวหน้า users: การ์ดสถิติซ้าย + ปุ่มเพิ่มผู้ใช้ขวาบน */
.users-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.users-head-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.user-status-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.u-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--gray); font-size: 13.5px; text-decoration: none; }
.u-pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.u-pill-count { background: rgba(0,0,0,.08); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.u-pill.active .u-pill-count { background: rgba(255,255,255,.22); }

.user-tel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; color: var(--navy); text-decoration: none; }
.user-tel svg.lucide { width: 15px; height: 15px; color: var(--green); }
.user-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.shop-tag { margin-left: 6px; font-size: 11.5px; padding: 2px 10px; vertical-align: middle; }
.user-note-hint { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; color: var(--gray); margin-top: 3px; max-width: 280px; line-height: 1.4; }
.user-note-hint svg.lucide { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }
.user-name-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.user-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-line-name { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #06843C; font-weight: 600; line-height: 1.4; }
.user-line-name svg.lucide { width: 13px; height: 13px; flex-shrink: 0; }

.user-approve-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.btn-approve { background: var(--green); color: #fff; border: none; padding: 5px 16px; font-size: 13px; }
.btn-approve:disabled { background: #D1D5DB; color: #6B7280; cursor: not-allowed; }
.btn-reject { background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; padding: 5px 16px; font-size: 13px; }
.approve-hint { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: #B45309; margin-bottom: 6px; }
.approve-hint svg.lucide { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* ===== หน้ารายละเอียดผู้ใช้ (admin.users.show) — sw v30 ===== */
.user-name-link { color: var(--navy); font-weight: 700; text-decoration: none; }
.user-name-link:hover { color: var(--red); text-decoration: underline; }
.user-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.ud-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ud-head-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ชื่อลูกค้าต้องเด่น (เจ้าของสั่ง) */
.ud-head-title h2 { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); font-weight: 900; color: var(--navy); line-height: 1.2; }
.ud-quick { display: inline-flex; gap: 6px; align-items: center; }
.ud-quick select { max-width: 150px; font-size: 13px; padding: 4px 8px; }
.ud-quick button { padding: 4px 10px; font-size: 13px; }
.ud-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ud-approve { margin-bottom: 18px; }
.user-detail-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; margin-bottom: 18px; }
.ud-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; }
.ud-card h3 { font-size: 15px; display: flex; align-items: center; gap: 7px; margin: 0 0 12px; }
.ud-card h3 svg.lucide { color: var(--red); width: 17px; height: 17px; }
.ud-list { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.ud-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: baseline; font-size: 14px; }
.ud-list dt { color: var(--gray); font-size: 13px; margin: 0; }
.ud-list dd { margin: 0; color: var(--navy); font-weight: 500; }
.ud-empty { color: #9CA3AF; }
.ud-yes { display: inline-flex; align-items: center; gap: 4px; color: #15803D; font-weight: 600; }
.ud-yes svg.lucide { width: 14px; height: 14px; }
.ud-line-name { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #E7F9EE; color: #06843C; font-size: 12.5px; font-weight: 600; }
/* ป้ายบอกว่าชื่อไลน์ = ชื่อบัญชี (มาจากฟอร์มสมัครเดิมที่เติมให้อัตโนมัติ) — เงียบกว่าชื่อ ไม่แย่งสายตา */
.ud-line-same { margin-left: 6px; font-size: 11.5px; color: var(--gray); }
.ud-card .user-tel { font-size: 15px; }
/* ปุ่มโทรพอดีคำ — เจ้าของบ่นแบบเต็มแถวกินพื้นที่ */
.ud-call-btn { margin-top: 12px; display: inline-flex; padding: 7px 18px; font-size: 14.5px; }
.ud-note { margin: 0; font-size: 14px; line-height: 1.7; color: var(--navy); white-space: pre-wrap; }
.ud-order-stats { display: flex; gap: 26px; flex-wrap: wrap; padding: 4px 0 2px; }
.ud-order-stats > div { display: flex; flex-direction: column; }
.ud-stat-num { font-family: var(--font-heading); font-weight: 700; font-size: 24px; color: var(--navy); line-height: 1.1; }
.ud-stat-label { font-size: 12.5px; color: var(--gray); margin-top: 2px; }
/* การ์ดที่อยู่ "นอก" ตะแกรงบนสุด (ออเดอร์ / บันทึกสะสม / พนักงานผู้ดูแล / สิทธิ์ / ลบบัญชี)
   ⚠ ตะแกรงมี gap ให้เฉพาะการ์ดข้างในตัวเอง — การ์ดที่ตามหลังมาต้องมีช่องไฟของตัวเอง
     ไม่งั้นติดกันเป็นพืดจนดูเหมือนการ์ดเดียว (เจ้าของแจ้ง 24 ก.ย.) */
.user-detail-grid ~ .ud-card { margin-bottom: 18px; }
.ud-orders { margin-bottom: 18px; }
.ud-danger { border: 1px solid #FCA5A5; margin-bottom: 18px; }
.ud-hint { font-size: 13px; color: var(--gray); margin: 0 0 10px; }
@media (min-width: 780px) {
  .user-detail-grid { grid-template-columns: 1fr 1fr; }
}

/* Dialog (popup แก้ไข) — native <dialog> */
/* margin:auto จำเป็น — reset `* { margin:0 }` ของเราฆ่าค่า UA ที่จัด dialog กลางจอ (เจอจริง: popup ไปเกาะมุมซ้ายบน) */
dialog.admin-dlg { width: 560px; max-width: 92vw; margin: auto; max-height: calc(100dvh - 48px); overflow-y: auto; border: none; border-radius: 16px; padding: 20px 22px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.admin-dlg::backdrop { background: rgba(0,0,0,.45); }
.admin-dlg-title { font-size: 17px; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-right: 34px; }
.admin-dlg-title svg.lucide { color: var(--red); width: 19px; height: 19px; }
.admin-dlg-x { position: absolute; top: 12px; right: 12px; margin: 0; }
.admin-dlg-x button { background: none; border: none; cursor: pointer; color: var(--gray); padding: 6px; display: flex; border-radius: 8px; }
.admin-dlg-x button:hover { background: var(--off-white); color: var(--navy); }
.admin-dlg-x svg.lucide { width: 20px; height: 20px; }
.admin-dlg-errors { background: #FEF2F2; border: 1px solid #FCA5A5; color: #B91C1C; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 12px; }
.admin-dlg-form .filter-label { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.admin-dlg-form .reg-input { width: 100%; }
.dlg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) {
  dialog.admin-dlg { padding: 16px 16px 18px; }
}

/* OTP (login/register) — sw v23 */
.otp-phone-row { display: flex; gap: 8px; }
.otp-phone-row input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; }
.otp-request-btn { flex-shrink: 0; background: var(--navy); color: #fff; border: none; border-radius: 8px; padding: 0 16px; font-size: 14.5px; white-space: nowrap; cursor: pointer; justify-content: center; }
.otp-request-btn:hover { background: #2E3650; }
.otp-request-btn:disabled { opacity: .55; cursor: default; }
.otp-boxes { display: flex; gap: 8px; max-width: 340px; }
.otp-box { flex: 1; min-width: 0; height: 54px; text-align: center; font-size: 24px; font-weight: 700; font-family: var(--font-heading); color: var(--navy); border: 1px solid var(--border); border-radius: 10px; padding: 0; }
.otp-box:focus { border-color: var(--navy); outline: 2px solid rgba(30,45,59, .18); outline-offset: 1px; }
.otp-msg { margin: -4px 0 12px; padding: 10px 14px; border-radius: 8px; font-size: 14px; background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }
.otp-msg.otp-msg-error { background: #FEF2F2; border-color: #FCA5A5; color: #991B1B; }
.otp-msg a { color: inherit; text-decoration: underline; }
.reg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
/* .reg-2col คง 2 คอลัมน์ทุกจอ — หน้าสมัครกระชับ (รหัสผ่านคู่กัน) */

/* Register page (สมัครสมาชิก) — compact + ที่อยู่แถวเดียว + ปุ่มเปิดตารหัสผ่าน (sw v25) */
.reg-intro { text-align: center; color: var(--gray); margin-bottom: 18px; }
.reg-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; font-family: inherit; }
.reg-sec { font-size: 17px; margin: 16px 0 10px; display: flex; align-items: center; gap: 6px; }
.reg-sec svg.lucide { width: 18px; height: 18px; color: var(--red); }
.reg-hint { font-size: 13px; color: var(--gray); margin: 0 0 12px; }
.reg-page .filter-block { margin-bottom: 14px; }
.reg-page .filter-label { margin-bottom: 5px; }
.addr-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr .9fr; gap: 8px; }
.addr-grid > div { min-width: 0; }
.addr-grid label { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 13px; margin-bottom: 4px; white-space: nowrap; }
.addr-grid .reg-input { padding: 9px 10px; font-size: 15px; }
.pw-wrap { position: relative; }
.pw-wrap .reg-input { padding-right: 42px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; cursor: pointer; color: var(--gray); display: flex; align-items: center; }
.pw-eye svg.lucide { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .reg-page h1 { font-size: 24px; }
  .reg-intro { font-size: 13.5px; margin-bottom: 12px; }
  .reg-page .filter-block { margin-bottom: 10px; }
  .reg-page .reg-input { padding: 9px 12px; }
  .reg-sec { margin: 12px 0 8px; font-size: 16px; }
  .addr-grid { grid-template-columns: 1fr 1fr; gap: 6px 8px; }
}

/* ===== โปรโมชั่น (public /promotions) ===== */
.promo-wrap { max-width: 860px; margin: 0 auto; padding-top: 8px; padding-bottom: 8px; }
.promo-head { text-align: center; margin: 28px 0 24px; }
.promo-head h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 900; color: var(--navy); }
.promo-head p { color: var(--gray); font-size: 15.5px; margin-top: 6px; }
.promo-list { display: flex; flex-direction: column; gap: 22px; margin-bottom: 40px; }
.promo-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.promo-card img { display: block; width: 100%; height: auto; }
.promo-card-title { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--navy); padding: 14px 18px; }
.promo-empty { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 48px 24px; margin: 20px 0 44px; }
.promo-empty svg.lucide { width: 46px; height: 46px; color: var(--red); margin-bottom: 12px; }
.promo-empty p { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--navy); margin-bottom: 18px; }

/* ===== โปรโมชั่น (หลังบ้าน) ===== */
.promo-upload { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; margin-bottom: 20px; }
.promo-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.promo-file { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--off-white); border: 1px dashed var(--border); border-radius: 10px; padding: 9px 16px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--navy); cursor: pointer; }
.promo-file svg.lucide { width: 18px; height: 18px; color: var(--red); }
/* ซ่อนแบบ focusable — display:none + required จะทำให้ browser บล็อกฟอร์มโดยไม่โชว์ bubble */
.promo-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.promo-upload-hint { color: var(--gray); font-size: 13px; margin: 10px 0 0; }
.promo-thumb { width: 160px; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; }
.promo-edit-form { display: flex; gap: 8px; align-items: center; }
.promo-sort { width: 70px; flex-shrink: 0; text-align: center; }
.promo-state { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; }
.promo-state svg.lucide { width: 16px; height: 16px; }
.promo-state--on { color: #15803D; }
.promo-state--off { color: var(--gray); }
.promo-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== หน้าแก้ไขสินค้า (/admin/products/{id}/edit): ตารางตัวเลือกสินค้า / ราคา =====
   ⚠ ทุกกฎ scope ที่ .vt-edit / .vt-scroll-edit / .vt-area เท่านั้น
     คลาส .variant-table ถูกใช้ร่วมกับหน้าสินค้าฝั่งลูกค้า + ตารางหลังบ้านอีก 6 หน้า ห้ามให้หลุดไปโดน */

/* หน้านี้กว้างเต็ม .admin-content — แต่บล็อกฟอร์มด้านบนต้อง cap ไว้
   ช่องชื่อสินค้า/รายละเอียดยาว 1600px อ่านยากกว่าเดิม ตารางเท่านั้นที่ได้ประโยชน์จากความกว้าง */
.edit-page .edit-top-grid,
.edit-page > form > .filter-block,
.edit-page .competitor-compare { max-width: 1100px; }

.vt-area { margin-bottom: 4px; }
.vt-help { font-size: 13px; color: var(--gray); margin-bottom: 10px; }
.vt-help code { background: var(--off-white); border-radius: 4px; padding: 1px 5px; }

/* chip พับ/กางกลุ่มคอลัมน์ */
.vt-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.vt-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--border); background: #fff; color: var(--gray); border-radius: 999px; padding: 6px 14px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.vt-chip:hover { border-color: var(--navy); color: var(--navy); }
.vt-chip svg.lucide { width: 15px; height: 15px; }
.vt-chip[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.vt-chip-count { font-size: 11.5px; font-weight: 700; background: #FEF3C7; color: #92400E; border-radius: 999px; padding: 1px 7px; }
.vt-chip[aria-pressed="true"] .vt-chip-count { background: rgba(255,255,255,.22); color: #fff; }
/* ยืนยัน "ตรวจหน่วยใหญ่แล้ว" ทั้งหน้า — อยู่ในกลุ่ม col-pack จึงโผล่/หายพร้อมคอลัมน์หน่วยใหญ่
   ⚠ ให้ display เฉพาะตอนกลุ่มถูกกาง (.show-pack) ไม่พึ่งกฎซ่อน .col-pack ด้านล่างอย่างเดียว —
     ช่องนี้ยืนยันค่าที่ระบบเดาไว้ทั้งหน้า ถ้าโผล่ตอนคอลัมน์ซ่อนอยู่ = ยืนยันของที่มองไม่เห็น */
.vt-area .pack-confirm { align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 10px 14px; border: 1.5px solid #BBF7D0; background: #F6FAF7; border-radius: 10px; font-size: 14px; font-weight: 400; cursor: pointer; }
.vt-area.show-pack .pack-confirm { display: flex; }
.vt-area .pack-confirm input[type="checkbox"] { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.vt-area .pack-confirm em { display: block; font-style: normal; font-size: 12.5px; color: var(--gray); margin-top: 3px; line-height: 1.5; }
.vt-area:not(.show-retail) .col-retail,
.vt-area:not(.show-market) .col-market,
.vt-area:not(.show-pack) .col-pack { display: none; }
.vt-area .competitor-compare { margin-bottom: 14px; }

/* กรอบการ์ด + ตัวเลื่อนแนวนอน อยู่ที่ div ครอบ ไม่ใช่ <table> (ดูคอมเมนต์ในบเลด) */
.vt-scroll-edit { background: #fff; border-radius: 12px; box-shadow: var(--shadow); overflow-x: auto; margin-bottom: 16px; scrollbar-width: thin; }
.vt-scroll-edit::-webkit-scrollbar { height: 9px; }
.vt-scroll-edit::-webkit-scrollbar-thumb { background: #C9D0DC; border-radius: 999px; }

/* (0,2,0) เท่ากฎ .admin-content .variant-table ด้านบน แต่มาทีหลังจึงชนะ — ล้างกรอบ/overflow ออกจาก table */
.admin-content .vt-edit { width: 100%; margin: 0; font-size: 14px; background: transparent; box-shadow: none; border-radius: 0; overflow: visible;
  /* sticky ใช้กับ border-collapse:collapse ไม่ได้ — เส้นถูกวาดที่ระดับ table จะไม่เลื่อนตาม cell ที่ตรึง */
  border-collapse: separate; border-spacing: 0; }
.admin-content .vt-edit th { padding: 7px 8px; font-size: 13px; vertical-align: bottom; line-height: 1.35; }
.admin-content .vt-edit td { padding: 5px 8px; vertical-align: top; }
.admin-content .vt-edit .th-sub { display: block; font-family: var(--font-body); font-size: 10.5px; font-weight: 400; opacity: .7; margin-top: 2px; }
.admin-content .vt-edit .col-note { width: 100%; }   /* ดูดที่ว่างที่เหลือไว้ที่คอลัมน์นี้คอลัมน์เดียว */
.admin-content .vt-edit .col-del { width: 40px; }

/* คอลัมน์ "ขนาด" ตรึงซ้ายสุด — ต้องระบุพื้นหลังทึบทั้งแถวคี่และแถวคู่
   (กฎเดิม .variant-table tr:nth-child(even) td = (0,2,2) จึงต้องใช้ selector ที่แรงกว่า) */
.admin-content .vt-edit td.v-fix { position: sticky; left: 0; z-index: 2; background: #fff; }
.admin-content .vt-edit tr:nth-child(even) td.v-fix { background: var(--off-white); }
.admin-content .vt-edit th.v-fix { position: sticky; left: 0; z-index: 3; background: var(--navy); }
.vt-scroll-edit.is-scrolled .v-fix { box-shadow: 6px 0 8px -6px rgba(30,45,59,.25); }

/* ช่องกรอก: ความกว้างมาจากคลาส ไม่ใช่ inline style (เดิมแก้ทีต้องตามแก้ 32 จุด) */
.admin-content .vt-edit .vi { box-sizing: border-box; font: inherit; font-size: 14px; padding: 6px 8px; }
.admin-content .vt-edit .vi:focus { outline: 2px solid var(--red-light); outline-offset: -2px; border-color: transparent; }
.admin-content .vt-edit .vi::placeholder { color: #C4C8D0; }
.admin-content .vt-edit .vi-size { width: 96px; }
.admin-content .vt-edit .vi-txt { width: 88px; }
.admin-content .vt-edit .vi-pack { width: 104px; }
.admin-content .vt-edit .vi-unit { width: 60px; }
.admin-content .vt-edit .vi-money { width: 84px; }
.admin-content .vt-edit .vi-pct { width: 60px; }
.admin-content .vt-edit .vi-note { width: 100%; min-width: 100px; }
/* ตัวเลขชิดขวา + ความกว้างตัวเลขเท่ากัน → กวาดตาลงแนวตั้งเทียบราคาข้ามแถวได้ */
.admin-content .vt-edit .vi-num { text-align: right; font-variant-numeric: tabular-nums; }
/* ลูกศร spinner กินที่ ~16px ต่อช่อง และกดโดนแล้วราคาเปลี่ยน */
.admin-content .vt-edit .vi-num { -moz-appearance: textfield; appearance: textfield; }
.admin-content .vt-edit .vi-num::-webkit-outer-spin-button,
.admin-content .vt-edit .vi-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ช่องที่สูตรคำนวณให้ — พื้นเทาบอกว่าเป็นผลลัพธ์ (พิมพ์ทับเองได้) */
.admin-content .vt-edit .vi-out { font-weight: 700; background: #F4F5F7; }
.admin-content .vt-edit .vi-out.is-calc { background: #FEF08A; transition: background .7s ease-out; }

/* แรเงากลุ่มคอลัมน์ที่พับได้ ให้เห็นว่าเป็นชุดเดียวกัน (เดิมใช้ .market-col ทำหน้าที่นี้) */
.admin-content .vt-edit td.col-market { background: #F8FAFC; }
.admin-content .vt-edit tr:nth-child(even) td.col-market { background: #F1F5F9; }
.admin-content .vt-edit td.col-pack { background: #F6FAF7; }
.admin-content .vt-edit tr:nth-child(even) td.col-pack { background: #EDF3EE; }
/* ค่าที่ระบบเดาจากข้อความบรรจุ ยังไม่มีคนตรวจ — ต้องต่างจากที่ทีมงานยืนยันแล้วให้เห็นชัด */
.admin-content .vt-edit .vi.is-guess { background: #FEF3C7; border-color: #FCD34D; }
.admin-content .vt-edit td.col-retail { background: #FCFCFD; }
.admin-content .vt-edit tr:nth-child(even) td.col-retail { background: #F4F5F7; }

.admin-content .vt-edit .v-del { border: none; background: transparent; color: var(--gray); cursor: pointer; padding: 6px; border-radius: 6px; }
.admin-content .vt-edit .v-del:hover { color: var(--red); background: #FEF2F2; }
.admin-content .vt-edit .mk-old,
.admin-content .vt-edit .v-market-info { white-space: normal; }

/* ปุ่มบันทึกติดขอบล่าง — สินค้าที่มี 30 ตัวเลือก ไม่ต้องเลื่อนสุดหน้าเพื่อกดบันทึก */
.edit-page .detail-cta { position: sticky; bottom: 0; z-index: 5; margin-top: 0; padding: 12px 0; background: rgba(248,249,251,.95); border-top: 1px solid var(--border); }

@media (max-width: 800px) {
  /* กฎรวมของหลังบ้านทำให้ table เป็น display:block = เป็น scroll container เอง → sticky ตาย
     หน้านี้ให้ div ครอบเป็นตัวเลื่อนแทน คอลัมน์ "ขนาด" จะได้ยังตรึงอยู่ตอนจอแคบ (ซึ่งจำเป็นที่สุด) */
  .admin-content .vt-edit { display: table; overflow: visible; white-space: nowrap; }
  .vt-scroll-edit { border-radius: 10px; }
}

/* ===== หน้ากรอกหน่วยใหญ่ (/admin/pack-units) — ทีมงานไล่กรอกทีละสินค้า ===== */
.pk-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.pk-progress { min-width: 260px; flex: 0 1 340px; }
.pk-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.pk-bar span { display: block; height: 100%; background: #22C55E; border-radius: 999px; transition: width .3s; }
.pk-count { font-size: 13px; color: var(--gray); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pk-count b { color: var(--navy); }
.pk-guess-note { color: #92400E; }

.pk-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.pk-title { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.pk-title h2 { font-size: 21px; margin: 2px 0 0; }
.pk-cat { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--gray); text-transform: uppercase; }
.pk-edit-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--gray); text-decoration: none; white-space: nowrap; }
.pk-edit-link:hover { color: var(--red); }
.pk-edit-link svg.lucide { width: 14px; height: 14px; }

/* ⚠ ตารางนี้ต้องไม่ยืดเต็มความกว้าง — ช่องกรอกต้องอยู่ติดข้อความบรรจุที่ทีมงานใช้อ่านประกอบ
   ไม่งั้นสายตาต้องวิ่งข้ามจอทุกแถว (ตารางราคาใช้ width:100% เพราะคนละงาน) */
.pk-card .vt-edit { width: auto; min-width: 0; }
/* อยู่ในการ์ดอยู่แล้ว ไม่ต้องมีกรอบการ์ดซ้อนอีกชั้น */
.pk-card .vt-scroll-edit { background: transparent; box-shadow: none; border-radius: 8px; margin-bottom: 0; }
/* คอลัมน์อ่านอย่างเดียว — ต้องดูออกทันทีว่าแก้ไม่ได้ */
.admin-content .vt-edit .pk-pack-text { color: var(--navy); white-space: normal; min-width: 200px; max-width: 380px; }
.admin-content .vt-edit .pk-unit { font-weight: 700; color: var(--gray); }
.admin-content .vt-edit .pk-in { font-size: 15px; padding: 8px 10px; }
.admin-content .vt-edit .pk-qty { width: 150px; }
.admin-content .vt-edit .pk-sku { width: 180px; }
.admin-content .vt-edit .pk-in.pk-bad { border-color: #F59E0B; background: #FFFBEB; }
.pk-warn { font-size: 11.5px; color: #92400E; margin-top: 4px; white-space: normal; max-width: 170px; line-height: 1.4; }

.pk-legend { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gray); margin-top: 12px; }
.pk-swatch { width: 14px; height: 14px; border-radius: 4px; background: #FEF3C7; border: 1px solid #FCD34D; flex-shrink: 0; }

.pk-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; position: sticky; bottom: 0; z-index: 5; padding: 12px 0; background: rgba(248,249,251,.95); border-top: 1px solid var(--border); }
.pk-actions-main { display: flex; gap: 10px; flex-wrap: wrap; }
.pk-actions .btn svg.lucide { width: 16px; height: 16px; }

@media (max-width: 800px) {
  .pk-progress { flex: 1 1 100%; }
  .pk-actions-main { flex: 1 1 100%; }
  .pk-actions-main .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== ของแถมจากโปรโมชั่น (ตะกร้า / checkout / หน้าติดตาม / หลังบ้าน) =====
   ⚠ ทุกที่ต้องแสดงเป็น "ฟรี" ไม่ใช่ 0.00 — ของแถมเป็นแถวราคา 0 ที่ไม่แตะยอดบิล */
.gift-line { display: flex; align-items: center; gap: 12px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.gift-line > svg.lucide { width: 22px; height: 22px; color: #15803D; flex-shrink: 0; }
.gift-line-body { flex: 1; min-width: 0; }
.gift-line-body b { font-family: var(--font-heading); }
.gift-line-note { font-size: 12.5px; color: var(--gray); margin-top: 2px; }
.gift-qty { font-size: 13px; color: #15803D; font-weight: 700; margin-left: 4px; }
.gift-free { color: #15803D; font-weight: 700; font-family: var(--font-heading); white-space: nowrap; }

.gift-hint { display: flex; align-items: center; gap: 9px; background: #FFFBEB; border: 1px dashed #FCD34D; border-radius: 12px; padding: 10px 14px; margin-top: 10px; font-size: 14px; color: #92400E; }
.gift-hint svg.lucide { width: 18px; height: 18px; flex-shrink: 0; }
.gift-hint b { color: #B45309; }

.co-sum-gift .co-sum-thumb { background: #F0FDF4; display: flex; align-items: center; justify-content: center; color: #15803D; }
.co-sum-gift .co-sum-thumb svg.lucide { width: 20px; height: 20px; }

.track-item-gift { background: #F0FDF4; border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.track-item-gift .track-item-name svg.lucide { width: 16px; height: 16px; color: #15803D; vertical-align: -2px; }

/* แถบชวนลงทะเบียน/ยืนยันการนับ บนหน้าติดตามออเดอร์ */
.track-loyalty { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.tl-card { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.55; }
.tl-card b { font-family: var(--font-heading); display: block; margin-bottom: 2px; }
.tl-ico { flex-shrink: 0; display: flex; }
.tl-ico svg.lucide { width: 22px; height: 22px; }
.tl-invite { background: #FFFBEB; border: 1px solid #FCD34D; color: #92400E; }
.tl-invite .tl-ico { color: #B45309; }
.tl-done { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; }
.tl-done .tl-ico { color: #15803D; }
.tl-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 18px; font-size: 14px; }
.tl-btn svg.lucide { width: 16px; height: 16px; }

/* ขาดอีกเท่าไร / เหลือกี่วัน ใต้แถบยอดสะสม (/loyalty/{token}) */
.ly-bar-left { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 8px; font-size: 13.5px; }
.ly-need { color: var(--navy); }
.ly-need b { font-family: var(--font-heading); font-size: 15px; }
.ly-need.is-hit { color: #15803D; font-weight: 700; }
.ly-days { display: inline-flex; align-items: center; gap: 5px; color: var(--gray); }
.ly-days svg.lucide { width: 14px; height: 14px; }
.ly-days.is-soon { color: var(--red); font-weight: 700; }

/* ป้ายของแถมในตารางออเดอร์หลังบ้าน */
.gift-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-family: var(--font-heading); font-weight: 700; font-size: 11.5px; color: #92400E; background: #FEF3C7; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.gift-badge svg.lucide { width: 12px; height: 12px; }

.admin-content .od-gift-row td { background: #FEFCE8; }
.od-gift-x { border: 1px solid #FCD34D; background: #fff; color: #92400E; border-radius: 8px; padding: 3px 6px; cursor: pointer; display: inline-flex; }
.od-gift-x:hover { background: #FEF2F2; border-color: #FCA5A5; color: var(--red); }
.od-gift-x svg.lucide { width: 14px; height: 14px; }
.od-gift-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px; }
.od-gift-add label { font-family: var(--font-heading); font-weight: 700; color: var(--navy); }
.od-gift-add select { flex: 1; min-width: 200px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; background: #fff; }
.od-gift-add input { width: 64px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; text-align: center; }
.od-gift-add button { padding: 7px 14px; font-size: 13.5px; }
.od-gift-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-heading); font-weight: 700; font-size: 12px; color: #92400E; background: #FEF3C7; border-radius: 999px; padding: 2px 9px; margin-bottom: 4px; }
.od-gift-tag svg.lucide { width: 13px; height: 13px; }

/* โปรแถมบนหน้าสินค้า (สมาชิกเห็นเท่านั้น) */
.detail-promo { display: flex; align-items: center; gap: 9px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 12px; padding: 10px 14px; margin: 12px 0; font-size: 14.5px; color: #166534; }
.detail-promo svg.lucide { width: 19px; height: 19px; color: #15803D; flex-shrink: 0; }
.detail-promo b { font-family: var(--font-heading); }

/* ความพร้อมแปลงหน่วยของโปร (รายงาน) */
.uc-box { border: 1px solid #BBF7D0; background: #F0FDF4; border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.uc-box.is-low { border-color: #FCD34D; background: #FFFBEB; }
.uc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.uc-pct { font-family: var(--font-heading); font-size: 19px; color: #15803D; font-variant-numeric: tabular-nums; }
.uc-box.is-low .uc-pct { color: #B45309; }
.uc-bar { height: 7px; background: #E5E7EB; border-radius: 99px; overflow: hidden; margin: 8px 0 6px; }
.uc-bar > span { display: block; height: 100%; background: #22C55E; border-radius: 99px; }
.uc-box.is-low .uc-bar > span { background: #F59E0B; }
.uc-note { font-size: 13px; color: var(--gray); }
.uc-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-family: var(--font-heading); font-weight: 700; font-size: 11.5px; color: #92400E; background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 999px; padding: 2px 9px; text-decoration: none; }
.uc-chip.is-low { color: #B91C1C; background: #FEF2F2; border-color: #FCA5A5; }
.uc-chip svg.lucide { width: 12px; height: 12px; }

/* ===== เลือกสินค้าเข้าโปร (/admin/loyalty/{id}/targets) ===== */
.ct-chosen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ct-chip-form { display: inline-block; }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--navy); border-radius: 999px; padding: 5px 8px 5px 14px; font-size: 13.5px; }
.ct-chip button { border: none; background: transparent; color: var(--gray); cursor: pointer; display: flex; padding: 2px; border-radius: 50%; }
.ct-chip button:hover { color: var(--red); background: #FEF2F2; }
.ct-chip svg.lucide { width: 14px; height: 14px; }

.ct-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.ct-product { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; }
.ct-product-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.ct-product-head b { font-family: var(--font-heading); font-size: 16px; }
.ct-hidden-tag { font-size: 11.5px; color: var(--gray); background: var(--off-white); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.ct-all { border: 1.5px solid var(--border); background: #fff; color: var(--gray); border-radius: 8px; padding: 5px 12px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ct-all:hover { border-color: var(--navy); color: var(--navy); }

.ct-variants { display: flex; flex-direction: column; gap: 4px; }
.ct-variant { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.ct-variant:hover { background: var(--off-white); }
.ct-variant.is-picked { background: #FFF1F2; }
.ct-variant.is-on { background: #F0FDF4; cursor: default; }
.ct-size { font-weight: 700; min-width: 90px; }
.ct-unit, .ct-pack { color: var(--gray); font-size: 12.5px; }
.ct-pack { background: var(--off-white); border-radius: 6px; padding: 1px 8px; }
.ct-on { font-size: 12px; font-weight: 700; color: #15803D; margin-left: auto; }
.ct-warn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #92400E; background: #FEF3C7; border-radius: 999px; padding: 2px 9px; }
.ct-warn svg.lucide { width: 13px; height: 13px; }
.ct-warn-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; background: #fff; border: 1px solid #FCD34D; border-radius: 999px; padding: 3px 10px; color: #92400E; text-decoration: none; }
.ct-warn-chip svg.lucide { width: 12px; height: 12px; }

/* เลือกวิธีนับในฟอร์มกิจกรรม/โปรแถม */
.lm-modes { display: flex; flex-direction: column; gap: 8px; }
.lm-mode { display: flex; gap: 9px; align-items: flex-start; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 400; }
.lm-mode:has(input:checked) { border-color: var(--navy); background: var(--off-white); }
.lm-mode b { font-family: var(--font-heading); font-size: 14.5px; display: block; }
.lm-mode em { font-style: normal; font-size: 12.5px; color: var(--gray); }

/* ==========================================================================
   /links — หน้ารวมทุกช่องทาง (ลิงก์ใน bio โซเชียล)
   ⚠ ทุกคลาส prefix .lk- เท่านั้น — catalog.css เป็นไฟล์เดียวทั้งเว็บ ชนคลาสเดิม = พังหน้าอื่น
   เขียนแบบ mobile-first (กลับทางกับส่วนอื่นของไฟล์นี้) เพราะคนกดจาก bio คือมือถือเกือบ 100%
   พื้นขาว + โลโก้สีแบรนด์จริง: สีให้โลโก้เป็นคนถือ ส่วนหน้าเว็บอยู่นิ่งๆ
   ========================================================================== */

/* ฟอนต์สโลแกน — เดิมประกาศไว้ใน <style> ของหน้าแรกเท่านั้น หน้าอื่นเรียกใช้ไม่ได้ */
@font-face { font-family: 'BanThuek'; src: url('/fonts/SP_BanThuek.ttf') format('truetype'); font-display: swap; }

/* ซ่อน chrome ของเว็บหลัก — หน้านี้ต้องมี "ทางออกเดียวต่อปุ่ม" */
.lk-body { background: #fff; padding-bottom: 0 !important; }
.lk-body #page-loader,
.lk-body .announce,
.lk-body .site-header,
.lk-body .site-footer,
.lk-body .bottom-nav { display: none !important; }

.lk-page { max-width: 480px; margin: 0 auto; padding: 0 16px; color: var(--navy); }
.lk-tape { height: 5px; background: var(--red); border-radius: 0 0 3px 3px; margin: 0 -16px 24px; }

/* ---- หัวหน้า ---- */
.lk-head { text-align: center; padding-bottom: 24px; }
.lk-logo { width: 178px; height: auto; margin: 0 auto 4px; display: block; }
.lk-slogan { font-family: 'BanThuek', var(--font-heading), sans-serif; font-size: 21px; color: var(--red); line-height: 1.5; }
.lk-lot { font-family: var(--font-heading); font-size: 11.5px; letter-spacing: 1.3px; color: #9198A6; margin-top: 8px; }
.lk-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.lk-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lk-status.is-open { background: #E8F7EE; color: #12864A; }
.lk-status.is-shut { background: #F1F2F5; color: #6B7280; }

/* หัวหมวดแบบป้ายสเตนซิล — ได้ความรู้สึกจากการจัดตัวอักษร ไม่ต้องเพิ่มฟอนต์ */
.lk-sec { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 11.5px; letter-spacing: 3px; color: #7B8395; border: 1px solid #DCE0E7; border-radius: 5px; padding: 5px 12px 4px; margin: 0 0 13px 2px; }

/* ---- การ์ดช่องทาง ---- */
.lk-card { display: flex; align-items: center; gap: 13px; background: #fff; color: var(--navy); border: 1px solid #E7E9EE; border-radius: 18px; padding: 13px; text-decoration: none; box-shadow: 0 2px 10px rgba(30,45,59,.05); margin-bottom: 11px; }
.lk-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; background: var(--navy); color: #fff; display: grid; place-items: center; overflow: hidden; }
.lk-ic svg { width: 24px; height: 24px; }
.lk-ic svg.lucide { width: 21px; height: 21px; }
.lk-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lk-t { font-family: var(--font-heading); font-weight: 600; font-size: 16.5px; line-height: 1.35; }
.lk-s { font-size: 12.5px; line-height: 1.45; color: var(--gray); }
.lk-go { flex: 0 0 auto; color: #C2C8D2; display: grid; }
.lk-go svg.lucide { width: 19px; height: 19px; }

/* สีกล่องโลโก้ = สีแบรนด์จริง (โลโก้เป็นคนถือสีทั้งหน้า) */
.lk-ic.is-line { background: #06C755; }
.lk-ic.is-tiktok { background: #000; }
.lk-ic.is-youtube { background: #E60012; }
.lk-ic.is-facebook { background: #1877F2; }
.lk-ic.is-instagram { background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 55%, #962FBF 78%, #4F5BD5 100%); }
.lk-ic.is-shopee { background: #EE4D2D; }
.lk-ic.is-lazada { background: #0F146D; }

/* ปุ่มหลัก — ปุ่มเดียวที่เป็นพื้นทึบ
   ⚠ พื้นเป็น navy ไม่ใช่เขียว LINE: ขาวบนเขียว #06C755 ได้คอนทราสต์ ~2.4:1 ตกเกณฑ์ทุกขนาด
   กล่องโลโก้ข้างในเป็นเขียวแท้ ทำหน้าที่บอกว่าเป็น LINE อยู่แล้ว */
.lk-primary { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(30,45,59,.18); }
.lk-primary .lk-t { font-weight: 700; font-size: 18px; }
.lk-primary .lk-s { color: #D6DBE4; }
.lk-primary .lk-go { color: rgba(255,255,255,.65); }

/* การ์ดคู่ */
.lk-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 11px; }
.lk-duo .lk-card { flex-direction: column; align-items: flex-start; gap: 9px; margin-bottom: 0; min-height: 110px; }
.lk-duo .lk-ic { width: 38px; height: 38px; border-radius: 11px; }
.lk-duo .lk-ic svg.lucide { width: 18px; height: 18px; }
.lk-duo .lk-t { font-size: 15px; }
.lk-duo .lk-s { font-size: 12px; }

/* เส้นประรอยฉีกตั๋ว คั่นหมวด */
.lk-tear { position: relative; border-top: 2px dashed #DEE2E8; margin: 26px 0 24px; }
.lk-tear::before, .lk-tear::after { content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #DEE2E8; }
.lk-tear::before { left: -24px; }
.lk-tear::after { right: -24px; }

/* ---- การ์ดเปิดบัญชีราคาส่ง ---- */
.lk-acct { background: #F7F8FA; border: 1px solid #E7E9EE; border-radius: 18px; padding: 18px; }
.lk-acct-h { font-family: var(--font-heading); font-weight: 800; font-size: 19px; }
.lk-acct-p { font-size: 13.5px; color: var(--gray); margin-top: 4px; }
.lk-steps { list-style: none; margin: 14px 0 16px; }
.lk-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; padding: 6px 0; }
.lk-steps li span { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-heading); font-size: 12px; display: grid; place-items: center; }
/* ⚠ ปุ่มนี้ต้อง "เบา" กว่าปุ่ม LINE เสมอ — ถ้าทำเป็นพื้นแดงทึบมันจะตะโกนดังกว่าปุ่มหลัก
   แล้วลำดับที่ตั้งใจไว้ (ทักไลน์ก่อน ค่อยสมัคร) จะกลับหัวทันที */
.lk-acct-btn { display: block; text-align: center; background: #fff; color: var(--navy); border: 2px solid var(--navy); font-family: var(--font-heading); font-weight: 700; font-size: 16px; padding: 11px; border-radius: 999px; text-decoration: none; }
.lk-acct-note { text-align: center; font-size: 12.5px; color: var(--gray); margin-top: 11px; }

/* ---- TikTok 3 ช่อง (บอกด้วยว่าของจริงมีเท่านี้ กันบัญชีปลอมแอบอ้าง) ---- */
.lk-tt { background: #fff; border: 1px solid #E7E9EE; border-radius: 18px; padding: 3px 15px 7px; box-shadow: 0 2px 10px rgba(30,45,59,.05); }
.lk-tt-h { font-family: var(--font-heading); font-weight: 700; font-size: 14px; padding: 13px 0 10px; border-bottom: 1px solid #EDEFF3; }
.lk-tt-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; text-decoration: none; color: inherit; border-bottom: 1px dashed #EDEFF3; }
.lk-tt-row:last-child { border-bottom: 0; }
.lk-ic-sm { width: 34px; height: 34px; border-radius: 10px; }
.lk-ic-sm svg { width: 18px; height: 18px; }
.lk-tt-row .lk-t { font-size: 15px; }
.lk-tt-row .lk-s { font-size: 12.5px; }
.lk-here { flex: 0 0 auto; font-size: 11px; background: #F1F2F5; color: #6B7280; border-radius: 999px; padding: 3px 9px; }

/* ---- โซเชียลอื่น — การ์ดสี่เหลี่ยม โลโก้เด่น ---- */
.lk-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 13px; }
.lk-social a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--navy); font-family: var(--font-heading); font-size: 12.5px; font-weight: 500; background: #fff; border: 1px solid #E7E9EE; border-radius: 16px; padding: 14px 6px 12px; }
.lk-social .lk-ic { width: 40px; height: 40px; border-radius: 12px; }
.lk-social .lk-ic svg { width: 21px; height: 21px; }

/* ---- ร้านบนแอป — pill ล่างสุด จงใจให้จม ---- */
.lk-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lk-apps a { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1px solid #E7E9EE; color: var(--navy); border-radius: 999px; padding: 10px 8px; text-decoration: none; font-size: 12.5px; }
.lk-apps .lk-ic { width: 26px; height: 26px; border-radius: 8px; }
.lk-apps .lk-ic svg { width: 15px; height: 15px; }

.lk-foot { text-align: center; color: #8A93A8; font-size: 12px; line-height: 1.85; padding: 28px 0 36px; }
.lk-foot-sel { user-select: text; -webkit-user-select: text; }   /* in-app browser บางตัว tel: ไม่ยิงโทร → ต้องก๊อปเบอร์ได้ */

/* สถานะกด + โฟกัสคีย์บอร์ด */
.lk-card, .lk-tt-row, .lk-acct-btn, .lk-apps a, .lk-social a { transition: transform .12s ease; }
.lk-card:active, .lk-tt-row:active, .lk-acct-btn:active, .lk-apps a:active, .lk-social a:active { transform: scale(.985); }
.lk-page a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .lk-card, .lk-tt-row, .lk-acct-btn, .lk-apps a, .lk-social a { transition: none; }
  .lk-card:active, .lk-tt-row:active, .lk-acct-btn:active, .lk-apps a:active, .lk-social a:active { transform: none; }
}

@media (min-width: 560px) {
  .lk-page { padding-top: 10px; }
  .lk-tape { margin-left: 0; margin-right: 0; border-radius: 3px; }
}

/* ═══ ตัวเลือกสินค้าแบบชิป (หน้าสินค้า) — เลือกก่อน ราคาค่อยขึ้น · 17 ก.ย. ═══
   ⚠ ทุกกฎ scope ที่ .pk* เท่านั้น — ห้ามแตะ .variant-table ซึ่งหลังบ้านใช้ร่วมอีก 6 หน้า
   ⚠ ความรกมาจาก "กรอบซ้อนกัน" ไม่ใช่เนื้อหา (Fable ตรวจม็อกอัพ) — มีเส้นคั่นใต้บล็อกราคาที่เดียว
   ⚠ **ทุกกฎต้องขึ้นต้นด้วย `.pk ` เสมอ** — หน้า /admin/pack-units ใช้คำนำหน้า `.pk-` เหมือนกัน
     มาก่อน (บล็อกราว ๆ บรรทัด 1460) และมี `.pk-qty` / `.pk-unit` ชื่อตรงกันเป๊ะ
     ไม่ scope = `display:flex` ของช่องจำนวนไปลงที่ <input> ในหน้าหลังบ้าน แถวกรอกหน่วยเบี้ยวทันที */
.pk { margin: 4px 0 18px; }

.pk .pk-price { padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
/* ราคาบนหน้าเกาะใต้หัวเว็บ — เจ้าของแจ้ง 19 ก.ย. "เลือกตัวเลือกแล้วจะไม่เห็นราคา"
   สินค้า 42 ตัวเลือก ชิปตัวสุดท้ายอยู่ y=1097 ส่วนราคาอยู่ y=316 → กดแล้วราคาพ้นจอ
   ⚠ ต้องเป็น `>` (ลูกตรง) เท่านั้น — `.pk-price--sheet` ในแผ่นก็มีคลาส .pk-price เหมือนกัน
     ถ้าเขียน `.pk .pk-price` มันจะไปหนึบในแผ่นด้วย ซึ่งโซนบนของแผ่นจัดการอยู่แล้ว
   ⚠ ระยะเกาะอ่านจากความสูงหัวเว็บจริงด้วย JS (ตัวแปร --pk-stick) ห้ามฝังเลขตายไว้ที่นี่
   ⚠ margin-bottom ต้องเป็น 0 แล้วย้ายระยะห่างไปที่ตัวถัดไป — ไม่งั้นมีช่องโปร่งใต้ราคา
     ให้ชิปลอดขึ้นไปเห็นตอนเลื่อน */
.pk > .pk-price { position: sticky; top: var(--pk-stick, 74px); z-index: 5;
  background: var(--off-white); margin-bottom: 0; }
/* ⚠ ระยะห่างใต้ราคาผูกกับ "ตัวถัดไป" ด้วย + selector — แทรก element ใหม่ระหว่างกลางเมื่อไหร่
   ต้องเพิ่มคู่ของมันที่นี่ด้วย ไม่งั้นราคาไปติดชิ้นถัดไปเงียบๆ (บรรทัดผ่อน 0% คือเคสแรกที่เจอ) */
.pk > .pk-price + .pk-sheet, .pk > .pk-price + .pk-open { margin-top: 18px; }
.pk > .pk-inst + .pk-sheet, .pk > .pk-inst + .pk-open { margin-top: 18px; }
.pk .pk-was-line { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pk .pk-was { color: var(--gray); text-decoration: line-through; font-size: 14px; font-variant-numeric: tabular-nums; }
.pk .pk-big { font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 1.15;
  color: var(--red); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pk .pk-big.is-range { font-size: 23px; color: var(--navy); }
.pk .pk-big.is-none { font-size: 19px; color: var(--gray); }
.pk .pk-unit { font-size: 14px; font-weight: 500; color: var(--gray); }
.pk .pk-cap { margin-top: 5px; font-size: 13px; color: var(--gray); line-height: 1.55; }
.pk .pk-cap b { color: var(--navy); font-family: var(--font-heading); font-weight: 600; }
.pk .pk-tag { background: #E7F5EE; color: #0E7A4A; font-size: 11.5px; font-weight: 700;
  font-family: var(--font-heading); padding: 2px 8px; border-radius: 6px; margin-left: 4px; }
.pk .pk-note { display: block; margin-top: 3px; font-size: 12.5px; color: var(--gray); }

/* กลุ่มตัวเลือก: ไม่มีกรอบ ไม่มีพื้น ใช้ระยะห่างกับหัวข้อตัวหนาแยกกลุ่มแทน */
.pk .pk-grp { margin-bottom: 18px; }
.pk .pk-grp-h { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--navy);
  margin-bottom: 9px; display: flex; align-items: baseline; gap: 8px; }
.pk .pk-n { font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--gray); }
.pk .pk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* ⚠ น้ำหนักตัวอักษรต้องเท่ากันทั้งเลือกและไม่เลือก — Sarabun โหลดแค่ 400/500/700
   ขอ 600 เบราว์เซอร์จะหยิบ 700 ข้อความกว้างขึ้น ชิปยืด แล้วชิปถัดไปกระโดดลงบรรทัดใหม่
   ทุกครั้งที่กด (ทั้งแถวขยับ) — บอกสถานะด้วยสี+ขอบพอ */
.pk .pk-chip { border: 1.5px solid var(--border); background: #FAFBFD; border-radius: 10px;
  padding: 9px 14px; font-family: var(--font-body); font-size: 14.5px; font-weight: 500; color: #4A5163;
  line-height: 1.3; cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
.pk .pk-chip:hover:not(.is-na) { border-color: var(--navy); }
.pk .pk-chip[aria-pressed="true"] { border-color: var(--red); background: #FFF5F5; color: #C81E1E; }
/* จับคู่กันไม่ได้ = เทาจาง (แตะแล้วบอกเหตุผล) — ขีดฆ่าสงวนไว้ให้ "สินค้าหมด" เท่านั้น */
.pk .pk-chip.is-na { color: #AEB5C6; background: #FBFBFD; border-color: #EFF1F6; cursor: not-allowed; }
.pk .pk-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.pk .pk-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pk .pk-qty { display: flex; align-items: center; gap: 9px; }
.pk .pk-qty-lab { font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; color: var(--navy); }
.pk .pk-add { min-height: 46px; padding: 0 22px; font-size: 15.5px; }
.pk .pk-add:disabled { background: #EFF1F6; color: var(--gray); border-color: #EFF1F6;
  box-shadow: none; cursor: not-allowed; }
.pk .pk-total { margin-top: 10px; font-size: 13.5px; color: var(--gray); font-variant-numeric: tabular-nums; }
.pk .pk-total b { font-family: var(--font-heading); font-size: 16px; color: var(--navy); }

@media (max-width: 600px) {
  .pk .pk-big { font-size: 27px; }
  .pk .pk-buy { gap: 10px; }
  .pk .pk-add { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pk .pk-chip { transition: none; } }

/* ═══ มือถือ: แถบสั่งซื้อติดล่างจอ + แผ่นเลือกตัวเลือกเลื่อนขึ้น (แบบ Shopee) · 17 ก.ย. ═══
   ⚠ ทุกกฎในบล็อกนี้ต้องมี `.is-sheet` หรือ `.pdp-bar` นำหน้า — คลาสพวกนี้ JS เป็นคนเติม
     ให้หลังจากตรวจแล้วว่าทำงานได้จริง ถ้าเขียนกฎลอยๆ ให้ .pk-sheet ซ่อนตั้งแต่แรก
     คนที่ JS พังจะเปิดแผ่นไม่ได้ = หน้าสินค้าสั่งของไม่ได้เลยทั้งหน้า
   ⚠ .pk-sheet เป็นลูกของ #pk — position:fixed ไม่สนใจว่าพ่ออยู่ไหน แต่ JS ยังหา
     .pk-chip / .pk-buy ผ่าน #pk ได้เหมือนเดิม (ยังเป็นลูกกันใน DOM) */
.pk-sheet-head, .pk-backdrop, .pk-price--sheet, .pk-open { display: none; }
.pdp-bar, .hdr-cart-m, .hdr-share-m { display: none; }
/* แถบค้นหาบนมือถือ — **กางค้างไว้เสมอ** ไม่มีปุ่มเปิด/ปิด (เจ้าของสั่ง 24 ก.ย.)
   ⚠ เดสก์ท็อปซ่อน เพราะมีช่องค้นหาในหัวเว็บ (.hdr-searchbox) อยู่แล้ว
   ⚠ เป็นบล็อกปกติ ไม่ absolute แล้ว — อยู่ใน .header-stack ที่หนึบ จึงติดใต้หัวเว็บตลอด
     และสคริปต์ที่วัดความสูง .header-stack จะรวมแถบนี้ให้เอง (ของที่หนึบต่อไม่โดนบัง)
   ⚠ ระยะบน-ล่างกระชับตามที่เจ้าของสั่ง — แถบนี้กินจอทุกหน้าบนมือถือ
   ⚠⚠ ค่าทุกตัวต้องตรงกับ .catalog-bar เป๊ะ (padding แถบ · padding/รัศมีช่อง · ปุ่ม) */
.hdr-search-panel { display: none; }
@media (max-width: 900px) {
  .hdr-search-panel { display: block; background: #fff; border-top: 1px solid var(--border);
    padding: 6px 0; }
}
/* แถวในแผง: ช่องค้นหายืดเต็ม · ปุ่มตัวกรองเป็นไอคอนล้วนเพื่อไม่เบียดช่องพิมพ์บนจอ 390px */
/* ⚠ align-items: stretch ไม่ใช่ center — ปุ่มตัวกรองต้องสูงเท่าช่องค้นหาเป๊ะ (24 ก.ย.) */
.hdr-search-panel .container { padding-left: 5px; padding-right: 5px; }
/* ⚠ padding บน-ล่างต้องเป็น 0 — แผงนี้กับ .catalog-bar ต้องสูงเท่ากันเป๊ะ (เจ้าของเช็ค 24 ก.ย.)
   ตัว .hdr-search-panel มี padding 6px อยู่แล้ว ถ้าแถวข้างในใส่อีก 10px แถบจะสูงกว่าอีกหน้า 20px
   ระยะซ้าย-ขวา 5px = ค่าเดียวกับ .catalog-bar .container */
.hdr-search-panel .hs-row { display: flex; align-items: stretch; gap: 8px; padding: 0 5px; }
.hdr-search-panel .hs-form { flex: 1; min-width: 0; }
/* ⚠ ห้ามตั้ง height ตายตัว — เหตุผลเดียวกับ .cb-filter ในแถบค้นหาของหน้าแคตตาล็อก */
.hdr-search-panel .hs-filter { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--off-white); color: var(--navy); text-decoration: none; }
.hdr-search-panel .hs-filter svg.lucide { width: 20px; height: 20px; }
.hdr-search-panel .hs-form { display: flex; align-items: center; gap: 8px;
  background: var(--off-white); border: 1px solid var(--border); border-radius: 11px;
  padding: 3px 5px 3px 11px; }
.hdr-search-panel .hs-form > svg.lucide { width: 18px; height: 18px; color: var(--gray); flex-shrink: 0; }
/* ⚠ 16px ห้ามต่ำกว่านี้ — iOS ซูมทั้งหน้าเว็บเองตอนจิ้มช่องที่ตัวอักษรเล็กกว่า 16px */
.hdr-search-panel .hs-form input { flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 3px 0; font: inherit; font-size: 16px; line-height: 1.25; outline: none; }
.hdr-search-panel .hs-go { flex-shrink: 0; border: 0; border-radius: 8px; background: var(--red); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; line-height: 1.25;
  padding: 6px 14px; margin: 0; }
/* เดสก์ท็อป: ปุ่มค้นหาในหน้าสินค้า (เจ้าของสั่ง 20 ก.ย.) — ใช้แผงเดียวกับมือถือ
   ⚠ margin-left:auto คือตัวที่ดันปุ่มไปชิดเมนูขวา — .site-header .container เป็น space-between
     ถ้าไม่ดัน ปุ่มจะไปลอยกลางระหว่างโลโก้กับเมนู
   ⚠ ต้องอยู่ "หลัง" กฎ .hdr-search-m{display:none} ในไฟล์นี้ (specificity เท่ากัน ตัดสินด้วยลำดับ) */
/* ช่องค้นหาในหัวเว็บ (เดสก์ท็อป) — เจ้าของสั่ง 24 ก.ย. "ขอเป็นช่องค้นหาเลย ไม่ใช่แค่ปุ่มแว่นขยาย"
   ⚠ margin-right:auto คือตัวดันเมนูไปทางขวา ช่องค้นหาจึงติดอยู่ข้างโลโก้
   ⚠ ซ่อนบนจอแคบ — หัวเว็บมือถือไม่มีที่พอ ใช้ปุ่มแว่นขยาย + แผงกางลงมาแทน */
.hdr-searchbox { display: none; }
@media (min-width: 901px) {
  .hdr-searchbox { display: flex; align-items: center; gap: 8px; margin-left: 14px; margin-right: auto;
    flex: 1 1 420px; max-width: 560px; min-width: 200px; background: var(--off-white); border: 1px solid var(--border);
    border-radius: 12px; padding: 7px 8px 7px 12px; }
  .hdr-searchbox > svg.lucide { width: 18px; height: 18px; color: var(--gray); flex-shrink: 0; }
  /* ⚠ 16px ห้ามเล็กกว่านี้ — iOS ซูมทั้งหน้าเมื่อจิ้มช่องที่ฟอนต์เล็กกว่า 16px */
  .hdr-searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font-family: var(--font-body); font-size: 16px; color: var(--navy); }
  .hdr-searchbox button { flex-shrink: 0; border: 0; border-radius: 9px; background: var(--red); color: #fff;
    font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; padding: 7px 14px; cursor: pointer; }
  .hdr-searchbox button:hover { background: #B8000E; }
}

@media (min-width: 901px) {
  /* ⚠ 24 ก.ย. เจ้าของสั่ง "ต่อกับโลโก้เลย" → เปลี่ยนจาก margin-left:auto (ดันไปชิดเมนูขวา)
     เป็น margin-right:auto ซึ่งดันทุกอย่าง "หลังจากนี้" ไปทางขวาแทน ปุ่มจึงติดอยู่ข้างโลโก้
     (ปุ่มอยู่ถัดจาก .logo ใน DOM อยู่แล้ว — .site-header .container เป็น space-between
      ถ้าไม่ใส่ margin ฝั่งใดฝั่งหนึ่ง ปุ่มจะไปลอยกลางระหว่างโลโก้กับเมนู) */
  .hdr-search-d { display: inline-flex; align-items: center; justify-content: center;
    margin-left: 12px; margin-right: auto;
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    background: var(--off-white); color: var(--navy); text-decoration: none; }
  .hdr-search-d:hover { background: #fff; color: var(--red); }
  .hdr-search-d svg.lucide { width: 20px; height: 20px; }
}

@media (max-width: 900px) {
  /* แผ่น 3 โซน: หัว+ราคาติดบน · ชิปเลื่อนตรงกลาง · จำนวน+ปุ่มติดล่าง (แบบ Shopee)
     ⚠ ตัวที่เลื่อนคือ .pk-sheet-mid ไม่ใช่ .pk-sheet — แผ่นเองต้อง overflow:hidden
       ไม่งั้นทั้งแผ่นเลื่อนพร้อมกันแล้วราคากับปุ่มหลุดจอเหมือนเดิม
     ⚠ padding ย้ายไปอยู่ที่แต่ละโซนแล้ว แผ่นต้องเป็น 0 ไม่งั้นโซนกลางเลื่อนแล้วเนื้อหา
       โผล่ใต้ padding ของแผ่น */
  .pk.is-sheet .pk-sheet {
    position: fixed; left: 0; right: 0; bottom: -100%; z-index: 96;
    max-height: 82vh; overflow: hidden; background: #fff;
    display: flex; flex-direction: column;
    border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(30,45,59,.2);
    padding: 0;
    transition: bottom .28s cubic-bezier(.4,0,.2,1);
  }
  .pk.is-sheet .pk-sheet-top { flex: 0 0 auto; padding: 14px 16px 0; background: #fff; }
  .pk.is-sheet .pk-sheet-mid { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 0 16px 14px; }
  .pk.is-sheet .pk-sheet-foot { flex: 0 0 auto; background: #fff; border-top: 1px solid var(--border);
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .pk.is-sheet .pk-sheet.open { bottom: 0; }
  .pk.is-sheet .pk-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .pk.is-sheet .pk-sheet-title { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--navy); }
  .pk.is-sheet .pk-sheet-x { border: none; background: var(--off-white); border-radius: 50%; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); }
  .pk.is-sheet .pk-price--sheet { display: block; }
  /* แถวเปิดแผ่นตัวเลือก
     ⚠⚠ ต้องเด่นกว่าการ์ดข้างเคียง (เจ้าของแจ้ง 24 ก.ย. "บางทีไม่เห็น เดี๋ยวเลื่อนเลยไป") —
       เดิมเป็นกล่องขาวขอบเทาเหมือนบล็อกอื่นในหน้า เลยกลืนไปกับพื้น ทั้งที่เป็น **ขั้นตอนบังคับ**
       ก่อนสั่งซื้อ (ไม่เลือกขนาด = กดซื้อไม่ได้) · ตอนนี้ขอบแดง พื้นชมพูอ่อน ตัวหนังสือแดง
     ⚠ ยังไม่ใช่ปุ่มแดงทึบ — ปุ่มแดงทึบสงวนไว้ให้ "ซื้อเลย" ที่แถบล่างจอ
       มีแดงทึบ 2 ที่ในจอเดียว ลูกค้าจะไม่รู้ว่าอันไหนคือปุ่มจบงาน */
  .pk.is-sheet .pk-open { display: flex; align-items: center; gap: 8px; width: 100%;
    border: 1.5px solid var(--red); background: #FFF5F5; border-radius: 12px; padding: 14px;
    font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; color: var(--red); cursor: pointer; }
  .pk.is-sheet .pk-open .pk-open-n { margin-left: auto; font-family: var(--font-body); font-weight: 600;
    font-size: 13.5px; color: var(--red); }
  .pk.is-sheet .pk-open svg.lucide { width: 20px; height: 20px; color: var(--red); }
  /* ราคาในแผ่นเป็นตัวย่อ — ตัวใหญ่เต็มยศอยู่บนหน้าแล้ว ในแผ่นต้องเหลือที่ให้ชิป */
  .pk.is-sheet .pk-price--sheet .pk-big { font-size: 22px; }
  .pk.is-sheet .pk-price--sheet { padding-bottom: 10px; margin-bottom: 12px; }
  /* จำนวน + ปุ่มแดงอยู่บรรทัดเดียวในโซนล่าง — ของเดิมปุ่มกินเต็มบรรทัดของตัวเอง
     (.pk-buy เป็น flex-wrap อยู่แล้ว จอแคบมากปุ่มตกบรรทัดเองได้ ไม่พัง) */
  .pk.is-sheet .pk-sheet-foot .pk-buy { margin-top: 0; }
  .pk.is-sheet .pk-add { flex: 1 1 auto; justify-content: center; }

  /* ⚠ ต้อง :not([hidden]) — CSS ของเราชนะ [hidden] ของเบราว์เซอร์เสมอ (author > user-agent)
     ถ้าเขียน .pk-backdrop{display:block} เฉยๆ ฉากหลังจะดำทับทั้งจอตั้งแต่เปิดหน้า */
  .pk-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(15,18,28,.45); }
  /* ⚠ ล็อกที่ <html> ไม่ใช่ <body> — <html> คือตัวที่เลื่อนจริง (ดูหมายเหตุ overflow-x ด้านบน)
     ใส่ที่ body จะไม่ล็อกอะไรเลย หน้าหลังแผ่นยังเลื่อนตามนิ้วได้เหมือนเดิม */
  html.pk-locked { overflow: hidden; }

  /* แถบล่างจอ — แทนที่เมนูล่างจอเดิม (ซ้อนกันสองแถบ = กินจอ 120px) */
  .pdp-bar:not([hidden]) { display: flex; align-items: center; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: #fff; box-shadow: 0 -4px 20px rgba(30,45,59,.12);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  /* แชทไลน์ซ้ายสุด — ไอคอนบน ตัวอักษรล่าง (กว้างพอๆ ปุ่มไอคอนเดิม ไม่แย่งที่ปุ่มหลัก) */
  .pdp-bar .pdp-line { flex-shrink: 0; width: 54px; min-height: 44px; border-radius: 12px;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    color: #06A94D; background: #F1FBF5; text-decoration: none;
    font-family: var(--font-heading); font-weight: 600; font-size: 10.5px; line-height: 1.2; }
  .pdp-bar .pdp-line svg.lucide { width: 19px; height: 19px; }
  .pdp-bar .pdp-act { flex: 1; min-width: 0; justify-content: center; min-height: 44px; padding: 0 10px;
    font-size: 15px; white-space: nowrap; }
  body.has-pdp-bar .bottom-nav { display: none; }
  body.has-pdp-bar { padding-bottom: 64px; }
  /* ตะกร้ามุมขวาบน — **ทุกหน้าบนมือถือ** (เจ้าของสั่ง 25 ก.ย. "หน้าแรกและหน้าอื่นๆ
     ให้มีตะกร้าบนขวาใน mobile เหมือนหน้าสินค้า")
     เดิมผูกกับ `body.has-pdp-bar` เพราะหน้าสินค้าเป็นหน้าเดียวที่เมนูล่างจอ (ซึ่งมีปุ่มตะกร้า)
     ถูกซ่อน · ตอนนี้เจ้าของขอให้มีทุกหน้า → หน้าอื่นจะมีตะกร้า 2 ที่ (หัวเว็บ + เมนูล่าง)
     **ตั้งใจไว้แบบนี้ตามที่สั่ง** จะถอดอันไหนออกต้องถามเจ้าของก่อน
     ⚠⚠ กฎนี้ (0,1,0) เท่ากับ `.pdp-bar, .hdr-cart-m, .hdr-share-m { display:none }` ที่ประกาศไว้
       ก่อนบล็อก @media นี้ — **ชนะได้เพราะอยู่ทีหลังในไฟล์เท่านั้น** ย้ายขึ้นไปข้างบนเมื่อไหร่
       ตะกร้าหายทั้งเว็บโดยไม่มี error (กับดักข้อ 2 ของหน้าลูกค้าใน CLAUDE.md)
     ⚠ `.hdr-share-m` ยังผูกกับ has-pdp-bar ต่อไป — ปุ่มแชร์มีความหมายเฉพาะหน้าสินค้า */
  .hdr-cart-m { position: relative; display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--off-white); color: var(--navy); }
  .hdr-cart-m svg.lucide { width: 21px; height: 21px; }
  /* ปุ่มแชร์ขวาบน ซ้ายมือตะกร้า (เจ้าของสั่ง 18 ก.ย.) — หน้าตาเดียวกับปุ่มตะกร้าเป๊ะ
     ⚠ ซ่อนปุ่มแชร์ที่อยู่ในเนื้อหน้าเมื่อปุ่มบนหัวเว็บทำงานแล้ว ไม่งั้นมีปุ่มแชร์ 2 อัน
     ⚠ ผูกกับ body.has-pdp-bar เท่านั้น (= JS ทำงานแล้วบนหน้าสินค้า) — จอคอมยังใช้ปุ่มในหน้าเหมือนเดิม */
  body.has-pdp-bar .hdr-share-m { display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px;
    background: var(--off-white); color: var(--navy); }
  body.has-pdp-bar .hdr-share-m svg.lucide { width: 19px; height: 19px; }
  /* ปุ่มค้นหา ซ้ายมือปุ่มแชร์ (เจ้าของสั่ง 20 ก.ย.) — หน้าตาเดียวกับอีกสองปุ่มเป๊ะ
     ⚠ ผูกกับ body.has-pdp-bar เหมือนกัน — หน้าอื่นมีช่อง "สินค้า" ในเมนูล่างจออยู่แล้ว
       ถ้าโชว์ทุกหน้า หน้าแคตตาล็อกจะมีช่องค้นหา 2 ที่ซ้อนกัน */
  body.has-pdp-bar .hdr-search-m { display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px;
    background: var(--off-white); color: var(--navy); text-decoration: none; }
  body.has-pdp-bar .hdr-search-m svg.lucide { width: 19px; height: 19px; }
  /* 3 ปุ่มบนหัวเว็บแล้ว (ค้นหา/แชร์/ตะกร้า) — บีบช่องไฟลง ไม่งั้นโลโก้โดนเบียดบนจอแคบ */
  body.has-pdp-bar .site-header .container { gap: 8px; }
  body.has-pdp-bar .detail-top .detail-share { display: none; }
  /* ...แล้วกล่องหัวคอลัมน์ก็ไม่เหลืออะไรให้สูง 34px อีก (สินค้าชุด TikTok ส่วนใหญ่ไม่มีแบรนด์ด้วย)
     ⚠ min-height เดิมมีไว้กันเลย์เอาต์กระโดดตอนปุ่มแชร์โหลด — บนมือถือปุ่มย้ายขึ้นหัวเว็บแล้ว
       ปล่อยไว้ = ช่องว่าง 36px ใต้แถบรูปย่อที่ไม่มีอะไรอยู่ (เจ้าของแจ้ง 18 ก.ย. "ใต้รูปเว้นเยอะไป") */
  /* ⚠ เดิมเป็น 0 เพราะแถวนี้ว่างเปล่าบนมือถือ (ปุ่มแชร์ย้ายขึ้นหัวเว็บ + สินค้า TikTok ไม่มีแบรนด์)
     ตั้งแต่ 20 ก.ย. มีป้าย "ของแท้ 100%" อยู่เสมอ แถวนี้จึงมีเนื้อหาจริงและต้องมีช่องไฟ */
  body.has-pdp-bar .detail-top { min-height: 0; margin-bottom: 6px; }

  /* ชื่อสินค้าชุด TikTok ยาว 3-4 บรรทัดที่ 24px = ราคาถูกดันตกจอ */
  .detail-info h1 { font-size: 20px; line-height: 1.32; margin: 2px 0 8px; }

  /* ── สินค้าตัวเลือกเดียว: ช่องจำนวนอยู่บนหน้า ปุ่มยืนยันคือแถบล่างจอ ──
     ⚠ คลาส is-inline ถูก JS เติมเท่านั้น — JS พัง = ฟอร์มเต็มพร้อมปุ่มแดงเหมือนเดิม สั่งของได้
     ⚠ ซ่อนปุ่มในฟอร์มเพราะแถบล่างจอมีปุ่มแดง "ซื้อเลย" อยู่แล้ว (กติกา: ปุ่มแดงมีได้ปุ่มเดียว) */
  .pk.is-inline .pk-add { display: none; }
  .pk.is-inline .pk-buy { margin-top: 0; }
  .pk.is-inline .pk-price { margin-bottom: 14px; }

  /* ชื่อสินค้าชุด TikTok ยาวมาก — ในเส้นทางนำทางตัดให้เหลือบรรทัดเดียว (เจ้าของแจ้ง 18 ก.ย.
     ว่ากินพื้นที่ 4 บรรทัดก่อนถึงรูป) · ชื่อเต็มยังอยู่ใน h1 และ JSON-LD ครบ */
  .product-page .breadcrumb { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
  .product-page .breadcrumb > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .pk.is-sheet .pk-sheet { transition: none; } }

/* รายละเอียดสินค้า (ย้ายมาอยู่ใต้ตัวเลือก 17 ก.ย. ตามหน้า Shopee) */
.detail-desc-block { margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--border); }
.detail-desc-h { font-size: 16px; margin-bottom: 6px; }

/* ── หัวคอลัมน์ข้อมูลสินค้า: แบรนด์ซ้าย · ปุ่มแชร์ขวาบน (เจ้าของสั่ง 17 ก.ย.) ──
   เดิมปุ่มแชร์อยู่ใต้ชื่อสินค้า คั่นกลางระหว่างชื่อกับราคาจนแย่งสายตา */
.detail-top { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; min-height: 34px; }
.detail-top .detail-share { margin: 0 0 0 auto; }
.detail-top .share-btn { padding: 6px 13px; font-size: 13.5px; }

/* ปุ่มแดงบนหน้าสินค้ามีได้ปุ่มเดียว — ช่องทางโทร/ไลน์ถอยเป็นตัวรองเมื่อสั่งออนไลน์ได้
   ⚠ .detail-cta ใช้ร่วมกับหน้าแก้ไขสินค้าในหลังบ้าน — แต่งเพิ่มผ่านคลาสตัวแปรนี้เท่านั้น */
.detail-cta--soft { align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border); }
.detail-cta--soft .detail-cta-lead { font-size: 13.5px; color: var(--gray); margin-right: 2px; }
.detail-cta--soft .btn { font-size: 14px; padding: 9px 18px; }
.detail-cta--soft .btn.btn-outline-navy { border-width: 1.5px; }
.detail-cta .btn svg.lucide { width: 16px; height: 16px; }

/* ── ช่องทางโทร/ไลน์ อยู่บรรทัดเดียว (เจ้าของสั่ง 19 ก.ย. "จะได้ไม่กินพื้นที่ไป 2 บรรทัด") ──
   เดิมบนมือถือป้ายนำ "สั่งผ่านทีมงานก็ได้" ถูกดันเป็นบรรทัดของตัวเอง (flex: 1 1 100%) = กิน 2 บรรทัด
   ⚠ ย่อปุ่มด้วย flex ไม่ได้: `.detail-cta .btn` มี white-space:nowrap (บล็อก ≤900px บรรทัด ~471)
     ความกว้างต่ำสุดของปุ่มจึงเท่ากับความยาวข้อความเสมอ → ต้องสลับเป็นข้อความสั้นแทน
   ตัวเลขที่ใช้ตัดสินจุดสลับ (วัดจริง): ป้ายนำ 97 + ปุ่มโทร 205 + ปุ่มไลน์ 143 + ช่องไฟ 20 = 465
   ต้องการจอกว้างอย่างน้อย 493px (465 + padding ของ .container 28) → สลับที่ 520px เผื่อฟอนต์ไทย
   บนเครื่องจริงกว้างกว่าที่วัด (เหลือขอบ 27px) ไม่ใช่ 493 เป๊ะ ซึ่งพลาดนิดเดียวก็ตกบรรทัด
   ⚠ เกาะที่ `.detail-cta--channels` เท่านั้น — ทั้ง `.detail-cta` เปล่าๆ และ `.product-page`
     ถูกใช้ร่วมกับแถบปุ่มบันทึกของหน้าแก้ไขสินค้า/pack-units/campaign-targets ในหลังบ้าน */
.detail-cta--channels .cta-short { display: none; }

@media (max-width: 600px) {
  .detail-cta--channels.detail-cta--soft .detail-cta-lead { flex: 0 0 auto; margin-bottom: 0; }
}
@media (max-width: 520px) {
  .detail-cta--channels { gap: 8px; }
  .detail-cta--channels .btn { padding: 9px 12px; }
  .detail-cta--channels .cta-long { display: none; }
  .detail-cta--channels .cta-short { display: inline; }
}

/* ── มือถือ: กดปุ่มรัวๆ แล้วหน้าเว็บซูมเอง (เจ้าของเจอ 17 ก.ย. ที่ปุ่มเพิ่ม/ลดจำนวน) ──
   เบราว์เซอร์มือถือตีความ "แตะสองทีเร็วๆ" = สั่งซูม ต่อให้แตะบนปุ่มก็ตาม
   touch-action: manipulation ปิดเฉพาะท่าแตะสองทีบนตัวควบคุม — **นิ้วถ่างซูมยังทำได้ปกติ**
   (ห้ามแก้ด้วย user-scalable=no ที่ viewport เด็ดขาด = คนสายตาไม่ดีซูมอ่านไม่ได้ทั้งเว็บ)
   ⚠ ต้องครอบทุกตัวควบคุม ไม่ใช่เฉพาะปุ่มจำนวน — ชิปเลือกขนาดก็โดนอาการเดียวกัน */
button, .btn, [role="button"], summary, label.ship-mode { touch-action: manipulation; }

/* กดรัวๆ แล้วเครื่องหมาย − / + ถูกลากเป็นแถบเลือกข้อความ (ดูเหมือนปุ่มค้าง) */
.qty-stepper .qty-btn, .pk-chip { -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; }

/* ⚠ iOS ซูมหน้าจอเองทุกครั้งที่โฟกัสช่องกรอกที่ตัวอักษรเล็กกว่า 16px
   จอสัมผัสจึงต้องดัน .qty-input ขึ้น 16px — เดสก์ท็อปคงขนาดเดิม */
@media (pointer: coarse) {
  .qty-stepper .qty-input { font-size: 16px; width: 44px; }
  .qty-stepper.sm .qty-input { font-size: 16px; width: 38px; }   /* ตัวโตขึ้นแล้วต้องกว้างขึ้น ไม่งั้นเลข 3 หลักตกขอบ */
}

/* ============================================================
   หลังบ้าน /admin/products — ติ๊กเลือกหลายรายการ + กางตัวเลือกตอนเอาเมาส์ชี้
   (เจ้าของสั่ง 18 ก.ย. "ติ๊กเลือกเพื่อจัดการ ... แสดงซ่อนจะได้เลือกได้หลายๆ ตัวพร้อมกัน")
   ⚠ scope ที่ .ac-products / .pbulk-* / .vp เท่านั้น — .variant-table ใช้ร่วมกับหลังบ้านอีก 6 หน้า
   ============================================================ */

/* ── ขนาดตัวอักษรของตาราง (เจ้าของสั่ง 18 ก.ย. "ฟอนต์เล็กกว่านี้ได้ จะได้ดูเรียบร้อยหน่อย") ──
   พอเพิ่มคอลัมน์ติ๊กเลือก คอลัมน์ขวาแคบลงจนป้าย "รอตรวจ" กับปุ่ม "แสดงอยู่" ตกบรรทัดกลางคำ
   ⚠ ป้าย/ปุ่มพวกนี้ต้อง `white-space: nowrap` เสมอ — ย่อฟอนต์อย่างเดียวไม่พอ พอชื่อสินค้ายาว
     เบราว์เซอร์จะไปบีบคอลัมน์อื่นแทน แล้วก็ตกบรรทัดใหม่อยู่ดี
   ⚠ scope ที่ .ac-products เท่านั้น — .variant-table ใช้ร่วมกับหน้าลูกค้า + หลังบ้านอีก 6 หน้า */
.admin-content .ac-products { font-size: 13.5px; }
.admin-content .ac-products th { padding: 9px 10px; font-size: 13px; }
.admin-content .ac-products td { padding: 8px 10px; }
.admin-content .ac-products .sku-tag { font-size: 10.5px; }
.admin-content .ac-products .src-tag { font-size: 10.5px; padding: 1px 7px; }
.admin-content .ac-products .flag { font-size: 11px; padding: 2px 9px; white-space: nowrap; }
.ac-products .flag-review { background: #FEE2E2; color: #991B1B; }

/* ปุ่มเปิด/ซ่อนในแถว — คงข้อความไว้เพราะมันบอก "สถานะตอนนี้" ไม่ใช่ปุ่มสั่งงาน ไอคอนล้วนอ่านไม่ออกว่าอยู่สถานะไหน */
.ac-products .pub-btn {
  font-size: 12.5px; padding: 4px 11px; gap: 5px; white-space: nowrap; border-radius: 999px;
}
.ac-products .pub-btn svg.lucide { width: 14px; height: 14px; }

/* คอลัมน์จัดการเป็นไอคอนล้วน (เจ้าของสั่ง 18 ก.ย. "ใช้เป็นไอคอนดีกว่า จะได้ไม่รก")
   ⚠ ไอคอนล้วนต้องมี title + aria-label เสมอ ไม่งั้นคนใหม่ในทีมเดาไม่ออกว่าปุ่มไหนทำอะไร */
.ac-products .row-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: 9px; color: var(--navy); background: #fff;
  vertical-align: middle; transition: border-color .15s, color .15s, background .15s;
}
.ac-products .row-ico + .row-ico { margin-left: 5px; }
.ac-products .row-ico:hover { border-color: var(--navy); background: var(--off-white); }
.ac-products .row-ico:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ac-products .row-ico svg.lucide { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .ac-products .row-ico { transition: none; } }
.ac-products .pub-on { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.ac-products .pub-off { background: var(--off-white); color: var(--gray); border: 1px solid var(--border); }
.ac-products td[data-label="ข้อมูล"] svg.lucide { width: 17px; height: 17px; }

.ac-products .pb-cell { width: 34px; text-align: center; }
.ac-products .pb-cell input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--navy); cursor: pointer; vertical-align: middle; }
/* แถวที่ติ๊กไว้ต้องมองออกตอนเลื่อนยาวๆ — :has ไม่รองรับก็แค่ไม่มีไฮไลต์ ไม่พัง */
.ac-products tr:has(.pb-tick:checked) td { background: #FFF7ED; }

/* ── กางตัวเลือก+ราคาตอนเอาเมาส์ชี้ช่อง "ขนาด/ราคา" ── */
.ac-products .vp { position: relative; display: inline-block; cursor: default; }
.ac-products .vp-lab { border-bottom: 1px dotted var(--border); }
.ac-products .vp-pop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; display: none;
  min-width: 300px; max-width: 420px; max-height: 320px; overflow-y: auto;
  padding: 8px 10px; background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(30,45,59,.18); font-size: 13px; line-height: 1.5; white-space: normal;
}
.ac-products .vp:hover .vp-pop,
.ac-products .vp:focus-within .vp-pop,
.ac-products .vp:focus .vp-pop { display: block; }
.ac-products .vp-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--off-white); }
.ac-products .vp-row:last-child { border-bottom: none; }
.ac-products .vp-row > b { flex: 1 1 auto; min-width: 0; font-family: var(--font-heading); font-weight: 600; color: var(--navy); }
.ac-products .vp-price { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.ac-products .vp-retail { color: var(--gray); font-weight: 500; }   /* ยังไม่มีราคาส่ง = โชว์ปลีกไว้เทียบ */
.ac-products .vp-none { color: #B91C1C; font-weight: 500; }
/* แถวท้ายตาราง: ป๊อปอัปจะตกขอบล่าง → กางขึ้นแทน (คลาสเติมด้วย CSS ล้วนไม่ได้ ใช้แถวท้าย 4 แถว) */
.ac-products tbody tr:nth-last-child(-n+4) .vp-pop { top: auto; bottom: calc(100% + 6px); }

/* ── แถบจัดการรายการที่เลือก (ติดล่างจอ) ── */
/* ⚠ ต้องเป็น :not([hidden]) — [hidden] แพ้ author CSS เสมอ แถบจะโผล่ค้างตั้งแต่โหลดหน้า */
.pbulk-bar:not([hidden]) {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 80;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  max-width: calc(100% - 24px); padding: 10px 14px; border-radius: 14px;
  background: var(--navy); color: #fff; box-shadow: 0 16px 40px rgba(30,45,59,.32);
}
.pbulk-n { font-family: var(--font-heading); font-size: 14px; white-space: nowrap; }
.pbulk-n b { font-size: 16px; }
.pbulk-pick { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 999px; padding: 4px 12px; font-family: var(--font-body); font-size: 13px; cursor: pointer; white-space: nowrap; }
.pbulk-pick:hover { background: rgba(255,255,255,.14); }
.pbulk-go { padding: 6px 16px; font-size: 14px; border: none; }
.pbulk-show { background: #22C55E; color: #fff; }
.pbulk-hide { background: #fff; color: var(--navy); }
.pbulk-go svg.lucide { width: 16px; height: 16px; }
.pbulk-x { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; display: inline-flex; padding: 4px; }
.pbulk-x:hover { color: #fff; }

@media (max-width: 560px) {
  /* จอแคบใส่ทุกอย่างบรรทัดเดียวไม่พอ — ให้ปุ่ม "เลือกทั้งหมด" ลงบรรทัดของตัวเอง */
  .pbulk-bar:not([hidden]) { left: 12px; right: 12px; transform: none; max-width: none; bottom: 12px;
    flex-wrap: wrap; justify-content: center; }
  .pbulk-pick { order: 3; flex: 1 1 100%; text-align: center; }
  .pbulk-n { flex: 1 1 auto; }
  /* โหมดการ์ด: ไฮไลต์ทั้งใบ ไม่ใช่ทีละช่อง (ช่องมีพื้นหลังของตัวเองไม่เท่ากัน = ลายพร้อย) */
  .admin-content .ac-products tr:has(.pb-tick:checked) { background: #FFF7ED; }
  .admin-content .ac-products tr:has(.pb-tick:checked) td { background: transparent; }
  /* ป๊อปอัปตัวเลือกไม่มีประโยชน์บนจอสัมผัส (ไม่มี hover) — ช่องนี้บนมือถือเป็นการ์ดอยู่แล้ว */
  .ac-products .vp-pop { display: none !important; }
  .ac-products .vp-lab { border-bottom: none; }
}

/* ============================================================
   รายละเอียดสินค้าแบบจัดระเบียบ — หัวข้อ / รายการ / ตารางสเปค
   (เจ้าของสั่ง 18 ก.ย. "ช่วยจัดระเบียบ เว้นวรรค เว้นบรรทัดให้ด้วย")
   markup มาจาก App\Support\DescriptionFormatter::toHtml() — คลาสใหม่ทั้งชุด ไม่ชนของเดิม
   ============================================================ */

.pd-desc { font-size: 15px; line-height: 1.65; }
.pd-desc > * + * { margin-top: 10px; }
.pd-desc p { margin: 0; }
/* หัวข้อย่อย: แถบแดงบางๆ ด้านซ้าย — อ่านเจอจุดตัดตอนกวาดสายตา ไม่ต้องใช้เส้นคั่นเต็มบรรทัด */
.pd-desc .pd-h { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--navy);
  margin-top: 16px; padding-left: 10px; border-left: 3px solid var(--red); line-height: 1.3; }
.pd-desc .pd-list { margin: 6px 0 0; padding-left: 20px; }
.pd-desc .pd-list li { margin: 3px 0; }
.pd-desc .pd-list li::marker { color: var(--navy); }
/* ตารางสเปค (บรรจุสินค้า / ขนาด / น้ำหนัก) — grid 2 คอลัมน์ ค่าตรงกันทุกแถว */
.pd-desc .pd-spec { display: grid; grid-template-columns: max-content 1fr; margin: 12px 0 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.pd-desc .pd-spec dt, .pd-desc .pd-spec dd { margin: 0; padding: 8px 12px; }
.pd-desc .pd-spec dt:nth-of-type(n+2), .pd-desc .pd-spec dd:nth-of-type(n+2) { border-top: 1px solid var(--border); }
.pd-desc .pd-spec dt { background: var(--off-white); color: var(--navy); font-family: var(--font-heading);
  font-weight: 600; font-size: 13.5px; max-width: 38vw; }
.pd-desc .pd-spec dd { color: var(--navy); }
.pd-more { display: none; }
/* ⚠ ล็อกการเลื่อนตอนเปิดรูปเต็มจอต้องทำที่ <html> ไม่ใช่ <body> (body ไม่ใช่ตัวที่เลื่อนจริง) */
html.lb-locked { overflow: hidden; }

@media (max-width: 900px) {
  /* พับคำอธิบายยาว — is-clamp ถูก JS เติมหลังวัดความสูงจริงเท่านั้น (JS พัง = เห็นเต็ม) */
  .pd-desc.is-clamp { max-height: 300px; overflow: hidden; position: relative; }
  .pd-desc.is-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
    background: linear-gradient(rgba(248,249,251,0), var(--off-white)); pointer-events: none; }
  /* ⚠ :not([hidden]) — CSS ของเราชนะ [hidden] ของเบราว์เซอร์เสมอ (กับดักข้อ 3 ใน CLAUDE.md) */
  .pd-more:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 8px 0;
    background: none; border: 0; font-family: var(--font-heading); font-weight: 600; font-size: 14.5px;
    color: var(--navy); cursor: pointer; }
  .pd-more svg.lucide { width: 16px; height: 16px; transition: transform .2s; }
  .pd-more[aria-expanded="true"] svg.lucide { transform: rotate(180deg); }
  .pd-desc .pd-spec dt { max-width: 42vw; }
}
@media (prefers-reduced-motion: reduce) { .pd-more svg.lucide { transition: none; } }

/* ============================================================
   หัวหน้า "จัดการสินค้า" ในหลังบ้าน (เจ้าของสั่ง 19 ก.ย. "ด้านบน ดีไซน์ใหม่หน่อย")
   ของเดิม: ประโยคเทา 2 บรรทัด + ป้ายแหล่งที่มา + ฟอร์มตัวกรองที่ตกลงมา 2 แถว
   ปัญหาจริงไม่ใช่แค่หน้าตา — "แหล่งที่มา" มีสองที่ (ป้ายกดได้ + ช่องเลือกในฟอร์ม) ทำงานซ้ำกัน
   ใหม่: การ์ดเดียว = ตัวเลข + แถบความคืบหน้า → แถบปุ่มกรอง → แถวค้นหา
   ⚠ คลาส .ap-* ชุดใหม่ล้วน — ห้ามไปแก้ .search-row / .btn-search / .active-filters / .detail-source
     ทั้งสี่ตัวใช้ร่วมกับหลังบ้านอีก 8 หน้า (ออเดอร์ ผู้ใช้ แบรนด์ หมวดหมู่ คูปอง ฯลฯ)
   ============================================================ */

.admin-content .ap-head { background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 14px; }

/* ตัวเลขหลัก: อ่านออกใน 1 วินาทีว่าเปิดไปแล้วกี่ตัวจากทั้งหมด (งานที่เจ้าของทำอยู่ตอนนี้) */
.admin-content .ap-stat-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.admin-content .ap-stat-num { font-family: var(--font-heading); font-weight: 700; font-size: 30px;
  line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.admin-content .ap-stat-of { font-size: 14px; color: var(--gray); font-variant-numeric: tabular-nums; }
.admin-content .ap-stat-lab { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--navy); }
.admin-content .ap-stat-pct { margin-left: auto; font-size: 13px; font-weight: 600; color: #16A34A;
  font-variant-numeric: tabular-nums; }
.admin-content .ap-bar { height: 6px; border-radius: 999px; background: #EDEFF3; overflow: hidden; margin-top: 8px; }
.admin-content .ap-bar > span { display: block; height: 100%; border-radius: 999px; background: #22C55E; }
.admin-content .ap-note { margin: 8px 0 0; font-size: 12.5px; color: var(--gray); }

/* แถบปุ่มกรอง — เป็นลิงก์ (ไม่ใช่ฟอร์ม) เพราะแต่ละปุ่มคือ "มุมมอง" ที่ส่งต่อ/บุ๊กมาร์กได้
   ⚠ href ประกอบจาก $filterQuery เสมอ กดแล้วตัวกรองอื่นต้องไม่หาย */
.admin-content .ap-segs { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.admin-content .ap-seg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-content .ap-seg-lab { font-size: 12px; color: var(--gray); }
.admin-content .ap-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--navy);
  font-size: 12.5px; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.admin-content .ap-pill b { font-weight: 600; color: var(--gray); font-variant-numeric: tabular-nums; }
.admin-content .ap-pill:hover { background: var(--off-white); border-color: #C9CEDA; }
.admin-content .ap-pill.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.admin-content .ap-pill.is-on b { color: rgba(255,255,255,.7); }

/* แถวค้นหา — คั่นจากแถบปุ่มด้วยเส้นบางๆ ให้รู้ว่าเป็นคนละชั้นของการกรอง */
.admin-content .ap-find { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  border-top: 1px solid var(--border); padding-top: 12px; }
.admin-content .ap-search { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; background: #fff; }
.admin-content .ap-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,45,59,.08); }
.admin-content .ap-search svg.lucide { width: 17px; height: 17px; color: var(--gray); flex: none; }
.admin-content .ap-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 9px 0; font-family: var(--font-body); font-size: 14px; color: var(--navy); }
.admin-content .ap-sel { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; font-family: var(--font-body); font-size: 13.5px; color: var(--navy); }
.admin-content .ap-check { display: flex; align-items: center; gap: 6px; font-size: 13.5px;
  white-space: nowrap; color: var(--navy); }
.admin-content .ap-check b { font-weight: 600; color: var(--gray); font-variant-numeric: tabular-nums; }
.admin-content .ap-go { padding: 9px 18px; font-size: 14px; }
.admin-content .ap-go svg.lucide { width: 16px; height: 16px; }
.admin-content .ap-clear { display: inline-flex; align-items: center; gap: 4px; font-size: 13px;
  color: var(--gray); text-decoration: none; }
.admin-content .ap-clear:hover { color: var(--red); }
.admin-content .ap-clear svg.lucide { width: 14px; height: 14px; }

/* หมวดถูกกรองอยู่ — ไม่มีปุ่มไหนบนหน้าตั้งค่านี้ ถ้าไม่บอกจะดูไม่ออกว่าทำไมตารางสั้นผิดปกติ */
.admin-content .ap-cat { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy);
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 10px; padding: 8px 12px; }
.admin-content .ap-cat svg.lucide { width: 15px; height: 15px; color: #C2410C; }
.admin-content .ap-cat a { margin-left: auto; color: var(--red); font-weight: 600; text-decoration: none; }

@media (max-width: 560px) {
  .admin-content .ap-head { padding: 14px; gap: 12px; }
  .admin-content .ap-stat-num { font-size: 26px; }
  .admin-content .ap-stat-pct { margin-left: 0; }
  /* สองกลุ่มปุ่มเรียงกันไม่พอกว้าง — วางซ้อนกันแทน */
  .admin-content .ap-segs { flex-direction: column; gap: 10px; }
  .admin-content .ap-search { flex: 1 1 100%; }
  .admin-content .ap-sel { flex: 1 1 auto; }
  .admin-content .ap-go { flex: 1 1 auto; justify-content: center; }
}

/* ไม่พบสินค้า — กันหน้าที่เหลือแค่หัวตารางเปล่าๆ จนดูเหมือนระบบพัง
   ⚠ td ไม่มี data-label จึงไม่ขึ้นป้ายหัวช่องตอนกลายเป็นการ์ดบนมือถือ (กฎที่บรรทัด ~525) */
.admin-content .ac-products .ap-empty td { padding: 34px 16px; text-align: center; color: var(--gray); font-size: 14px; }
.admin-content .ac-products .ap-empty svg.lucide { width: 22px; height: 22px; display: block; margin: 0 auto 8px; color: #C4C9D4; }
.admin-content .ac-products .ap-empty a { margin-left: 8px; color: var(--red); font-weight: 600; text-decoration: none; }

/* ── นำเข้าราคาจาก Excel /admin/price-import (20 ก.ย.) ────────────────────────
   ⚠ ทุกกฎ scope ใต้ .admin-content และใช้คลาสชุด .pi-* ของตัวเอง
     ห้ามไปแก้ .variant-table / .admin-cards / .ap-* (ใช้ร่วมกับหลังบ้านอีกหลายหน้า) */
.admin-content .pi-head { background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; box-shadow: var(--shadow); margin-bottom: 20px; }
.admin-content .pi-intro h2 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.admin-content .pi-intro p { color: var(--gray); font-size: 14px; margin-bottom: 14px; }
.admin-content .pi-up { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin-content .pi-file { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px dashed #C4C9D4; border-radius: 10px; padding: 10px 14px; font-size: 14px;
  color: var(--navy); background: var(--off-white); flex: 1 1 260px; }
.admin-content .pi-file:hover { border-color: var(--navy); }
.admin-content .pi-file input { display: none; }
.admin-content .pi-file svg.lucide { width: 17px; height: 17px; color: var(--gray); }
.admin-content .pi-hint { color: var(--gray); font-size: 13px; margin-top: 10px; }
.admin-content .pi-h3 { font-size: 16px; font-weight: 600; margin: 24px 0 10px; }
.admin-content .pi-empty { color: var(--gray); font-size: 14px; margin-top: 20px; }
.admin-content .pi-link { color: var(--navy); font-weight: 600; text-decoration: none; }
.admin-content .pi-link:hover { color: var(--red); }
.admin-content .pi-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; background: #EDEFF3; color: var(--gray); }
.admin-content .pi-pill--on { background: #E7F6ED; color: #0F8A4A; }
.admin-content .pi-pill--back { background: #FFF7ED; color: #C2410C; }

.admin-content .pi-bread { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; }
.admin-content .pi-bread a { display: inline-flex; align-items: center; gap: 3px; color: var(--gray); text-decoration: none; }
.admin-content .pi-bread a:hover { color: var(--red); }
.admin-content .pi-bread svg.lucide { width: 15px; height: 15px; }

.admin-content .pi-err, .admin-content .pi-done { display: flex; align-items: flex-start; gap: 12px;
  border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; font-size: 14px; }
.admin-content .pi-err { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.admin-content .pi-done { background: #E7F6ED; border: 1px solid #A7E3C0; color: #0F5132; align-items: center; }
.admin-content .pi-done--back { background: #FFF7ED; border-color: #FED7AA; color: #7C2D12; }
.admin-content .pi-err svg.lucide, .admin-content .pi-done svg.lucide { width: 20px; height: 20px; flex: 0 0 auto; }
.admin-content .pi-err p, .admin-content .pi-done p { margin-top: 2px; }
.admin-content .pi-done form { margin-left: auto; }

.admin-content .pi-map { background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.admin-content .pi-map h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.admin-content .pi-map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.admin-content .pi-fld { display: flex; flex-direction: column; gap: 5px; }
.admin-content .pi-fld > span { font-size: 13px; font-weight: 600; }
.admin-content .pi-fld .ap-sel { width: 100%; }
.admin-content .pi-why { font-size: 12px; color: var(--gray); font-style: normal; line-height: 1.45; }
.admin-content .pi-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,.15); vertical-align: -1px; margin-right: 3px; }
.admin-content .pi-map-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--off-white); }
.admin-content .pi-map-foot span { font-size: 13px; color: var(--gray); }

.admin-content .pi-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.admin-content .pi-sum-main { font-size: 14px; margin-right: 4px; }
.admin-content .pi-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; background: #EDEFF3; color: var(--gray); }
.admin-content .pi-chip--bad { background: #FEF2F2; color: #B42318; }
.admin-content .pi-chip--warn { background: #FFF7ED; color: #C2410C; }
.admin-content .pi-chip--info { background: #EEF2FF; color: #3B4C8A; }

.admin-content .pi-tbl .pi-ck { width: 34px; }
.admin-content .pi-tbl .pi-sku { display: block; font-size: 13px; }
.admin-content .pi-tbl .pi-name { display: block; font-size: 12.5px; color: var(--gray); }
.admin-content .pi-tbl .pi-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-content .pi-tbl .pi-num svg.lucide { width: 13px; height: 13px; color: #C4C9D4; vertical-align: -1px; margin: 0 3px; }
.admin-content .pi-tbl .pi-old { color: var(--gray); }
.admin-content .pi-tbl .pi-row--bad { background: #FFFBFB; }

/* แถบยืนยันล่างจอ — sticky ได้เพราะตัวที่เลื่อนจริงคือ <html> (ห้ามใส่ overflow ที่ body ดู CLAUDE.md) */
.admin-content .pi-bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center;
  justify-content: flex-end; gap: 14px; background: #fff; border-top: 1px solid var(--border);
  padding: 12px 16px; margin: 0 -4px; box-shadow: 0 -8px 24px rgba(30,45,59,.08); font-size: 14px; }

/* ส่วนลดสแกนจ่าย QR — ป้ายบนปุ่มเลือกช่องทาง (20 ก.ย.) */
.pay-opt-save { display: inline-block; margin-left: 5px; font-size: 11.5px; font-weight: 700;
  color: #0F8A4A; background: #E7F6ED; border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
.qr-how { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px;
  font-size: 13px; color: var(--gray); line-height: 1.5; text-align: center; }
.qr-how svg.lucide { width: 15px; height: 15px; flex-shrink: 0; }

/* ── หน้าทีมงานออกบิลให้ลูกค้า /admin/orders/create (21 ก.ย.) ─────────────────
   ⚠ คลาสขึ้นต้น .oc- ทั้งหมด ห้ามใช้ชื่อกลางอย่าง .search-row/.admin-input เอง
     (หลังบ้านอีก 8 หน้าใช้ร่วมกันอยู่) */
.oc-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.oc-card > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; }
.oc-card > h2 svg.lucide { width: 18px; height: 18px; color: var(--red); }
.oc-errors { background: #FFF5F5; border: 1px solid #F3C4C4; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; color: #A31515; }
.oc-errors ul { margin: 6px 0 0; padding-left: 18px; }
.oc-find { display: flex; gap: 8px; align-items: center; }
.oc-find input { flex: 1; min-width: 0; }
.oc-results { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; max-height: 280px; overflow-y: auto; }
.oc-results:not([hidden]) { display: block; }
.oc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border); background: #fff; cursor: pointer; font: inherit; }
.oc-row:last-child { border-bottom: 0; }
.oc-row:hover { background: var(--off-white); }
.oc-row span { color: var(--gray); font-size: 13px; }
.oc-none { padding: 12px; color: var(--gray); font-size: 13px; }
.oc-pill { flex-shrink: 0; background: var(--off-white); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--navy); }
.oc-pill.is-ws { background: #EFFAF3; color: #0F8A4A; }
.oc-picked:not([hidden]) { display: flex; align-items: center; gap: 10px; margin-top: 10px;
  background: var(--off-white); border-radius: 10px; padding: 9px 12px; }
.oc-picked-name { font-weight: 600; }
.oc-newcust:not([hidden]) { display: block; margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
.oc-hint { display: flex; gap: 7px; background: #FFFBEB; border: 1px solid #F3E2B0; border-radius: 10px;
  padding: 9px 12px; font-size: 13px; color: #7A5B00; margin: 0 0 12px; }
.oc-hint svg.lucide { width: 16px; height: 16px; flex-shrink: 0; }
.oc-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; }
.oc-f { display: block; margin-bottom: 10px; }
.oc-f:not([hidden]) { display: block; }
.oc-f > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.oc-f > span b { color: var(--red); }
.oc-f > span em { color: var(--gray); font-weight: 400; font-style: normal; }
.oc-f .admin-input { width: 100%; }
.oc-ship { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.oc-radio { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 13px; cursor: pointer; font-size: 14px; }
.oc-radio:has(input:checked) { background: #FFF5F5; border-color: var(--red); }
/* เตือนทีมงาน: ลูกค้าราคาไม่รวมค่าส่ง + ให้ร้านจัดส่ง = ราคาทั้งบิลสลับเป็นราคารวมค่าส่ง
   ⚠ [hidden] แพ้ CSS ของเรา → ผูก display ไว้กับ :not([hidden]) เสมอ */
.oc-shipwarn:not([hidden]) { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  background: #FEF9C3; border: 1px solid #FDE68A; color: #854D0E; border-radius: 10px;
  padding: 9px 12px; font-size: 13px; line-height: 1.55; }
.oc-shipwarn svg.lucide { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.oc-lines-wrap { overflow-x: auto; }
.oc-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.oc-lines th, .oc-lines td { padding: 8px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.oc-lines th { font-size: 12.5px; color: var(--gray); text-align: left; white-space: nowrap; }
.oc-lines .num { text-align: right; }
.oc-lines .admin-input { width: 100%; min-width: 84px; }
.oc-lines .oc-note { min-width: 150px; }
.oc-sub { font-size: 12px; color: var(--gray); margin-top: 2px; }
.oc-na { color: var(--red); font-size: 12.5px; }
/* แถวที่ทีมงานพิมพ์ราคาเอง — ต้องเห็นชัดตอนไล่ตรวจก่อนกดออกบิล */
.oc-lines tr.is-changed { background: #FFFBEB; }
.oc-empty { color: var(--gray); font-size: 13px; padding: 14px 4px; margin: 0; }
.oc-empty[hidden] { display: none; }
.oc-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; background: #fff; border-top: 1px solid var(--border);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
.oc-sum { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.oc-sum .oc-total b { font-family: var(--font-heading); font-size: 18px; color: var(--red); }
.oc-x { border: 0; background: transparent; color: var(--gray); cursor: pointer; padding: 4px; }
.oc-x:hover { color: var(--red); }
.oc-x svg.lucide { width: 17px; height: 17px; }

/* กล่อง "ส่งให้ลูกค้าทางไลน์" ในหน้าบิลที่ทีมงานออก (21 ก.ย.) */
.od-send { background: #F1FBF5; border: 1px solid #CDEBDA; border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.od-send-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.od-send-head b { display: inline-flex; align-items: center; gap: 7px; color: #0F8A4A; }
.od-send-head b svg.lucide { width: 17px; height: 17px; }
.od-send-head span { font-size: 12.5px; color: var(--gray); }
.od-send textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px;
  font: inherit; font-size: 13.5px; background: #fff; resize: vertical; }
.od-send-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.od-copied:not([hidden]) { color: #0F8A4A; font-size: 13px; }
/* หัวหน้ารายการออเดอร์ — ปุ่มออกบิล + ตัวกรองบิลทีมงาน/ราคาถูกแก้ */
.oc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.oc-top-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.od-edited { margin-top: 3px; font-size: 11.5px; color: #B45309; line-height: 1.35; }
.od-edited svg.lucide { width: 12px; height: 12px; vertical-align: -1px; }
.od-edited span { color: var(--gray); }

/* กล่องลิงก์เชิญในหน้ารายละเอียดผู้ใช้ (21 ก.ย.) */
.ud-invite { background: #F8FAFC; border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; margin: 14px 0; }
.ud-invite-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ud-invite-head b { display: inline-flex; align-items: center; gap: 7px; }
.ud-invite-head b svg.lucide { width: 17px; height: 17px; color: var(--navy); }
.ud-invite-head span { font-size: 12.5px; color: var(--gray); }
.ud-invite-ok { color: #0F8A4A !important; font-weight: 600; }
.ud-invite-hint { font-size: 13px; color: var(--gray); margin: 0 0 8px; }
.ud-invite-sub { font-size: 12px; color: var(--gray); margin: 3px 0 10px; }
.ud-invite-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.od-send-invite { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #CDEBDA; }
.od-send-invite b { display: block; font-size: 13.5px; margin-bottom: 6px; color: var(--navy); }
.od-send-invite span { display: block; font-size: 12px; color: var(--gray); margin: 3px 0 8px; }

/* แถบ "ราคาจ่ายเงินสด" ใต้ราคาเต็ม (เจ้าของสั่ง 21 ก.ย. "เล็กไป อยากให้ดึงดูดกว่านี้
   โดยไม่เหมือนไปหลอกลูกค้า")

   หลักที่ใช้ตัดสินว่าอะไรซื่อสัตย์:
   1. **ราคาเต็มยังเป็นตัวใหญ่ที่สุด** — เพราะนั่นคือยอดที่ตะกร้าคิดจริงถ้าลูกค้าไม่ได้เลือก QR
      สลับให้ราคาเงินสดใหญ่กว่า = ลูกค้าจำเลขนั้นแล้วไปเจออีกเลขตอนจ่าย นั่นคือการหลอก
   2. **ห้ามขีดฆ่าราคาเต็ม** — มันไม่ใช่ "ราคาก่อนลด" แต่เป็นราคาของอีกช่องทางที่ยังใช้ได้จริง
   3. **เงื่อนไขต้องอ่านออกพอๆ กับตัวเลข** — บรรทัด "สแกนจ่ายผ่าน QR..." ห้ามเล็กกว่า 12px
      หรือจางจนเป็นตัวหนังสือหมกเม็ด
   4. บอก "ประหยัดกี่บาท" เป็นเลขจริงที่ลูกค้าคูณตามได้ ไม่ใช่แค่ % ลอยๆ
   ทำให้เด่นด้วย "พื้นที่ + สี + ขนาดตัวเลข" ไม่ใช่ด้วยการลดทอนความจริงของราคาเต็ม */
.pk-cash { margin-top: 10px; border: 1px solid #BFE6CE; border-left: 4px solid #12A05C;
  border-radius: 12px; background: linear-gradient(180deg, #F3FBF6 0%, #EAF7F0 100%);
  padding: 10px 14px; }
.pk-cash-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pk-cash-lab { font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; color: #0B6B3F; }
.pk-cash-num { font-family: var(--font-heading); font-weight: 900; font-size: 26px; line-height: 1;
  color: #0B8A4A; letter-spacing: -.5px; }
.pk-cash-save { background: #0B8A4A; color: #fff; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: 1; padding: 5px 10px; }
/* ⚠ เงื่อนไขต้องอ่านออกจริง — ห้ามลดขนาด/ลดคอนทราสต์ลงกว่านี้ (จะกลายเป็นตัวหนังสือหมกเม็ด) */
.pk-cash-how { margin-top: 5px; font-size: 12.5px; color: #3F6B54; }

/* ── ขั้นราคาตามจำนวน "ซื้อ 4 ลัง ลดเหลือลังละ X" (21 ก.ย. 2026) ────────────────
   กติกาความซื่อสัตย์ชุดเดียวกับแถบราคาเงินสด:
     · แสดงเป็น "ตาราง" ไม่ใช่ป้าย "ลด N%" — คนซื้อ 1 ชิ้นเห็นป้ายลดแล้วไม่ได้ลด = เหมือนโดนหลอก
     · ราคาเต็มยังเป็นตัวที่ใหญ่ที่สุดเสมอ ตารางเป็นข้อมูลประกอบ
     · บอกทั้งตอน "ได้ลดแล้ว" และตอน "ยังไม่ถึง" — ลดจำนวนลงราคากลับขึ้น ถ้าเงียบลูกค้างง */
.pk-tier-hint { margin-top: 5px; font-size: 13px; color: var(--gray); line-height: 1.5; }
.pk-tier-hint b { color: var(--navy); font-weight: 700; }
.pk-tier-hint.is-on { color: #B91C1C; font-weight: 600; }

.pk-tiers { margin: 10px 0 0; border: 1px solid #FBD5D5; border-radius: 12px;
  background: #FFF8F8; padding: 9px 12px; }
.pk-tiers-head { font-size: 12px; font-weight: 700; color: #B91C1C; letter-spacing: .02em;
  margin-bottom: 5px; }
.pk-tier-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13.5px; color: var(--navy); padding: 2px 0; font-variant-numeric: tabular-nums; }
.pk-tier-row b { font-weight: 700; white-space: nowrap; }
.pk-tier-row.is-on { color: #B91C1C; }
.pk-tier-row.is-on b { color: #B91C1C; }
.pk-tier-note { margin-top: 5px; font-size: 11.5px; color: var(--gray); line-height: 1.5; }
@media (max-width: 900px) {
  .pk-tiers { margin-top: 8px; padding: 8px 11px; }
  .pk-tier-row { font-size: 13px; }
}
@media (max-width: 560px) {
  .pk-cash { padding: 9px 12px; }
  .pk-cash-num { font-size: 23px; }
}
/* ในแผ่นเลือกตัวเลือกบนมือถือพื้นที่จำกัด — ย่อลงแต่ยังใหญ่กว่าเดิมมาก */
.pk-price--sheet .pk-cash { margin-top: 8px; padding: 8px 11px; }
.pk-price--sheet .pk-cash-num { font-size: 20px; }
.pk-price--sheet .pk-cash-how { font-size: 12px; }

/* ราคาจ่ายเงินสดบนการ์ดแคตตาล็อก (เจ้าของสั่ง 21 ก.ย.)
   ⚠ ป้าย "สแกนจ่าย" ต้องอยู่คู่ตัวเลขเสมอ — การ์ดไม่มีที่อธิบายเงื่อนไขยาวๆ
     เขียนแค่ตัวเลขคือปล่อยให้ลูกค้าเข้าใจว่าเป็นราคาปกติ
   ⚠ ต้องเล็กกว่า .card-price เสมอ — ราคาเต็มคือยอดที่ตะกร้าคิดจริง */
/* ⚠ ป้ายอยู่บรรทัดบน ราคาอยู่บรรทัดล่าง (เจ้าของสั่ง 24 ก.ย. "ให้ราคาอยู่ใต้ tag สแกนจ่าย
     ไม่งั้นดูแล้วงงๆ") — ของเดิมเรียงบรรทัดเดียว พอเป็นช่วงราคายาว ("132.30 – 371.42")
     เลขจะตัดบรรทัดคาไปอยู่ใต้ป้ายครึ่งหนึ่ง อ่านแล้วไม่รู้ว่าเลขไหนคู่กับอะไร */
.card-cash { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px;
  font-size: 12.5px; color: #0B8A4A; line-height: 1.25; }
.card-cash span { background: #EAF7F0; border-radius: 999px; padding: 2px 7px; font-size: 11px; flex-shrink: 0; }
.card-cash b { font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; }

/* ป้าย "มีขั้นราคาตามจำนวน" บนการ์ด (21 ก.ย.) — บอกว่ามีโปร ไม่บอกตัวเลข
   ⚠ การ์ดไม่มีที่อธิบายเงื่อนไข (จำนวนที่ต้องซื้อต่างกันในแต่ละตัวเลือก)
      โชว์ราคาถูกสุดที่นี่ = ลูกค้ากดเข้าไปแล้วไม่เจอราคานั้น */
/* ⚠ .card-body เป็น flex column → ลูกถูกยืดเต็มความกว้างโดยดีฟอลต์
   ป้ายต้องกว้างเท่าข้อความ ไม่งั้นกลายเป็นแถบยาวเต็มการ์ด (align-self + width) */
.card-tier { display: inline-flex; align-self: flex-start; width: fit-content;
  align-items: center; gap: 4px; margin-top: 4px;
  padding: 2px 9px; border-radius: 999px; background: #FEF2F2; border: 1px solid #FBD5D5;
  color: #B91C1C; font-size: 11px; font-weight: 700; line-height: 1.6; }

/* ── สินค้าใกล้เคียงใต้ผลค้นหา (24 ก.ย.) ───────────────────────────────
   ⚠ ใช้ .product-grid ตัวเดิม — การ์ดจึงหน้าตาเท่าผลค้นหาเป๊ะและไม่ต้องดูแล 2 ชุด */
.sugg-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.sugg-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading);
  font-weight: 700; font-size: 18px; color: var(--navy); margin-bottom: 4px; }
.sugg-head svg.lucide { width: 19px; height: 19px; color: var(--red); }
.sugg-note { color: var(--gray); font-size: 13.5px; margin-bottom: 14px; }
.sugg-note a { color: var(--red); font-weight: 600; text-decoration: none; }
.empty-hint { color: var(--gray); font-size: 14px; margin-top: 6px; }
.empty-hint a { color: var(--red); font-weight: 600; }
@media (max-width: 900px) {
  .sugg-block { margin-top: 18px; padding-top: 16px; }
  .sugg-head { font-size: 16px; }
  .sugg-note { font-size: 12.5px; }
}

/* รูปในชิปเลือกตัวเลือก (หน้าสินค้า) — เจ้าของสั่ง 24 ก.ย. "โชว์รูปตัวเลือกหน้าสินค้าด้วย"
   ⚠ ใส่ได้เฉพาะรายการแบบ 1 ชิป = 1 ตัวเลือก · แบบตาราง ขนาด×บรรจุ ชิปหนึ่งอันแทนหลายตัวเลือก
   ⚠ ตัวเลือกที่ไม่มีรูป = ชิปธรรมดาไม่มีช่องว่างค้างไว้ (เจ้าของสั่ง "ไม่มีรูปก็ไม่ต้องแสดง")
     ชิปจึงสูงไม่เท่ากันได้เมื่อมีบ้างไม่มีบ้าง — ยอมรับได้ ดีกว่าโชว์กรอบเปล่า */
.pk-chip--img { display: inline-flex; align-items: center; gap: 7px; padding-left: 6px; }
.pk-chip--img img { width: 30px; height: 30px; border-radius: 6px; object-fit: contain;
  background: #fff; border: 1px solid #EEF0F4; flex-shrink: 0; display: block; }

/* รูปตัวเลือกในตะกร้า/หน้ายืนยัน — ลูกค้าเห็นว่าสั่ง "ตัวไหน" ไปจริงๆ ไม่ใช่แค่รูปปกสินค้า */
.cart-item-img img.is-variant, .co-sum-thumb img.is-variant { object-fit: contain; background: #fff; }

/* ── รายการแนะนำใต้ช่องค้นหา (พิมพ์แล้วขึ้นทันที) 24 ก.ย. ──────────────
   ⚠ ฟอร์มค้นหาทั้งสองแบบต้องเป็น position:relative เพื่อให้กล่องนี้ลอยใต้ช่องพอดี
     (.cb-search / .hs-form เดิมไม่ได้ตั้งไว้ — ตั้งตรงนี้ ไม่ไปแก้กฎเดิมที่ใช้ร่วมกับอย่างอื่น)
   ⚠ [hidden] แพ้ CSS ของเรา → กฎ display ต้องผูกกับ :not([hidden]) */
.cb-search, .hs-form { position: relative; }
.sg-box:not([hidden]) { display: block; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 60; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden; max-height: 60vh; overflow-y: auto; }
.sg-item { display: block; padding: 10px 13px; text-decoration: none; color: var(--navy);
  border-bottom: 1px solid var(--off-white); }
.sg-item:last-child { border-bottom: none; }
.sg-item:hover, .sg-item.is-on { background: #FFF5F5; }
.sg-name { display: block; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--gray); }
.sg-price { font-family: var(--font-heading); font-weight: 700; color: var(--red); margin-left: auto; }

/* หมวดย่อย (PP Home หมวด 2 ชั้น) — กางใต้หมวดหลักที่กำลังดู */
.filter-list.filter-sub { margin: 2px 0 6px 12px; padding-left: 10px; border-left: 2px solid var(--border); }
.filter-list.filter-sub a { font-size: 13.5px; }

/* ═══ ดีไซน์ "A · คลาสสิกพีพี" — ต่อยอดจากเว็บเดิม www.pphomecenter.co.th (เจ้าของเลือก 29 ก.ย. 2026) ═══
   เดิมบล็อกนี้ชื่อ "ปุ่มแบบเว็บเดิม" (29 ก.ย. "ตอนนี้สไตล์เหมือนเว็บต้นแบบเกินไป") มีแค่ปุ่ม —
   วันเดียวกันเจ้าของสั่งต่อ "เก็บรายละเอียดต่างๆ ของเว็บ ปุ่มต่างๆ ข้อความ ขอบ ความโค้ง รวมถึง icon ต่างๆ และสี
   ให้เป็นดีไซน์ของแบรนด์ร้านเอง" → รวมทุกส่วนที่ลูกค้าเห็นไว้ที่นี่ที่เดียว อ่านค่าจากโทเคนใน :root (หัวไฟล์)
   ⚠ บล็อกนี้อยู่ท้ายไฟล์ตั้งใจ — ชนะกฎรูปทรงเดิมข้างบนด้วยลำดับ ไม่ใช้ !important
   ⚠ ราคายังเป็นแดง --red (#E60012) · ปุ่มร้านค้าเป็นแดงเข้ม --btn (#990000) — คนละสี ห้ามสลับ
   ⚠ แผ่นเลื่อนขึ้นบนมือถือ (.pk-sheet / .opt-panel / .filter-sheet) ยังมุมมนด้านบนตามเดิม — เป็นแผ่น ไม่ใช่การ์ด */

/* ── ปุ่ม ── */
.btn { border-radius: var(--btn-radius); font-weight: 700; }
.btn-red { background: var(--btn); color: #fff; }
.btn-red:hover { background: var(--btn-hover); }
.btn-outline-navy { border: 1px solid var(--btn); color: var(--btn); }
.btn-outline-navy:hover { background: #FFF5F5; }
.site-header nav a.nav-cta { background: var(--btn); border-radius: var(--btn-radius); font-weight: 700; }
.site-header nav a.nav-cta:hover { background: var(--btn-hover); }
/* ปุ่มค้นหาเหลืองเหลี่ยม (ทุกช่องค้นหา: หัวเว็บ · แถบมือถือ · sidebar) */
.hdr-searchbox button, .catalog-bar .cb-go, .hdr-search-panel .hs-go, .btn-search {
  background: var(--yellow); color: #231800; border-radius: var(--btn-radius); font-weight: 700; }
.hdr-searchbox button:hover, .catalog-bar .cb-go:hover, .hdr-search-panel .hs-go:hover, .btn-search:hover { background: #E6A200; }
.btn-search svg.lucide { color: #231800; }
.qty-stepper { border-radius: var(--btn-radius); }
.member-price-cta { border-radius: var(--btn-radius); border-color: var(--btn); color: var(--btn); }
.member-price-cta:hover { background: var(--btn); }
/* หน้าแรก: ปุ่มใน hero/ติดต่อ เป็นแคปซูลแดงสดแบบเว็บเดิม (ต่างจากปุ่มร้านค้าที่เหลี่ยม) */
.hero-cta .btn, .hp-contact-cta .btn { border-radius: 50px; }
.hero-cta .btn-red, .hp-contact-cta .btn-red { background: var(--hero-cta); }
.hero-cta .btn-red:hover, .hp-contact-cta .btn-red:hover { background: #C80000; }

/* ── หัวเว็บ / เมนู ── */
.site-header nav { gap: 6px; }
.site-header nav a:not(.nav-cta) { padding: 5px 12px; border-radius: 20px; }
.site-header nav a.active:not(.nav-cta) { background: var(--nav-on); color: #fff; }
.site-header nav a.active::after { display: none; }
/* เมนูหลักมี 6 อัน (โปรโมชั่น/ติดต่อเรา ย้ายลงมาจากแถบบน 30 ก.ย.) — จอกลางต้องบีบ ไม่ให้ล้น/ตกบรรทัด */
@media (min-width: 901px) and (max-width: 1180px) {
  .site-header nav { gap: 2px; font-size: 14px; }
  .site-header nav a:not(.nav-cta) { padding: 5px 8px; }
  .site-header .container { gap: 12px; }
  .hdr-searchbox { min-width: 150px; margin-left: 4px; }
  .site-header .logo img { height: 38px; }
}
.site-header nav a:hover:not(.nav-cta):not(.active) { color: var(--btn); }
.hdr-searchbox, .catalog-bar .cb-search, .hdr-search-panel .hs-form { border-radius: var(--btn-radius); background: #fff; }
.catalog-bar .cb-filter, .hdr-search-panel .hs-filter { border-radius: var(--btn-radius); }
.catalog-bar .cb-filter.has-filter { background: var(--btn); border-color: var(--btn); }
.hdr-search-d { border-radius: var(--btn-radius); }
.cart-badge { background: var(--red); }
.drawer-nav a, .drawer-nav button { border-radius: var(--btn-radius); }
.drawer-nav a:active, .drawer-nav a:hover { color: var(--btn); }
.sg-box:not([hidden]) { border-radius: var(--card-radius); }
/* เมนูล่างจอ: ช่องที่เปิดอยู่เป็นแดง (ตามเดิม) · ขอบบนเส้นบาง */
.bottom-nav { border-top: 1px solid var(--border); box-shadow: none; }

/* ── การ์ด/ป้าย/ชิป ── */
.fav-btn { border-radius: 50%; background: rgba(255,255,255,.96); }
.flag, .card-cash span, .card-tier, .status-pill, .flag-discount, .f-channels .ch, .pk .pk-tag, .member-price-note, .mk-badge { border-radius: var(--btn-radius); }
.active-filters, .pager-btn, .cart-item, .cart-item-img, .cart-summary, .cart-empty, .co-card, .opt-panel,
.sugg-block, .empty-state, .g-item, .g-drop, .catalog-hero .brand-hero-logo { border-radius: var(--card-radius); }
.active-filters, .pager-btn, .co-card { border: 1px solid var(--border); box-shadow: none; }
.pager-btn:hover { transform: none; box-shadow: none; border-color: var(--btn); color: var(--btn); }
.pager-btn.current { background: var(--nav-on); color: #fff; border-color: var(--nav-on); }
.cart-item, .cart-summary, .cart-empty { box-shadow: none; }
.cart-item-no { border-radius: 0 0 var(--card-radius) 0; }
.cart-remove { border-radius: var(--btn-radius); }
.cart-remove:hover { color: var(--btn); }
.cart-continue:hover { color: var(--btn); }
.cart-empty .ce-icon { background: var(--cream); color: var(--navy); }
/* ช่องกรอก: เหลี่ยม 3px · โฟกัสเป็นเส้นแดงเข้ม (ไม่ใช่วงเหลืองของต้นแบบ) */
.co-field input, .co-field textarea, .search-row input, .cc-input, .variant-table .vi { border-radius: var(--btn-radius); }
.co-field input:focus, .co-field textarea:focus, .search-row input:focus { outline: 2px solid var(--btn); border-color: transparent; }
.co-card h2 svg.lucide { color: var(--btn); }
.co-login-link a, .empty-hint a, .sugg-note a, .price-cta-login a, .vt-cta-sub a { color: var(--btn); }

/* ── แถบกรองสินค้า (sidebar / แผ่นบนมือถือ) ── */
.filter-list li a { border-radius: var(--btn-radius); }
.filter-list li a.active { background: var(--nav-on); }
.filter-label { font-weight: 700; }
.active-filters .clear { color: var(--btn); }
.filter-sheet-head button { border-radius: var(--btn-radius); }

/* ── หน้าสินค้า: ชิปตัวเลือก / จำนวน / ปุ่มซื้อ ── */
.pk .pk-chip { border-radius: var(--btn-radius); border-width: 1px; background: #FAFBFD; }
.pk .pk-chip:hover:not(.is-na) { border-color: var(--btn); }
.pk .pk-chip[aria-pressed="true"] { border-color: var(--btn); background: #FFF5F5; color: var(--btn); }
.pk .pk-chip:focus-visible { outline-color: var(--btn); }
.pk .pk-add { border-radius: var(--btn-radius); }
.pk.is-sheet .pk-open, .vt-cta-box--card { border-radius: var(--card-radius); }
.pk-chip--img img { border-radius: var(--btn-radius); }
.pk-chip--img { border-radius: var(--btn-radius); }
.pk .pk-tag { border-radius: var(--btn-radius); }
.pk-ship, .pk-tiers, .pk-cash { border-radius: var(--btn-radius); }
.share-btn, .hdr-share-m { border-radius: var(--btn-radius); }
.gallery-strip img, .gallery-strip a { border-radius: var(--btn-radius); }

/* ── ฟุตเตอร์ ── */
.f-line-btn { border-radius: var(--btn-radius); }
.f-social a { background: rgba(255,255,255,.1); }
.f-social a:hover { background: var(--btn); transform: none; }
.footer-info a:hover { color: var(--yellow); }

/* ── หน้าแรก: จุดเด่น 3 ข้อ ไอคอนในวงกลมพื้นครีม (แบบเว็บเดิม) · หมวดสินค้า ── */
.hp-usp-ic { background: var(--cream); color: var(--navy); }
.cat-card { border-radius: var(--card-radius); }
.cat-card:hover { border-color: var(--btn); box-shadow: none; }
.cat-card .c-ic { border-radius: var(--btn-radius); background: var(--cream); color: var(--navy); }
.view-all { color: var(--btn); }
.hp-banner { border-radius: var(--card-radius); }
.hp-banner:hover { box-shadow: none; }

/* โลโก้แบรนด์บนหัวหน้าแคตตาล็อก (?brand=) */
.catalog-hero .brand-hero-logo { float: left; width: 64px; height: 64px; object-fit: contain; background: #fff; padding: 4px; margin-right: 14px; }
.catalog-hero .container::after { content: ""; display: block; clear: both; }
/* ⚠ ตาข่ายกันหน้าเลื่อนซ้ายขวาบนมือถือ (เจ้าของเจอ 29 ก.ย. — iPhone ลากหน้าออกข้างได้เพราะแถวหมวดเกินจอ 2px)
   clip ไม่ใช่ hidden — hidden ทำให้ body เป็นกล่องเลื่อน แล้ว .header-stack (sticky) หยุดหนึบ */
html, body { overflow-x: clip; }

@media (max-width: 900px) {
  .card-add { font-size: 13px; padding: 8px 8px; margin: 4px 8px 8px; gap: 5px; }
  .card-add-form .card-add { width: calc(100% - 16px); }
}
/* ป้าย "ของแท้ 100%" เหลี่ยมตามดีไซน์ A (เจ้าของสั่ง 30 ก.ย.) */
.genuine-tag { border-radius: var(--btn-radius); }

/* ลูกศรท้ายลิงก์เป็นไอคอน ไม่ใช่ตัวอักษร "→" (เจ้าของสั่ง 30 ก.ย. "เปลี่ยน → เป็นไอคอนให้หมด")
   ⚠ ขนาดตามตัวอักษรรอบข้าง (1em) — ใส่ในลิงก์/ปุ่ม/ประโยคได้หมด · ข้อความใหม่ห้ามพิมพ์ → ลงไปตรงๆ */
svg.i-arrow { width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; stroke-width: 2.25; }
.btn svg.i-arrow { width: 1.1em; height: 1.1em; }

/* ชุดไอคอนทึบ (Phosphor Fill — เจ้าของเลือกแบบ C 1 ต.ค. 2026 · public/pph-icons.js)
   ⚠ ไอคอนทึบใช้ fill ไม่ใช่ stroke — กฎ stroke-width เดิมของ svg.lucide ไม่มีผลกับ .ph
   ⚠ หัวใจมี 2 ชั้น: .ph-off (เส้น) ตอนยังไม่กด · .ph-on (ทึบ) ตอนเป็นรายการโปรดแล้ว
     ถ้าใช้ทึบอย่างเดียว ลูกค้าจะแยกไม่ออกว่ากดหัวใจไปแล้วหรือยัง */
svg.ph { stroke: none; }
svg.ph .ph-on { display: none; }
.fav-btn.is-on svg.ph .ph-on, .is-on > svg.ph .ph-on, .active > svg.ph .ph-on { display: inline; }
.fav-btn.is-on svg.ph .ph-off, .is-on > svg.ph .ph-off, .active > svg.ph .ph-off { display: none; }

/* ป้ายส่วนลดบนการ์ดสินค้า (เจ้าของสั่ง 1 ต.ค.) — แดงราคา เหลี่ยมตามดีไซน์ A · มุมซ้ายล่างของรูป */
.card-image { position: relative; }
.card-off { position: absolute; left: 8px; bottom: 8px; background: var(--red); color: #fff; font-family: var(--font-heading);
  font-weight: 700; font-size: 13px; line-height: 1; padding: 5px 8px; border-radius: var(--btn-radius); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }   /* ขอบขาว — รูปสินค้าหลายรูปมีแถบแดงมุมล่างอยู่แล้ว */
@media (max-width: 900px) { .card-off { font-size: 12px; padding: 4px 7px; left: 6px; bottom: 6px; } }

/* หลังบ้านโหมดหน้าต่างลอย (?embed=1) — ใช้ใน iframe ของหน้าแก้ไขสินค้า */
.is-embed .admin-side, .is-embed .admin-top { display: none !important; }
.is-embed .admin-main { margin-left: 0; }
.is-embed .admin-content { padding: 14px 16px 24px; }
/* หน้าต่างลอยตั้งราคากลุ่มลูกค้า (หน้าแก้ไขสินค้า) */
.pg-modal { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,32,.55); display: grid; place-items: center; padding: 16px; }
.pg-modal-box { background: #fff; width: min(1400px, 100%); height: min(90vh, 100%); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.pg-modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-family: var(--font-heading); font-weight: 600; }
.pg-modal-head .sub { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--gray); }
.pg-modal-head button { margin-left: auto; border: 0; background: var(--off-white); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.pg-modal iframe { flex: 1; width: 100%; border: 0; }

/* กล่องราคาแต่ละกลุ่มในหน้าสินค้า — เห็นเฉพาะทีมงาน (เจ้าของสั่ง 1 ต.ค.) */
.staff-prices { margin: 16px 0; border: 1px dashed #94A3B8; border-radius: var(--card-radius); background: #F8FAFC; }
.sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 12px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; border-bottom: 1px solid #E2E8F0; }
.sp-head svg { width: 16px; height: 16px; }
.sp-head span { font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--gray); }
.sp-scroll { overflow-x: auto; }
.sp-t { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sp-t th { padding: 6px 8px; font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; white-space: nowrap; text-align: right; }
.sp-t td { padding: 7px 8px; border-top: 1px solid #E2E8F0; text-align: right; white-space: nowrap; vertical-align: top; line-height: 1.35; }
.sp-t .sp-opt { text-align: left; white-space: normal; min-width: 130px; position: sticky; left: 0; background: #F8FAFC; }
.sp-t th.sp-opt { background: #F1F5F9; }
.sp-opt small { display: block; color: var(--gray); font-size: 11.5px; }
.sp-list { color: var(--gray); text-decoration: line-through; font-size: 12px; }
.sp-pct { color: #B8000E; font-size: 12px; font-weight: 600; }
.sp-net { color: var(--navy); font-size: 14.5px; }
.sp-none { color: #CBD5E1; }

/* ── เหตุผลที่ต้องเลือก (แถบเหนือท้ายเว็บ · 1 ต.ค.) ── */
.why-us { background: #E9ECEF; margin-top: 64px; }
.why-row { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); gap: 18px; align-items: center; padding-top: 22px; padding-bottom: 22px; }
.why-title h2 { font-size: 24px; margin: 0; line-height: 1.2; }
.why-title span { display: block; font-family: var(--font-heading); font-weight: 500; letter-spacing: .06em; color: var(--gray); font-size: 14px; }
.why-item { display: grid; justify-items: center; text-align: center; gap: 2px; }
.why-ic { width: 66px; height: 66px; border-radius: 50%; background: #15191E; color: var(--yellow); display: grid; place-items: center; outline: 2px dashed #15191E; outline-offset: 3px; margin-bottom: 8px; }
.why-ic svg.lucide { width: 30px; height: 30px; }
.why-item b { font-family: var(--font-heading); font-size: 16px; line-height: 1.3; }
.why-item small { color: #4B5563; font-size: 13px; line-height: 1.45; }
@media (max-width: 900px) {
  .why-us { margin-top: 40px; }
  .why-row { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .why-title { grid-column: 1 / -1; text-align: center; }
  .why-ic { width: 54px; height: 54px; } .why-ic svg.lucide { width: 24px; height: 24px; }
  .why-item b { font-size: 14.5px; } .why-item small { font-size: 12px; }
}

/* ── ท้ายเว็บจัดวางใหม่ (1 ต.ค. อ้างอิง hardman) — ⚠ .site-footer เดิมจัดกลาง/มี margin-top: ล้างที่นี่ ── */
.site-footer.f2 { background: #15191E; color: #D1D5DB; text-align: left; padding: 0; margin-top: 0; }
.f2-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr .8fr 1.2fr; gap: 28px; padding-top: 40px; padding-bottom: 36px; }
.site-footer.f2 img.f2-logo { height: 54px; width: auto; margin: 0 0 14px; background: #fff; border-radius: var(--btn-radius); padding: 6px 10px; }
.f2-legal { display: block; color: #fff; font-family: var(--font-heading); font-size: 16px; }
.f2-addr { margin: 4px 0 12px; font-size: 14px; line-height: 1.6; }
.f2-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.f2-info li { display: flex; gap: 8px; align-items: flex-start; }
.f2-info svg.lucide { width: 16px; height: 16px; margin-top: 3px; color: var(--yellow); flex-shrink: 0; }
.site-footer.f2 a { color: inherit; text-decoration: none; }
.site-footer.f2 a:hover { color: var(--yellow); }
.f2-col h4 { color: #fff; font-family: var(--font-heading); font-size: 17px; margin: 4px 0 10px; }
nav.f2-col a { display: flex; align-items: center; gap: 4px; padding: 7px 0; border-bottom: 1px solid #343B44; font-size: 14.5px; }
nav.f2-col a svg.lucide { width: 14px; height: 14px; color: var(--yellow); }
.f2-icons { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.f2-lineid { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: #fff !important; margin-bottom: 10px; }
.f2-linebadge { background: #06C755; color: #fff; font: 800 10px/1 Arial, sans-serif; padding: 6px 5px; border-radius: 50%; }
.f2-qr { display: block; width: 148px; background: #fff; padding: 6px; border-radius: var(--btn-radius); }
.site-footer.f2 .f2-qr img { display: block; width: 100%; height: auto; margin: 0; }
.f2-bottom { background: var(--yellow); color: #231800; text-align: center; font-size: 13px; padding: 10px 16px; }
@media (max-width: 1100px) { .f2-grid { grid-template-columns: 1fr 1fr 1fr; } .f2-shop { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .f2-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-top: 28px; }
  .f2-social { grid-column: 1 / -1; }
}
/* แถบบน: เข้าสู่ระบบ | สมัครสมาชิก มีไอคอน + เส้นคั่น (1 ต.ค.) */
.an-nav { gap: 12px; }
.an-nav a { display: inline-flex; align-items: center; gap: 6px; }
.an-nav a svg.lucide { width: 17px; height: 17px; }
.an-sep { width: 1px; height: 18px; background: rgba(255,255,255,.55); }

/* ตัวกรอง: ช่วงราคา + แบรนด์ checkbox + ปุ่มใช้ตัวกรอง (เจ้าของสั่ง 1 ต.ค. ตามเว็บเดิม) */
.price-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.price-range input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--btn-radius); font-size: 16px; }
.brand-checks label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--btn-radius); cursor: pointer; font-size: 15px; }
.brand-checks label:hover { background: var(--off-white); }
.brand-checks label.active { font-weight: 700; }
.brand-checks input { width: 17px; height: 17px; accent-color: var(--btn); flex-shrink: 0; }
.brand-checks .bc-name { flex: 1; }
.filter-actions { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 10px 0 4px; background: #fff; border-top: 1px solid var(--border); z-index: 1; }
.filter-actions .btn { flex: 1; justify-content: center; padding: 10px 12px; font-size: 15px; }