/* ============================================================
   ภูผาหิ้ว (Phu Pha Hiw) — สไตล์หน้าบ้าน
   ------------------------------------------------------------
   สีหลักรับจากหน้า "ตั้งค่าเว็บไซต์" ผ่าน CSS variables
   ที่ includes/header.php ฉีดเข้ามา (--primary --secondary --accent --bg)
   ค่าด้านล่างเป็นค่าสำรองกรณียังไม่ได้ตั้งค่าในหลังบ้าน

   อัปเดตตามโลโก้ใหม่ (ก.ย. 2569) — สุ่มพิกเซลจริงจากไฟล์โลโก้ที่อัปโหลดแล้ว
   (พื้นเขียว RGB 0,107,27 = HSL 135°,100%,21% · ดาวทอง RGB 247,218,89)
   ไม่ใช่การกะด้วยตา ตัวเลข H=135 คือเฉดสีจริงของโลโก้

   ข้อควรรู้: มีแค่ 4 ตัวบนสุด (primary/secondary/accent/bg) ที่ตั้งค่าได้จากหลังบ้าน
   ส่วนโทเคนแบรนด์ที่เหลือ (brand-900 ถึง brand-050, leaf-dark) เป็นค่าคงที่ในไฟล์นี้
   ไม่มีช่องตั้งค่าให้ — ไล่ปรับให้เข้าชุดเดียวกับ 4 ตัวบนตอนเปลี่ยนโลโก้รอบนี้ด้วย
   ไม่งั้นปุ่ม/แถบสี/ป้ายต่าง ๆ ที่อ้างโทเคนพวกนี้ (มีอยู่ 130+ จุดในไฟล์) จะค้างเป็นเขียวเก่า
   ผสมกับเขียวใหม่ดูไม่เข้ากัน

   เฉดเข้ม (900/800/primary) คุมความอิ่มตัวไว้ที่ 90-100% เพราะเข้มพอที่ตัวหนังสือขาวจะอ่านออก
   อยู่แล้ว (contrast ≥5.9 ทุกตัว) ส่วนโทนกลาง-อ่อน (brand-500 ลงไป) ต้องลดความอิ่มตัวลงเรื่อย ๆ
   เพราะสีเขียวอิ่มตัวเต็มที่ (H135 S100%) แม้จะเข้มระดับ "กลาง" ก็ยังให้ contrast กับขาวไม่พอ
   (ทดสอบตัวเลขจริงแล้ว ไม่ใช่กะเอา) — brand-500 คุมไว้ที่ contrast 4.84 เพราะใช้กับตัวหนังสือ
   ขาวจริง (เช่น .btn.accent) ต้องผ่าน 4.5 เป็นอย่างต่ำ */
*,*::before,*::after{box-sizing:border-box}
input[type=radio],input[type=checkbox]{accent-color:var(--primary);width:17px;height:17px;flex:none}

:root{
  /* --- รับจากหลังบ้าน (มีค่าสำรอง) --- */
  --primary:#067422;
  --secondary:#006b1b;
  --accent:#f7da59;
  --bg:#f2f8f3;

  /* --- โทเคนแบรนด์ --- */
  --brand-900:#004712;
  --brand-800:#036d1d;
  --brand-500:#26823d;
  --brand-300:#8dce9d;
  --brand-100:#ddeee1;
  --brand-050:#f2f8f3;
  --leaf-dark:#2c9646;

  --text:#18261a;
  --muted:#6b7a6e;
  --line:#e2eae3;
  --line-strong:#cfdcd1;
  --sand:#faf8f3;
  --white:#fff;

  --ok:#166534;      --ok-bg:#dcf5e2;
  --warn:#b7791f;    --warn-bg:#fdf6e3;
  --danger:#b91c1c;  --danger-bg:#fdeaea;
  --info:#1d4ed8;    --info-bg:#e8effd;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(24,38,26,.05);
  --sh-2:0 4px 16px -6px rgba(24,38,26,.16);
  --sh-3:0 18px 44px -20px rgba(24,38,26,.35);
  --nav-h:64px;
}

html,body{margin:0;padding:0}
/* overflow-x:hidden กันสิ่งที่ตั้งใจให้ "ล้นขอบ" ได้ (เช่นภาพฮีโร่ขนาดใหญ่ฝั่งขวาในหัวข้อ 108)
   ไปสร้าง scrollbar แนวนอนที่จอแคบ ๆ โดยไม่ตั้งใจ — ตัดภาพให้พอดีจอเงียบ ๆ แทนที่จะเห็น scrollbar */
body{overflow-x:hidden;font-family:'Kanit',system-ui,sans-serif;font-weight:300;background:var(--sand);color:var(--text);
     line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{margin:0 0 12px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
h1{font-size:clamp(26px,4vw,40px);font-weight:600}
h2{font-size:clamp(21px,2.6vw,29px)}
h3{font-size:18px}
p{margin:0 0 14px}
.muted{color:var(--muted);font-size:.9rem}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.center{text-align:center}
.page{padding:32px 20px 60px;min-height:60vh}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}

/* ============================================================
   Header
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:22px;min-height:var(--nav-h);padding:10px 20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:19px;color:var(--secondary)}
.logo img,.logo .logo-mark{width:38px;height:38px;border-radius:12px;object-fit:cover;flex:none}
.logo .logo-mark{display:grid;place-items:center;color:#fff;font-size:17px;
  background:linear-gradient(140deg,var(--brand-500),var(--secondary));box-shadow:var(--sh-2)}
.logo .logo-text{display:block;line-height:1.15}
.logo .logo-sub{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted);font-weight:300;line-height:1}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:14.5px}
.site-nav a{padding:6px 0;border-bottom:2px solid transparent;transition:.15s;white-space:nowrap;flex:none}
.site-nav a:hover,.site-nav a.active{color:var(--primary);border-color:var(--primary)}
.btn-nav{background:var(--primary);color:#fff!important;padding:8px 16px;border-radius:var(--r);border:0!important}
.btn-nav:hover{background:var(--brand-800)}
.nav-toggle{display:none;background:none;border:0;font-size:20px;cursor:pointer;color:var(--secondary)}
.header-actions{display:flex;align-items:center;gap:10px;flex:none}

/* ---------- เมนูผู้ใช้มุมขวา ---------- */
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid var(--line);
  background:#fff;border-radius:var(--r-pill);cursor:pointer;font:inherit;font-size:14px;color:var(--text);
  transition:.15s;max-width:190px}
.user-btn:hover{border-color:var(--brand-300);background:var(--brand-050)}
.user-btn img,.user-btn .ava{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.user-btn .ava{display:grid;place-items:center;background:var(--primary);color:#fff;font-size:13px}
.user-btn .uname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-btn i{font-size:10px;color:var(--muted);flex:none}
.user-drop{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:230px;padding:8px 0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);z-index:130}
.user-menu.open .user-drop{display:block}
.user-drop a{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:14px;color:var(--text)}
.user-drop a:hover{background:var(--brand-050);color:var(--primary)}
.user-drop a i{width:16px;text-align:center;color:var(--muted);font-size:13px}
.user-drop a:hover i{color:var(--primary)}
.user-drop a .n{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-style:normal;
  padding:1px 7px;border-radius:var(--r-pill)}
.user-drop hr{margin:6px 0;border:0;border-top:1px solid var(--line)}
.header-actions .nav-link{font-size:14.5px;white-space:nowrap;padding:6px 4px}
.header-actions .nav-link:hover{color:var(--primary)}

/* เมนูที่จัดจากหลังบ้าน (render_menu → <ul>) */
.site-nav ul,.site-nav-items{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
.site-nav li{white-space:nowrap}
.nav-only-mobile{display:none}
.site-nav li{position:relative}
.site-nav .submenu{display:none;position:absolute;top:calc(100% + 6px);left:0;flex-direction:column;
  align-items:stretch;gap:0;min-width:210px;padding:8px 0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-2);z-index:120}
.site-nav li.has-sub:hover>.submenu{display:flex}
.site-nav .submenu a{display:block;width:100%;padding:8px 18px;font-size:14px;border:0}
.site-nav .submenu a:hover{background:var(--brand-050);color:var(--primary)}

/* แถบเมนูแนวนอนของจอใหญ่ออกแบบให้เป็นตัวหนังสือล้วน — ซ่อนไอคอนที่ JS เติมไว้ให้ไซด์บาร์
   (เขียนไว้ในสื่อ min-width จะได้ไม่ไปทับกฎของไซด์บาร์ในสื่อ max-width:900px) */
@media (min-width:901px){
  .site-nav-items>li>a>i.nav-auto-ico{display:none}
  /* ไอคอนที่ตั้งมาจากหลังบ้านยังโชว์ได้ แต่ต้องมีระยะห่าง ไม่ใช่ติดกับตัวหนังสือ */
  .site-nav-items>li>a>i:first-child{margin-right:7px}
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 21px;
  border:1px solid transparent;border-radius:var(--r);background:var(--primary);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:400;cursor:pointer;transition:.18s ease;white-space:nowrap}
.btn:hover{background:var(--brand-800);transform:translateY(-1px);box-shadow:var(--sh-2);color:#fff}
/* ของเดิม accent = พื้นเขียวมะนาวอ่อน + ตัวหนังสือเขียวเข้ม — เหมือนกรณี .pg-cta ทุกประการ
   (เขียวสองโทนใกล้กันเกินไป อ่านฝืดตา) ปัญหาหนักกว่าเพราะปุ่มนี้ถูกใช้เป็นปุ่มหลักของ
   ธุรกรรมสำคัญแทบทุกจุด (ชำระเงิน, ยืนยันรับสินค้า, เช็คเอาต์ POS, บันทึกฟอร์ม ฯลฯ)
   เปลี่ยนเป็นเขียวเข้มกว่าเดิม (brand-500) + ตัวหนังสือขาว ให้ contrast ผ่านเกณฑ์แน่นอน
   และยังต่างโทนจาก .btn ปกติ (primary) พอให้เห็นว่าเป็นปุ่มคนละน้ำหนักกัน */
.btn.accent{background:var(--brand-500);color:#fff;font-weight:500}
.btn.accent:hover{background:var(--primary);color:#fff}

/* ข้อยกเว้นจุดเดียวในเว็บ — ปุ่ม CTA บนแบนเนอร์เขียวเข้มของหน้าแรก (.pph-cta)
   ถ้าใช้เขียวเข้มแบบข้างบนปุ่มจะจมหายไปกับพื้นหลังทันที ต้องใช้โทนอ่อนแบบเดิม
   ให้ปุ่มเด่นออกจากพื้น ส่วน contrast ภายในปุ่มยังผ่านเกณฑ์ (~5.5:1) เพราะพื้นหลังเปลี่ยน
   ไม่ใช่ปัญหาเดียวกับ .pg-cta ที่วางอยู่บนพื้นขาวธรรมดา
   ข้อความปกติเป็นสีขาวตามที่ขอ — เคยเติม text-shadow ไว้ช่วยอ่านง่ายเพราะขาวจริงบนพื้นทอง
   contrast เหลือแค่ ~1.4:1 แต่พี่ทันไม่ต้องการเงา จึงเอาออกตามที่ขอ */
.pph-cta .btn.accent{background:var(--accent);color:#fff}
.pph-cta .btn.accent:hover{background:#fff;color:var(--primary)}
.btn.outline,.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn.outline:hover,.btn.ghost:hover{background:var(--brand-050);border-color:var(--brand-300);color:var(--text);box-shadow:none}
.btn.light{background:#fff;color:var(--primary);font-weight:500}
.btn.sm{padding:7px 14px;font-size:13px;border-radius:var(--r-sm)}
.btn.lg{padding:14px 28px;font-size:16px;border-radius:14px}
.btn.block{width:100%}
.btn.danger{background:var(--danger)}
.btn[disabled],.btn.disabled{opacity:.45;pointer-events:none}
.iconbtn{width:38px;height:38px;display:inline-grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.15s;
  /* ต้องเป็น relative ทุกปุ่ม ไม่ใช่เฉพาะปุ่มตะกร้า
     ไม่งั้นป้ายตัวเลขจะไปอ้างอิงบรรพบุรุษที่ไกลออกไปแล้วลอยหลุดออกนอกปุ่ม */
  position:relative}
.iconbtn:hover{border-color:var(--brand-300);color:var(--primary)}

/* ป้ายตัวเลขมุมขวาบนของปุ่มไอคอน (กระดิ่งแจ้งเตือน / ตะกร้า)
   ของเดิมสไตล์ผูกกับ .cart-btn อย่างเดียว ป้ายของกระดิ่งจึงไม่ได้อะไรเลย
   กลายเป็นข้อความธรรมดาที่ถูกนับเป็นสมาชิกอีกตัวของ grid place-items:center
   ผลคือมันไปยืนข้างไอคอนแล้วดันไอคอนกระดิ่งลอยขึ้น 10px — อาการ "เลขตกบรรทัด"
   ใช้ box-shadow ทำขอบขาวแทน border เพราะ border จะไปบวกขนาดกล่องจนป้ายเบี้ยว */
.iconbtn .dot{position:absolute;top:-6px;right:-6px;z-index:1;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;
  font-size:10.5px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;
  background:#ef4444;color:#fff;box-shadow:0 0 0 2px #fff}
/* เดิมพื้น accent + ตัวหนังสือ secondary สูตรเดียวกับ .btn.accent ที่เพิ่งแก้ ปรับให้ชุดเดียวกัน */
.cart-btn .dot{background:var(--brand-500);color:#fff}

/* ============================================================
   Hero / Blocks (บล็อกจากหลังบ้าน)
   ============================================================ */
.blk{margin-bottom:56px}
.blk-head{margin-bottom:26px}
.blk-head h2{margin-bottom:6px}
.blk-head h2::after{content:"";display:block;width:64px;height:4px;border-radius:4px;background:var(--brand-500);margin-top:12px}
.blk-head p{color:var(--muted);font-size:14.5px;margin:0}

.hero,.blk-hero{position:relative;overflow:hidden;color:#fff;padding:76px 26px;text-align:center;
  border-radius:var(--r-xl);margin-bottom:44px;background-color:var(--secondary);
  background-image:linear-gradient(140deg,var(--primary),var(--secondary));background-size:cover;background-position:center}
.hero::after,.blk-hero::after{content:"";position:absolute;right:-160px;top:-180px;width:520px;height:520px;
  border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
.hero h1,.blk-hero h1{font-size:clamp(28px,4.4vw,44px);margin-bottom:12px;position:relative}
.hero p,.blk-hero p{opacity:.92;max-width:620px;margin:0 auto 24px;position:relative;font-size:16.5px}
.hero .btn,.blk-hero .btn{background:var(--accent);color:var(--secondary);font-weight:500;position:relative;padding:13px 28px;font-size:15.5px}
.hero .btn:hover,.blk-hero .btn:hover{background:#fff;color:var(--primary)}

.blk-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.blk-feature{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.blk-feature i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--brand-050);color:var(--primary);font-size:20px;margin-bottom:16px}
.blk-feature h3{font-size:16.5px;margin-bottom:8px}
.blk-feature p{font-size:14px;margin:0}

.blk-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.blk-gallery a{border-radius:var(--r);overflow:hidden;display:block;aspect-ratio:1;background:var(--brand-050)}
.blk-gallery img{width:100%;height:100%;object-fit:cover;transition:.25s}
.blk-gallery a:hover img{transform:scale(1.05)}

.blk-cta{background:linear-gradient(140deg,var(--primary),var(--secondary));color:#fff;
  border-radius:var(--r-xl);padding:56px 26px;text-align:center}
.blk-cta h2{color:#fff}
.blk-cta .muted{color:rgba(255,255,255,.8)}
.blk-cta .btn{background:var(--accent);color:var(--secondary);font-weight:500}

/* ============================================================
   Cards (บทความ / เนื้อหา)
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.card-post{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  transition:.22s;display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.card-post:hover{box-shadow:var(--sh-3);transform:translateY(-4px);border-color:var(--brand-300)}
.card-post .thumb{aspect-ratio:16/10;background:linear-gradient(140deg,var(--brand-100),var(--brand-050));
  display:grid;place-items:center;color:var(--brand-300);font-size:28px;overflow:hidden}
.card-post .thumb img{width:100%;height:100%;object-fit:cover}
.card-post .body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.card-post h3{font-size:16px;margin-bottom:6px;font-weight:400}
.card-post p{font-size:13.5px;margin:0}
.tag{display:inline-block;background:var(--brand-050);color:var(--brand-800);font-size:12px;
  padding:3px 11px;border-radius:var(--r-pill);margin-bottom:9px;align-self:flex-start}

/* การ์ดทั่วไป */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card.pad{padding:22px}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:16px;margin:0}
.card-body{padding:20px}

/* ============================================================
   สินค้าของฝาก (product card)
   ============================================================ */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:.22s;display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--brand-300)}
.pcard .thumb{aspect-ratio:1/1;position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--brand-100),var(--brand-050));display:grid;place-items:center;
  color:var(--brand-500);font-size:36px}
.pcard .thumb img{width:100%;height:100%;object-fit:cover}
.pcard .thumb .tags{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.pcard .thumb .fav{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--muted);font-size:13px}
.pcard .thumb .fav:hover{color:var(--danger)}
.pcard .body{padding:15px 16px 18px;display:flex;flex-direction:column;flex:1}
.pcard .loc{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.pcard h3{font-size:15.5px;margin:6px 0 4px;font-weight:400}
.pcard .shop{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.pcard .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{font-size:19px;font-weight:600;color:var(--brand-800)}
.price small{font-size:12px;font-weight:300;color:var(--muted)}
.price del{font-size:12.5px;font-weight:300;color:var(--muted);margin-left:4px}
.stars{color:#e0a500;font-size:12.5px}

/* ============================================================
   Chips / Badges
   ============================================================ */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);font-size:13px;background:#fff;color:var(--text);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--brand-300);background:var(--brand-050)}
.chip.on,.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.chip.sm{padding:4px 11px;font-size:12px}

/* ---------- รีวิว: ปุ่มหัวใจ "อ่านแล้ว" ----------
   ปุ่มหัวใจไม่ใช้สีเขียวแบรนด์ — สีชมพู/แดงคือความหมายสากลของ "ถูกใจ/บันทึกไว้แล้ว"
   ใช้สีอื่นจะสื่อความหมายผิดทันที (เหมือนกรณีปุ่ม LINE ที่ต้องคงสีทางการไว้) */
.rv-read{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:#fff;color:var(--muted);font-size:12.5px;
  cursor:pointer;transition:.15s;flex:none;white-space:nowrap}
.rv-read:hover{border-color:#f0b8c8;color:#c2185b}
.rv-read.on{background:#fdeef3;border-color:#f3c6d4;color:#c2185b}
.rv-read i{font-size:13px}
@media (max-width:480px){
  .rv-read{width:100%;justify-content:center;order:1;margin-top:6px}
}

/* ---------- ตัวแก้ไขข้อความ WYSIWYG (assets/js/editor.js) ----------
   ก๊อปมาจาก admin.css จุดเดียวกันเป๊ะ — พอร์ทัลร้านค้าใช้ site.css คนละไฟล์กับหลังบ้าน
   ให้ร้านค้ากรอก "เรื่องเล่าสินค้า/รายละเอียดสินค้า" ผ่านปุ่มแทนการพิมพ์แท็ก HTML เอง
   (ของเดิมเป็น textarea เปล่า ร้านค้าต้องพิมพ์ <p><b>...</b></p> เอง งงและดูแปลก) */
.ed-wrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.ed-bar{display:flex;flex-wrap:wrap;gap:2px;padding:7px 9px;background:#f8fafc;border-bottom:1px solid var(--line);align-items:center}
.ed-btn{width:31px;height:31px;display:grid;place-items:center;border:0;background:transparent;border-radius:7px;
  cursor:pointer;color:var(--secondary);font-size:13px}
.ed-btn:hover{background:#e2e8f0}
/* .ed-bar .ed-sel (ไม่ใช่ .ed-sel เฉย ๆ) เพราะตัวเลือกนี้ถูก JS แทรกเข้าไปอยู่ใน .field
   ซึ่งมีกฎ ".field select{width:100%;padding:11px 14px}" คุมอยู่ทับ specificity สูงกว่า
   (.field select = 1 คลาส+1 แท็ก ชนะ .ed-sel เฉย ๆ ที่มีแค่ 1 คลาส) ผลคือกล่องถูกบีบจนเห็น
   ตัวหนังสือไม่ออก ต้องเติมคลาสแม่ .ed-bar เข้าไปให้ specificity สูงกว่าแทนที่จะพึ่ง !important */
.ed-bar .ed-sel{flex:none;width:auto;height:31px;border:1px solid var(--line);border-radius:7px;
  font-family:inherit;font-size:13px;background:#fff;padding:0 6px}
.ed-sep{width:1px;height:20px;background:var(--line);margin:0 5px}
.ed-color{position:relative;overflow:hidden}
.ed-area{min-height:240px;padding:16px 18px;outline:none;font-size:15px;line-height:1.8;overflow-y:auto;max-height:460px}
.ed-area:focus{background:#fff}
.ed-area img{max-width:100%;height:auto;border-radius:8px}
.ed-area table{border-collapse:collapse;width:100%;margin:12px 0}
.ed-area td,.ed-area th{border:1px solid var(--line);padding:8px}
.ed-area blockquote{border-left:3px solid var(--primary);margin:12px 0;padding:6px 16px;color:var(--muted)}
.ed-area pre{background:#0f172a;color:#e2e8f0;padding:14px;border-radius:8px;overflow:auto}
.ed-area h2{font-size:22px}.ed-area h3{font-size:19px}.ed-area h4{font-size:17px}
.ed-source{width:100%;min-height:280px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  border:0;padding:16px;outline:none;resize:vertical}
.ed-wrap.source-mode .ed-bar .ed-html{background:var(--primary);color:#fff}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:400}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.info{background:var(--info-bg);color:var(--info)}
.badge.danger{background:var(--danger-bg);color:var(--danger)}
.badge.leaf{background:var(--brand-100);color:var(--brand-800)}
.badge.grey{background:#eef1ee;color:var(--muted)}

/* ============================================================
   Article
   ============================================================ */
.article{max-width:780px;margin:0 auto}
.article .cover{width:100%;border-radius:var(--r-lg);margin-bottom:24px}
.article-content{font-size:16.5px;line-height:1.85}
.article-content p{margin:0 0 18px}
.article-content h2,.article-content h3{margin:32px 0 12px}
.article-content img{border-radius:var(--r);margin:10px 0}
.article-content blockquote{margin:22px 0;padding:16px 24px;background:var(--brand-050);
  border-left:4px solid var(--brand-500);border-radius:0 var(--r) var(--r) 0;color:#3d4a3f}
.article-content ul,.article-content ol{padding-left:22px}
.article-content li{margin-bottom:8px}
.article-content a{color:var(--primary);border-bottom:1px solid var(--brand-300)}
.article-content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.article-content th,.article-content td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.article-content th{background:var(--brand-050);font-weight:500}

/* บล็อกเรื่องเล่า — ใช้โครงเดียวกับ .card ให้เข้าชุดกับการ์ดอื่นที่อยู่ถัดลงไปในหน้า
   ของเดิมตั้ง background เป็น var(--sand) ซึ่งเป็นสีเดียวกับพื้นหลังหน้าเว็บพอดี
   กล่องจึงมองไม่เห็น เหลือแค่ขีดเขียวลอย ๆ กับตัวหนังสือ ดูหลุดจากการ์ดขาวรอบข้าง
   (มุมโค้ง 0 r r 0 ก็ไม่มีผล เพราะไม่มีเส้นขอบให้โค้ง)
   ตอนนี้เป็นการ์ดขาวเต็มใบ เหลือขีดเขียวไว้เป็นจุดสังเกตว่าเป็นส่วนเล่าเรื่อง ไม่ใช่ข้อมูลสเปก */
.story{border-left:4px solid var(--brand-500)}
.story .card-head{background:var(--brand-050);border-bottom-color:var(--brand-100)}
.story .card-body{color:#3d4a3f}
.story .article-content p:last-child{margin-bottom:0}

/* ============================================================
   Forms
   ============================================================ */
.auth-box{max-width:440px;margin:24px auto;padding:34px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.auth-box h1{font-size:26px;text-align:center;margin-bottom:6px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;margin-bottom:6px}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px}
.field input,.field textarea,.field select,
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],
input[type=search],input[type=url],textarea,select{
  width:100%;padding:11px 14px;border:1px solid var(--line-strong);border-radius:var(--r);
  font-family:inherit;font-size:14.5px;font-weight:300;background:#fff;color:var(--text);transition:.15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(65,127,73,.14)}
textarea{min-height:110px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto}

/* ช่องเลือกไฟล์ — ของเดิมปล่อยเป็นปุ่มดิบของเบราว์เซอร์ ("Choose File / No file chosen")
   ซึ่งหน้าตาคนละโลกกับช่องกรอกอื่น และเปลี่ยนไปตามเบราว์เซอร์/ภาษาเครื่อง
   ใช้กับทุกหน้าที่มีอัปโหลด (โปรไฟล์ · สินค้า · โลโก้ร้าน · สมัครร้าน · ฟอร์ม) */
input[type=file]{width:100%;padding:9px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:#fff;font-family:inherit;font-size:13.5px;color:var(--muted);
  cursor:pointer;transition:.15s}
input[type=file]:hover{border-color:var(--brand-300);background:var(--brand-050)}
input[type=file]::file-selector-button{
  margin:-2px 12px -2px 0;padding:8px 15px;border:0;border-radius:var(--r-sm);
  background:var(--primary);color:#fff;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;
  transition:.15s}
input[type=file]::file-selector-button:hover{background:var(--secondary)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid2[hidden]{display:none}
.radio-card{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line-strong);
  border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:.15s;margin-bottom:10px;background:#fff}
.radio-card[hidden]{display:none}
/* ตัวเลือกที่ยังเลือกไม่ได้ในตอนนี้ — โชว์ไว้ให้เห็นว่ามีอยู่ แต่กดไม่ได้ พร้อมบอกเหตุผลใน <small> */
.radio-card.is-off{opacity:.55;cursor:not-allowed;background:#fafbfa}
.radio-card.is-off:hover{border-color:var(--line-strong);background:#fafbfa}
.radio-card:hover{border-color:var(--brand-300);background:var(--brand-050)}
.radio-card.on{border-color:var(--primary);background:var(--brand-050);box-shadow:0 0 0 3px rgba(65,127,73,.1)}
.radio-card b{display:block;font-weight:400;font-size:14.5px}
.radio-card small{color:var(--muted)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.qty button{width:38px;height:40px;border:0;background:#fff;cursor:pointer;font-size:15px;color:var(--primary)}
.qty button:hover{background:var(--brand-050)}
.qty span,.qty input{width:48px;text-align:center;font-size:15px;border:0;padding:0}

/* ============================================================
   Alerts
   ============================================================ */
.alert{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r);
  margin-bottom:18px;font-size:14px;border:1px solid transparent}
.alert.success{background:var(--ok-bg);color:var(--ok);border-color:#bce8c8}
.alert.error{background:var(--danger-bg);color:var(--danger);border-color:#f6cccc}
.alert.info{background:var(--info-bg);color:var(--info);border-color:#c9d9fb}
.alert.warning{background:var(--warn-bg);color:var(--warn);border-color:#f0e0b6}

/* ============================================================
   Layout helpers
   ============================================================ */
.row{display:flex;align-items:center;gap:12px}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.two-col{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start}
.sidebar-col{position:sticky;top:calc(var(--nav-h) + 16px)}
.browse{display:grid;grid-template-columns:264px 1fr;gap:28px;align-items:start}
.filters{position:sticky;top:calc(var(--nav-h) + 16px)}
.fgroup{padding:16px 0;border-bottom:1px solid var(--line)}
.fgroup:last-child{border:0}
.fgroup h4{font-size:14px;margin-bottom:12px}
.fopt{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px;cursor:pointer}
.fopt .n{margin-left:auto;font-size:12px;color:var(--muted)}
/* ไอคอน fa-circle ทึบตัน ถ้าไม่กำหนดสี จะสืบสีตัวหนังสือ (เกือบดำ) มาใช้
   ตัวเลือกที่ยังไม่ได้กดเลยกลายเป็นจุดดำทึบทุกอัน หน้าตาเหมือนเลือกไว้หมดทุกตัว
   ทั้งที่ตั้งใจให้ดูจางกว่าตัวที่เลือกอยู่ (.fopt.on ด้านล่างเป็นสีเขียวของจริง) */
.fopt i{color:var(--line-strong)}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}

/* ============================================================
   ขั้นตอนการทำงาน / ค่าบริการ
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.steps::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:2px;background:var(--brand-500);opacity:.5}
.step{text-align:center;padding:0 10px}
.step .n{width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;display:grid;
  place-items:center;margin:0 auto 14px;font-size:18px;border:5px solid var(--sand);position:relative;z-index:2}
.step b{display:block;font-weight:500;font-size:15px;margin-bottom:4px}
.step small{color:var(--muted);line-height:1.55;display:block}

.pricebox{background:var(--brand-050);border:1px solid var(--brand-100);border-radius:var(--r-lg);padding:18px 20px;margin:16px 0}
.pricerow{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:4px 0;color:var(--muted)}
.pricerow.total{border-top:1px dashed var(--line-strong);margin-top:8px;padding-top:12px;
  color:var(--text);font-size:16px;font-weight:500}

/* ============================================================
   Timeline สถานะการหิ้ว
   ============================================================ */
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:13px;top:6px;bottom:14px;width:2px;background:var(--line)}
.tl{position:relative;padding-bottom:26px}
.tl:last-child{padding-bottom:0}
.tl .dot{position:absolute;left:-34px;top:2px;width:28px;height:28px;border-radius:50%;background:#fff;
  border:2px solid var(--line);display:grid;place-items:center;font-size:11px;color:var(--muted);z-index:2}
.tl.done .dot{background:var(--primary);border-color:var(--primary);color:#fff}
.tl.now .dot{background:var(--accent);border-color:var(--accent);color:var(--secondary);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 24%, transparent)}
.tl b{display:block;font-weight:400;font-size:15px}
.tl small{color:var(--muted)}

/* ============================================================
   Chat
   ============================================================ */
/* ความสูงของทั้งห้องแชทและรายการห้อง ใช้ค่าเดียวกัน จะได้สูงเท่ากันพอดี
   ไม่ใช่ 420px ตายตัว — จอใหญ่จะได้ไม่เหลือที่ว่างข้างล่างเปล่า ๆ จอเตี้ยก็ไม่ล้นจอ */
.chat-cols{--chat-h:clamp(380px, calc(100vh - 300px), 640px)}
.chat{display:flex;flex-direction:column;height:var(--chat-h)}

/* รายการห้องเลื่อนในกล่องตัวเอง ไม่ยืดหน้าเว็บลงไปเรื่อย ๆ
   (ร้านที่มีออเดอร์เยอะ รายการจะยาวกว่าห้องแชทมาก ต้องเลื่อนทั้งหน้าเพื่อดูห้องล่าง ๆ)
   จอเล็กไม่ต้องจำกัด เพราะตอนนั้นรายการคือทั้งหน้าอยู่แล้ว เลื่อนหน้าปกติถูกกว่า */
@media(min-width:901px){
  .chat-list{max-height:var(--chat-h);overflow-y:auto;overscroll-behavior:contain}
}
.chat-body{flex:1;overflow-y:auto;padding:18px 20px;background:var(--brand-050);
  display:flex;flex-direction:column;gap:12px}
.bubble{max-width:76%;padding:10px 15px;border-radius:16px;font-size:14px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-1)}
.bubble.me{align-self:flex-end;background:var(--primary);color:#fff;border-color:var(--primary)}
.bubble small{display:block;font-size:11px;opacity:.65;margin-top:3px}
/* ---------- แถบพิมพ์ข้อความ ----------
   ปุ่มกลมสองข้าง ช่องพิมพ์เป็นแคปซูลตรงกลาง ความสูงเท่ากันหมด 40px
   ของเดิมเป็นกล่องสี่เหลี่ยมขอบคม + ปุ่มคนละทรง ดูเป็นฟอร์มดิบ ๆ ไม่เหมือนแชท */
.chat-input{display:flex;gap:8px;align-items:center;padding:10px 12px;
  border-top:1px solid var(--line);background:#fff}

.ci-attach{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);font-size:16px;cursor:pointer;transition:.15s}
.ci-attach:hover{background:var(--brand-050);color:var(--primary)}

/* กำหนดความสูงตายตัวให้เท่าปุ่มกลมสองข้าง (40px)
   ถ้าปล่อยให้ความสูงมาจาก padding ของช่อง input ตัวโลก จะได้ 46px ไม่เท่าปุ่ม */
.ci-field{flex:1;min-width:0;height:40px;display:flex;align-items:center;background:var(--brand-050);
  border:1px solid transparent;border-radius:var(--r-pill);padding:0 16px;transition:.15s}
.ci-field:focus-within{background:#fff;border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)}
.ci-field input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;box-shadow:none;
  padding:0;margin:0;font:inherit;font-size:14.5px;color:var(--text)}
.ci-field input::placeholder{color:var(--muted)}

.ci-send{width:40px;height:40px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--primary);color:#fff;font-size:15px;display:grid;place-items:center;transition:.15s}
.ci-send:hover:not(:disabled){background:var(--brand-800);transform:scale(1.05)}
.ci-send:disabled{background:var(--line-strong);cursor:default}
/* ไอคอนเครื่องบินกระดาษเอียงอยู่แล้ว ขยับเข้ามานิดให้ดูอยู่กลางวงจริง ๆ */
.ci-send i{transform:translateX(-1px)}

/* iOS Safari ซูมหน้าจอเองทุกครั้งที่โฟกัสช่องที่ฟอนต์เล็กกว่า 16px
   แชทเป็นหน้าที่พิมพ์บ่อยที่สุด ถ้าปล่อยไว้จะเด้งซูมเข้า–ออกตลอด */
@media(max-width:900px){
  .ci-field input{font-size:16px}
}

/* ---------- หัวห้อง: บอกว่าคุยกับใคร เรื่องสินค้าอะไร ---------- */
.chat-peer{display:flex;gap:11px;align-items:center;min-width:0}
.chat-peer-pic{width:40px;height:40px;border-radius:12px;overflow:hidden;flex:none;
  background:var(--brand-050);display:grid;place-items:center;color:var(--brand-500);font-size:15px}
.chat-peer-pic img{width:100%;height:100%;object-fit:cover;display:block}
.chat-peer-txt{min-width:0;line-height:1.3}
.chat-peer-txt b{display:block;font-size:15px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-peer-txt small{display:block;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-peer-meta{display:flex!important;align-items:center;gap:6px;margin-top:3px}
.chat-peer-meta .badge{font-size:10px}

/* ---------- ข้อความระบบ + เส้นคั่นวัน ---------- */
.chat-sys{align-self:center;max-width:85%;text-align:center;font-size:12.5px;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;line-height:1.6}
.chat-sys b{display:block;color:var(--primary);font-weight:500;font-size:13px;margin-bottom:2px}
.chat-sys i{display:block;font-style:normal;font-size:10.5px;color:var(--line-strong);margin-top:4px}

.chat-daysep{align-self:center;display:flex;align-items:center;gap:10px;width:100%;
  color:var(--muted);font-size:11.5px;margin:4px 0}
.chat-daysep::before,.chat-daysep::after{content:'';flex:1;height:1px;background:var(--line)}

/* ============================================================
   Tabs / Pagination / Breadcrumb
   ============================================================ */
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin:32px 0 22px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}   /* เส้นสกรอลบาร์ใต้แท็บบนมือถือดูเหมือนขีดเทาเกินมา */
.tabs a{padding:10px 0;font-size:15px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.on,.tabs a.active{color:var(--primary);border-color:var(--primary)}

/* ============================================================
   หน้าบัญชีของฉัน
   ============================================================ */

/* หัวบัญชี — การ์ดรูปโปรไฟล์ + ตัวเลขสรุป */
.ac-head{padding:18px;margin-top:6px}
.ac-head-main{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.ac-ava{width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--primary),var(--secondary));
  color:#fff;font-size:26px;font-weight:600;overflow:hidden}
.ac-ava img{width:100%;height:100%;object-fit:cover}
.ac-head-txt{flex:1;min-width:0}
.ac-head-txt h1{font-size:23px;margin:0;line-height:1.3;overflow-wrap:anywhere}
.ac-head-txt p{margin:3px 0 0;font-size:13.5px;overflow-wrap:anywhere}
.ac-role{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:3px 10px;
  border-radius:999px;background:var(--brand-050);color:var(--primary);font-size:12px;font-weight:500}
.ac-head-btn{flex:none}

.ac-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.ac-stats div{text-align:center}
.ac-stats b{display:block;font-size:21px;font-weight:600;color:var(--primary);line-height:1.2}
.ac-stats small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.ac-stats i{font-size:11px}

/* ============================================================
   หน้าสมัครเปิดร้านค้า
   ============================================================ */

/* แบนเนอร์หัวหน้า — ไล่สีแบรนด์ + เงาภูเขา (ภาษาภาพชุดเดียวกับโปสเตอร์ QR) */
.ap-hero{position:relative;overflow:hidden;text-align:center;color:#fff;
  border-radius:var(--r-lg);padding:34px 24px 46px;margin-bottom:20px;
  background:linear-gradient(155deg,var(--brand-500),var(--secondary))}
.ap-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:74px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 78 L70 44 L140 82 L215 38 L300 86 L375 48 L455 88 L530 52 L600 84 L600 120 Z' fill='%23ffffff' opacity='.10'/%3E%3Cpath d='M0 120 L0 96 L90 66 L180 100 L275 62 L370 102 L470 70 L600 104 L600 120 Z' fill='%23ffffff' opacity='.13'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat}
.ap-hero>*{position:relative;z-index:1}
.ap-hero-chip{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
  padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.18);
  font-size:12.5px;font-weight:500;letter-spacing:.01em}
.ap-hero h1{font-size:30px;line-height:1.3;margin:0 0 10px}
.ap-hero p{margin:0;font-size:15px;line-height:1.75;color:rgba(255,255,255,.85)}

/* ข้อดี 4 ข้อ — แถวไอคอนกลม ไม่ใช่การ์ดใบใหญ่ จะได้ไม่ต้องเลื่อนยาว */
.ap-perks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.ap-perk{display:flex;gap:12px;align-items:flex-start;padding:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.ap-perk>span{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-050);color:var(--primary);font-size:15px}
.ap-perk b{display:block;font-weight:500;font-size:14.5px;line-height:1.4}
.ap-perk small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);line-height:1.6}

/* 3 ขั้นตอน */
.ap-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px;
  padding:16px;background:var(--brand-050);border-radius:var(--r);text-align:center}
.ap-step>span{width:30px;height:30px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;
  background:var(--primary);color:#fff;font-size:14px;font-weight:600}
.ap-step b{display:block;font-weight:500;font-size:13.5px;line-height:1.4}
.ap-step small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.5}

/* ฟอร์มใบสมัคร */
.ap-form{padding:0;overflow:hidden}
.ap-form-head{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--line);background:var(--bg)}
.ap-form-head>i{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--primary);color:#fff;font-size:15px}
.ap-form-head b{display:block;font-weight:500;font-size:16px}
.ap-form-head small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}

.ap-sec{padding:18px 20px 4px;border-bottom:1px solid var(--line)}
.ap-sec-ttl{display:flex;align-items:center;gap:9px;margin-bottom:14px;
  font-size:14.5px;font-weight:500;color:var(--primary)}
.ap-sec-ttl>span{width:23px;height:23px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-100);color:var(--primary);font-size:12px;font-weight:600}

.ap-submit{padding:18px 20px 20px}
.ap-submit p{margin:10px 0 0;font-size:12.5px;text-align:center}

/* หน้ารอตรวจสอบ */
.ap-wait{padding:40px 24px}
.ap-wait-ico{width:66px;height:66px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:var(--warn-bg);color:var(--warn);font-size:26px}
.ap-wait h1{font-size:22px;margin:0 0 8px;line-height:1.4}
.ap-wait-box{display:inline-flex;flex-direction:column;gap:7px;text-align:left;
  margin:18px 0;padding:14px 18px;border-radius:var(--r);background:var(--brand-050)}
.ap-wait-box p{display:flex;align-items:center;gap:10px;margin:0;font-size:14px}
.ap-wait-box i{width:16px;text-align:center;color:var(--primary);flex:none}

@media (max-width:560px){
  .ap-hero{padding:28px 18px 40px}
  .ap-hero h1{font-size:25px}
  .ap-hero p{font-size:14px}
  .ap-perks{grid-template-columns:1fr;gap:10px}
  .ap-perk{padding:12px}
  .ap-steps{grid-template-columns:1fr;gap:14px;text-align:left}
  .ap-step{display:grid;grid-template-columns:30px 1fr;column-gap:11px;align-items:center}
  .ap-step>span{margin:0;grid-row:span 2}
  .ap-step small{margin-top:0}
  .ap-sec,.ap-form-head,.ap-submit{padding-left:16px;padding-right:16px}
}

/* กล่องอธิบายทางที่เงินมาถึงร้าน (หน้ารายได้ของร้าน) */
.payways{margin-bottom:18px;border-color:var(--brand-100);background:var(--brand-050)}
.payways-ttl{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:500;
  color:var(--primary);margin-bottom:14px}
.payways-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.payways-grid>div{position:relative;padding:13px 14px 13px 46px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.payways-grid span{position:absolute;left:13px;top:13px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--primary);color:#fff;font-size:12.5px;font-weight:600}
.payways-grid b{display:block;font-weight:500;font-size:14px;line-height:1.4}
.payways-grid small{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.6}
.payways-note{margin:12px 0 0;font-size:12.5px;line-height:1.7}
@media (max-width:620px){
  .payways-grid{grid-template-columns:1fr}
}

/* ============================================================
   เนื้อหาหน้าที่สร้างจากหลังบ้าน — ทำให้ HTML ธรรมดาดูมีดีไซน์
   ============================================================
   ของเดิมเป็นตัวหนังสือล้วนไล่ลงมาทั้งหน้า อ่านแล้วไม่รู้ว่าตรงไหนสำคัญ

   จงใจจัดสไตล์จาก **แท็กมาตรฐาน** (ol / ul / h2 / table / blockquote)
   ไม่ใช่คลาสพิเศษ เพราะเนื้อหาพวกนี้แก้จากหลังบ้านด้วยตัวแก้ข้อความ
   คนแก้ทีหลังพิมพ์รายการเลข/หัวข้อตามปกติก็ได้หน้าตาแบบนี้เลย ไม่ต้องรู้จักคลาสอะไร */

/* รายการเลข = ขั้นตอน — ทำเป็นการ์ดมีเลขวงกลม */
.article-content ol{list-style:none;padding:0;margin:0 0 20px;counter-reset:pgstep}
.article-content ol>li{counter-increment:pgstep;position:relative;
  padding:14px 18px 14px 60px;margin:0 0 10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  font-size:15.5px;line-height:1.75}
.article-content ol>li::before{content:counter(pgstep);position:absolute;left:16px;top:15px;
  width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:600;line-height:1}
.article-content ol>li>strong:first-child{color:var(--primary)}

/* รายการหัวข้อ = จุดสีแบรนด์ ไม่ใช่จุดดำของเบราว์เซอร์ */
.article-content ul{list-style:none;padding:0;margin:0 0 20px}
.article-content ul>li{position:relative;padding-left:24px;margin-bottom:10px}
.article-content ul>li::before{content:'';position:absolute;left:5px;top:.72em;
  width:8px;height:8px;border-radius:50%;background:var(--brand-500)}
/* รายการซ้อนในขั้นตอน ไม่ต้องมีระยะล่างเยอะ */
.article-content ol ul,.article-content ul ul{margin:8px 0 0}

/* หัวข้อ — มีเส้นคั่นให้กวาดตาหาได้ว่าเรื่องใหม่เริ่มตรงไหน */
.article-content h2{font-size:20px;font-weight:600;color:var(--secondary);
  margin:34px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--brand-100)}
.article-content h2:first-child{margin-top:0}
.article-content h3{font-size:16.5px;font-weight:500;color:var(--primary);margin:24px 0 8px}

/* ตาราง — ขอบมนและแถบสลับสี อ่านง่ายกว่าตารางเส้นเต็ม */
.article-content table{border:1px solid var(--line);border-radius:var(--r);
  border-collapse:separate;border-spacing:0;overflow:hidden}
.article-content th,.article-content td{border:0;border-bottom:1px solid var(--line);padding:11px 16px}
.article-content tbody tr:last-child td{border-bottom:0}
.article-content tbody tr:nth-child(even){background:var(--bg)}
.article-content th{background:var(--brand-050);color:var(--secondary)}
.article-content td:last-child{font-weight:500;color:var(--primary);white-space:nowrap}

/* คำพูด/สโลแกน */
.article-content blockquote{font-size:17.5px;line-height:1.8;color:var(--secondary);
  background:var(--brand-050);border-left:4px solid var(--brand-500)}
.article-content blockquote p:last-child{margin-bottom:0}

/* ---- บล็อกเสริมที่เขียนในเนื้อหาได้ (div รับ class ผ่านตัวกรอง HTML) ---- */

/* กล่องเน้น — ใช้กับเรื่องที่พลาดแล้วเสียหาย เช่น "ต้องตั้งบัญชีรับเงินก่อน" */
.article-content .pg-note{display:flex;gap:13px;align-items:flex-start;
  margin:0 0 20px;padding:15px 18px;border-radius:var(--r);
  background:var(--warn-bg);border:1px solid #f1e0b8;font-size:15px;line-height:1.75}
.article-content .pg-note::before{content:'\f06a';font-family:'Font Awesome 6 Free';font-weight:900;
  color:var(--warn);font-size:17px;flex:none;line-height:1.5}
.article-content .pg-note p:last-child{margin-bottom:0}
.article-content .pg-note.ok{background:var(--brand-050);border-color:var(--brand-100)}
.article-content .pg-note.ok::before{content:'\f058';color:var(--primary)}

/* ปุ่มในเนื้อหา — ตัวกรอง HTML ไม่ยอมให้ <a> มี class จึงครอบด้วย div แทน
   ของเดิมพื้นสีเขียวอ่อน (--accent) ตัวหนังสือเขียวเข้ม (--secondary) — คำนวณ contrast
   ผ่านเกณฑ์ก็จริง แต่สีมันโทนเดียวกันทั้งคู่ ทำให้ตัวหนังสือจมไปกับพื้น อ่านฝืดตา
   เปลี่ยนเป็นพื้น-ตัวหนังสือชุดเดียวกับปุ่มหลักทั้งเว็บ (.btn) ให้เห็นชัดว่าเป็นปุ่มกดได้ */
.article-content .pg-cta{margin:24px 0}
.article-content .pg-cta a{display:inline-flex;align-items:center;gap:9px;
  padding:12px 26px;border-radius:var(--r-pill);border:0;
  background:var(--primary);color:#fff;font-size:15px;font-weight:500;
  transition:.15s}
.article-content .pg-cta a:hover{background:var(--brand-800);color:#fff}

/* ลิงก์ "อ่านต่อ" ท้ายหน้าที่สร้างจากหลังบ้าน — ของเดิมอ่านจบแล้วตัน ต้องกดย้อนกลับเอง */
.pg-near{max-width:780px;margin:38px auto 0;padding-top:24px;border-top:1px solid var(--line)}
.pg-near-ttl{font-size:14px;font-weight:500;color:var(--primary);margin-bottom:12px}
.pg-near-ttl i{margin-right:7px}
.pg-near-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.pg-near-list a{display:flex;align-items:center;gap:10px;padding:12px 15px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  font-size:14.5px;color:var(--text);transition:.15s}
.pg-near-list a:hover{border-color:var(--brand-300);background:var(--brand-050);color:var(--primary)}
.pg-near-list i{margin-left:auto;font-size:11px;color:var(--brand-300);flex:none}

/* ============================================================
   ฟอร์มที่สร้างจากหลังบ้าน (render_form)
   ============================================================
   ตัวแสดงฟอร์มพิมพ์คลาส .sa-form / .sa-form-grid / .sa-field / .sa-choices ออกมา
   แต่ **ไม่เคยมีกฎ CSS ให้เลยสักตัว** ทั้งใน site.css และ admin.css
   ฟอร์มทุกที่จึงกองเป็นบล็อกเปล่า ๆ ไม่มีระยะห่าง ไม่มีคอลัมน์ครึ่ง
   (กระทบ contact.php · form.php · บล็อกฟอร์มในหน้าที่สร้างจากหลังบ้าน) */
.sa-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px}
.sa-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sa-field.full{grid-column:1 / -1}
.sa-field>label{font-size:13.5px;color:var(--text)}
.sa-field .req{color:var(--danger);margin-left:2px}
.sa-field>small{font-size:12px;line-height:1.5}
.sa-field h3{font-size:16px;font-weight:500}

/* ช่องที่กรอกผิด — ต้องเห็นว่าเป็นช่องไหนโดยไม่ต้องอ่านข้อความ */
.sa-field.has-error input,.sa-field.has-error textarea,.sa-field.has-error select{
  border-color:var(--danger);background:var(--danger-bg)}
.err-text{color:var(--danger);font-size:12px;line-height:1.5}

/* ตัวเลือกแบบวงกลม/ติ๊กถูก */
.sa-choices{display:flex;flex-wrap:wrap;gap:8px 16px;padding:2px 0}
.sa-choices label,.sa-consent{display:inline-flex;align-items:center;gap:7px;
  font-size:14px;cursor:pointer;line-height:1.5}
.sa-consent{align-items:flex-start}
.sa-choices input,.sa-consent input{margin:0;flex:none}

.sa-form>.alert{margin-bottom:0}
.sa-form form>.btn{margin-top:16px}
.sa-form>p.muted{font-size:13.5px;line-height:1.8;margin:0 0 14px}

@media (max-width:600px){
  .sa-form-grid{grid-template-columns:1fr}
}

/* ============================================================
   หน้าติดต่อเรา
   ============================================================
   ของเดิมเป็นรายการข้อความล้วนข้างฟอร์ม และช่องทางที่ยังไม่ได้ตั้งค่า
   (เบอร์โทร/ที่อยู่) ก็ซ่อนตัวเองทิ้ง เหลืออีเมลบรรทัดเดียว หน้าเลยดูโล่ง */
.ct-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:20px}
.ct-left{display:flex;flex-direction:column;gap:14px}

.ct-ch{display:flex;flex-direction:column;gap:10px}
.ct-card{display:flex;align-items:center;gap:13px;padding:14px 15px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  color:var(--text);transition:.15s}
.ct-card:hover{border-color:var(--brand-300);background:var(--brand-050)}
.ct-ico{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:var(--brand-050);color:var(--primary);font-size:17px}
.ct-card:hover .ct-ico{background:var(--primary);color:#fff}
.ct-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ct-txt small{font-size:12px;color:var(--muted)}
.ct-txt b{font-weight:500;font-size:15px;overflow-wrap:anywhere;line-height:1.35}
.ct-txt em{font-style:normal;font-size:12px;color:var(--brand-500)}
.ct-go{color:var(--brand-300);font-size:12px;flex:none}

.ct-help-list{display:flex;flex-direction:column}
.ct-help-list a{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-top:1px solid var(--line);color:var(--text);transition:.12s}
.ct-help-list a:first-child{border-top:0}
.ct-help-list a:hover{background:var(--brand-050)}
.ct-help-ico{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--brand-050);color:var(--primary);font-size:14px}
.ct-help-list span:not(.ct-help-ico){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ct-help-list b{font-weight:500;font-size:14.5px;line-height:1.35}
.ct-help-list small{font-size:12.5px;color:var(--muted);line-height:1.5}
.ct-help-list>a>i:last-child{color:var(--brand-300);font-size:12px;flex:none}

.ct-form-note{font-size:13.5px;line-height:1.8;margin:0 0 16px}

@media (max-width:860px){
  .ct-wrap{grid-template-columns:1fr;gap:16px}
}

/* สมุดที่อยู่ */
.addr-card{padding:16px 16px 14px;margin-bottom:12px}
.addr-card.is-def{border-color:var(--brand-300);box-shadow:0 0 0 2px var(--brand-050),var(--sh-1)}

.addr-head{display:flex;align-items:center;gap:12px}
.addr-pin{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--brand-050);color:var(--primary);font-size:15px}
.addr-card.is-def .addr-pin{background:var(--primary);color:#fff}
.addr-who{flex:1;min-width:0}
.addr-who b{display:block;font-weight:500;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.addr-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.addr-chips .badge{font-size:11.5px}

.addr-lines{margin:12px 0 0;padding-left:50px}
.addr-lines p{display:flex;gap:9px;margin:0 0 5px;font-size:14px;color:var(--muted);line-height:1.6}
.addr-lines p:last-child{margin-bottom:0}
.addr-lines i{width:15px;text-align:center;color:var(--brand-300);flex:none;margin-top:4px;font-size:12.5px}
.addr-lines span{min-width:0;overflow-wrap:anywhere}

.addr-acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line)}
.addr-acts form{display:contents}
.addr-del{color:var(--danger)}
.addr-del:hover{background:var(--danger-bg)}

.addr-edit{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.addr-edit[hidden]{display:none}
.addr-edit-ttl{font-size:13.5px;font-weight:500;color:var(--primary);margin-bottom:12px}
.addr-edit-ttl i{margin-right:6px}

@media (max-width:520px){
  .addr-lines{padding-left:0}
  .addr-acts .btn{flex:1 1 auto;justify-content:center}
}

/* ตัวกรองสถานะคำสั่งหิ้ว */
.ord-filter{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;
  scrollbar-width:none;-ms-overflow-style:none}
.ord-filter::-webkit-scrollbar{display:none}
.ord-filter button{flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  font:inherit;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.15s}
.ord-filter button:hover{border-color:var(--brand-300)}
.ord-filter button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.ord-filter button span{min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--brand-050);color:var(--primary);font-size:11px;font-weight:600;
  display:inline-grid;place-items:center}
.ord-filter button.on span{background:rgba(255,255,255,.22);color:#fff}

/* การ์ดคำสั่งหิ้ว 1 ใบ */
.ord-list{display:flex;flex-direction:column;gap:12px}
.ord-card{padding:0;overflow:hidden}
.ord-card[hidden]{display:none}

.ord-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:12px 15px;border-bottom:1px solid var(--line);background:var(--bg)}
.ord-code{font-weight:600;font-size:13.5px;letter-spacing:.02em}
.ord-date{font-size:12.5px;color:var(--muted)}
.ord-top .badge{margin-left:auto;white-space:nowrap}

.ord-body{display:flex;align-items:center;gap:13px;padding:14px 15px;color:var(--text)}
.ord-body:hover{background:var(--brand-050)}
.ord-pic{width:56px;height:56px;border-radius:10px;flex:none;overflow:hidden;
  background:var(--brand-050);display:grid;place-items:center;color:var(--brand-300);font-size:19px}
.ord-pic img{width:100%;height:100%;object-fit:cover}
.ord-item{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ord-item b{font-weight:500;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.ord-item small{font-size:12.5px;color:var(--muted)}
.ord-total{flex:none;text-align:right;display:flex;flex-direction:column;gap:2px}
.ord-total small{font-size:11.5px;color:var(--muted)}
.ord-total b{font-size:17px;font-weight:600;color:var(--primary);white-space:nowrap}

.ord-acts{display:flex;gap:8px;flex-wrap:wrap;padding:0 15px 14px}
.ord-acts form{display:contents}

@media (max-width:520px){
  .ac-head{padding:16px}
  .ac-head-btn{width:100%;justify-content:center;margin-top:2px}
  .ord-body{gap:11px;padding:13px}
  .ord-pic{width:50px;height:50px}
  /* ยอดรวมลงมาอยู่ใต้ชื่อสินค้า จอแคบจะได้ไม่บีบชื่อจนเหลือคำเดียวต่อบรรทัด */
  .ord-body{flex-wrap:wrap}
  .ord-total{width:100%;flex-direction:row;align-items:baseline;justify-content:flex-end;
    gap:7px;padding-top:2px;border-top:1px dashed var(--line);margin-top:2px}
  .ord-acts{padding:0 13px 13px}
  .ord-acts .btn{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   รายการห้องสนทนา
   ============================================================
   แต่ละแถวต้องตอบให้ได้ทันทีว่า "คุยกับใคร เรื่องสินค้าอะไร ล่าสุดเมื่อไหร่"
   ของเดิมมีแค่เลขออเดอร์กับข้อความท่อนเดียว เลยแยกไม่ออกว่าอันไหนคืออันไหน */
.chat-row{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;
  border-bottom:1px solid var(--line);position:relative;transition:.12s}
.chat-row:hover{background:var(--brand-050)}
.chat-row.on{background:var(--brand-050);box-shadow:inset 3px 0 0 var(--primary)}
.chat-row.unread{background:#fffdf7}
.chat-row.unread.on{background:var(--brand-050)}

.chat-row-pic{width:42px;height:42px;border-radius:12px;overflow:hidden;flex:none;
  background:var(--brand-050);display:grid;place-items:center;color:var(--brand-500);font-size:16px}
.chat-row-pic img{width:100%;height:100%;object-fit:cover;display:block}

.chat-row-main{flex:1;min-width:0}
.chat-row-top{display:flex;align-items:baseline;gap:8px}
.chat-row-top b{font-weight:500;font-size:14px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row-time{margin-left:auto;flex:none;font-size:11px;color:var(--muted)}
.chat-row.unread .chat-row-time{color:var(--warn)}

.chat-row-item{font-size:12px;color:var(--primary);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row-msg{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chat-row.unread .chat-row-msg{color:var(--text)}
.chat-row-msg i{font-size:10px;color:var(--brand-300)}

.chat-row-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.chat-row-foot .badge{font-size:10.5px}
.chat-row-code{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--line-strong)}

.chat-row-n{position:absolute;top:12px;right:12px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:600;
  display:grid;place-items:center}
/* มีป้ายจำนวนแล้ว เวลาต้องหลบไม่ให้ชนกัน */
.chat-row.unread .chat-row-time{margin-right:24px}

/* ============================================================
   กล่องยืนยัน/แจ้งเตือน (แทน confirm() กับ alert() ของเบราว์เซอร์)
   ============================================================
   z-index สูงกว่าป๊อปอัพอื่น (200–220) เพราะบางทีต้องถามยืนยันทับป๊อปอัพที่เปิดอยู่
   เช่น "ล้างบิล" ในเครื่องคิดเงิน */
.cfm{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px}
.cfm[hidden]{display:none}
.cfm-back{position:absolute;inset:0;background:rgba(18,32,20,.55)}
.cfm-box{position:relative;background:#fff;border-radius:var(--r-lg);width:100%;max-width:380px;
  padding:26px 24px 20px;text-align:center;box-shadow:var(--sh-3)}
.cfm-ico{width:54px;height:54px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--brand-050);color:var(--primary);font-size:23px}
.cfm-ico.danger{background:var(--danger-bg);color:var(--danger)}
.cfm-ico.info{background:var(--info-bg);color:var(--info)}
.cfm-box h3{font-size:18px;margin:0 0 8px}
.cfm-box p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
/* ช่องกรอกในกล่องกลาง (pphPrompt) */
.cfm-input{width:100%;margin:2px 0 4px;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;font:inherit;font-size:15px;background:var(--bg);color:var(--text);text-align:center}
.cfm-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--brand-050)}
.cfm-input[hidden],.cfm-box p[hidden]{display:none}

.cfm-acts{display:flex;gap:10px;margin-top:20px}
.cfm-acts .btn{flex:1}
.cfm-acts .btn[hidden]{display:none}

/* ============================================================
   ปุ่มลัดเข้าแชทมุมล่างขวา (เฉพาะจอใหญ่)
   ============================================================
   บนมือถือมีแถบเมนูล่างที่มีปุ่มแชทอยู่แล้ว ปุ่มลอยจะซ้ำและบังเนื้อหา จึงซ่อนไป
   z-index ต่ำกว่ากล่องแจ้งเตือนเด้ง (300) และป๊อปอัพ (200) เพื่อไม่ให้ไปบังของที่สำคัญกว่า */
.chat-fab{display:none}
@media(min-width:901px){
  .chat-fab{display:grid;place-items:center;position:fixed;right:22px;bottom:22px;z-index:120;
    width:54px;height:54px;border-radius:50%;background:var(--primary);color:#fff;font-size:21px;
    box-shadow:0 10px 26px -8px rgba(24,56,30,.55);transition:.18s}
  .chat-fab:hover{background:var(--brand-800);transform:translateY(-2px);
    box-shadow:0 14px 30px -8px rgba(24,56,30,.6)}
  .chat-fab-n{position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;padding:0 6px;
    border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:600;
    display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
  /* กล่องแจ้งเตือนเด้งอยู่มุมเดียวกัน — ยกขึ้นให้พ้นปุ่ม */
  .live-toasts{bottom:88px}
}
/* ============================================================
   แจ้งเตือนเด้ง (toast) — ใช้กับตัวอัปเดตสดในหัวเว็บ
   ============================================================
   วางมุมขวาล่างบนเดสก์ท็อป แต่บนมือถือต้องยกขึ้นเหนือแถบเมนูล่าง
   ไม่งั้นจะทับปุ่มสแกน/แชทจนกดไม่ได้ */
.live-toasts{position:fixed;right:16px;bottom:16px;z-index:300;
  display:flex;flex-direction:column;gap:8px;max-width:340px;pointer-events:none}
.live-toast{display:flex;gap:11px;align-items:flex-start;background:#fff;color:var(--text);
  border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--r);
  padding:12px 14px;box-shadow:var(--sh-3);pointer-events:auto;
  opacity:0;transform:translateY(10px);transition:.22s ease}
.live-toast.in{opacity:1;transform:none}
.live-toast > i{color:var(--primary);font-size:15px;margin-top:2px;flex:none}
.live-toast b{display:block;font-weight:500;font-size:13.5px;line-height:1.4}
.live-toast small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:2px}
.live-toast-x{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 2px;
  font-size:13px;margin-left:auto;flex:none}
.live-toast-x:hover{color:var(--danger)}
/* แถบเมนูล่างโผล่ที่ <=900px และสูงราว 58px + safe area — ต้องยก toast ให้พ้น
   ไม่งั้นจะทับปุ่มสแกน/แชทจนกดไม่ได้ */
@media(max-width:900px){
  .live-toasts{right:10px;left:10px;max-width:none;
    bottom:calc(58px + 12px + env(safe-area-inset-bottom))}
  body.has-buysticky .live-toasts{bottom:calc(74px + 12px + env(safe-area-inset-bottom))}
}

/* ============================================================
   สื่อของสินค้า (รูปย่อ + วิดีโอ)
   ============================================================ */
.pmedia{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.pmedia-tile{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--brand-050);padding:0;cursor:pointer;
  display:block;width:100%;transition:border-color .15s}
.pmedia-tile:hover{border-color:var(--brand-300)}
.pmedia-tile.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}
.pmedia-tile img{width:100%;height:100%;object-fit:cover;display:block}
.pmedia-blank{display:grid;place-items:center;width:100%;height:100%;color:var(--brand-500);font-size:24px}

/* ปุ่มเล่นบนรูปย่อของวิดีโอ — ต้องเห็นชัดบนรูปสว่างและรูปมืดเท่ากัน จึงใช้พื้นดำโปร่ง */
.pmedia-play{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.28);color:#fff;font-size:17px;pointer-events:none}
.pmedia-play i{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);
  display:grid;place-items:center;padding-left:3px}
.pmedia-tag{position:absolute;left:5px;bottom:5px;background:rgba(0,0,0,.62);color:#fff;
  font-size:10.5px;padding:1px 6px;border-radius:5px;pointer-events:none}

/* วิดีโอต้องเห็นครบเฟรม ไม่ใช่ครอปแบบรูปปก จึงเปลี่ยนพื้นเป็นดำตอนเล่น */
#mainImage.is-video{background:#000;font-size:0}
#mainImage.is-video>*{position:absolute;inset:0;width:100%;height:100%}

/* กรอบรูปใหญ่กดขยายดูเต็มจอได้ — ไอคอนขยายมุมล่างขวาบอกใบ้ว่ากดได้
   ไม่โชว์ตอนเป็นวิดีโอ (จะสับสนว่ากดแล้วขยายวิดีโอหรือเปล่า วิดีโอมีปุ่มเล่นเต็มจอของตัวเองอยู่แล้ว) */
#mainImage:not(.is-video){cursor:zoom-in}
#mainImage:not(.is-video)::after{content:'\f065';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;right:12px;bottom:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:14px;
  opacity:0;transition:opacity .15s;pointer-events:none}
#mainImage:not(.is-video):hover::after{opacity:1}

/* ---------- กล่องรูปเต็มจอ (lightbox) ----------
   เลื่อนดูรูปถัดไปได้แบบแกลลอรี่ — ปุ่มซ้าย-ขวา + ตัวนับ "1 / N" + แถบรูปย่อยกดลัดได้
   ทุกอย่างปักอยู่กับขอบจอเสมอ (ไม่ใช่ขอบรูป) เพราะ .imgbox เองเป็น position:fixed คลุมเต็มจอ
   ปุ่ม absolute จึงอิงกับกรอบนั้นตรง ๆ ไม่ต้องคำนวณตามขนาดรูปที่โตเล็กไม่เท่ากันในแต่ละรูป

   ปุ่มลูกศร/ปิด ของเดิมพื้นขาวโปร่งบาง (rgba(255,255,255,.14)) พอไปวางทับรูปโทนสว่าง
   (เช่นพื้นหลังสีขาว/เขียวอ่อนของรูปสินค้า) จะจางจนแทบมองไม่เห็นปุ่มเลย เปลี่ยนเป็นพื้นดำเข้ม
   ขึ้น + ขอบบาง ให้เห็นชัดเจนไม่ว่ารูปด้านหลังจะโทนสีอะไร */
.imgbox{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:16px;
  background:rgba(10,16,11,.92)}
.imgbox[hidden]{display:none}
.imgbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.imgbox-x,.imgbox-nav{border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.55);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:.15s}
.imgbox-x:hover,.imgbox-nav:hover{background:rgba(0,0,0,.75);border-color:#fff}
.imgbox-x{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;font-size:17px}
.imgbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border-radius:50%;font-size:18px}
.imgbox-nav[hidden]{display:none}
.imgbox-prev{left:14px}
.imgbox-next{right:14px}
.imgbox-count{position:absolute;left:50%;bottom:98px;transform:translateX(-50%);
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;padding:5px 14px;border-radius:999px}
.imgbox-count[hidden]{display:none}

/* แถบรูปย่อยกดลัดไปรูปที่อยากดูได้ทันที ไม่ต้องกดเลื่อนทีละรูป */
.imgbox-thumbs{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));overflow-x:auto;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6) 45%)}
.imgbox-thumbs[hidden]{display:none}
.imgbox-thumb{flex:none;width:54px;height:54px;border-radius:8px;overflow:hidden;padding:0;
  border:2px solid transparent;opacity:.6;cursor:pointer;background:#000;transition:.15s}
.imgbox-thumb:hover{opacity:.9}
.imgbox-thumb.on{border-color:#fff;opacity:1}
.imgbox-thumb img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:560px){
  .imgbox{padding:10px}
  .imgbox-x{top:10px;right:10px;width:38px;height:38px}
  .imgbox-nav{width:40px;height:40px;font-size:15px}
  .imgbox-prev{left:6px}
  .imgbox-next{right:6px}
  .imgbox-count{bottom:78px;font-size:12px}
  .imgbox-thumbs{padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));gap:6px}
  .imgbox-thumb{width:46px;height:46px}
}

/* ---------- สื่อประกอบรีวิวจากผู้ซื้อ ---------- */
.rv-media{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rv-media a,.rv-media .rv-vid{width:84px;height:84px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);flex:none;display:block;background:#000}
.rv-media img{width:100%;height:100%;object-fit:cover;display:block}
.rv-media .rv-vid{width:150px;height:84px}
.rv-media .rv-vid video,.rv-media .rv-vid iframe{width:100%;height:100%;display:block;border:0}

@media(max-width:560px){
  .pmedia{grid-template-columns:repeat(4,1fr);gap:8px}
  .rv-media a{width:72px;height:72px}
  .rv-media .rv-vid{width:100%;height:auto;aspect-ratio:16/10}
}

/* --stick-top = ขอบล่างของเมนูหลักที่ตรึงอยู่ ค่าจริงต่างกันตามหน้า
   (แถบผู้ดูแลดัน .site-header ลงมา 36px และเมนูสูงจริง 65px ไม่ใช่ 64)
   JS ในหน้าสินค้าวัดแล้วเขียนทับค่านี้ให้ตรงเป๊ะ ตรงนี้เป็นค่าสำรองตอน JS ยังไม่ทำงาน */
:root{--stick-top:calc(var(--nav-h) + 1px); --tabbar-h:58px}

/* แถบหัวข้อแบบตรึง (หน้าสินค้า)
   ตรึงใต้เมนูหลักที่ตรึงอยู่แล้ว จึงต้องเว้นความสูงเมนู ไม่ใช่ top:0
   z-index ต้องต่ำกว่าเมนูหลัก (100) แต่สูงกว่าเนื้อหาที่เลื่อนผ่านข้างใต้
   ต้องมีพื้นหลังทึบ ไม่งั้นจะเห็นตัวหนังสือด้านล่างทะลุขึ้นมาซ้อน
   ระยะ padding ซ้ายขวาแบบติดลบ กันเงา/ขอบการ์ดโผล่ข้างแถบตอนเลื่อน */
.tabs.tabs-sticky{position:sticky;top:var(--stick-top);z-index:20;
  background:var(--sand);margin-left:-10px;margin-right:-10px;
  padding-left:10px;padding-right:10px;
  /* กันขอบล่างหายตอน sticky ในบางเบราว์เซอร์ */
  box-shadow:0 1px 0 var(--line)}

/* ------------------------------------------------------------
   แถบแท็บที่เลื่อนได้ — ต้องดูออกว่า "ยังมีต่อ"
   ------------------------------------------------------------
   ของเดิมแท็บสุดท้ายโดนตัดครึ่งเฉย ๆ ซึ่งอ่านได้แค่ว่าจอแคบไป
   ไม่ได้บอกว่าเลื่อนได้ จึงใส่เงาไล่สี + ลูกศรไว้ริมด้านที่ยังมีต่อ

   ทำด้วย ::before/::after ที่เป็น position:sticky ไม่ใช่ background ของตัว .tabs
   เพราะ background วาดอยู่ "ใต้" ตัวหนังสือ แท็บจะลอยทับจนไล่สีไม่มีผลอะไรเลย
   (ลองแล้วรอบหนึ่ง — เงาอยู่ครบแต่ตัวหนังสือยังเข้มเท่าเดิม)
   sticky ทำให้กลายเป็นชั้นวางทับ และค้างอยู่ริมขอบขณะที่แท็บไหลลอดข้างใต้

   ที่ไม่ใช้ div ครอบเพราะจะไปพัง position:sticky ของแท็บหน้าสินค้า
   (กรอบครอบกลายเป็น containing block ให้ sticky แล้วมันจะหยุดติดหัวเว็บ)

   คลาส sc-l / sc-r เปิด-ปิดโดย JS ใน includes/footer.php ตามตำแหน่งที่เลื่อนอยู่ */
.tabs{background-color:transparent;scroll-behavior:smooth}
.tabs.tabs-sticky{background-color:var(--sand)}

.tabs::before,.tabs::after{
  content:'';position:sticky;flex:none;z-index:2;pointer-events:none;
  width:58px;align-self:stretch;display:none;
  background-repeat:no-repeat}
.tabs.sc-l::before,.tabs.sc-r::after{display:block}

/* margin ติดลบเท่าความกว้าง = ไม่กินที่ในแถว แค่ลอยทับอย่างเดียว */
.tabs::before{left:0;margin-right:-58px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23417f49' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"),
    linear-gradient(to right, var(--sand) 30%, rgba(250,248,243,0));
  background-position:left 2px center, left center;
  background-size:13px 13px, 100% 100%}

.tabs::after{right:0;margin-left:-58px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23417f49' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"),
    linear-gradient(to left, var(--sand) 30%, rgba(250,248,243,0));
  background-position:right 2px center, right center;
  background-size:13px 13px, 100% 100%}

/* ============================================================
   แถบเมนูพอร์ทัลร้านค้า
   ============================================================
   จอใหญ่เป็นแถบแท็บแนวนอน · จอเล็กเป็นตารางไอคอน
   ที่ไม่ทำเป็นแถบเลื่อนบนจอเล็กเพราะเมนูมี 9 อัน เมนูท้าย ๆ
   (คิวอาร์โค้ด · รายได้) จะหลุดออกนอกจอโดยที่ร้านค้าไม่รู้ว่ามีอยู่ */
.ptabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin:22px 0;overflow-x:auto}
.ptabs a{position:relative;display:flex;align-items:center;gap:7px;padding:10px 0;font-size:15px;
  color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.ptabs a i{font-size:14px;opacity:.85}
.ptabs a.on{color:var(--primary);border-color:var(--primary)}
.ptabs a.on i{opacity:1}
.ptab-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--danger);color:#fff;font-size:11px;font-style:normal;line-height:1}

@media (max-width:760px){
  .ptabs{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    border:0;overflow:visible;margin:14px 0 20px}
  .ptabs a{
    flex-direction:column;justify-content:center;gap:6px;text-align:center;
    padding:12px 4px;border:1px solid var(--line);border-radius:12px;background:#fff;
    font-size:11.5px;line-height:1.3;white-space:normal;border-bottom-width:1px;min-height:70px}
  .ptabs a i{font-size:19px}
  .ptabs a.on{background:var(--brand-050);border-color:var(--primary);color:var(--primary);font-weight:500}
  .ptab-n{position:absolute;top:5px;right:7px}
}
@media (max-width:400px){
  .ptabs{grid-template-columns:repeat(3,1fr)}
}

.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:16px 0}
.breadcrumb i{font-size:9px}

.pagination{display:flex;gap:6px;justify-content:center;margin:34px 0;flex-wrap:wrap}
.pagination a,.pagination span{min-width:38px;height:38px;display:grid;place-items:center;padding:0 12px;
  border:1px solid var(--line);border-radius:9px;background:#fff;font-size:14px}
.pagination a:hover{border-color:var(--brand-300);color:var(--primary)}
.pagination .current{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination .disabled,.pagination .dots{color:var(--line-strong);border-color:transparent;background:transparent}

/* ============================================================
   Tables
   ============================================================ */
.tbl-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
table.data th{text-align:left;font-weight:500;font-size:12.5px;color:var(--muted);padding:12px 16px;
  border-bottom:1px solid var(--line);white-space:nowrap}
/* ของเดิม td ไม่ล็อก white-space — จอแคบเลยบีบคอลัมน์แทนที่จะเลื่อนซ้าย-ขวา
   (.tbl-wrap มี overflow-x:auto อยู่แล้ว แต่ table ยืดเกิน 100% ไม่ได้เพราะเนื้อหายอมหด/ตัดบรรทัดได้)
   ใส่ nowrap ให้เนื้อหาในเซลล์ไม่ยอมหด ตารางจะกว้างเกิน 100% เองแล้วเลื่อนแนวนอนแทน
   (แท็ก <br> ที่จงใจขึ้นบรรทัดใหม่ เช่น รหัสออเดอร์/วันที่ ยังทำงานปกติ ไม่ถูก nowrap บล็อก) */
table.data td{padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--brand-050)}

/* ---------- ตารางที่มีคู่การ์ดสำหรับจอแคบ ----------
   ตารางคอลัมน์เยอะ (เช่นตารางสินค้า) บนจอแคบต่อให้เลื่อนแนวนอนได้ก็ยังอ่านยาก
   คู่นี้ให้ render ทั้งตาราง (โชว์บนจอกว้าง) และการ์ด (โชว์บนจอแคบ) จากข้อมูลชุดเดียวกัน
   สลับด้วย media query ล้วน ๆ ไม่ต้องพึ่ง JS
   ต้องเจาะจงคลาส .has-cards เท่านั้น — ตาราง .tbl-wrap ทั่วไปที่ไม่มีการ์ดคู่กัน
   (มีอยู่หลายจุดในเว็บ) ต้องยังโชว์ตารางแบบเลื่อนแนวนอนตามปกติ ไม่งั้นข้อมูลจะหายไปเลยบนมือถือ */
.tbl-cards{display:none}
@media (max-width:700px){
  .tbl-wrap.has-cards{display:none}
  .tbl-cards{display:flex;flex-direction:column;gap:12px}
}

/* การ์ดสินค้า 1 ใบ (คู่กับตารางสินค้าในพอร์ทัลร้านค้า) */
.prd-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 15px}
.prd-top{display:flex;align-items:flex-start;gap:11px}
.prd-pic{width:48px;height:48px;border-radius:9px;flex:none;overflow:hidden;
  background:var(--brand-050);display:grid;place-items:center;color:var(--brand-300);font-size:17px}
.prd-pic img{width:100%;height:100%;object-fit:cover}
.prd-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prd-name b{font-weight:500;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.prd-name small{font-size:12.5px;color:var(--muted)}
.prd-top .badge{flex:none;white-space:nowrap}

.prd-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:12px 0 0;
  padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted)}
.prd-meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.prd-meta i{color:var(--primary);font-size:11.5px}
.prd-price{font-size:16px;font-weight:600;color:var(--primary)}

.prd-acts{display:flex;gap:8px;margin-top:12px}
.prd-acts form{display:contents}
.prd-acts .btn{flex:1}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--secondary);color:#c6d8c8;margin-top:60px;padding:52px 0 20px;font-size:14px}
.site-footer .logo{color:#fff}
.site-footer .logo .logo-sub{color:#8ba58e}
.site-footer h4{color:#fff;font-size:14.5px;margin-bottom:14px;font-weight:500}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:32px}
.footer-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:20px}
.site-footer a{color:#a9c0ab;transition:.15s}
.site-footer a:hover{color:var(--accent)}
.footer-links a{display:block;padding:4px 0;font-size:13.5px}
.footer-links ul{list-style:none;margin:0;padding:0}
.footer-links .submenu{padding-left:12px}
.site-footer .muted{color:#93ab96}
.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:18px;
  text-align:center;font-size:12.5px;color:#8ba58e}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .two-col{grid-template-columns:1fr}
  .browse{grid-template-columns:1fr}
  .filters,.sidebar-col{position:static}
}
/* ---------- ไซด์บาร์เมนูมือถือ ---------- */
.nav-backdrop{position:fixed;inset:0;background:rgba(15,26,17,.5);z-index:198;
  opacity:0;pointer-events:none;transition:opacity .22s ease}
.nav-backdrop.open{opacity:1;pointer-events:auto}
body.nav-open{overflow:hidden}

@media (max-width:900px){
  /* backdrop-filter บน .site-header สร้าง containing block ให้ลูก position:fixed
     ทำให้ไซด์บาร์ถูกขังอยู่แค่ในความสูง 64px ของหัวเว็บ — ปิด blur เฉพาะจอเล็กที่มีไซด์บาร์ */
  .site-header{backdrop-filter:none}

  /* โครงไซด์บาร์: หัว (ปักหมุด) + เนื้อหา (เลื่อนได้ ยืดเต็มที่เหลือ) + ท้าย (ปักหมุด) */
  .site-nav{display:flex;position:fixed;top:0;right:0;bottom:0;z-index:199;
            width:min(85vw,320px);background:var(--sand);flex-direction:column;
            align-items:stretch;padding:0;gap:0;
            box-shadow:-14px 0 40px -14px rgba(20,32,22,.45);
            transform:translateX(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);
            overflow:hidden}
  .site-nav.open{transform:translateX(0)}
  .site-nav a{width:100%}
  .site-nav ul,.site-nav-items{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  .site-nav ul li,.site-nav-items li{width:100%}
  .site-nav .submenu{position:static;display:flex;box-shadow:none;border:0;padding:2px 0 2px 40px;min-width:0}
  .nav-toggle{display:block}
  .header-actions{margin-left:auto}
  .site-nav a{white-space:normal}

  /* เนื้อหาที่เลื่อนได้ อยู่ระหว่างหัวกับท้ายที่ปักหมุด */
  .nav-drawer-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:10px 14px 18px;display:flex;flex-direction:column;gap:2px}

  /* กฎกลางของ .nav-only-mobile (ทุก div/a ที่เห็นเฉพาะจอเล็ก) มาก่อน
     แล้วให้ตัวที่เจาะจงกว่า (หัว/การ์ดผู้ใช้/ฯลฯ) ทับทีหลัง — กันปัญหาลำดับ cascade ชนกัน */
  .nav-only-mobile{display:flex;flex-direction:column;gap:2px;width:100%}
  .nav-only-mobile a .n{margin-left:auto;background:var(--accent);color:var(--secondary);font-size:11px;
    font-weight:600;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}

  /* หัวไซด์บาร์: พื้นสีเข้มของแบรนด์ ให้เด่นแยกจากเนื้อหา */
  .nav-drawer-head{flex-direction:row;flex:none;gap:0;align-items:center;
    width:100%;margin:0;padding:18px 16px;
    background:linear-gradient(135deg,var(--primary),var(--secondary))}
  .nav-drawer-head .logo{width:auto;margin-right:auto;color:#fff}
  .nav-drawer-head .logo .logo-sub{color:rgba(255,255,255,.65)}
  .nav-close{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.18);
    color:#fff;font-size:15px;cursor:pointer;flex:none;display:grid;place-items:center;transition:.15s}
  .nav-close:hover{background:rgba(255,255,255,.3)}

  /* การ์ดผู้ใช้ที่ล็อกอินอยู่
     ต้องเขียนให้เจาะจงกว่า .site-nav a ที่อยู่นอกสื่อ (0,1,1) ไม่งั้น padding/border
     ของการ์ดจะแพ้ เพราะ @media ไม่ได้เพิ่มน้ำหนักให้ selector */
  .site-nav a.nav-drawer-user{flex-direction:row;align-items:center;gap:13px;
    width:100%;margin:0 0 14px;padding:15px 17px;border:1px solid var(--brand-100);
    border-radius:var(--r);background:#fff;box-shadow:var(--sh-1)}
  .nav-drawer-user img,.nav-drawer-user .ava{width:46px;height:46px;border-radius:50%;object-fit:cover;
    flex:none;display:grid;place-items:center;background:var(--primary);color:#fff;
    font-weight:600;font-size:17px}
  .nav-drawer-user span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .nav-drawer-user b{font-weight:500;font-size:15px;line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-drawer-user small{color:var(--muted);font-size:12px;line-height:1.3}
  .nav-drawer-user>i{color:var(--brand-300);flex:none;font-size:12px;margin-left:4px}

  /* หัวข้อกลุ่มเมนูเล็ก ๆ */
  .nav-section-label{display:block;font-size:11px;font-weight:500;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);padding:14px 10px 6px}
  .nav-drawer-body>.nav-section-label:first-child{padding-top:2px}

  /* แถวเมนู — ทั้งเมนูหลักและกลุ่มบัญชี ใช้หน้าตาเดียวกัน */
  .site-nav ul a,.site-nav-items a,.nav-only-mobile a{
    display:flex;align-items:center;gap:13px;padding:11px 10px;border-radius:var(--r-sm);
    font-size:14.5px;color:var(--text);border-left:3px solid transparent;transition:.15s}
  .site-nav ul a i,.site-nav-items a i,.nav-only-mobile a i{
    width:20px;text-align:center;font-size:16px;color:var(--brand-500);flex:none}
  .site-nav ul a:hover,.site-nav-items a:hover,.nav-only-mobile a:hover{background:#fff}
  .site-nav ul a.active,.site-nav-items a.active{
    background:#fff;border-left-color:var(--primary);font-weight:500;color:var(--primary);box-shadow:var(--sh-1)}
  .site-nav ul a.active i,.site-nav-items a.active i{color:var(--primary)}

  .nav-danger{color:var(--danger)!important}
  .nav-danger i{color:var(--danger)!important}

  /* ท้ายไซด์บาร์ */
  .nav-drawer-foot{display:block!important;flex:none;padding:12px 16px;text-align:center;
    font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);background:var(--sand)}

  .user-btn .uname,.user-btn>i{display:none}
  .user-btn{padding:4px;border-color:transparent;background:transparent}
  .hide-sm{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps::before{display:none}
  .step{margin-bottom:24px}
}
@media (min-width:901px){
  .nav-drawer-body{display:contents}   /* บนจอกว้าง ไม่ให้ wrapper นี้ไปยุ่งกับเลย์เอาต์แถวเมนูแนวนอน */
}
@media (max-width:640px){
  .grid2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero,.blk-hero{padding:52px 20px;border-radius:var(--r-lg)}
  .page{padding:22px 16px 48px}
  .container{padding:0 16px}
  .btn.lg{padding:12px 22px;font-size:15px}
}

/* พิมพ์ */
@media print{
  .site-header,.site-footer,.adminbar,.btn,.nav-toggle{display:none!important}
  body{background:#fff}
}

/* ============================================================
   หน้าแรก (index.php) — ดีไซน์ตายตัวตามแบบภูผาหิ้ว
   ============================================================ */
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--leaf-dark);font-weight:500;margin-bottom:6px}
.rule{width:64px;height:4px;border-radius:4px;background:var(--brand-500);margin-top:10px}

/* ---------- Hero ---------- */
.pph-hero{display:grid;grid-template-columns:.88fr 1.12fr;gap:40px;align-items:center;
  padding:18px 0 26px;position:relative}
/* ภาพใบไม้/เนินเขาพื้นหลัง — พี่ทันย้ำ 2 รอบว่าต้องอยู่ "มุมซ้าย" ของ section จริง ๆ ให้เห็นชัด
   ไม่ใช่จางเบา ๆ หรือไปหลบอยู่มุมซ้ายของภาพหลักฝั่งขวา (รอบก่อนเข้าใจผิดว่าซ่อนให้จางที่สุดคือปลอดภัย
   ที่สุด — จริง ๆ พี่ทันอยากให้เห็นชัดแบบภาพตัวอย่างที่ส่งมาต่างหาก) วางเต็มความทึบไว้ที่มุมล่างซ้าย
   ของทั้ง section (.pph-hero ไม่ใช่แค่คอลัมน์ข้อความ จะได้ใหญ่ได้โดยไม่ติดขนาดคอลัมน์ข้อความ)
   กันปุ่ม/ตัวเลขสถิติอ่านไม่ออกด้วยพื้นทึบเฉพาะจุดที่จำเป็นจริง ๆ (ปุ่ม ghost + การ์ดพื้นหลังใต้สถิติ) */
.pph-hero::before{content:"";position:absolute;left:-2%;bottom:-50px;width:26%;min-width:220px;
  max-width:320px;aspect-ratio:4/3;background:url('../img/hero-corner-leaves.webp') left bottom / contain no-repeat;
  pointer-events:none;z-index:-1}
.pph-hero-text,.pph-hero-art{position:relative;z-index:1}
/* หัวข้อ 118 — ย้าย .pph-stats ออกมาเป็นพี่น้องกับ .pph-hero-art แทนที่จะซ้อนอยู่ใน .pph-hero-text
   (จอมือถือจะได้เรียงตาม DOM ธรรมดา: ข้อความ → ภาพ → สถิติ) จอกว้างยังต้องให้สถิติไปอยู่ใต้ข้อความ
   ในคอลัมน์เดิมเป๊ะเหมือนก่อนย้าย จึงกำหนดตำแหน่งใน grid ตรง ๆ (คอลัมน์ 1 แถว 2) ส่วนภาพขยับไปสแปน
   ทั้งสองแถวของคอลัมน์ 2 แทน (แนวตั้งยังกึ่งกลางเหมือนเดิมเพราะ .pph-hero มี align-items:center) */
.pph-hero-text{grid-column:1;grid-row:1}
.pph-stats{grid-column:1;grid-row:2}
.pph-hero-art{grid-column:2;grid-row:1 / span 2}
.pph-hero-text .btn.ghost{background:var(--sand)}
/* ไอคอนใหม่ที่เพิ่มในหัวข้อ 118 (ปุ่มลูกศร/ไอคอนหน้าตัวเลขสถิติ/ไอคอนหน้าป้ายช่องค้นหา) ตั้งใจให้โชว์
   แค่จอมือถือ (≤640px) ตามภาพตัวอย่างที่พี่ทันส่งมา ไม่ให้กระทบหน้าตาจอกว้างที่ผ่านการปรับมาหลายรอบ
   แล้วเลย — ซ่อนไว้เป็นค่าเริ่มต้น แล้วไปเปิดเฉพาะใน media query มือถือด้านล่าง */
.pph-btn-arrow,.pph-stat-ico,.pph-sf-ico{display:none}
.pph-hero h1{font-size:clamp(28px,4.2vw,44px);line-height:1.25;margin-bottom:0;color:var(--text)}
/* ท่อนที่ 2 ของหัวข้อ (หลังช่องว่างแรก) อ่อนกว่าท่อนแรกนิดเดียวตามที่ขอ — ใช้ brand-800 (เขียวเข้ม
   เฉดเดียวกับ --text แค่อ่อนลงหนึ่งระดับ) ไม่ใช่กระโดดไปสีสว่างจัดแบบ brand-500 ซึ่งต่างมากเกินไป */
.pph-h1-soft{color:var(--brand-800)}
.pph-h1-leaf{display:inline-block;font-size:.42em;color:var(--brand-500);transform:rotate(-18deg);
  vertical-align:middle;margin-left:2px}
.pph-hero .lead{font-size:16.5px;color:var(--muted);max-width:480px;margin:18px 0 26px;
  border-left:3px solid var(--brand-500);padding-left:16px}
/* ไม่ใส่พื้นหลังทึบให้แถวสถิติแล้ว (ตัดออกจากหัวข้อ 105/107) — พี่ทันอยากให้แถวนี้ทับ/เกยภาพ
   ใบไม้มุมซ้ายด้านหลังได้บ้าง ไม่ต้องมีการ์ดทึบมากั้น แต่ใบไม้บางจุดเป็นใบเขียวเข้ม สีเดียวกับตัวเลข
   (--primary) พอดี ถ้าเลขไปตกจุดนั้นจะจมหายอ่านไม่ออกเลย ("3" ตัวแรกเจอแบบนี้พอดีตอนตรวจ) แก้ด้วย
   เงาขาวจาง ๆ รอบตัวอักษรแทนพื้นทึบ (ยังทับภาพได้ตามที่ขอ แต่มีขอบขาวช่วยแยกตัวอักษรจากพื้นหลังเสมอ)
   แต่ละช่องจัดกึ่งกลาง (ตัวเลขกับป้ายชื่อจะได้อยู่กึ่งกลางเดียวกัน ไม่ใช่ชิดซ้ายเหมือนเดิม) */
.pph-stats{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap}
.pph-stats>div{text-align:center}
.pph-stats b{display:block;font-size:24px;font-weight:600;color:var(--primary);line-height:1.2;
  text-shadow:0 1px 3px var(--sand),0 0 10px var(--sand)}
.pph-stats span{font-size:12.5px;color:var(--muted);text-shadow:0 1px 3px var(--sand),0 0 8px var(--sand)}

.pph-hero-art{position:relative;width:110%;margin-left:-60px;}
/* ภาพประกอบเจนด้วย AI (พี่ทันเจนเองตามพรอมต์ในหัวข้อ 102 แล้วลบกล่องข้อความออกให้ ไม่ให้ซ้อนกับ
   ป้าย HTML) พื้นหลังโปร่งใสจริง (PNG อัลฟาแปลงเป็น WebP คง alpha) จึงกลืนกับพื้นหน้าเว็บได้เลย
   ไม่ต้องครอบวงกลม/ตัดขอบเหมือนก่อนหน้านี้ — หัวข้อ 110 ครอปภาพให้ชิดเนื้อหาจริง (ตัดขอบโปร่งใส
   ส่วนเกินออก) เปลี่ยนสัดส่วนภาพจาก 4:3 เดิมเป็น ~1.55:1 ป้าย HTML 3 ใบเลยต้องคำนวณ % ตำแหน่งใหม่
   ตามภาพที่ครอปแล้ว (ไม่ใช่พิกัดเดิมจากหัวข้อ 104/105 อีกต่อไป) */
.hero-photo{position:relative;width:100%}
.hero-photo img{position:relative;display:block;width:100%;height:auto;z-index:1}
/* ป้ายทั้ง 3 ใบใช้ white-space:nowrap + ยึดขอบที่ใกล้ที่สุด (right สำหรับป้ายฝั่งขวา) เสมอ
   กันข้อความยาว ๆ ("รับประกันถึงมือ") ถูกบีบจนตัดบรรทัดรัว ๆ แบบที่เจอจริงบนจอพี่ทัน —
   left:% เดิมให้ป้ายขยายจากซ้ายไปขวา ถ้าเนื้อหายาวเกินก็ล้นขอบภาพขวาได้โดยไม่รู้ตัว */
.hero-photo .pin{position:absolute;top:5%;right:2%;z-index:2;background:var(--secondary);color:#fff;font-size:11.5px;
  letter-spacing:.1em;font-weight:500;padding:7px 15px;border-radius:var(--r-pill);box-shadow:var(--sh-2);white-space:nowrap}
.hero-photo .float{position:absolute;z-index:2;display:flex;gap:10px;align-items:center;background:#fff;color:var(--text);
  border-radius:16px;padding:11px 15px;box-shadow:var(--sh-3);font-size:13px;line-height:1.35;white-space:nowrap}
.hero-photo .float i{color:var(--primary);font-size:18px}
.hero-photo .float b{display:block;font-weight:400}
.hero-photo .float small{font-size:11.5px}
.hero-photo .f1{left:20%;top:16%}
.hero-photo .f2{right:2%;top:47%}
/* ลอยเบา ๆ ให้ป้ายทั้ง 3 ใบดูมีชีวิตนิดหน่อย — ไม่พร้อมกันเป๊ะ (คนละ duration/delay) จะได้ไม่ดูแข็ง
   เหมือนขยับเป็นก้อนเดียว amplitude เบามาก (4-6px) กันดูรก/เวียนหัว ปุ่ม/ลิงก์ข้างในป้ายไม่มีจึงไม่ต้อง
   ห่วงเรื่องคลิกพลาดตอนขยับ */
@keyframes pphFloatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero-photo .pin{animation:pphFloatBob 3.6s ease-in-out infinite}
.hero-photo .f1{animation:pphFloatBob 4.2s ease-in-out infinite .3s}
.hero-photo .f2{animation:pphFloatBob 3.9s ease-in-out infinite .9s}
@media(prefers-reduced-motion:reduce){
  .hero-photo .pin,.hero-photo .f1,.hero-photo .f2{animation:none}
}

/* ---------- แถบค้นหา ---------- */
.pph-search{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden;margin-top:14px;margin-bottom:14px}
.pph-search .sf{padding:12px 20px;border-right:1px solid var(--line);min-width:0}
.pph-search .sf label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.pph-search .sf input,.pph-search .sf select{border:0;padding:2px 0;font-size:14.5px;background:transparent;border-radius:0}
.pph-search .sf input:focus,.pph-search .sf select:focus{box-shadow:none;border:0}
.pph-search .go{display:grid;place-items:center;padding:10px}

/* ---------- คลิปแนะนำการใช้งาน (หน้าแรก) ----------
   ตั้งค่าลิงก์/อัปโหลดไฟล์ได้ที่หลังบ้าน → ตั้งค่าเว็บไซต์ → ทั่วไป
   ไม่ตั้งค่า = ไม่แสดงส่วนนี้เลย (ไม่มีกล่องว่างค้างหน้าเว็บ) */
.pph-video{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center;
  background:var(--brand-050);border:1px solid var(--brand-100);border-radius:var(--r-xl);
  padding:36px;margin:34px 0 10px}
.pph-video-text h2{margin:8px 0 12px}
.pph-video-text p{color:var(--muted);font-size:15px;line-height:1.75;margin:0 0 18px}
.pph-video-perks{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.pph-video-perks span{display:flex;align-items:center;gap:10px;font-size:14px}
.pph-video-perks span i{color:var(--primary);width:18px;text-align:center;flex:none}
.pph-video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:#000;box-shadow:var(--sh-3)}
.pph-video-frame iframe,.pph-video-frame video{width:100%;height:100%;display:block}
@media (max-width:820px){
  .pph-video{grid-template-columns:1fr;padding:22px 18px;gap:20px}
  /* มือถือ: เอาวิดีโอขึ้นก่อนข้อความ — คนเลื่อนเจอคลิปทันทีแทนที่จะต้องอ่านผ่านก่อน */
  .pph-video-frame{order:-1}
}

/* ---------- Section ---------- */
.pph-sec{padding:52px 0}
.pph-sec-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:26px}
.pph-sec-head h2{margin:0}
.pph-sec-head.center-head{display:block;text-align:center;margin-bottom:34px}
.pph-tint{background:var(--brand-050);border:1px solid var(--brand-100);border-radius:var(--r-xl);
  padding:44px 32px;margin:16px 0}

/* ---------- หมวดหมู่ ---------- */
.pph-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px}
.pph-cat{display:block;text-align:center;padding:22px 16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);transition:.2s}
.pph-cat:hover{border-color:var(--brand-300);transform:translateY(-3px);box-shadow:var(--sh-2)}
.pph-cat i{display:block;font-size:24px;color:var(--primary);margin-bottom:10px}
.pph-cat b{display:block;font-weight:400;font-size:14.5px}
.pph-cat small{color:var(--muted);font-size:12.5px}

/* ---------- Value cards ---------- */
.pph-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.pph-value{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.pph-value .ico{width:52px;height:52px;border-radius:50%;background:var(--brand-050);color:var(--primary);
  display:grid;place-items:center;font-size:20px;margin-bottom:16px}
.pph-value h3{font-size:16.5px;margin-bottom:8px}
.pph-value p{font-size:14px;color:var(--muted);margin:0}
.pph-value .ticks{margin-top:14px;display:grid;gap:6px;font-size:12.5px;color:var(--primary)}
.pph-value.on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.pph-value.on-dark h3{color:#fff}
.pph-value.on-dark p{color:#a9c0ab}
.pph-value.on-dark .ico{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent)}

/* ---------- Storytelling พื้นเข้ม ---------- */
.pph-dark{background:linear-gradient(150deg,var(--secondary),#122a17);color:#dfeddf;
  border-radius:var(--r-xl);padding:52px 36px;margin:20px 0;position:relative;overflow:hidden}
.pph-dark::after{content:"";position:absolute;right:-140px;bottom:-160px;width:420px;height:420px;
  border-radius:50%;background:color-mix(in srgb, var(--brand-500) 10%, transparent);pointer-events:none}
.pph-dark h2{color:#fff;position:relative}
.pph-dark .lead-dark{color:#b5cbb7;max-width:720px;margin:14px 0 32px;position:relative;font-size:15.5px}
.pph-dark .pph-values{position:relative}

/* ---------- แหล่งท่องเที่ยว ---------- */
.pph-places{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.pph-place{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#fff;transition:.2s;display:block}
.pph-place:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--brand-300)}
.pph-place .ph-img{aspect-ratio:16/10;background:linear-gradient(140deg,var(--brand-100),var(--brand-050));
  display:grid;place-items:center;color:var(--brand-500);font-size:32px;overflow:hidden}
.pph-place .ph-img img{width:100%;height:100%;object-fit:cover}
.pph-place .ph-body{padding:14px 16px 16px}
.pph-place .ph-body b{display:block;font-weight:400;font-size:15px;margin-bottom:3px}
.pph-place .ph-body small{color:var(--primary);font-size:12.5px}

/* ---------- CTA ---------- */
.pph-cta{background:linear-gradient(140deg,var(--primary),var(--secondary));color:#fff;
  border-radius:var(--r-xl);padding:56px 30px;text-align:center;margin:20px 0 10px}
.pph-cta h2{color:#fff;margin:4px 0 10px}
.pph-cta p{color:rgba(255,255,255,.85);max-width:620px;margin:0 auto 26px;font-size:16px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .pph-hero{grid-template-columns:1fr;gap:30px;padding:26px 0 30px}
  .pph-hero-art{max-width:340px;width:100%;margin:0 auto}
  /* จอ ≤980px กลับไปเป็นคอลัมน์เดียว ตำแหน่ง grid-column/row ตายตัวที่ตั้งไว้สำหรับจอกว้าง (2 คอลัมน์)
     ข้างบนต้องยกเลิก ไม่งั้นเบราว์เซอร์ยังพยายามจัดตามคอลัมน์/แถวเดิมทั้งที่เหลือคอลัมน์เดียวแล้ว
     ปล่อยเป็น auto ให้เรียงตามลำดับ DOM จริง (ข้อความ → ภาพ → สถิติ) แทน */
  .pph-hero-text,.pph-stats,.pph-hero-art{grid-column:auto;grid-row:auto}
  .pph-search{grid-template-columns:1fr;border-radius:var(--r-lg)}
  .pph-search .sf{border-right:0;border-bottom:1px solid var(--line)}
  .pph-sec{padding:38px 0}
  .pph-tint,.pph-dark,.pph-cta{padding:34px 20px;border-radius:var(--r-lg)}
  .pph-sec-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  /* หัวข้อ 118 — พี่ทันส่งภาพตัวอย่างจอมือถือมาใหม่ เอาภาพประกอบกลับมาโชว์ (เดิมซ่อนไว้ทั้งหมด)
     พร้อมปรับปุ่ม/ไอคอนให้ใกล้เคียงภาพตัวอย่าง (ปุ่มขอบมนเต็ม + ลูกศร, ไอคอนหน้าตัวเลขสถิติ/ช่องค้นหา)
     ไม่ได้เจนภาพฉากใหม่ทั้งฉาก (รถส่งของ/วัด/ดอกไม้) ตามภาพตัวอย่าง — ใช้ภาพประกอบเดิมที่มีอยู่แล้ว
     (ถุง/ตะกร้า/โหล) แทน เพราะการเจนภาพใหม่ทั้งฉากต้องให้พี่ทันเจนเองแล้วส่งมาเหมือนภาพหลักเดิม */
  .pph-hero{padding:14px 0 22px}
  /* หัวข้อ 127 — พี่ทันเช็คแล้วบอกว่าอยากให้ "ชิดขอบ" จริง ๆ (ไม่ใช่แค่ล้นออกมานิดหน่อยแบบ -15px)
     .container ที่จอ ≤640px มี padding:0 16px (บรรทัด 1392) การจะให้ภาพชนขอบจอจริง ๆ ต้องหักล้าง
     padding นี้ให้พอดีเป๊ะ คือ margin ซ้าย-ขวา -16px ไม่ใช่ -15px (ก่อนหน้านี้เดาใกล้เคียงแต่ไม่ตรงเป๊ะ) */
  /* margin-left/right เฉย ๆ ไม่พอให้ชิดขอบทั้ง 2 ฝั่ง — margin-left ดันกล่องทั้งกล่องไปทางซ้าย
     ได้จริง (ฝั่งซ้ายเลยชิดขอบสำเร็จ) แต่ margin-right บนกล่อง block ปกติที่มี width ชัดเจนอยู่แล้ว
     (width:100% จาก base rule) ไม่ได้ทำให้ "ความกว้างกล่องเอง" ขยายตาม แค่ลดระยะห่างจาก sibling
     ถัดไปเท่านั้น (ซึ่งไม่มีผลตรงนี้เพราะเป็นตัวสุดท้ายในแถว) วัดจริงแล้วฝั่งขวาเลยยังขาดไป 16px
     ไม่ชิดขอบ ต้องขยาย width ให้กว้างขึ้นจริง ๆ ด้วย calc(100% + 32px) (คืน padding ซ้าย+ขวาของ
     .container กลับมาเป็นความกว้างกล่อง) ควบคู่กับ margin-left:-16px ถึงจะชิดขอบทั้ง 2 ฝั่งจริง */
  .pph-hero-art{width:calc(100% + 32px);max-width:720px;margin-left:-16px;margin-right:-16px}
  /* ป้ายลอย 3 ใบ (pin/f1/f2) — หัวข้อ 119 เคยซ่อนไปเพราะตอนนั้น .pph-hero-art จำกัดแค่ 300-320px
     ป้ายเลยดูใหญ่เทียบกับภาพจนรก ตอนนี้ .pph-hero-art ขยายเป็น 720px (เกือบเต็มความกว้างจอจริงแล้ว)
     เอากลับมาใส่ตามที่ขอ */
  /* ใบไม้มุมล่างซ้าย (.pph-hero::before) — หัวข้อ 126 ใช้ min-width:520px ตายตัวตามที่พี่ทันลองใน
     DevTools แต่ที่จอแคบกว่านั้นจริง (320-414px) 520px กว้างกว่าจอเอง ล้นออกไปจริง ๆ (แค่โดน
     body{overflow-x:hidden} ซ่อน scrollbar ไว้ ไม่ได้แปลว่าไม่ล้น) เปลี่ยนเป็น width คำนวณแบบ
     "ห้ามเกิน 100vw" (`min(520px,100vw)`) แทน — จอไหนกว้างพอก็ยังได้ใหญ่เท่าที่พี่ทันชอบ (สูงสุด
     520px) จอไหนแคบกว่านั้นก็ย่อพอดีเป๊ะกับความกว้างจอ ไม่ล้นเด็ดขาด พร้อมขยับ left ให้ชิดขอบซ้าย
     จริงเหมือนกับภาพหลัก (-16px หักล้าง padding เดียวกัน) */
  .pph-hero::before{left:-16px;bottom: -70px;width:min(520px, 100vw);min-width:0;max-width:none;}
  .pph-hero .eyebrow{font-size:12px}
  /* clamp(28px,4.2vw,44px) เดิม — ที่จอมือถือ 4.2vw ต่ำกว่า 28px เสมอ (เช่น 375px×4.2vw≈15.75px)
     เลยตกไปใช้ค่าต่ำสุด 28px ตลอด พี่ทันดูแล้วอยากได้ใหญ่กว่านี้ */
  /* 47px ตายตัวจากหัวข้อ 123 พอดีที่จอกว้าง (เช่น iPhone 16 Pro Max 440px) แต่ใหญ่เกินไปที่จอแคบกว่า
     (เช่น iPhone 12 Pro 390px ทำให้ท่อนแรก "หิ้วความสุขจากภูผา" ตัดขึ้น 2 บรรทัด) เปลี่ยนเป็น
     clamp() ไล่ตามความกว้างจอจริงแทน: 47px ที่ ~440px ขึ้นไป ไล่ลงจนเหลือ 30px ที่จอแคบสุด (320px) */
  .pph-hero h1{font-size:clamp(30px, 10.7vw, 47px)}
  .pph-hero .lead{margin:14px 0 20px;font-size:15px}

  /* ปุ่มขอบมนเต็ม (pill) + ลูกศรโชว์เฉพาะปุ่มหลัก ตามภาพตัวอย่าง
     ลด padding ซ้าย-ขวาลงนิดหน่อย (22px เดิมจาก .btn.lg ทั่วไปที่ ≤640px) เพราะวัดจริงแล้วปุ่มสอง
     ใบรวม gap กว้างเกินแถวไปแค่ <1px ที่จอ 375px ทำให้ตกบรรทัดใหม่ทั้งที่เกือบพอดีอยู่แล้ว */
  .pph-hero-text .row.wrap{justify-content:center;text-align:center;gap:10px!important}
  .pph-hero-text .btn.lg{border-radius:var(--r-pill);gap:8px;padding:12px 18px}
  .pph-btn-arrow{display:inline-block}

  /* หัวข้อ 121 — พี่ทันส่งภาพตัวอย่างใหม่: สถิติ 4 อันเรียงแถวเดียว (ไม่ใช่ตาราง 2×2) + ช่องค้นหา
     แถวเดียวเหมือนกัน ทั้งคู่อยู่ในการ์ดขาวใบเดียวต่อเนื่องกัน ลอยอยู่บนภาพใบไม้มุมซ้าย ยืนยันกับ
     พี่ทันแล้วว่าอยากได้แบบนี้ที่จอมือถือจริงเลย (ไม่ใช่แค่จอกว้าง) จึงบีบทุกอย่างให้พอดีแถวเดียว
     จริง ๆ ที่ 375px (ตัวเลข/ไอคอน/ตัวหนังสือเล็กลงกว่าตาราง 2×2 เดิมมาก) */
  .pph-stats{display:flex;justify-content:space-between;gap:4px;margin-top:-48px;
    background:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:14px 8px 12px;box-shadow:var(--sh-2);
    position:relative;z-index:2}
  .pph-stats>div{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
  .pph-stats b{font-size:15px;line-height:1.2}
  .pph-stat-ico{display:block;font-size:13px;color:var(--brand-500);margin-bottom:3px}
  .pph-stats span{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* ช่องค้นหาแถวเดียวต่อจากการ์ดสถิติ ให้ดูเป็นการ์ดขาวต่อเนื่องกันใบเดียว (ไม่มีรอยต่อ/เงาซ้อน) */
  .pph-search{grid-template-columns:1.3fr 1fr auto;margin-top:0;border-top:0;
    border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-2)}
  .pph-search .sf{padding:8px 8px;border-bottom:0}
  .pph-search .sf:nth-child(2){border-right:0}
  .pph-search .sf label{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0}
  .pph-search .sf input,.pph-search .sf select{font-size:12px}
  .pph-search .go{padding:8px}
  .pph-search .go .btn{padding:10px 12px;font-size:0}
  .pph-search .go .btn i{font-size:15px}
  /* ซ่อนช่องหมวดหมู่บนมือถือ — 3 ช่อง+ปุ่มพร้อมกันแคบเกินจนอ่านไม่ออก ตามภาพตัวอย่างที่โชว์แค่
     ช่องค้นหา+พื้นที่+ปุ่ม (ยังกรองหมวดหมู่ได้ตามปกติที่หน้า "ของฝาก" อยู่แล้ว ไม่ได้ตัดฟีเจอร์ทิ้ง) */
  .pph-search .sf:nth-child(3){display:none}

  /* ไอคอนหน้าป้ายชื่อช่องค้นหาแต่ละช่อง */
  .pph-sf-ico{display:inline-block;color:var(--brand-500);font-size:9px;margin-right:1px}
}

/* ============================================================
   หน้าชำระเงิน (pay.php)
   ============================================================ */
.paywrap{max-width:640px;margin:0 auto 46px}

/* แถบขั้นตอน */
.paysteps{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  max-width:640px;margin:8px auto 22px;font-size:12.5px;color:var(--muted)}
.paysteps span{padding:6px 12px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);white-space:nowrap}
.paysteps .done{color:var(--primary);border-color:var(--brand-100);background:var(--brand-050)}
.paysteps .now{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:500}

/* ยอดที่ต้องโอน */
.payhead{text-align:center;padding:26px 20px;border-radius:var(--r-lg);margin-bottom:18px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}
.payhead small{opacity:.8;font-size:13px;display:block}
.payhead .amt{font-size:15px;margin:6px 0 8px;display:flex;align-items:center;justify-content:center;gap:8px}
.payhead .amt b{font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.5px}

/* การ์ดแต่ละขั้น */
.paycard{padding:20px;margin-bottom:16px}
.paystep-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.paystep-head .n{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:14px;flex:none}
.paystep-head b{display:block;font-weight:500;font-size:16px}
.paystep-head small{color:var(--muted);font-size:13px}

/* แท็บช่องทางโอน */
.paytabs{display:flex;gap:8px;margin-bottom:16px}
.paytabs button{flex:1;padding:10px;border:1px solid var(--line);background:#fff;border-radius:var(--r);
  font:inherit;font-size:14px;color:var(--muted);cursor:pointer;transition:.15s}
.paytabs button:hover{border-color:var(--brand-300)}
.paytabs button.on{background:var(--brand-050);border-color:var(--primary);color:var(--primary);font-weight:500}

/* กล่อง QR */
.qrbox{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center}
.qrimg{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;line-height:0;flex:none}
.qrimg svg{display:block;border-radius:6px}
.qrinfo{flex:1;min-width:190px}
.qrinfo .tag{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--primary);background:var(--brand-050);padding:3px 10px;border-radius:var(--r-pill)}
.qrinfo .num{font-size:21px;font-weight:500;margin:8px 0 2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qrinfo .name{font-size:14px;color:var(--muted)}
.qrinfo p{font-size:12.5px;margin:10px 0 0;line-height:1.6}

/* กล่องข้อมูลธนาคาร */
.bankbox{display:flex;gap:14px;align-items:flex-start;background:var(--brand-050);
  border:1px solid var(--brand-100);border-radius:var(--r-lg);padding:16px 18px}
.bankbox>i{font-size:22px;color:var(--primary);flex:none;margin-top:2px}
.bankbox .binfo{font-size:15px;line-height:1.8}

/* ปุ่มคัดลอก */
.copybtn{border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;
  width:30px;height:30px;border-radius:8px;display:inline-grid;place-items:center;
  font-size:12px;flex:none;transition:.15s;padding:0}
.copybtn:hover{border-color:var(--brand-300);color:var(--primary)}
.copybtn.copied{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.copybtn.wide{width:auto;height:auto;padding:8px 14px;font-size:13px;margin-top:10px;gap:6px;
  display:inline-flex;align-items:center}
.payhead .copybtn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.payhead .copybtn:hover{background:rgba(255,255,255,.25);color:#fff}

/* ช่องลากวางสลิป */
.dropzone{display:block;border:2px dashed var(--line-strong);border-radius:var(--r-lg);
  padding:30px 20px;text-align:center;cursor:pointer;transition:.18s;background:var(--brand-050)}
.dropzone:hover,.dropzone.over{border-color:var(--primary);background:var(--brand-100)}
.dropzone.filled{padding:14px;border-style:solid;border-color:var(--ok);background:#fff}
.dropzone.filled .dz-empty{display:none}
.dz-empty i{font-size:30px;color:var(--primary);display:block;margin-bottom:10px}
.dz-empty b{display:block;font-weight:500;font-size:15px;margin-bottom:4px}
.dz-empty small{color:var(--muted);font-size:12.5px}
.dz-preview{max-width:100%;max-height:290px;border-radius:var(--r);display:block;margin:0 auto}

/* ตัวเลือกเสริม */
.payextra{margin-top:14px}
.payextra summary{cursor:pointer;font-size:13.5px;color:var(--primary);padding:4px 0}
.payextra summary::marker{color:var(--brand-300)}

@media (max-width:520px){
  .payhead .amt b{font-size:34px}
  .qrbox{gap:14px}
  .paysteps span{padding:5px 9px;font-size:11.5px}
}

/* ============================================================
   ป็อบอัพฟอร์ม (พอร์ทัลร้านค้า)
   ============================================================ */
.pmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.pmodal[hidden]{display:none}
.pmodal-backdrop{position:absolute;inset:0;background:rgba(20,40,29,.55);backdrop-filter:blur(2px)}
.pmodal-box{position:relative;background:#fff;border-radius:var(--r-lg);width:100%;max-width:760px;
  max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(20,40,29,.28);
  animation:pmodalIn .18s ease-out}
@keyframes pmodalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.pmodal-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);flex:none}
.pmodal-head h2{flex:1;margin:0;font-size:19px;font-weight:500}
.pmodal-x{width:34px;height:34px;border:0;background:var(--brand-050);border-radius:9px;cursor:pointer;
  font-size:22px;line-height:1;color:var(--muted);flex:none;transition:.15s}
.pmodal-x:hover{background:var(--brand-100);color:var(--primary)}

.pmodal-body{overflow-y:auto;padding:20px 22px;flex:1}
.pmodal-foot{position:sticky;bottom:-20px;margin:18px -22px -20px;padding:14px 22px;
  background:#fff;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}

body.pmodal-open{overflow:hidden}

@media (max-width:640px){
  .pmodal{padding:0}
  .pmodal-box{max-width:none;max-height:100vh;height:100vh;border-radius:0}
  .pmodal-foot{flex-direction:column-reverse}
  .pmodal-foot .btn{width:100%}
}

/* ============================================================
   หน้าโปรไฟล์ร้านค้า (store.php)
   ============================================================ */
.store-hero{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}

/* ภาพหน้าร้าน */
.sh-cover{aspect-ratio:32/9;background:var(--brand-050);position:relative;overflow:hidden}
.sh-cover img{width:100%;height:100%;object-fit:cover;display:block}
.sh-cover-art{width:100%;height:100%;display:grid;place-items:center;font-size:44px;color:#fff;
  background:linear-gradient(135deg, hsl(var(--hue) 34% 34%), hsl(calc(var(--hue) + 28) 40% 46%))}
.sh-cover-art i{opacity:.55}

/* แถบชื่อร้าน */
.sh-main{display:flex;align-items:flex-end;gap:18px;padding:0 24px 20px;flex-wrap:wrap;position:relative}
.sh-logo{width:104px;height:104px;border-radius:22px;margin-top:-46px;flex:none;overflow:hidden;
  border:4px solid #fff;box-shadow:var(--sh-2);background:#fff;display:grid;place-items:center}
.sh-logo img{width:100%;height:100%;object-fit:cover}
.sh-logo span{font-size:40px;font-weight:600;color:#fff;width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(140deg, hsl(var(--hue) 36% 38%), hsl(calc(var(--hue) + 30) 42% 52%))}
.sh-info{flex:1;min-width:220px;padding-top:14px}
.sh-info h1{font-size:26px;margin:0 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sh-verified{font-size:12px;font-weight:400;color:var(--ok);background:var(--ok-bg);
  padding:3px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px}
.sh-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);align-items:center}
.sh-meta b{color:var(--text);font-weight:500}
.sh-meta i{margin-right:4px;opacity:.75}
.sh-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:14px}

/* ตัวเลขสรุป */
.sh-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--brand-050)}
.sh-stats div{padding:16px 18px;text-align:center;border-right:1px solid var(--line)}
.sh-stats div:last-child{border-right:0}
.sh-stats b{display:block;font-size:20px;font-weight:500;color:var(--brand-800)}
.sh-stats span{font-size:12.5px;color:var(--muted)}

/* แถวข้อมูลติดต่อ */
.sh-row{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:14px;line-height:1.65}
.sh-row>i{color:var(--primary);width:18px;text-align:center;margin-top:3px;flex:none}
.sh-place{display:flex;align-items:center;gap:9px;padding:9px 0;font-size:14px;border-bottom:1px solid var(--line)}
.sh-place:last-child{border:0}
.sh-place>i:first-child{color:var(--primary)}
.sh-avatar{width:36px;height:36px;border-radius:50%;background:var(--brand-050);overflow:hidden;
  display:grid;place-items:center;color:var(--primary);flex:none}
.sh-avatar img{width:100%;height:100%;object-fit:cover}

@media (max-width:720px){
  .sh-cover{aspect-ratio:16/7}
  .sh-main{padding:0 16px 18px;gap:14px}
  .sh-logo{width:78px;height:78px;border-radius:18px;margin-top:-34px}
  .sh-logo span{font-size:30px}
  .sh-info h1{font-size:21px}
  .sh-actions{width:100%}
  .sh-actions .btn{flex:1}
  .sh-stats{grid-template-columns:1fr 1fr}
  .sh-stats div:nth-child(2){border-right:0}
  .sh-stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ============================================================
   การ์ดร้านค้าในหน้ารวมร้าน (stores.php)
   ============================================================ */
.stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.store-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);transition:.22s;display:block}
.store-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--brand-300)}

.sc-cover{aspect-ratio:16/7;display:grid;place-items:center;font-size:26px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg, hsl(var(--hue) 34% 36%), hsl(calc(var(--hue) + 28) 40% 48%))}
.sc-cover img{width:100%;height:100%;object-fit:cover}
.sc-cover i{opacity:.5}

.sc-body{padding:0 16px 16px;position:relative}
.sc-logo{width:54px;height:54px;border-radius:15px;margin-top:-27px;margin-bottom:9px;overflow:hidden;
  border:3px solid #fff;background:#fff;box-shadow:var(--sh-1);display:grid;place-items:center}
.sc-logo img{width:100%;height:100%;object-fit:cover}
.sc-logo span{width:100%;height:100%;display:grid;place-items:center;font-size:22px;font-weight:600;color:#fff;
  background:linear-gradient(140deg, hsl(var(--hue) 36% 40%), hsl(calc(var(--hue) + 30) 42% 54%))}

.store-card h3{font-size:16px;font-weight:500;margin:0 0 5px;display:flex;align-items:center;gap:6px}
.sc-check{color:var(--ok);font-size:13px;flex:none}
.sc-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:9px;flex-wrap:wrap}
.sc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.sc-loc{font-size:12.5px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;line-height:1.5}
.sc-loc i{margin-top:3px;flex:none;opacity:.7}

/* ปุ่มพับตัวกรองบนจอเล็ก */
.filter-toggle{display:none;width:100%;align-items:center;gap:10px;padding:12px 16px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:14.5px;color:var(--text);
  cursor:pointer;margin-bottom:14px}
.filter-toggle .caret{margin-left:auto;font-size:11px;color:var(--muted);transition:transform .2s}
.filters.open .filter-toggle .caret{transform:rotate(180deg)}

/* ปุ่มปิดแผ่นตัวกรอง — โผล่เฉพาะตอนเป็นป็อบอัพบนจอเล็ก */
.filter-close{display:none;width:32px;height:32px;flex:none;place-items:center;
  border:0;background:var(--brand-050,#eef4e2);color:var(--text);border-radius:50%;
  font-size:15px;cursor:pointer}
.filter-close:hover{background:var(--line)}

/* บนจอเล็กตัวกรองเป็น "ป็อบอัพเลื่อนขึ้นจากขอบล่าง" ไม่ใช่กางลงมาดันเนื้อหา
   ของเดิมกางแบบ accordion แล้วดันรายการสินค้าตกจอ ต้องเลื่อนยาวกว่าจะเห็นของ */
@media (max-width:1000px){
  .filters{margin-bottom:16px}
  .filters.card{background:transparent;border:0;box-shadow:none;padding:0}
  .filter-toggle{display:flex}
  .filters.open .filter-toggle{border-color:var(--brand-300);color:var(--primary)}

  /* ฉากหลังมืด — คลิกที่นี่เพื่อปิด (เหตุการณ์คลิกจะตกที่ .filters) */
  .filters.open::before{
    content:'';position:fixed;inset:0;z-index:160;
    background:rgba(15,26,17,.5);animation:fltFade .18s ease}

  .filter-body{
    display:none;
    position:fixed;left:0;right:0;bottom:0;z-index:161;
    max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--card,#fff);
    border-radius:20px 20px 0 0;
    /* ไม่มี padding ด้านบน เพื่อให้หัวเรื่องที่ปักหมุดชนขอบบนพอดี
       ไม่งั้นจะเหลือช่องแคบ ๆ ให้เนื้อหาไหลผ่านเหนือหัวเรื่องตอนเลื่อน */
    padding:0 18px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -12px 40px rgba(12,22,15,.24)}
  /* forwards ไว้ด้วย — ถ้าอนิเมชันถูกขัดกลางคัน (เช่นสลับแท็บ) แผ่นจะค้างที่เฟรมสุดท้าย
     ซึ่งเป็นตำแหน่งที่ถูกต้อง ไม่ใช่ค้างเหลื่อมลงไปใต้ขอบจอ */
  .filters.open .filter-body{display:block;animation:fltSheet .26s cubic-bezier(.22,1,.36,1) forwards}

  /* ขีดจับด้านบนแผ่น ให้รู้ว่าลากปิดได้ */
  .filter-body::before{
    content:'';display:block;width:44px;height:4px;border-radius:99px;
    background:var(--line);margin:8px auto 2px}

  .filter-close{display:grid}

  /* หัวเรื่องค้างไว้ด้านบน และปุ่มยืนยันค้างไว้ด้านล่าง จะได้กดได้โดยไม่ต้องเลื่อนกลับ */
  .filter-body>.row:first-of-type,
  .filter-body form>.row:first-of-type{
    position:sticky;top:0;z-index:2;background:var(--card,#fff);padding:8px 0 10px;margin-bottom:0}
  /* เงาสองชั้น: ชั้นแรกกันไม่ให้เนื้อหาโผล่รอบปุ่ม ชั้นที่สองทาสีทับแถบ padding
     ใต้ปุ่มจนถึงขอบล่างของแผ่น ไม่งั้นจะเห็นตัวหนังสือไหลผ่านใต้ปุ่ม */
  .filter-body form>.btn.block{
    position:sticky;bottom:0;margin-top:16px;
    box-shadow:0 0 0 10px var(--card,#fff), 0 34px 0 10px var(--card,#fff)}

  /* ล็อกไม่ให้หน้าเลื่อนตามขณะเปิดป็อบอัพ
     อยู่ในมีเดียคิวรีด้วย เพื่อว่าถ้าคลาสค้างอยู่ตอนย่อ/ขยายจอ จอใหญ่จะไม่โดนล็อกไปด้วย */
  html.filter-open,html.filter-open body{overflow:hidden}
}
@keyframes fltFade{from{opacity:0}to{opacity:1}}
@keyframes fltSheet{from{transform:translateY(24px);opacity:.5}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .filters.open::before,.filters.open .filter-body{animation:none}
}

/* ---------- ป้ายกดเลือกหลายอัน (หมวดหมู่ / พื้นที่ / ป้ายสินค้า) ----------
   ใช้แทนเช็กบ็อกซ์เรียงลงมาทีละบรรทัด ซึ่งกินความสูงมากบนมือถือ
   ตัวเช็กบ็อกซ์จริงยังอยู่ (แค่ซ่อนตา) ฟอร์มจึงส่งค่าเหมือนเดิมทุกอย่าง */
.pickset{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:inline-flex;cursor:pointer;margin:0}
.pick input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pick span{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:13.5px;line-height:1.35;background:#fff;color:var(--text);
  transition:background .15s,border-color .15s,color .15s;
  user-select:none;-webkit-tap-highlight-color:transparent}
.pick span::before{
  content:'\f067';font-family:'Font Awesome 6 Free';font-weight:900;
  font-size:9px;opacity:.45;transition:.15s}
.pick:hover span{border-color:var(--brand-300);background:var(--brand-050)}
.pick input:checked+span{
  background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500}
.pick input:checked+span::before{content:'\f00c';opacity:1}
/* ต้องเห็นโฟกัสตอนไล่ด้วยปุ่ม Tab เพราะกล่องจริงถูกซ่อนไปแล้ว */
.pick input:focus-visible+span{outline:2px solid var(--brand-300);outline-offset:2px}

.fopt.on{color:var(--primary);font-weight:500}
.fopt.on i{color:var(--primary)}
.fgroup input[type=text],.fgroup input:not([type]){width:100%}

/* ============================================================
   เลย์เอาต์ที่เดิมเขียนเป็น inline style — ย้ายมาไว้ที่นี่
   เพื่อให้ media query ทับได้ตอนจอเล็ก
   ============================================================ */
.two-col.even{grid-template-columns:1.05fr .95fr}
.browse.chat-cols{grid-template-columns:300px 1fr}
.line-item{display:grid;grid-template-columns:84px 1fr auto}

@media (max-width:1000px){
  .two-col.even{grid-template-columns:1fr}
  .browse.chat-cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .line-item{grid-template-columns:64px 1fr;row-gap:8px}
  .line-item>:last-child{grid-column:1 / -1;text-align:right}
}

/* ------------------------------------------------------------
   กันช่องกริดขยายเกินจอ
   ค่าเริ่มต้นของ grid item คือ min-width:auto ทำให้ช่องหดเล็กกว่า
   เนื้อหาข้างในไม่ได้ พอมีของกว้าง ๆ (แกลเลอรี/ตาราง) หน้าเลยล้น
   ------------------------------------------------------------ */
.two-col>*,.browse>*,.products>*,.cards>*,.stores>*,.grid2>*{min-width:0}

/* ============================================================
   ปุ่ม LINE Login
   ------------------------------------------------------------
   เคยลองเปลี่ยนเป็นเขียวแบรนด์เว็บแล้ว แต่พี่ทันขอกลับไปใช้เขียวทางการของ LINE
   ตามธรรมเนียมปุ่ม OAuth ทั่วไป (ผู้ใช้จำสีนี้ได้ว่าคือปุ่ม LINE ทันที)
   ============================================================ */
.line-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:12px 18px;background:#06C755;color:#fff;border-radius:var(--r);font-size:15px;
  font-weight:500;transition:.15s;border:0}
.line-btn:hover{background:#05a948;color:#fff}
.line-btn i{font-size:20px}
.line-btn.block{width:100%}

.or-sep{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:13px}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- รายละเอียดค่าจัดส่ง (หน้าชำระเงิน / ตะกร้า) ---------- */
.shipbox{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--brand-050);transition:opacity .15s}
.shipbox.loading{opacity:.45}
.shiprow{display:flex;align-items:flex-start;gap:12px;padding:7px 0;font-size:14px}
.shiprow+.shiprow{border-top:1px dashed var(--line)}
.shiprow>div{min-width:0;flex:1}
.shiprow b{font-weight:500;display:block}
.shiprow small{display:block;font-size:12.5px;line-height:1.5}
.shiprow>span{white-space:nowrap;font-variant-numeric:tabular-nums}
.shiprow .strike{text-decoration:line-through;color:var(--muted)}
.shipnote{display:flex;gap:8px;margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.shipnote i{margin-top:3px;flex:none}
.shipnote.ok{color:var(--ok)}
.shipnote.warn{color:var(--warn,#b45309)}
.shipnote.error{color:var(--danger);font-weight:500}
.shipnote.error a{color:inherit;text-decoration:underline}
@media (max-width:520px){
  .shiprow{flex-wrap:wrap}
  .shiprow>span{width:100%;text-align:right}
}

/* ---------- คิวอาร์โค้ดร้านค้า / สินค้า ---------- */
.qr-frame{display:inline-block;padding:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);line-height:0}
.qr-frame img{display:block;width:100%;height:auto;max-width:260px}
.qr-link{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;
  padding:9px 12px;background:var(--brand-050);border-radius:var(--r);max-width:100%}
.qr-link code{font-size:12.5px;word-break:break-all;text-align:left;min-width:0}

.qr-grid{display:grid;gap:14px;padding:18px 20px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.qr-item{text-align:center;padding:12px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card,#fff);min-width:0}
.qr-item.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--brand-100)}
.qr-item-img{display:block;line-height:0;margin-bottom:9px}
.qr-item-img img{width:100%;height:auto;max-width:130px;background:#fff;border-radius:6px}
.qr-item b{display:block;font-weight:500;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.qr-item small{font-size:12.5px}

/* โปสเตอร์ QR พร้อมพื้นหลัง */
.qr-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));
  gap:9px;margin-bottom:14px}
.qr-theme{padding:7px 6px 8px;border:1.5px solid var(--line);
  border-radius:var(--r);background:var(--card);cursor:pointer;text-align:center;
  transition:border-color .15s,box-shadow .15s}
.qr-theme:hover{border-color:var(--brand-300)}
.qr-theme.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--brand-100)}
.qr-theme-sw{display:block;height:34px;border-radius:8px;margin-bottom:6px;
  background:linear-gradient(160deg,var(--t1),var(--t2));
  box-shadow:inset 0 -9px 0 -3px var(--ta)}
.qr-theme small{font-size:11.5px;color:var(--muted);line-height:1.3;display:block}
.qr-theme.on small{color:var(--primary)}

.qr-poster{background:var(--bg);border-radius:var(--r);padding:14px;display:flex;justify-content:center}
.qr-poster img{display:block;width:100%;max-width:250px;height:auto;border-radius:10px;
  box-shadow:0 6px 20px rgba(18,32,20,.16)}

/* ป้ายตั้งโต๊ะ */
.qr-sign{text-align:center;padding:20px 16px;border:2px dashed var(--brand-100);
  border-radius:var(--r);background:#fff}
.qr-sign-top b{display:block;font-size:17px;color:var(--primary)}
.qr-sign-top span{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
.qr-sign-bottom{margin-top:12px}
.qr-sign-bottom b{display:block;font-size:15px;font-weight:500}
.qr-sign-bottom span{font-size:13px;color:var(--muted)}

@media (max-width:520px){
  .qr-grid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));padding:14px}
  .qr-link code{font-size:11.5px}
}

/* พิมพ์เฉพาะโปสเตอร์ — ซ่อนด้วย visibility เพราะ display:none จะทำให้ลูกโผล่ไม่ได้
   โปสเตอร์เป็น SVG ที่มีพื้นหลังเต็มผืนอยู่แล้ว จึงวางเต็มหน้ากระดาษไปเลย */
@media print{
  body *{visibility:hidden}
  #qrPoster,#qrPoster *{visibility:visible}
  #qrPoster{position:fixed;left:0;top:0;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    padding:0;background:#fff;box-sizing:border-box}
  #qrPoster img{max-width:100%;max-height:100%;width:auto;height:100%;
    border-radius:0;box-shadow:none}
  @page{size:A4 portrait;margin:0}
}

/* ---------- สแกนคิวอาร์โค้ด (scan.php) ---------- */
.scan-wrap{max-width:520px;margin:0 auto}
.scan-stage{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  background:#0b0f0c;display:grid;place-items:center}
.scan-stage video{width:100%;height:100%;object-fit:cover;display:none}
.scan-stage.live video{display:block}
.scan-frame{position:absolute;inset:12%;pointer-events:none;display:none}
.scan-stage.live .scan-frame{display:block}
.scan-frame span{position:absolute;width:30px;height:30px;border:3px solid var(--accent)}
.scan-frame span:nth-child(1){top:0;left:0;border-right:none;border-bottom:none}
.scan-frame span:nth-child(2){top:0;right:0;border-left:none;border-bottom:none}
.scan-frame span:nth-child(3){bottom:0;left:0;border-right:none;border-top:none}
.scan-frame span:nth-child(4){bottom:0;right:0;border-left:none;border-top:none}
.scan-hint{color:#fff;font-size:13.5px;text-align:center;padding:0 20px}
.scan-result{margin-top:14px}
.scan-result code{font-size:12.5px}
.scan-upload{margin-top:18px}

@media (max-width:480px){
  .scan-stage{aspect-ratio:3/4}
}

/* ---------- แถบซื้อลอย (product.php บนจอมือถือ) ---------- */
.buy-sticky{display:none}
@media (max-width:720px){
  body.has-buysticky{padding-bottom:74px}
  body.has-buysticky .site-footer{margin-bottom:0}
  .buy-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px -14px rgba(24,38,26,.35);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;align-items:center}
  .buy-sticky-price{flex:none;line-height:1.15}
  .buy-sticky-price b{display:block;font-size:19px;font-weight:600;color:var(--primary);white-space:nowrap}
  .buy-sticky-price small{font-size:11px;color:var(--muted);text-decoration:line-through}
  .buy-sticky-actions{display:flex;gap:8px;flex:1;min-width:0}
  .buy-sticky-actions .btn{flex:1;padding:12px 10px;font-size:13.5px}
  .buy-sticky-actions .btn.outline{flex:0 0 auto;padding:12px 14px}
  .buy-sticky-actions .btn.outline span{display:none}
}

/* ============================================================
   แบนเนอร์หัวหน้า (ของฝาก/ร้านค้า/แหล่งท่องเที่ยว/บทความ/ติดต่อเรา)
   ============================================================ */
.page-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:var(--r-xl);
  padding:30px 32px;margin:18px 0 28px;color:#fff}
.page-banner .pb-icon{flex:none;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);font-size:28px;color:#fff}
.page-banner .pb-text{position:relative;z-index:1;min-width:0}
.page-banner h1,.page-banner h2{color:#fff;margin:0 0 6px;font-size:clamp(20px,3vw,27px);font-weight:600}
.page-banner p{color:rgba(255,255,255,.82);margin:0;font-size:14px;max-width:540px}
.page-banner .pb-deco{position:absolute;right:-18px;top:50%;transform:translateY(-50%) rotate(-10deg);
  font-size:150px;color:#fff;opacity:.08;pointer-events:none}
.page-banner .pb-stats{display:flex;gap:22px;margin-top:12px;flex-wrap:wrap}
.page-banner .pb-stats b{display:block;font-size:19px;font-weight:600;line-height:1.2}
.page-banner .pb-stats span{font-size:11.5px;color:rgba(255,255,255,.75)}

@media (max-width:600px){
  .page-banner{padding:20px;gap:14px;border-radius:var(--r-lg);margin:14px 0 20px}
  .page-banner .pb-icon{width:46px;height:46px;font-size:20px;border-radius:13px}
  .page-banner p{font-size:13px}
  .page-banner .pb-deco{font-size:100px}
  .page-banner .pb-stats{gap:16px;margin-top:10px}
  .page-banner .pb-stats b{font-size:16px}
}

/* ---------- จอมือถือ: การ์ดสินค้า/ร้านค้า/แหล่งท่องเที่ยว/บทความ เป็น 2 คอลัมน์ ---------- */
@media (max-width:560px){
  .products,.stores,.pph-places,.cards{grid-template-columns:1fr 1fr!important;gap:12px}

  .pcard .body{padding:11px 12px 13px}
  .pcard .thumb{font-size:26px}
  .pcard h3{font-size:13.5px;margin:5px 0 3px;line-height:1.35}
  .pcard .loc,.pcard .shop{font-size:11px}
  .pcard .price{font-size:15.5px}
  .pcard .price del{display:block;margin-left:0;font-size:11px}
  .pcard .stars{font-size:11px}
  .pcard .foot{flex-wrap:wrap;align-items:flex-start}

  .store-card h3{font-size:14px}
  .sc-logo{width:42px;height:42px;margin-top:-21px;border-radius:12px}
  .sc-body{padding:0 12px 13px}
  .sc-meta,.sc-loc{font-size:11px}
  .sc-tags .badge{font-size:10.5px;padding:2px 8px}

  .pph-place .ph-body{padding:10px 12px 12px}
  .pph-place .ph-body b{font-size:13px}
  .pph-place .ph-body small{font-size:11px}

  .card-post .body{padding:11px 12px 13px}
  .card-post h3{font-size:13.5px;margin-bottom:4px;line-height:1.35}
  .card-post p{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ============================================================
   แถบเมนูลัดล่างจอ (มือถือเท่านั้น) — เหมือนแอปช้อปปิ้งทั่วไป
   ============================================================ */
.bottom-tabbar{display:none}
@media (max-width:900px){
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  body.has-buysticky{padding-bottom:74px}          /* หน้าสินค้ามีแถบซื้อของตัวเองอยู่แล้ว ไม่ต้องมีแถบนี้ซ้อน */
  body.has-buysticky .bottom-tabbar{display:none!important}

  .bottom-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -6px 20px -12px rgba(20,32,22,.25);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottom-tabbar a,.bottom-tabbar button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:5px 2px;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer;
    font-size:10.5px;line-height:1.2;min-width:0}
  .bottom-tabbar a i,.bottom-tabbar button i{font-size:19px}
  .bottom-tabbar a span,.bottom-tabbar button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .bottom-tabbar a.on{color:var(--primary);font-weight:500}

  /* ปุ่มสแกนกลาง ยกสูงเด่นเป็นวงกลม */
  .bottom-tabbar .tab-scan{position:relative;justify-content:flex-start}
  .tab-scan-btn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
    margin-top:-26px;background:linear-gradient(140deg,var(--brand-500),var(--secondary));
    color:#fff;font-size:20px;box-shadow:0 6px 16px -4px rgba(20,32,22,.5);border:3px solid var(--sand)}
  .bottom-tabbar .tab-scan.on .tab-scan-btn{background:linear-gradient(140deg,var(--accent),var(--brand-500))}

  /* ป้ายจำนวนบนไอคอนตะกร้า */
  .bottom-tabbar a{position:relative}
  .tab-dot{position:absolute;top:2px;left:calc(50% + 6px);background:var(--danger);color:#fff;
    font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:8px;
    display:grid;place-items:center;padding:0 3px;font-style:normal}
}

/* ============================================================
   แชทบนมือถือ — เต็มจอแบบแอปแชท ไม่ต้องเลื่อนผ่านรายการห้องก่อน
   ============================================================ */
.chat-back{display:none;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;
  color:var(--text);flex:none;margin-right:2px}
.chat-back:hover{background:var(--brand-050)}

@media (max-width:900px){
  /* กำลังเปิดห้องอยู่: ซ่อนรายการห้อง/ส่วนอื่นของหน้า เหลือแค่ห้องสนทนาเต็มจอ */
  body.chat-open-thread{overflow:hidden}
  body.chat-open-thread .breadcrumb,
  body.chat-open-thread .chat-cols > aside,
  body.chat-open-thread .bottom-tabbar,
  body.chat-open-thread .chat-safety-note{display:none}
  body.chat-open-thread .chat-cols{display:block;margin:0}
  body.chat-open-thread .chat-cols > div{margin:0}
  body.chat-open-thread .chat-cols > div > .card{
    position:fixed;inset:0;z-index:150;border-radius:0;border:0;
    display:flex;flex-direction:column;height:100vh;height:100dvh}
  body.chat-open-thread .card-head{flex:none;padding:14px 16px calc(14px + env(safe-area-inset-top))}
  body.chat-open-thread .chat{flex:1;height:auto;min-height:0}
  body.chat-open-thread .chat-input{padding-bottom:calc(12px + env(safe-area-inset-bottom))}

  .chat-back{display:flex}

  /* ยังไม่เลือกห้อง (ดูรายการอยู่): ข้อความ "เลือกห้องสนทนาทางซ้าย" ไม่มีความหมายบนจอเดียว ซ่อนไปเลย */
  .chat-empty-hint{display:none}
}


/* ---------- รายการแจ้งเตือน (notifications.php) ---------- */
.notif-row{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line-soft);color:var(--text);position:relative}
.notif-row:last-child{border-bottom:0}
.notif-row:hover{background:var(--brand-050)}
.notif-row.is-new{background:var(--brand-050)}
.notif-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-100);color:var(--primary);font-size:15px}
.notif-row.is-new .notif-ico{background:var(--primary);color:#fff}
.notif-body{flex:1;min-width:0}
.notif-body b{display:block;font-weight:500;font-size:14.5px;line-height:1.45}
.notif-body small{display:block;color:var(--muted);font-size:13px;margin-top:2px;line-height:1.55}
.notif-body em{display:block;color:var(--muted);font-size:11.5px;font-style:normal;margin-top:5px}
.notif-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--danger);margin-top:15px}


/* ---------- แบนเนอร์เตือนกรอกข้อมูลบัญชีให้ครบ ---------- */
.profile-nag{align-items:flex-start;gap:12px}
.profile-nag > span{flex:1;min-width:0;line-height:1.7}
.profile-nag small{display:block;opacity:.85;margin-top:2px}
.profile-nag .btn{flex:none;white-space:nowrap}
@media (max-width:560px){
  .profile-nag{flex-wrap:wrap}
  .profile-nag .btn{width:100%;justify-content:center;margin-top:6px}
}


/* ============================================================
   ล็อกสัดส่วนกล่องรูป
   ============================================================
   ปัญหาที่เจอ: กล่องตั้ง aspect-ratio ไว้แล้ว แต่ความสูงจริงกลับวิ่งตาม
   "สัดส่วนของไฟล์รูป" ไม่ใช่ค่าที่ตั้งไว้ — วัดหน้าสินค้าจริงได้ 341×340
   ทั้งที่ตั้ง 4/3 ไว้ (ต้องได้ 341×256) พอเจอรูปแนวตั้งการ์ดก็ยืดยาวทั้งใบ

   สาเหตุ: รูปข้างในเป็น width:100%;height:100% ที่ยังอยู่ในสายการไหลปกติ
   ความสูงเปอร์เซ็นต์ของมันอ้างกลับไปหาความสูงกล่องที่ยังไม่รู้ค่า กลายเป็นวงกลม
   เบราว์เซอร์จึงถอยไปใช้ความสูงตามธรรมชาติของรูป ซึ่งใหญ่กว่าที่ aspect-ratio กำหนด
   แล้ว object-fit:cover ก็ไม่ได้ทำงานเลยเพราะกล่องพอดีกับรูปอยู่แล้ว

   แก้: ดันรูปออกไปเป็น position:absolute ซึ่งไม่ถูกนับเป็นเนื้อหาที่กำหนดขนาดกล่อง
   aspect-ratio จึงได้คุมความสูงจริง ๆ แล้ว cover ค่อยครอบตัดส่วนเกินให้

   ใช้คลาส .lockimg กับของใหม่ ส่วนรายชื่อด้านล่างคือกล่องเดิมที่มีอยู่แล้ว */
.lockimg,
.pcard .thumb, .card-post .thumb, .pph-place .ph-img,
.sh-cover, .sc-cover, .blk-gallery a, .pmedia-tile{position:relative;overflow:hidden}

.lockimg>img, .lockimg>video, .lockimg>iframe, .lockimg>.lockimg-fill,
.pcard .thumb>img, .card-post .thumb>img, .pph-place .ph-img>img,
.sh-cover>img, .sh-cover>.sh-cover-art, .sc-cover>img,
.blk-gallery a>img, .pmedia-tile>img, .pmedia-tile>.pmedia-blank{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ไอคอนสำรองตอนไม่มีรูป — จัดกลางกล่องโดยไม่ไปดันความสูง */
.lockimg{display:grid;place-items:center}
.lockimg>i{position:relative;z-index:1}