/* Well Nutrition Hub v2 — โครงตามเว็บอ้างอิง srikrungbroker.com */
:root {
  --ink: #13302A;
  --ink-2: #44605A;
  --primary: #1D5C4D;
  --primary-hover: #154638;
  --green: #2E9A74;          /* แถบเมนู */
  --green-dark: #23805F;
  --green-light: #7CC24F;    /* ไล่สีบนแถบเมนู */
  --mist: #E6EFE9;
  --paper: #F4F6F2;
  --surface: #FFFFFF;
  --honey: #E9B949;
  --honey-bg: #FBF1D9;
  --honey-ink: #6B4E0B;
  --line: #DCE5DF;
  --line-green: #06C755;
  --line-green-hover: #05A847;
  --font: "Noto Sans Thai", sans-serif;
  --wrap: 1180px;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* ---------- ปุ่ม ---------- */
.btn-line, .btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  white-space: nowrap;
}
.btn-line { background: var(--line-green); color: #fff; }
.btn-line:hover { background: var(--line-green-hover); }
/* ลิงก์ข้อความ "@wellnutritionhub" ที่เปิด LINE ใช้สีเขียว LINE (เข้ม 4.9:1 บนพื้นขาว · สว่างบน footer เข้ม) */
a.line-txt { color: #05833A; font-weight: 700; }
.site-foot a.line-txt { color: var(--line-green); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-ghost:hover { background: var(--mist); color: var(--primary-hover); }

/* ---------- 1. หัวเว็บ ---------- */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.head-row {
  display: flex; align-items: center; gap: 24px;
  min-height: 84px; padding-top: 10px; padding-bottom: 10px;
}
.logo img { width: 240px; height: auto; }
.head-operator {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  line-height: 1.3; padding-left: 24px; border-left: 2px solid var(--line);
}
.dist-logo { width: 210px; height: auto; }
.op-name { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.head-contact { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.head-phone {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--ink); text-decoration: none; font-size: 17px;
}
.head-phone svg { color: var(--primary); }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 40px; padding: 0 10px;
  border: 1.5px solid var(--line-strong, #C3D1C8); border-radius: 999px;
  color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none;
}
.lang-switch:hover { border-color: var(--primary); color: var(--primary); }
.line-short { display: none; }

/* ---------- 2. แบนเนอร์สไลด์ ---------- */
.hero { padding: 16px 0 0; }
.slider {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 1600 / 600;
  background: var(--mist);
  box-shadow: none;
}
/* รางสไลด์ เลื่อนซ้าย-ขวา */
.slides {
  display: flex; height: 100%;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  touch-action: pan-y; cursor: grab;
}
.slides.is-dragging { transition: none; cursor: grabbing; }
.slide { flex: 0 0 100%; position: relative; height: 100%; overflow: hidden; user-select: none; }
.slide img { -webkit-user-drag: none; pointer-events: none; }
.slide-photo picture, .slide-photo img { width: 100%; height: 100%; object-fit: cover; }
.slide-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

.dist-badge {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  width: 200px; height: auto; box-sizing: content-box;
  object-fit: contain; /* คงสัดส่วนโลโก้เสมอ ห้ามยืด (§6.2.3 · Pwell BG-06) */
  padding: 8px 12px; background: rgba(255, 255, 255, .94);
  border-radius: 8px; box-shadow: none;
  pointer-events: none;
}

/* แบนเนอร์: ไม่มีเงาข้อความ/ปุ่ม (เจ้าของสั่ง 14 ต.ค. 2026) */
.slider .slide-text, .slider .slide-text * { text-shadow: none; box-shadow: none; }
.slide-text {
  position: absolute; left: 8%; top: 50%; transform: translateY(-50%);
  max-width: 46%;
}
.slide-text .kicker {
  margin: 0 0 6px; font-weight: 700; font-size: 15px; letter-spacing: .04em;
  color: var(--green-dark); text-transform: uppercase;
}
.slide-text h1, .slide-text h2 {
  margin: 0 0 12px; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.25; font-weight: 800;
}
.slide-text .sub { margin: 0 0 20px; font-size: clamp(15px, 1.5vw, 19px); color: var(--ink-2); }

/* สไลด์ที่ไม่มีรูป */
.slide-green { background: linear-gradient(110deg, #1D5C4D 0%, #2E9A74 60%, #7CC24F 100%); color: #fff; }
.slide-green .kicker { color: #CFEBC0; }
.slide-green .sub { color: #E3F3EA; }
.slide-honey { background: linear-gradient(110deg, #FBF1D9 0%, #F6E2AE 100%); }
.slide-honey .kicker { color: var(--honey-ink); }

.slide-art { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: 38%; height: 70%; }
/* ป้ายหัวข้อปรึกษา (สไลด์ LINE): เรียงลงมา เยื้องซ้าย-ขวาเล็กน้อย */
.bubbles {
  right: 7%; width: 42%; height: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: clamp(10px, 1.5vw, 18px);
}
.bubble {
  background: #fff; color: var(--ink);
  padding: .7em 1.3em; border-radius: 22px 22px 22px 6px;
  font-weight: 600; font-size: clamp(14px, 1.35vw, 18px); line-height: 1.35;
  white-space: nowrap;
}
.b1 { margin-right: 16%; }
.b2 { margin-right: 0; border-radius: 22px 22px 6px 22px; }
.b3 { margin-right: 8%; }

.chips-art {
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px;
}
.chips-art span {
  background: #fff; color: var(--ink); font-weight: 600; font-size: clamp(14px, 1.3vw, 17px);
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 3px 10px rgba(107, 78, 11, .15);
}
.chips-art .more { background: var(--primary); color: #fff; }

/* สไลด์ 5: ทุ่งเขียว + กระป๋องสินค้า */
.slide-field { background: linear-gradient(180deg, #EAF4F8 0%, #F4F8EC 55%, #E3EFD2 100%); }
.slide-field .kicker { color: var(--green-dark); }
.field-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide-field .slide-text { z-index: 1; }
.slide-product {
  position: absolute; right: 22%; bottom: 9%; height: 82%; width: auto;
  filter: drop-shadow(0 14px 18px rgba(30, 60, 20, .28));
}

/* สไลด์สมัครสมาชิก: พื้นครีม-เขียว การ์ด 3 หัวข้อ ไม่มีเงา */
.slide-member { background: linear-gradient(110deg, #FBF7EC 0%, #F5F2E3 50%, #E3EFDA 100%); }
.slide-member .kicker { color: var(--green-dark); }
.member-cards {
  position: absolute; right: 6%; top: 47%; transform: translateY(-50%);
  width: 42%; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.mcard {
  background: #fff; border: 1px solid #D5E3D3; border-radius: 12px;
  padding: 20px 10px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.mi {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--mist); color: var(--primary);
}
.mi svg { width: 28px; height: 28px; }
.mt { font-weight: 700; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.3; color: var(--ink); }

/* สไลด์ 5 หมวดสินค้า: พื้นเขียวเข้มแบบเว็บอ้างอิง + การ์ดขาวเรียงแถว */
.slide-cats { background: linear-gradient(110deg, #0E3B25 0%, #145A38 55%, #1F7A4A 100%); color: #fff; }
.slide-cats .kicker { color: #BFE6C8; }
.slide-cats .sub { color: #DCEFE2; }
.slide-cats .slide-text { max-width: 27%; }
.btn-light { background: #fff; color: var(--primary); }
.btn-light:hover { background: #EAF4EE; color: var(--primary-hover); }
.cat-tiles {
  position: absolute; right: 5%; top: 46%; transform: translateY(-50%);
  width: 57%; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
}
/* การ์ดทั้งใบเป็นลิงก์ · ช่องภาพสูงเท่ากันทุกใบ · ชื่อหมวดเริ่มที่แนวเดียวกัน */
.cat-tiles a {
  display: grid; grid-template-rows: auto auto; align-content: start; justify-items: center; row-gap: 10px;
  height: 100%; padding: 14px 8px 12px; background: #fff; border-radius: 10px; overflow: hidden; min-width: 0;
  text-decoration: none; color: var(--ink);
}
.cat-tiles a:hover, .cat-tiles a:focus-visible { outline: 3px solid #BFE6C8; outline-offset: 0; }
.cat-imgs {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  width: 100%; height: clamp(76px, 10.5vw, 140px);
}
.cat-imgs img { height: 92%; width: auto; max-width: 48%; object-fit: contain; object-position: bottom; }
.cat-imgs.n1 img { height: 100%; max-width: 78%; }
.cat-name {
  display: block; width: 100%; min-height: 2.7em;
  font-weight: 700; font-size: clamp(12px, 1.1vw, 15px); line-height: 1.35; text-align: center;
}

/* สไลด์ 6: ซื้อของแท้ */
.slide-genuine { background: linear-gradient(110deg, #FFFFFF 0%, #FDF1EE 55%, #F9D9D2 100%); }
.slide-genuine .kicker { color: #A3341F; }
.genuine-art {
  position: absolute; right: 24%; top: 48%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vw, 12px);
}
.genuine-art svg { width: clamp(84px, 17vw, 230px); height: auto; filter: drop-shadow(0 8px 14px rgba(46, 154, 116, .3)); }
.genuine-art span {
  background: #2E9A74; color: #fff; font-weight: 800; font-size: clamp(13px, 1.9vw, 26px);
  padding: .2em .9em; border-radius: 999px;
}

.nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .85); color: var(--ink);
  font-size: 30px; line-height: 1; cursor: pointer;
  box-shadow: none;
}
.nav:hover { background: #fff; }
.prev { left: 12px; } .next { right: 12px; }

.dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 4px; }
.dots button {
  width: 34px; height: 6px; border: 0; border-radius: 3px; padding: 0;
  background: #C3D1C8; cursor: pointer;
}
.dots button[aria-selected="true"] { background: var(--green); }
/* ให้พื้นที่กดใหญ่พอสำหรับนิ้ว */
.dots button { position: relative; }
.dots button::after { content: ""; position: absolute; inset: -14px -2px; }

/* ---------- 3. แถบเมนูสีเขียว ---------- */
.mainnav { padding: 12px 0; position: sticky; top: 0; z-index: 20; }
.mainnav ul {
  list-style: none; margin: 0; padding: 0 6px;
  display: flex; justify-content: space-between;
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 55%, var(--green-dark) 100%);
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(35, 128, 95, .25);
}
.mainnav li { flex: 1 1 auto; text-align: center; }
.mainnav a {
  display: block; padding: 13px 10px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 17px;
  white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
.mainnav a:hover { background: rgba(0, 0, 0, .12); }
.mainnav a[aria-current="page"] { color: #FFF3C4; }
.mainnav .ns { display: none; }

/* ---------- 4. โครง 2 คอลัมน์ (ซ้าย: การ์ดผู้ดำเนินการ · ขวา: เนื้อหา) ---------- */
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: stretch; padding-bottom: 32px; }
.sidebar { display: flex; flex-direction: column; gap: 12px; }
/* ด้านล่างสุดของคอลัมน์ซ้าย-ขวาให้จบเสมอกัน (เจ้าของสั่ง 17 ต.ค. 2569): กล่องสุดท้ายที่มองเห็นของคอลัมน์ที่สั้นกว่ายืดลงมา */
.layout > .content { display: flex; flex-direction: column; }
.layout > .content > :last-child, .sidebar > .side-areas.sa-desk { flex-grow: 1; }
/* รีวิวลูกค้า (ลูกตรงของ .layout): คอม/แท็บเล็ต = คอลัมน์ขวาแถวที่ 2 · คอลัมน์ซ้ายคร่อม 2 แถว ส่วนที่เหลือยืดเข้าแถว 2 (ซ้าย-ขวายังจบเสมอกัน) */
.layout { grid-template-rows: auto 1fr; }
.layout > .sidebar { grid-column: 1; grid-row: 1 / span 2; }
.layout > .content { grid-column: 2; grid-row: 1; }
.layout > .home-reviews { grid-column: 2; grid-row: 2; }

.op-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-align: center; }
.op-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.op-body { padding: 10px 10px 8px; }
.op-card h2 { margin: 0; font-size: 19px; line-height: 1.3; color: var(--primary); font-weight: 700; }
.op-st { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.op-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px; font-weight: 700; font-size: 16px; text-decoration: none; color: #fff;
}
.op-btn-line { background: var(--line-green); }
.op-btn-line:hover { background: var(--line-green-hover); }
.op-btn-tel { background: var(--primary); }
.op-btn-tel:hover { background: var(--primary-hover); }

/* กล่อง LINE แบบป้าย Add Friends */
.line-box { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 12px 14px; text-align: center; }
.lb-1 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: #1F9E3F; }
.lb-2 { margin: 2px 0 18px; font-size: 18px; font-weight: 800; line-height: 1.3; color: #D7262E; }
.lb-btn {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 16px; text-decoration: none; justify-content: center;
  background: linear-gradient(180deg, #52D35A 0%, #06C755 45%, #04A846 100%);
  border: 2px solid #04983F;
}
.lb-btn:hover { filter: brightness(1.05); }
.lb-logo { width: 46px; height: auto; flex: 0 0 auto; }
.lb-txt { color: #fff; font-family: Arial, var(--font); font-weight: 700; font-size: 23px; line-height: 1; white-space: nowrap; }
.lb-arrow { position: absolute; right: -8px; top: -24px; width: 40px; height: 40px; }
.lb-contact { margin: 10px 0 0; text-align: left; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.lb-contact a { color: var(--ink); font-weight: 600; text-decoration: none; }

/* ---------- 5. ส่วนแนะนำ (H1 ของหน้า) ---------- */
.intro { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px 16px; margin-bottom: 16px; }
.intro h1 { margin: 0 0 16px; line-height: 1.3; }
.intro-lead { font-weight: 700; color: var(--ink) !important; }
.intro-contact { font-weight: 600; color: var(--primary) !important; }
.h1-brand { display: block; font-size: 15px; font-weight: 700; letter-spacing: .03em; color: var(--green-dark); }
.h1-sub { display: block; font-size: 26px; font-weight: 800; color: var(--ink); }
.intro p { margin: 0 0 12px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.intro-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 12px; }
.intro-note { padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px !important; margin: 0 !important; }

/* ---------- 6. เมนูลัด 6 ช่อง ---------- */
.quick { margin-bottom: 16px; }
.quick ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick a {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none;
}
.quick a:hover { border-color: var(--green); color: var(--primary); }
.quick svg { width: 28px; height: 28px; flex: 0 0 auto; color: var(--primary); padding: 6px; box-sizing: content-box; background: var(--mist); border-radius: 8px; }
.quick a.is-line svg { color: #fff; background: var(--line-green); }

/* ---------- 7. รายการบทความ ---------- */
.articles { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sec-head { background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 55%, var(--green-dark) 100%); padding: 9px 16px; }
.sec-head h2 { margin: 0; font-size: 18px; color: #fff; }
.sec-head h2::before { content: "› "; }
.ar-list { list-style: none; margin: 0; padding: 0 16px; }
.ar-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ar-thumb { flex: 0 0 96px; height: 72px; display: grid; place-items: center; background: var(--mist); border-radius: 6px; color: var(--green); }
.ar-thumb svg { width: 34px; height: 34px; }
.ar-body h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.4; color: var(--primary); }
.ar-body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ar-badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--honey-bg); color: var(--honey-ink); font-size: 12px; font-weight: 700; }
.ar-note { margin: 0; padding: 12px 16px; font-size: 14px; color: var(--ink-2); }

/* ---------- ข่าวประชาสัมพันธ์ ---------- */
.news { margin-bottom: 16px; }
.ar-thumb { overflow: hidden; }
.news .ar-thumb { flex: 0 0 140px; height: 105px; border: 4px solid #fff; outline: 1px solid var(--line); border-radius: 4px; }
.ar-thumb svg { width: 46%; height: auto; max-height: 70%; }
.news-thumb-logo { background: #F1F6F2 !important; }
.news-thumb-line { background: #06C755 !important; }
.news-thumb-shield { background: #FDF1EE !important; }
.news-thumb-award { background: #FBF1D9 !important; }
.ar-body h3 a { color: var(--primary); text-decoration: none; }
.ar-body h3 a:hover { text-decoration: underline; }
.pin { font-size: 15px; }
.articles .ar-thumb.has-photo { flex: 0 0 140px; height: 105px; border: 4px solid #fff; outline: 1px solid var(--line); border-radius: 4px; background: #fff; }
.art-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 16px; }
.art-gallery img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.art-photo img { max-width: 620px; margin: 0 auto; display: block; }
.ar-thumb.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.news-photo { margin: 0 0 18px; }
.news-photo img { width: 100%; height: auto; border-radius: 8px; }
.news-photo figcaption { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.ar-date { margin: 0 0 4px !important; font-size: 14px !important; color: var(--ink) !important; }

/* ---------- หน้าข่าว ---------- */
.page-narrow { max-width: 860px; padding-top: 8px; padding-bottom: 32px; }
.crumbs { font-size: 14px; color: var(--ink-2); margin: 4px 0 14px; }
.crumbs a { color: var(--primary); }
.news-page { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 22px 26px; }
.news-page h1 { margin: 0 0 14px; font-size: 28px; line-height: 1.35; color: var(--ink); }
.news-meta { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.news-hero { display: grid; place-items: center; height: 220px; border-radius: 8px; margin-bottom: 18px; }
.news-hero svg { height: 60%; width: auto; }
.news-page p { font-size: 17px; line-height: 1.8; color: var(--ink); margin: 0 0 14px; }
.news-h2 { font-size: 20px; margin: 22px 0 8px; color: var(--primary); }
.news-list { margin: 0 0 12px; padding-left: 22px; }
.news-list li { font-size: 17px; line-height: 1.75; margin-bottom: 6px; }
.news-outro { background: var(--mist); border-radius: 8px; padding: 12px 14px; }
.news-page .news-source { font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 12px; }

.foot-langs strong { color: #fff; }
.foot-langs a, .foot-legal a { color: #E8F0EB; }

/* ---------- หน้าผลิตภัณฑ์ ---------- */
.cat-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cat-jump a { padding: 6px 14px; border-radius: 999px; background: var(--mist); color: var(--primary); font-weight: 700; font-size: 15px; text-decoration: none; }
.cat-jump a:hover { background: #D7E8DD; }
.prod-cat { margin-bottom: 16px; scroll-margin-top: 80px; }
.prod-grid { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.prod-grid a { display: flex; flex-direction: column; height: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); background: #fff; }
.prod-grid a:hover { border-color: var(--green); }
.pg-img { display: block; aspect-ratio: 1 / 1; margin-bottom: 8px; }
.pg-img img { width: 100%; height: 100%; object-fit: contain; }
.pg-name { font-weight: 700; font-size: 15px; line-height: 1.4; margin-bottom: 4px; }
.pg-meta { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.pg-cta { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--primary); }

.pd { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.pd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.pd-media img { width: 100%; height: auto; border-radius: 8px; background: #fff; }
.pd-cat { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--green-dark); }
.pd-name { margin: 0 0 6px; font-size: 28px; line-height: 1.3; font-weight: 800; color: var(--ink); }
.pd-sub { margin: 0 0 14px; font-size: 15px; color: var(--ink-2); }
.pd-chips { margin-bottom: 16px; }
.pd-chips-h { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.pd-chips button { margin: 0 6px 6px 0; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line-strong, #C3D1C8); background: #fff; font: inherit; font-size: 15px; cursor: pointer; color: var(--ink); }
.pd-chips button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: #fff; font-weight: 700; }
.pd-price { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--mist-2, #F1F6F2); }
.pd-price-h { margin: 0; font-size: 14px; color: var(--ink-2); }
.pd-amount { margin: 0; font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.pd-amount span { font-size: 18px; font-weight: 700; }
.pd-amount.pd-ask { font-size: 20px; }
.pd-date { margin: 2px 0 8px; font-size: 13px; color: var(--ink-2); }
.pd-ship { margin: 0 0 12px; font-size: 14px; color: var(--ink); }
.pd-order { width: 100%; justify-content: center; min-height: 48px; font-size: 17px; }
.pd-details { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 6px; }
.pd-details section { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pd-details h2 { margin: 0 0 6px; font-size: 18px; color: var(--primary); }
.pd-details p { margin: 0 0 6px; font-size: 16px; line-height: 1.75; color: var(--ink); }
.pd-nut { max-width: 420px; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.pd-note, .pd-langnote { font-size: 13px !important; color: var(--ink-2) !important; margin-top: 12px !important; }
.pd-disclaimer { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 10px; }

/* ---------- หน้าโอกาสทางธุรกิจ ---------- */
.biz-head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: center; margin-bottom: 18px; }
.biz-lead { font-size: 18px !important; color: var(--ink-2) !important; margin: 0 !important; }
.biz-photo { margin: 0; }
.biz-photo img { width: 100%; height: auto; border-radius: 10px; }
.biz-photo figcaption { font-size: 13px; color: var(--ink-2); margin-top: 6px; text-align: center; }
.biz-toc { background: var(--mist-2, #F1F6F2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; }
.biz-toc p { margin: 0 0 4px !important; font-weight: 700; font-size: 15px !important; }
.biz-toc ol { margin: 0; padding-left: 22px; }
.biz-toc li { font-size: 15px; line-height: 1.8; }
.biz-toc a { color: var(--primary); }
.biz-sec { scroll-margin-top: 80px; }
.biz-steps { margin: 0 0 12px; padding-left: 24px; }
.biz-steps li { font-size: 17px; line-height: 1.75; margin-bottom: 8px; padding-left: 4px; }
.biz-steps li::marker { font-weight: 800; color: var(--primary); }
.biz-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.biz-fit > div { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.biz-fit > div:first-child { background: #F1F6F2; }
.biz-fit > div:last-child { background: #FDF6EC; }
.biz-fit h3, .biz-h3 { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.biz-h3 { margin-top: 16px; }
.biz-fit ul { margin: 0; padding-left: 20px; }
.biz-fit li { font-size: 15px; line-height: 1.7; }
.biz-cta { margin: 22px 0 6px; padding: 18px; border-radius: 10px; background: linear-gradient(110deg, #1D5C4D 0%, #2E9A74 100%); color: #fff; text-align: center; }
.biz-cta h2 { margin: 0 0 4px; font-size: 21px; color: #fff; }
.biz-cta p { color: #E3F3EA !important; margin: 0 0 12px !important; }
.biz-cta .btn-line { font-size: 17px; min-height: 48px; padding: 10px 24px; white-space: normal; }

/* ---------- 8. ท้ายเว็บ ---------- */
.site-foot { background: #0F2621; color: #E8F0EB; margin-top: 8px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 32px; padding-top: 32px; padding-bottom: 24px; }
.foot-about img { width: 210px; height: auto; margin-bottom: 12px; }
.foot-about p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: #C9D8CF; }
.foot-op { background: none; border: 1px solid #5E7F72; color: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 40px; }
.foot-op:hover { border-color: #fff; }
.foot-h { margin: 0 0 8px; font-weight: 800; font-size: 15px; color: #fff; }
.foot-menu ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; }
.foot-menu li { margin-bottom: 6px; break-inside: avoid; }
.site-foot a { color: #E8F0EB; }
.foot-menu a { text-decoration: none; font-size: 14px; }
.foot-menu a:hover { text-decoration: underline; }
.foot-contact p { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: #C9D8CF; }
.foot-contact a { font-weight: 700; text-decoration: none; }
.foot-small { font-size: 12px; color: #A9BDB3; }
.foot-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.share-copy { background: #fff; color: var(--ink); border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 40px; }
.share-line { font-size: 14px; min-height: 40px; padding: 8px 14px; }
.foot-bottom { border-top: 1px solid #2B4A40; padding: 14px 0 18px; }
.foot-bottom p { margin: 0 0 6px; font-size: 13px; color: #A9BDB3; line-height: 1.6; }
.foot-disclaimer { color: #C9D8CF !important; }

.next-note {
  margin-top: 0; padding: 40px 16px; text-align: center;
  color: var(--ink-2); border: 2px dashed var(--line); border-radius: var(--radius);
}

/* ---------- จอแคบ ---------- */
@media (max-width: 960px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
  /* จอเล็ก: โลโก้ผู้จำหน่ายลงไปเป็นแถวที่สองของหัวเว็บ */
  .head-row { flex-wrap: wrap; row-gap: 8px; }
  .head-operator {
    order: 3; flex: 1 0 100%;
    flex-direction: row; align-items: center; justify-content: center; gap: 12px;
    padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .dist-logo { width: 170px; }
  .slide-photo .slide-text { max-width: 40%; }
  .slide-photo .sub br { display: none; }
  /* แท็บเล็ต: ข้อความไม่ชนการ์ด/ป้าย · โลโก้มุมเล็กลง · เมนูใช้ชื่อสั้น */
  .slide-plain .slide-text { max-width: 42%; }
  .slide-text .sub { font-size: 15px; }
  .member-cards { width: 44%; gap: 8px; }
  .mcard { padding: 14px 6px 12px; gap: 8px; }
  .mi { width: 42px; height: 42px; }
  .mi svg { width: 22px; height: 22px; }
  .mt { font-size: 13px; }
  .bubbles { width: 46%; right: 9%; }
  .genuine-art { right: 27%; }
  .dist-badge { width: 140px; padding: 6px 9px; }
  .slide-cats .slide-text { max-width: 28%; }
  .slide-cats .sub { display: none; }
  .cat-tiles { width: 56%; gap: 6px; right: 8%; }
  .cat-tiles a { padding: 10px 4px 8px; row-gap: 6px; }
  .cat-name { font-size: 12px; min-height: 4.05em; }
  .mainnav .nl { display: none; }
  .mainnav .ns { display: inline; }
}
@media (max-width: 700px) {
  /* มือถือ: หน้าตาแบบเว็บอ้างอิง (srikrungbroker.com บนมือถือ) — แบนเนอร์เต็มจอ เมนูแถวเดียว */
  .head-row { min-height: 60px; gap: 8px; flex-wrap: wrap; }
  .logo { flex: 0 1 auto; min-width: 0; }
  .logo img { width: 150px; }
  .head-phone { display: none; }
  .head-contact { gap: 8px; flex-shrink: 0; }
  .head-contact .btn-line { padding: 8px 14px; font-size: 15px; min-height: 40px; }
  .line-long { display: none; }
  .line-short { display: inline; }
  .head-operator { gap: 10px; padding-top: 6px; }
  .dist-logo { width: 150px; }
  .op-name { font-size: 13px; white-space: nowrap; }

  /* แบนเนอร์เต็มความกว้างจอ สัดส่วนเดียวกับจอคอม */
  .hero { padding-top: 0; }
  .hero .wrap { padding: 0; }
  .slider { border-radius: 0; box-shadow: none; }
  .slide-text { left: 6%; max-width: 50%; }
  .slide-photo .slide-text { max-width: 44%; }
  .slide-text .kicker { font-size: 11px; margin-bottom: 2px; letter-spacing: .02em; }
  .slide-text h1, .slide-text h2 { font-size: clamp(16px, 5vw, 26px); margin-bottom: 8px; line-height: 1.3; }
  .slide-text .sub, .slide-art { display: none; }
  .slide-text .btn-line, .slide-text .btn-primary { font-size: 12px; padding: 6px 12px; min-height: 32px; }
  .slide-green .bubbles {
    display: flex; right: 2.5%; top: 43%; width: 47%; gap: 5px;
  }
  .slide-green .bubble {
    font-size: 11px; padding: 3px 8px; white-space: nowrap; margin-right: 0;
    border-radius: 9px 9px 9px 3px;
  }
  .slide-green .b2 { border-radius: 9px 9px 3px 9px; }
  .slide-green .slide-text { left: 5%; max-width: 47%; }
  .slide-green .slide-text h2 { font-size: clamp(15px, 4.3vw, 24px); }
  .member-cards { right: 2.5%; top: 43%; width: 46%; grid-template-columns: 1fr; gap: 5px; }
  .mcard { flex-direction: row; justify-content: flex-start; gap: 6px; padding: 3px 8px; border-radius: 9px; }
  .mi { width: 20px; height: 20px; flex: 0 0 auto; }
  .mi svg { width: 13px; height: 13px; }
  .mt { font-size: 11px; white-space: nowrap; }
  .slide-member .slide-text { left: 5%; max-width: 47%; }
  .slide-member .slide-text h2 { font-size: clamp(15px, 4.3vw, 24px); }
  .slide-cats .slide-text { top: 8%; transform: none; max-width: 90%; }
  .slide-cats .slide-text h2 br { display: none; }
  .slide-cats .slide-text .btn-light { display: none; }
  .slide-cats .kicker { display: none; }
  /* มือถือ: การ์ดหมวดเลื่อนแนวนอน (ไม่ลากสไลด์) ชื่อเต็มไม่ถูกตัด */
  .cat-tiles {
    left: 0; right: 0; width: auto; top: auto; bottom: 30px; transform: none;
    display: flex; gap: 6px; padding: 0 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; touch-action: pan-x; scrollbar-width: none;
  }
  .cat-tiles::-webkit-scrollbar { display: none; }
  .cat-tiles li { flex: 0 0 126px; scroll-snap-align: start; }
  .cat-tiles a { height: 74px; padding: 4px 5px 3px; row-gap: 2px; border-radius: 7px; }
  .cat-imgs { height: 36px; }
  .cat-name { font-size: 11px; line-height: 1.25; min-height: 2.5em; }
  .slide-cats .slide-text h2 { font-size: 16px; }
  .slide-cats .slide-text { top: 6%; }
  .slide-product { right: 26%; height: 78%; }
  .genuine-art { right: 33%; top: 46%; }
  .dist-badge { right: 8px; bottom: 8px; width: 92px; padding: 3px 6px; border-radius: 5px; }
  .nav { display: none; } /* มือถือใช้ปัดนิ้ว + จุดด้านล่าง */
  .dots { padding: 8px 0 0; }

  /* แถบเมนูสีเขียว: เห็นครบทุกเมนูในแถวเดียว (ใช้ชื่อสั้น) */
  .mainnav { padding: 8px 0; }
  .mainnav .wrap { padding: 0; }
  .mainnav ul { border-radius: 0; padding: 0; flex-wrap: wrap; }
  .mainnav li { flex: 1 1 auto; }
  .mainnav a { font-size: 13px; padding: 10px 4px; }
  .mainnav .nl { display: none; }
  .mainnav .ns { display: inline; }

  /* มือถือ: 2 คอลัมน์แบบเว็บอ้างอิง (ซ้ายแคบ) */
  .layout { grid-template-columns: 38% minmax(0, 1fr); gap: 8px; padding: 0 8px 24px; }
  .sidebar { gap: 8px; }
  .op-body { padding: 6px 4px; }
  .op-card h2 { font-size: 13px; }
  .op-st { font-size: 11px; }
  .op-btn { font-size: 12px; min-height: 36px; gap: 4px; padding: 6px 4px; }
  .op-btn svg { width: 14px; height: 14px; }
  .line-box { padding: 8px 6px 10px; }
  .lb-1 { font-size: 12px; }
  .lb-2 { font-size: 12px; margin-bottom: 12px; }
  .lb-btn { gap: 4px; padding: 6px 6px; border-radius: 10px; justify-content: center; }
  .lb-logo { width: 26px; }
  .lb-txt { font-size: clamp(11px, 3.3vw, 14px); }
  .lb-arrow { width: 24px; height: 24px; top: -15px; right: -5px; }
  .lb-contact { font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
  .next-note { padding: 24px 8px; font-size: 13px; }
  .quick { margin-bottom: 8px; }
  .quick ul { grid-template-columns: 1fr 1fr; gap: 6px; }
  .quick a { min-height: 44px; padding: 6px; gap: 6px; font-size: 12px; line-height: 1.3; }
  .quick svg { width: 16px; height: 16px; padding: 4px; }
  .sec-head { padding: 6px 10px; }
  .sec-head h2 { font-size: 14px; }
  .ar-list { padding: 0 8px; }
  .ar-item { gap: 8px; padding: 8px 0; flex-direction: column; }
  .ar-thumb { flex: 0 0 auto; height: 44px; width: 100%; }
  .ar-thumb svg { width: 22px; height: 22px; }
  .ar-body h3 { font-size: 13px; }
  .ar-body p { font-size: 12px; }
  .ar-badge { font-size: 10px; margin-left: 2px; }
  .ar-note { padding: 8px; font-size: 11px; }
  .news .ar-thumb, .articles .ar-thumb.has-photo { flex: 0 0 auto; width: 100%; height: 64px; border-width: 2px; }
  .ar-date { font-size: 11px !important; }
  .news-page { padding: 14px; }
  .news-page h1 { font-size: 21px; }
  .news-page p { font-size: 15px; }
  .news-hero { height: 140px; }
  .art-gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .biz-head { grid-template-columns: 1fr; gap: 12px; }
  .biz-photo { max-width: 260px; margin: 0 auto; }
  .biz-fit { grid-template-columns: 1fr; }
  .biz-steps li { font-size: 15px; }
  .biz-cta h2 { font-size: 18px; }
  .foot-grid { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); padding: 8px; gap: 8px; }
  .pg-name { font-size: 13px; }
  .pd { padding: 12px; }
  .pd-top { grid-template-columns: 1fr; gap: 12px; }
  .pd-name { font-size: 21px; }
  .pd-amount { font-size: 28px; }
  .pd-chips button { font-size: 14px; padding: 6px 12px; }
  .pd-details p { font-size: 15px; }
  .cat-jump a { font-size: 13px; padding: 5px 10px; }
  .intro { padding: 10px 10px 8px; margin-bottom: 8px; }
  .h1-brand { font-size: 11px; }
  .h1-sub { font-size: 16px; }
  .intro p { font-size: 12px; line-height: 1.6; margin-bottom: 6px; }
  .intro-actions { gap: 6px; margin: 8px 0; }
  .intro-actions a { font-size: 12px; min-height: 34px; padding: 6px 10px; white-space: normal; }
  .intro-note { font-size: 11px !important; padding-top: 6px; }
}

/* จอแคบมาก (≤ 400px): หัวเว็บแถวเดียว ปุ่ม LINE เหลือไอคอน */
@media (max-width: 400px) {
  .logo img { width: 128px; }
  .lang-switch { min-width: 38px; padding: 0 8px; font-size: 14px; }
  .head-contact .btn-line { padding: 8px 10px; }
  .head-contact .line-short { display: none; }
  .dist-logo { width: 118px; }
  .op-name { font-size: 12px; }
  .head-operator { gap: 8px; }
}

/* จอเล็กกว่ามือถือทั่วไป: ที่ไม่พอ ซ่อนป้ายหัวข้อ เหลือหัวเรื่อง + ปุ่ม LINE */
@media (max-width: 359px) {
  .slide-green .bubbles, .member-cards { display: none; }
  .slide-green .slide-text, .slide-member .slide-text { max-width: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .slides { transition: none; }
}

/* ---------- ป๊อปอัปข้อมูลผู้ดำเนินการ (ดีไซน์เดิม: กล่องเหลี่ยม ขอบเขียว 6px กว้าง 860px) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
body.modal-open { overflow: hidden; }
.wnh-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.wnh-modal-backdrop { position: absolute; inset: 0; background: rgba(28, 28, 28, .58); }
.wnh-modal-box {
  position: relative; width: 100%; max-width: 860px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--surface); border: 6px solid #2E9A74; border-radius: 0;
  padding: 16px 24px; text-align: center;
}
.wnh-modal-box:focus, .wnh-modal-box:focus-visible { outline: none; }
.dz-tools { display: flex; justify-content: space-between; align-items: center; margin: 0 -12px -12px 0; }
.dz-lang { display: inline-flex; border: 1px solid var(--line-strong, #C3D1C8); overflow: hidden; background: var(--surface); }
.dz-lang button {
  width: 52px; min-height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2);
}
.dz-lang button + button { border-left: 1px solid var(--line-strong, #C3D1C8); }
.dz-lang button:hover { background: var(--mist); color: var(--ink); }
.dz-lang button[aria-pressed="true"] { background: #2E9A74; color: #fff; }
.wnh-modal-x {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 0; background: #2E9A74; color: #fff;
}
.wnh-modal-x:hover { background: var(--primary); }
.wnh-modal-x svg { width: 20px; height: 20px; }
.dz-head { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.dz-lead { font-size: 15px; color: var(--ink-2); margin: 0 0 2px; line-height: 1.5; }
.wnh-modal-box .dz-name { font-size: 22px; line-height: 1.3; margin: 0 0 4px; font-weight: 700; color: var(--ink); }
.dz-desc { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.dz-paths { display: grid; }
.dz-path { padding: 8px 16px; }
.dz-path + .dz-path { border-top: 2px solid #2E9A74; }
.dz-path h3 { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 4px; color: var(--ink); }
.dz-path p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.dz-path p strong { color: var(--ink); }
.dz-link {
  display: inline; background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer;
}
.dz-link:hover { color: var(--primary); }
.dz-foot { font-size: 12px; line-height: 1.6; color: var(--ink-2); margin: 12px 0 0; }
@media (min-width: 720px) {
  .dz-paths { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dz-path { padding: 8px 32px; }
  .dz-path + .dz-path { border-top: 0; border-left: 2px solid #2E9A74; }
}
/* TH/EN ซ้อนในช่องเดียว แสดงทีละภาษา → กล่องสูงเท่ากัน */
.dz-panes { display: grid; }
.dz-pane { grid-area: 1 / 1; visibility: hidden; display: flex; flex-direction: column; }
.dz-pane.is-active { visibility: visible; }
.dz-pane .dz-paths { flex: 1; }
@media (max-width: 719px) { .dz-tools { margin: 0 -6px 10px 0; } .dz-lang button { min-height: 44px; } .wnh-modal-x { width: 44px; height: 44px; } .wnh-modal-box { padding: 14px 16px; } }
@media (max-width: 480px) { .dz-lead .nowrap { white-space: normal; } .wnh-modal-box { overflow-wrap: anywhere; } }

/* หน้า ข้อมูลด้านสุขภาพ: แสดง 3 บทความแรกต่อหมวด ที่เหลือกดดูเพิ่ม */
.hl-more { border-top: 1px solid var(--line); }
.hl-more > summary { list-style: none; cursor: pointer; text-align: center; padding: 12px 16px; font-weight: 700; color: var(--green-dark); }
.hl-more > summary::-webkit-details-marker { display: none; }
.hl-more > summary::after { content: " ▾"; }
.hl-more[open] > summary::after { content: " ▴"; }
.hl-more > summary:hover { background: #f3f8f4; }
.hl-more .hl-more-close, .hl-more[open] .hl-more-open { display: none; }
.hl-more[open] .hl-more-close { display: inline; }
.hl-more[open] > summary { order: 2; }
.hl-more[open] { display: flex; flex-direction: column; }
.hl-more .ar-list .ar-item:first-child { border-top: 0; }

/* แถบแชร์ลิงก์ + สถิติผู้เข้าชม เหนือท้ายเว็บ */
.share-bar { padding: 22px 0 26px; text-align: center; }
.sb-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.sb-copy { background: #0A7CFF; color: #fff; border: 0; border-radius: 6px; padding: 0 22px; min-height: 48px; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.sb-copy:hover { background: #0066DB; }
.sb-line { display: inline-flex; align-items: center; gap: 8px; color: #06A94D; font-weight: 600; font-size: 17px; text-decoration: none; min-height: 48px; }
.sb-line:hover span { text-decoration: underline; }
.sb-fb { display: inline-flex; min-height: 48px; align-items: center; }
.visit-box { margin: 18px auto 0; border: 1px solid #C9D3CC; border-collapse: collapse; font-size: 13px; min-width: 128px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.visit-box caption { background: linear-gradient(#F4FAEF, #DDEFD2); border: 1px solid #C9D3CC; border-bottom: 0; padding: 5px 10px; font-weight: 700; color: #2F4A3C; font-size: 13px; }
.visit-box th, .visit-box td { border-top: 1px solid #DDE3DF; padding: 2px 8px; text-align: left; font-weight: 400; color: #333; }
.visit-box td { padding-left: 14px; font-variant-numeric: tabular-nums; }

/* สไลด์สมัครสมาชิก: ภาพกลุ่มเพื่อนดูมือถือ (ภาพของเจ้าของ) เป็นพื้นหลัง เบลอ+ลดสี+ทับสีครีม ให้ตัวอักษรและการ์ดเด่น · อย่างอื่นคงเดิม */
.slide-member .mem-photo, .slide-member .mem-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.slide-member .mem-photo img { filter: blur(3px) saturate(.55) brightness(1.08); transform: scale(1.04); }
.slide-member .mem-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(251,247,236,.94) 0%, rgba(248,245,232,.82) 42%, rgba(240,244,230,.55) 70%, rgba(227,239,218,.45) 100%); }
.slide-member .slide-text, .slide-member .member-cards { z-index: 1; }
.mcard { box-shadow: none; }

/* สไลด์จัดส่งทั่วประเทศ (เจ้าของสั่ง 14 ต.ค.): ป้ายจังหวัดไม่มีเงา ระยะเท่ากัน กึ่งกลางพื้นที่ขวา · มือถือ ข้อความบน ป้ายล่าง */
.slide-honey .chips-art { display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; align-content: center; gap: 12px; }
.slide-honey .chips-art span { box-shadow: none; text-align: center; }
.slide-honey .chips-art .more { grid-column: 1 / -1; justify-self: center; }
.slide-honey .btn-primary { box-shadow: none; }
@media (max-width: 700px) {
  .slide-honey .slide-text { top: 8%; transform: none; max-width: 88%; }
  .slide-honey .slide-text h2 { font-size: clamp(15px, 4.4vw, 22px); margin-bottom: 6px; }
  .slide-honey .slide-text .kicker { display: none; }
  .slide-honey .chips-art {
    display: flex; position: absolute; left: 0; right: 104px; top: auto; bottom: 10px; width: auto; height: auto; transform: none;
    gap: 5px; padding: 0 0 0 5%; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; touch-action: pan-x;
  }
  .slide-honey .chips-art::-webkit-scrollbar { display: none; }
  .slide-honey .chips-art span { flex: 0 0 auto; font-size: 11px; padding: 3px 9px; white-space: nowrap; }
}
/* หน้าสั่งซื้อทั่วประเทศ */
.order-note { color: var(--ink-2); font-size: 15px; background: #FBF4DF; border-left: 4px solid #E3C36B; padding: 8px 12px; border-radius: 4px; }
.order-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.order-steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.os-num { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; display: grid; place-items: center; }
.order-steps h3 { margin: 4px 0 4px; font-size: 18px; }
.order-steps p { margin: 0; }
.order-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.prov-region { margin-top: 18px; }
.prov-region h3 { font-size: 18px; margin: 0 0 8px; }
.prov-region h3 span { color: var(--ink-2); font-weight: 500; font-size: 15px; }
.prov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prov-list li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 15px; }
.slide-honey .slide-art { right: 9%; width: 36%; }
@media (max-width: 700px) { .slide-honey .slide-art { right: 104px; width: auto; } }
@media (max-width: 700px) { .slide-honey .chips-art { flex-wrap: nowrap; align-items: center; height: 26px; } }
@media (max-width: 700px) { .slide-honey .slide-art { right: 118px; } }

/* หน้าผลิตภัณฑ์: แท็บแบ่ง 2 แบบ */
.pr-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-top: 14px; background: var(--mist); border-radius: 999px; }
.pr-tabs button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 16px; color: var(--ink-2); padding: 8px 20px; border-radius: 999px; cursor: pointer; min-height: 44px; }
.pr-tabs button[aria-selected="true"] { background: var(--primary); color: #fff; }
.pr-need-note { color: var(--ink-2); font-size: 14px; margin: 4px 0 12px; }
.pr-weight-note { margin: 0; padding: 10px 16px 14px; font-size: 14px; color: var(--ink-2); }

.sub-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.sub-chips button { border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.sub-chips button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* คลิป YouTube แบบกดแล้วโหลด */
.yt-grid { display: grid; gap: 14px; }
.yt-grid.yt-multi { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.yt { margin: 0; }
.yt-play, .yt iframe { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; overflow: hidden; background: #000; padding: 0; cursor: pointer; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.yt-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.yt-play:hover .yt-btn path:first-child, .yt-play:focus-visible .yt-btn path:first-child { fill: #cc0000; }
.yt-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.yt figcaption { font-size: 15px; font-weight: 600; margin-top: 6px; line-height: 1.4; }
.biz-videos { margin-top: 18px; }

/* หน้าโอกาสทางธุรกิจ (จัดใหม่ 14 ต.ค.) */
.biz .biz-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 28px; align-items: center; }
.biz-h1-sub { display: block; font-size: .62em; font-weight: 700; color: var(--green-dark); margin-top: 4px; }
.biz-head-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.biz-head-btns a { min-height: 44px; display: inline-flex; align-items: center; }
.biz .biz-photo { margin: 0; }
.biz .biz-photo img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 10px; }
.biz .biz-photo figcaption { text-align: center; font-size: 14px; margin-top: 6px; line-height: 1.45; }
.biz .biz-sec, .biz-toc + .biz-sec { scroll-margin-top: 96px; }
.biz-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.biz-group { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.biz-group h3 { margin: 0 0 6px; font-size: 17px; }
.biz-group .news-list { margin: 0; }
.biz-src { font-size: 14px; color: var(--ink-2); margin-top: 10px; overflow-wrap: anywhere; }
.yt-featured { margin-bottom: 14px; }
.yt-featured figcaption { font-size: 17px; }
.yt-desc { display: block; font-weight: 400; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.biz-cta h3 { margin-top: 0; }
/* แถบแชร์แบบเบา (หน้าธุรกิจ) */
.share-quiet { padding: 12px 0 16px; }
.share-quiet .sb-copy { background: transparent; color: var(--ink-2); border: 1px solid var(--line); font-size: 14px; min-height: 40px; padding: 0 14px; }
.share-quiet .sb-line { font-size: 14px; color: var(--ink-2); min-height: 40px; }
.share-quiet .sb-line svg { width: 28px; height: 28px; }
.share-quiet .sb-fb svg { width: 30px; height: 30px; }
@media (max-width: 760px) {
  .biz .biz-head { grid-template-columns: 1fr; gap: 16px; }
  .biz .biz-photo { max-width: 320px; margin: 0 auto; }
  .biz-groups { grid-template-columns: 1fr; }
  .biz-head-btns a { flex: 1 1 100%; justify-content: center; }
}

/* ชื่อผู้ดูแล 2 คน: ตัดบรรทัดได้เฉพาะหลัง "&" */
.nw { white-space: nowrap; }
.op-name { white-space: normal; line-height: 1.25; }
/* การ์ดแนะนำตัว: ชื่อ 2 คน 1 บรรทัด + สถานะ 1 บรรทัด (จอคอม) · จอเล็กตัดหลัง "&" */
@media (min-width: 701px) { .op-card .op-body h2 { font-size: 14px; line-height: 1.3; letter-spacing: -.1px; } .op-card .op-st { font-size: 13px; } }
@media (min-width: 1000px) { .op-card .op-st { white-space: nowrap; } }
.biz .biz-photo figcaption { font-size: 13.5px; }

.biz-club-rules { margin: 10px 0 14px; }
.biz-more { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: var(--surface); }
.biz-more > summary { cursor: pointer; font-weight: 700; color: var(--green-dark); padding: 12px 0; min-height: 44px; }
.biz-more[open] { padding-bottom: 12px; }

/* หน้าธุรกิจ: ข้อมูลบริษัท / รูปแบบการทำงาน / แผนภาพรายได้ 2 แนวทาง */
.biz-facts { margin: 12px 0; }
.biz-facts-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.biz-facts-list li { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-weight: 600; text-align: center; line-height: 1.4; }
.biz-work { margin: 12px 0; }
.biz-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.biz-path { border: 1px solid var(--line); border-top: 4px solid var(--primary); border-radius: 10px; padding: 12px 16px; background: var(--surface); }
.biz-path:nth-child(2) { border-top-color: var(--green-light); }
.biz-path h4 { margin: 0 0 8px; font-size: 17px; }
.biz-path ol { list-style: none; counter-reset: st; margin: 0; padding: 0; }
.biz-path li { counter-increment: st; position: relative; padding: 0 0 18px 34px; line-height: 1.5; }
.biz-path li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.biz-path li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 27px; bottom: 3px; width: 2px; background: var(--line); }
.biz-path li:last-child { padding-bottom: 0; font-weight: 700; }
.biz-paths-note { font-size: 14px; color: var(--ink-2); background: #FBF4DF; border-left: 4px solid #E3C36B; padding: 8px 12px; border-radius: 4px; margin-top: 10px; }
@media (max-width: 760px) { .biz-paths, .biz-facts-list { grid-template-columns: 1fr; } }

.yt-more { margin: 10px 0 0; }
.home-reviews .rv-body { padding: 4px 16px 16px; }

/* หน้าแรก: ลิงก์ต่อจากบทนำ / FAQ / ติดต่อเรา */
.intro-links { font-weight: 600; }
.home-faq .faq-list { padding: 4px 16px 16px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary { cursor: pointer; font-weight: 700; padding: 12px 0; min-height: 44px; list-style-position: outside; }
.faq-item > p { margin: 0 0 8px; }
.faq-item[open] { padding-bottom: 8px; }
.home-contact .ct-body { padding: 4px 16px 16px; }
.ct-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.ct-list span { display: inline-block; min-width: 92px; font-weight: 700; color: var(--ink-2); }
/* ปุ่ม LINE / WhatsApp */
.ct-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.ct-line { background: #06C755; color: #fff; }
.ct-wa { background: transparent; color: #128C4A; border: 2px solid #25D366; }
.ct-equal .ct-wa { background: #25D366; color: #08331C; border-color: #25D366; }
.ct-line:hover { background: #05b04b; }
.ct-wa:hover { background: #e9fbef; }
.ct-equal .ct-wa:hover { background: #20bd5a; }
.site-foot .ct-wa { color: #7CE3A5; border-color: #25D366; }
.site-foot .ct-equal .ct-wa { color: #08331C; }
@media (max-width: 480px) { .ct-btns .ct-btn { flex: 1 1 100%; } }
/* หน้า about */
.about-note { font-size: 14px; color: var(--ink-2); background: #FBF4DF; border-left: 4px solid #E3C36B; padding: 8px 12px; border-radius: 4px; }
.about-regions { margin: 0; display: grid; gap: 8px; }
.about-regions > div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.about-regions dt { font-weight: 700; }
.about-regions dd { margin: 0; }
.about-do { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.about-do p { margin: 0; }
.about-refs ul { padding-left: 18px; overflow-wrap: anywhere; }
@media (max-width: 760px) { .about-do { grid-template-columns: 1fr; } .about-regions > div { grid-template-columns: 1fr; gap: 2px; } }
/* กันล้นบนมือถือ (คอลัมน์เนื้อหาแคบ) */
.quick ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quick a span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .quick ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.yt-more a, .biz-head-btns a, .ct-btn { max-width: 100%; white-space: normal; text-align: center; position: relative; }

/* ===== หน้าเกี่ยวกับเรา (ปรับ 14 ต.ค.): อ่านสบาย โทนครีม–เขียว ===== */
.about { max-width: 920px; }
.ab { font-size: 16.5px; line-height: 1.75; }
.ab p { margin: 0 0 14px; }
.ab-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: center; padding-bottom: 8px; }
.ab-head h1 { margin: 4px 0 10px; line-height: 1.25; }
.ab-h1-sub { display: block; font-size: .6em; color: var(--green-dark); white-space: nowrap; margin-top: 4px; }
.ab-lead { font-size: 17.5px; color: var(--ink); }
.ab-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0 !important; }
.ab-photo { margin: 0; }
.ab-photo img { width: 100%; height: auto; border-radius: 14px; display: block; }
.ab-photo figcaption { text-align: center; font-size: 14px; line-height: 1.5; margin-top: 8px; color: var(--ink-2); }
.ab-sec { margin-top: 36px; scroll-margin-top: 96px; }
.ab-sec h2 { font-size: 22px; margin: 0 0 10px; color: var(--primary); }
.ab-sec h3 { font-size: 18px; margin: 22px 0 10px; }
.ab-note { font-size: 15px; line-height: 1.7; color: var(--ink-2); background: #F1F6EE; border: 1px solid #DCE8D6; border-radius: 10px; padding: 10px 14px; }
.ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: none; }
.ab-card:hover { border-color: var(--green); }
.ab-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--mist); color: var(--primary); display: grid; place-items: center; }
.ab-ic svg { width: 24px; height: 24px; }
.ab-card-h { font-weight: 700; font-size: 17px; line-height: 1.4; margin-top: 4px; }
.ab-card-p { font-size: 15px; line-height: 1.65; color: var(--ink-2); flex: 1; }
.ab-card-more { font-weight: 700; font-size: 14.5px; color: var(--green-dark); }
.ab-company { background: #FAF8F1; border: 1px solid #ECE6D3; border-radius: 16px; padding: 22px 22px 18px; }
.ab-tag { display: inline-block; font-size: 13px; font-weight: 700; color: #6B5B2A; background: #F2ECD9; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px !important; }
.ab-facts { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ab-facts li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; font-weight: 700; line-height: 1.45; }
.ab-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ab-region { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ab-region h4 { margin: 0 0 4px; font-size: 15.5px; color: var(--primary); }
.ab-region p { margin: 0 !important; font-size: 15.5px; line-height: 1.65; }
.ab-small { font-size: 14px; color: var(--ink-2); margin-top: 8px !important; }
.ab-refs { margin-top: 18px; border-top: 1px solid #ECE6D3; padding-top: 4px; }
.ab-refs ul { padding-left: 18px; margin: 0; overflow-wrap: anywhere; font-size: 15px; }
.ab-cta { text-align: center; background: var(--mist); border-radius: 16px; padding: 24px 18px; }
.ab-cta .ab-btns { justify-content: center; }
.ab-link { font-weight: 700; color: var(--green-dark); }
@media (max-width: 760px) {
  .ab-head { grid-template-columns: 1fr; gap: 18px; }
  .ab-photo { max-width: 340px; margin: 0 auto; }
  .ab-cards, .ab-facts, .ab-regions { grid-template-columns: 1fr; }
  .ab-btns .ct-btn { flex: 1 1 100%; }
  .ab-company { padding: 18px 14px 14px; }
}
/* หน้าเกี่ยวกับเรา: เนื้อหาอย่างน้อย 16px ทุกขนาดจอ */
.about .ab p, .about .ab li, .about .ab-card-p, .about .ab-region p, .about .ab-note { font-size: 16px; line-height: 1.75; }
.about .ab .ab-lead { font-size: 17px; }
.about .ab .ab-small, .about .ab-photo figcaption { font-size: 14.5px; }

/* กล่องติดต่อท้ายหน้าเกี่ยวกับเรา */
.about .ab-cta { padding: 40px 24px; box-shadow: none; }
.about .ab-cta h2 { margin: 0 0 8px; }
.about .ab .ab-cta-p { margin: 0 auto; max-width: 560px; color: var(--ink-2); }
.ab-cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.ab-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 2px solid transparent; box-sizing: border-box; text-align: center; max-width: 100%; }
.ab-cta-btn.is-primary.is-wa { background: #25D366; border-color: #25D366; color: #08331C; }
.ab-cta-btn.is-primary.is-wa:hover { background: #20bd5a; border-color: #20bd5a; }
.ab-cta-btn.is-primary.is-line { background: #06C755; border-color: #06C755; color: #fff; }
.ab-cta-btn.is-primary.is-line:hover { background: #05b04b; }
.ab-cta-btn.is-outline { background: #fff; }
.ab-cta-btn.is-outline.is-line { border-color: #06C755; color: #05833A; }
.ab-cta-btn.is-outline.is-wa { border-color: #25D366; color: #128C4A; }
.ab-cta-btn.is-outline:hover { background: #F2FBF5; }
.about .ab .ab-cta-more { margin: 24px 0 0; font-size: 15px; }
@media (max-width: 760px) {
  .about .ab-cta { padding: 32px 16px; }
  .ab-cta-btns { flex-direction: column; align-items: stretch; }
  .ab-cta-btn { width: 100%; }
}

/* ปุ่มดูราคา */
.price-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin: 0 0 12px; padding: 8px 16px; border: 2px solid var(--primary); border-radius: 999px; background: #fff; color: var(--primary); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.price-toggle:hover { background: var(--mist); }
.price-toggle[aria-expanded="true"] { background: var(--mist); }
.price-toggle:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.price-panel { margin: 0 0 12px; }
.price-panel[hidden] { display: none; }
.pg-price { padding: 0 12px 12px; }
.pg-price .price-toggle { min-height: 44px; font-size: 15px; margin-bottom: 8px; }
.pg-price .price-panel { margin: 0; background: var(--mist-2, #F1F6F2); border-radius: 8px; padding: 10px 12px; }
.pg-amount { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.pg-amount span { font-size: 14px; font-weight: 700; }
.pg-price .pd-date { margin: 2px 0 6px; }
.pg-price .pd-ship { margin: 0; font-size: 13px; line-height: 1.5; }
/* การ์ดสินค้า: กรอบอยู่ที่ li เพื่อรวมปุ่มดูราคาไว้ในการ์ดเดียวกัน */
.prod-grid > li { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.prod-grid > li:hover { border-color: var(--green); }
.prod-grid > li > a { border: 0; border-radius: 8px 8px 0 0; height: auto; flex: 1; }
.prod-grid > li > .pg-price { padding: 0 10px 10px; }

/* ปุ่มราคา: ลูกศรลง (ปิด) / ลูกศรขึ้น (เปิด) */
.price-toggle .pt-ic { transition: transform .2s; }
.price-toggle[aria-expanded="true"] .pt-ic { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .price-toggle .pt-ic { transition: none; } }

/* กล่องเสริมคอลัมน์ซ้ายหน้าแรก */
.side-box { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px; color: var(--ink); text-decoration: none; box-shadow: none; }
a.side-box:hover { border-color: var(--green); }
.side-box img { display: block; width: 100%; height: auto; border-radius: 6px; margin-bottom: 8px; }
.side-box .sb-h { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--primary); line-height: 1.35; }
.side-box .sb-p { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.side-box .sb-more { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--green-dark); text-decoration: none; }
.side-arts ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.side-arts li a { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.45; }
.side-arts li a:hover span { color: var(--primary); text-decoration: underline; }
.side-arts li img { width: 64px; height: 64px; object-fit: cover; margin: 0; border-radius: 6px; border: 1px solid var(--line); }
.side-order { background: var(--mist); }
.side-order .sb-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--primary); margin-bottom: 6px; }
.side-order .sb-ic svg { width: 24px; height: 24px; }
.side-news .sn-item { display: block; color: var(--ink); text-decoration: none; }
.side-news .sn-item img { aspect-ratio: 4 / 3; object-fit: cover; }
.side-news .sn-date { display: block; font-size: 13px; color: var(--ink-2); }
.side-news .sn-t { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; }
.side-news .sn-item:hover .sn-t { color: var(--primary); text-decoration: underline; }

.news-thumb-family { background: #EEF6F1 !important; }

/* หน้าสินค้า: หัวข้อคลิกเปิด–ปิด (details/summary) */
.pd-acc { border-top: 0; }
.pd-details .acc { border-bottom: 1px solid var(--line); }
.pd-details .acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 4px; cursor: pointer; list-style: none; color: var(--primary); border-radius: 6px; }
.pd-details .acc > summary::-webkit-details-marker { display: none; }
.pd-details .acc > summary::marker { content: ""; }
.pd-details .acc > summary:hover { background: var(--mist); }
.pd-details .acc > summary:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.pd-details .acc-h { margin: 0; font-size: 18px; line-height: 1.4; color: var(--primary); }
.pd-details .acc-ic { flex: 0 0 auto; transition: transform .2s ease; }
.pd-details .acc[open] > summary .acc-ic { transform: rotate(180deg); }
.pd-details .acc-body { padding: 0 4px 14px; overflow-wrap: anywhere; }
.pd-details .acc-body .pd-nut { display: block; }
.pd-acc + section { border-top: 0; }
@media (prefers-reduced-motion: reduce) { .pd-details .acc-ic { transition: none; } }

/* หน้าสินค้า: คำอธิบายสินค้าใต้ปุ่มราคา/LINE */
.pd-about { margin-top: 24px; padding-top: 4px; color: var(--ink); overflow-wrap: anywhere; }
.pd-about h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.35; color: var(--primary); }
.pd-about h3 { margin: 18px 0 8px; font-size: 17px; line-height: 1.4; color: var(--primary); }
.pd-about p { margin: 0 0 10px; font-size: 16px; line-height: 1.75; }
.pd-about ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pd-about li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.65; }
.pd-about li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--green, #2E9A74); }
.pd-about .pd-about-note { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 700px) { .pd-about h2 { font-size: 20px; } .pd-about p, .pd-about li { font-size: 15px; } }

/* หน้าสั่งซื้อ: ข้อความแนะนำ + กล่องค่าจัดส่ง */
.order-intro { margin: 10px 0 0; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.order-ship { margin: 18px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 8px; background: var(--mist); }
.order-ship h3 { margin: 0 0 4px; font-size: 17px; color: var(--primary); }
.order-ship p { margin: 0; font-size: 16px; line-height: 1.7; }

/* คอลัมน์ซ้าย: พื้นที่ให้บริการรายจังหวัด */
.side-areas { padding: 0; overflow: hidden; }
.side-areas .sa-head { margin: 0; padding: 10px 12px; background: linear-gradient(180deg, #3FA34D, #23803A); color: #fff; font-size: 16px; font-weight: 700; text-align: center; line-height: 1.35; }
.side-areas .sa-note { margin: 0; padding: 8px 12px; font-size: 13px; line-height: 1.55; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.sa-region { border-bottom: 1px solid var(--line); }
.sa-region > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; color: var(--ink); background: #F7FAF7; }
.sa-region > summary::-webkit-details-marker { display: none; }
.sa-region > summary::marker { content: ""; }
.sa-region > summary:hover { background: var(--mist); }
.sa-region > summary:focus-visible, .sa-region a:focus-visible { outline: 3px solid #7CC24F; outline-offset: -3px; }
.sa-n { font-weight: 400; color: var(--ink-2); font-size: 13px; }
.sa-plus { position: relative; flex: 0 0 auto; width: 12px; height: 12px; }
.sa-plus::before, .sa-plus::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: #3FA34D; border-radius: 1px; }
.sa-plus::after { transform: rotate(90deg); transition: transform .2s ease; }
.sa-region[open] > summary .sa-plus::after { transform: rotate(0deg); }
.sa-region ul { list-style: none; margin: 0; padding: 0; }
.sa-region li a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); text-decoration: none; }
.sa-region li a .sa-plus { width: 9px; height: 9px; }
.sa-region li a .sa-plus::before, .sa-region li a .sa-plus::after { width: 9px; top: 4px; height: 1.5px; }
.sa-region li a:hover { background: var(--mist); color: var(--primary); }
.sa-region li small { margin-left: auto; font-size: 12px; color: var(--ink-2); }
.side-areas .sb-more { display: block; margin: 0; padding: 10px 12px; }
@media (prefers-reduced-motion: reduce) { .sa-plus::after { transition: none; } }

/* ปุ่มลอยติดต่อ ซ้ายล่าง (โทร · WhatsApp · LINE) — แบบเว็บเดิม · ซ่อนตอนหน้าต่างแจ้งข้อมูลเปิด */
.fab { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
body.modal-open .fab { display: none; }
.fab-menu { display: flex; flex-direction: column; gap: 12px; }
.fab-menu[hidden] { display: none; }
.fab-btn { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: #fff; cursor: pointer; text-decoration: none; box-shadow: 0 8px 22px rgba(15, 38, 33, .26); transition: transform .15s ease, box-shadow .15s ease; }
.fab-btn svg { width: 24px; height: 24px; }
.fab-line svg, .fab-wa svg { width: 28px; height: 28px; }
.fab-btn:hover, .fab-btn:focus-visible { transform: scale(1.06); box-shadow: 0 12px 28px rgba(15, 38, 33, .32); color: #fff; }
.fab-btn:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.fab-toggle { background: var(--primary); }
.fab-toggle .fab-chat-lines { stroke: var(--primary); }
.fab-toggle.is-open { background: #133F35; }
.fab-toggle.is-open .fab-chat-lines { stroke: #133F35; }
.fab-call { background: #17734F; }
.fab-wa { background: #128C7E; }
.fab-line { background: #06C755; }
.fab-mail { background: #3E5C76; }
/* ลิงก์ Facebook / YouTube (ไอคอนสีแบรนด์ + ข้อความ) · ท้ายเว็บ หน้าติดต่อเรา หน้าเกี่ยวกับเรา */
.soc-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-right: 12px; font-weight: 600; white-space: nowrap; }
.soc-link .soc-ic { flex: 0 0 auto; }
.soc-row { display: inline-flex; flex-wrap: wrap; align-items: center; }
.foot-social { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.foot-social > span { margin-right: 8px; }
.ab-cta .foot-social { justify-content: center; }
.ab-cta .ab-cta-mail { margin: 12px 0 0; }
.fab-label { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: #133F35; color: #fff; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.fab-menu .fab-label { opacity: 1; }
.fab-label-tg { opacity: 0; transition: opacity .15s ease; }
.fab-toggle:hover .fab-label-tg, .fab-toggle:focus-visible .fab-label-tg { opacity: 1; }
@keyframes fab-in { from { transform: scale(.4) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.fab-menu:not([hidden]) .fab-btn { animation: fab-in .22s cubic-bezier(.2, .8, .3, 1.2) both; }
.fab-menu:not([hidden]) .fab-btn:nth-child(2) { animation-delay: .04s; }
.fab-menu:not([hidden]) .fab-btn:nth-child(3) { animation-delay: .08s; }
@media (prefers-reduced-motion: reduce) { .fab-btn, .fab-menu:not([hidden]) .fab-btn { animation: none; transition: none; } }
/* มือถือ: ซ่อนปุ่มลอยไว้จนกว่าจะเลื่อนลงครึ่งจอ (site.js ใส่ .fab-wait) · ไม่ให้ทับปุ่มมุมล่างซ้ายของจอแรก (Pwell BG-01) */
.fab { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.fab.fab-wait { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fab { transition: none; } }
.site-foot::after { content: ""; display: block; height: 72px; }

/* คอลัมน์ซ้าย: สาระน่ารู้ */
.sk-list { list-style: none; margin: 0; padding: 0; }
.sk-list li a { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); text-decoration: none; }
.sk-list li a .sa-plus { margin-top: .45em; }
.sk-list li a:hover { background: var(--mist); color: var(--primary); }
.sk-list li a:focus-visible { outline: 3px solid #7CC24F; outline-offset: -3px; }

.side-areas .sa-join { margin: 0; padding: 10px 12px 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.side-areas .sa-join a { font-weight: 700; color: var(--green-dark); }

/* หน้าธุรกิจ: ระเบียบ Nutrition Club แบบคลิกเปิด–ปิด + หมายเหตุกำไรก่อนหักค่าใช้จ่าย */
.biz-acc { border-top: 1px solid var(--line); margin: 8px 0 10px; }
.biz-acc .acc { border-bottom: 1px solid var(--line); }
.biz-acc .acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 4px; cursor: pointer; list-style: none; color: var(--primary); border-radius: 6px; }
.biz-acc .acc > summary::-webkit-details-marker { display: none; }
.biz-acc .acc > summary::marker { content: ""; }
.biz-acc .acc > summary:hover { background: var(--mist); }
.biz-acc .acc > summary:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.biz-acc .acc-h { margin: 0; font-size: 17px; line-height: 1.4; color: var(--primary); }
.biz-acc .acc-ic { flex: 0 0 auto; transition: transform .2s ease; }
.biz-acc .acc[open] > summary .acc-ic { transform: rotate(180deg); }
.biz-acc .acc-body { padding: 0 4px 12px; overflow-wrap: anywhere; }
.biz-cost-note { margin: 10px 0 0; padding: 10px 14px; border-left: 4px solid var(--primary); background: var(--mist); border-radius: 6px; font-size: 15px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .biz-acc .acc-ic { transition: none; } }

/* ข่าวล่าสุด 3 ข่าว (คอลัมน์ซ้าย) */
.side-news .sn-txt { display: block; }
.side-news .sn-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.side-news .sn-row img { width: 64px; height: 64px; aspect-ratio: auto; object-fit: cover; margin: 0; border-radius: 6px; border: 1px solid var(--line); }
.side-news .sn-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 6px; border: 1px solid var(--line); }
.side-news .sn-ic svg { width: 40px; height: 40px; }
.side-news .sn-row .sn-t { font-size: 14px; line-height: 1.45; }
.side-news .sn-row .sn-date { font-size: 12px; }

.pd-about .pd-about-sub { margin: -4px 0 10px; font-weight: 700; color: var(--ink-2); }

/* ชุดแนะนำ /products/sets/ */
.sets-head h1 { margin: 6px 0 8px; color: var(--primary); }
.set-card { display: grid; grid-template-columns: 260px 1fr; gap: 24px; margin: 22px 0; padding: 20px; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 90px; }
.set-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.set-imgs img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.set-body h2 { margin: 0 0 8px; font-size: 22px; color: var(--primary); line-height: 1.35; }
.set-n { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.set-body h3 { margin: 14px 0 6px; font-size: 16px; color: var(--primary); }
.set-body p { margin: 0 0 8px; font-size: 16px; line-height: 1.7; }
.set-list { margin: 0 0 8px; padding-left: 20px; }
.set-list li { margin: 4px 0; font-size: 15px; line-height: 1.6; }
.set-list a { font-weight: 700; color: var(--ink); }
.set-var { color: var(--ink-2); font-size: 14px; }
.set-tip { font-size: 14px !important; color: var(--ink-2); }
.set-price { margin-top: 12px; }
.set-prices { list-style: none; margin: 0 0 8px; padding: 0; }
.set-prices li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.set-prices small { color: var(--ink-2); }
.set-total { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 4px !important; font-size: 16px; }
.set-total strong { font-size: 20px; }
.set-change { margin: 10px 0; font-size: 15px; color: var(--ink-2); }
.sets-link { margin: 6px 0 12px; }
.sets-link a { font-weight: 700; color: var(--green-dark); }
@media (max-width: 760px) { .set-card { grid-template-columns: 1fr; padding: 16px; } .set-imgs { grid-template-columns: repeat(4, 1fr); } }

/* บทความ: ตารางเปรียบเทียบ · หัวข้อเปิด–ปิด · บรรทัดอ้างอิงใต้หัวข้อ */
.art-table-wrap { overflow-x: auto; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: 8px; }
.art-table-wrap:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.art-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.art-table th, .art-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.art-table thead th { background: var(--mist); color: var(--primary); font-weight: 700; }
.art-table tbody th { background: #F7FAF7; color: var(--ink); font-weight: 700; white-space: nowrap; }
.art-table tbody tr:last-child th, .art-table tbody tr:last-child td { border-bottom: 0; }
.art-note { margin: 8px 0 10px; padding: 10px 14px; border-left: 4px solid #E9B949; background: #FFF8E6; border-radius: 6px; font-size: 15px; line-height: 1.7; }
.art-src { margin: 4px 0 12px; font-size: 13px; color: var(--ink-2); }
.art-acc { margin: 22px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.art-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 4px; cursor: pointer; list-style: none; color: var(--primary); border-radius: 6px; }
.art-acc > summary::-webkit-details-marker { display: none; }
.art-acc > summary::marker { content: ""; }
.art-acc > summary:hover { background: var(--mist); }
.art-acc > summary:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.art-acc .acc-h { margin: 0; font-size: 19px; line-height: 1.4; color: var(--primary); }
.art-acc .acc-ic { flex: 0 0 auto; transition: transform .2s ease; }
.art-acc[open] > summary .acc-ic { transform: rotate(180deg); }
.art-acc .acc-body { padding: 0 4px 14px; }
@media (prefers-reduced-motion: reduce) { .art-acc .acc-ic { transition: none; } }

/* หน้าสินค้า: กล่องคำเตือน (แสดงตลอด) */
.pd-details .pd-caution { margin: 16px 0 8px; padding: 14px 16px; border: 1px solid #F1C7C2; border-left: 4px solid #C62828; border-radius: 8px; background: #FFF6F5; }
.pd-details .pd-caution h2 { margin: 0 0 6px; font-size: 17px; color: #B71C1C; }
.pd-details .pd-caution ol { margin: 0; padding-left: 22px; }
.pd-details .pd-caution li { margin: 3px 0; font-size: 15px; line-height: 1.65; color: var(--ink); }

/* หน้าธุรกิจ: ปุ่มสอบถามเรื่องเปิดคลับ */
.club-cta { margin: 16px 0 4px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--mist); }
.club-cta p { margin: 0 0 10px; font-size: 16px; line-height: 1.7; }

.sa-region li a .sa-pv { display: block; line-height: 1.35; }
.sa-region li a .sa-pv small { display: block; margin: 1px 0 0; font-size: 12px; color: var(--ink-2); }

/* จำนวนคนอ่าน */
.views { color: var(--ink-2); font-weight: 400; }
/* แถบเรื่องเด่นใต้แบนเนอร์หน้าแรก */
.ticker { background: #F4F9F5; border-bottom: 1px solid var(--line); }
.ticker ul { list-style: none; margin: 0; padding: 10px 0; display: grid; gap: 4px; }
.ticker li a { display: block; padding: 4px 2px; font-size: 15px; line-height: 1.55; color: var(--ink); text-decoration: none; }
.ticker li a:hover { color: var(--primary); }
.ticker li a:hover .tk-more { text-decoration: underline; }
.ticker li a:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.ticker .tk-dot { color: var(--green, #2E9A74); font-weight: 700; }
.ticker .tk-more { color: var(--green-dark); font-weight: 700; white-space: nowrap; }
@media (min-width: 900px) { .ticker ul { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (max-width: 600px) { .ticker li:nth-child(n+4) { display: none; } .ticker li a { font-size: 14px; } }

/* บทความ: เช็กลิสต์ ปุ่มโทร อ้างอิงแบบเลข ข้อมูลเสริม */
.art-check { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; }
.art-check li { position: relative; padding: 8px 12px 8px 42px; background: #F4FAF6; border: 1px solid #D6EADD; border-radius: 8px; line-height: 1.6; }
.art-check li::before { content: ""; position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; border: 2px solid var(--green, #2E8B62); border-radius: 4px; background: #fff; }
.art-calls { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.art-call { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 2px solid #C9E3D3; border-radius: 10px; background: #fff; color: var(--ink, #1d2b24); text-decoration: none; }
.art-call:hover, .art-call:focus-visible { border-color: var(--green, #2E8B62); background: #F4FAF6; }
.art-call-num { flex: none; font-size: 22px; font-weight: 800; color: #B3261E; min-width: 62px; }
.art-call-txt { font-size: 15px; line-height: 1.45; }
.art-cite { white-space: nowrap; }
.art-refs { margin: 4px 0 16px; padding-left: 26px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.art-refs li { margin: 0 0 6px; word-break: break-word; scroll-margin-top: 90px; }
.art-refs li:target { background: #FFF8E6; }
.art-extra { margin: 22px 0 8px; padding: 14px 16px; border: 1px dashed #C9D3DA; border-radius: 10px; background: #FAFBFA; }
.art-extra-h { margin: 0 0 6px; font-size: 17px; }
.art-extra p { margin: 0 0 10px; font-size: 15px; }
.art-extra .intro-actions { margin-top: 6px; }
@media (max-width: 560px) {
  .art-calls { grid-template-columns: 1fr; }
  .art-cite { white-space: normal; }
}

/* ตารางบทความแบบเรียงเป็นการ์ดบนมือถือ (ตั้ง table.stack ใน articles.json) */
@media (max-width: 560px) {
  .art-table-stack { min-width: 0; }
  .art-table-stack thead { display: none; }
  .art-table-stack, .art-table-stack tbody, .art-table-stack tr, .art-table-stack th, .art-table-stack td { display: block; width: auto; }
  .art-table-stack tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .art-table-stack tr:last-child { border-bottom: 0; }
  .art-table-stack th[scope="row"] { white-space: normal; padding: 0 0 4px; border: 0; font-size: 16px; background: none; }
  .art-table-stack td { padding: 4px 0; border: 0; white-space: normal; }
  .art-table-stack td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 700; color: var(--green-dark); }
}

/* หน้าธุรกิจ: กล่องคำแถลงรายได้ + ลิงก์ PDF ใต้กล่อง */
.biz-typical { margin: 12px 0 8px; }
.biz-typical > p:first-child { margin: 0; padding: 12px 14px; background: var(--mist); border-radius: 8px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.biz-typical-link { margin: 6px 0 0; font-size: 15px; }

/* ชุดแนะนำ: ภาพรวมสินค้าทั้งชุด แสดงเต็มความกว้างการ์ด */
.set-card.set-card-cover { grid-template-columns: 1fr; gap: 14px; }
.set-cover { margin: 0; }
.set-cover img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.set-cover figcaption { margin-top: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* WhatsApp คู่กับเบอร์โทรทุกจุด (แถบหัวเว็บ · การ์ดผู้ดูแลหน้าแรก) */
.head-wa { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.head-wa svg { color: #128C7E; }
.head-wa:hover { color: #0B6E62; }
.op-btn-wa { background: #0B7A6D; }
.op-btn-wa:hover { background: #09665B; }


/* ปุ่ม LINE / WhatsApp กว้างเท่ากัน (วางคู่กัน = ครึ่งต่อครึ่ง · ขึ้นบรรทัดใหม่ = เต็มแถวเท่ากัน) */
.ct-btns .ct-btn { flex: 1 1 220px; }
.ct-btns { max-width: 520px; }

/* หน้าเกี่ยวกับเรา: สิ่งที่บริษัทยึดถือ */
.ab-vals { margin: 6px 0 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ab-val { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ab-val dt { font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.ab-val dd { margin: 0; line-height: 1.6; }
@media (max-width: 700px) { .ab-vals { grid-template-columns: 1fr; } }

/* ===== หน้าโปรแกรม 21 วัน (/program-21/ · หน้าซ่อน) ===== */
.p21-head h1 { margin: 2px 0 8px; font-size: 30px; line-height: 1.3; color: var(--primary); }
.p21-private { display: inline-block; margin: 12px 0 0; padding: 4px 12px; border-radius: 999px; background: var(--honey-bg); color: var(--honey-ink); font-size: 14px; font-weight: 600; }
.p21-toc ul { list-style: none; margin: 16px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.p21-toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 600; text-decoration: none; }
.p21-toc a:hover { background: var(--mist); }
.p21-what { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.p21-what li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.p21-what h3 { margin: 2px 0 4px; font-size: 17px; }
.p21-what p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.p21-ic { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--mist); color: var(--primary); display: grid; place-items: center; }
.p21-ic svg { width: 24px; height: 24px; }
.p21-fee { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 2px solid var(--primary); }
.p21-fee-num p { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.p21-fee-num strong { font-size: 40px; line-height: 1.1; color: var(--primary); }
.p21-fee-num span { font-size: 18px; font-weight: 700; color: var(--primary); }
.p21-fee ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.65; }
.p21-assess { margin-top: 14px; }
.p21-assess .news-list { margin: 6px 0 0; }
.p21-caution { margin: 12px 0 0; padding: 10px 14px; border-left: 4px solid var(--honey); background: var(--honey-bg); border-radius: 6px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.p21-prep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.p21-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.p21-card h3 { margin: 0 0 4px; font-size: 17px; color: var(--primary); }
.p21-card p { margin: 0; font-size: 15px; line-height: 1.7; }
.p21-card .news-list { margin: 6px 0 0; font-size: 15px; }
.p21-card-plate { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; }
.p21-plate { flex: 0 0 110px; width: 110px; height: 110px; }
.p21-sub { margin: 20px 0 8px; font-size: 18px; color: var(--primary); }
.p21-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p21-weeks li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
.p21-weeks strong { color: var(--green-dark); }
.p21-note { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; }
.p21-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.p21-progress[hidden] { display: none; }
.p21-bar { flex: 1 1 auto; max-width: 320px; height: 10px; border-radius: 999px; background: var(--mist); overflow: hidden; }
.p21-bar > span { display: block; height: 100%; width: 0; background: var(--green); border-radius: 999px; transition: width .3s ease; }
.p21-days .acc > summary { justify-content: flex-start; }
.p21-dnum { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--mist); color: var(--primary); font-weight: 800; display: grid; place-items: center; font-size: 15px; }
.p21-dtitle { flex: 1 1 auto; font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--ink); }
.p21-days .acc-ic { margin-left: auto; }
.p21-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.p21-badge[hidden], .p21-tick[hidden] { display: none; }
.p21-badge-m { background: var(--honey-bg); color: var(--honey-ink); }
.p21-badge-today { background: var(--primary); color: #fff; }
.p21-tick { margin-left: 6px; color: var(--green-dark); font-weight: 800; }
.p21-days .acc.is-done .p21-dnum { background: var(--green); color: #fff; }
.p21-days .acc.is-today { background: #F1F8EC; }
.p21-days .acc-body > p { margin: 0 0 10px; }
.p21-mission { padding: 10px 14px; border-left: 4px solid var(--green); background: var(--mist); border-radius: 6px; }
.p21-mission strong { display: block; font-size: 14px; color: var(--green-dark); }
.p21-mission p { margin: 2px 0 0; }
.p21-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; font-weight: 600; cursor: pointer; }
.p21-check input, .p21-habits input { width: 22px; height: 22px; accent-color: var(--green); flex: 0 0 auto; }
.p21-tracker { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.p21-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-weight: 600; }
.p21-start input { min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); background: #fff; }
.p21-status { margin: 8px 0 12px; font-weight: 700; color: var(--primary); min-height: 1.6em; }
.p21-table-wrap { overflow-x: auto; }
.p21-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.p21-table th, .p21-table td { padding: 6px; border-bottom: 1px solid var(--line); text-align: left; }
.p21-table thead th { font-size: 14px; color: var(--ink-2); font-weight: 700; }
.p21-table tbody th { white-space: nowrap; }
.p21-table small { font-weight: 400; color: var(--ink-2); }
.p21-table input { width: 100%; min-width: 68px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.p21-table tfoot th, .p21-table tfoot td { font-weight: 700; color: var(--primary); border-bottom: 0; }
.p21-disclaimer { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.p21-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.p21-btns .btn-primary { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.p21-clear { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-2); font: inherit; font-size: 15px; cursor: pointer; }
.p21-clear.is-armed { border-color: #B3261E; color: #B3261E; font-weight: 700; }
.p21-copied { margin: 8px 0 0; font-weight: 600; color: var(--green-dark); }
.p21-habits { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p21-habits label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 15px; }
@media (max-width: 700px) {
  .p21-head h1 { font-size: 24px; }
  .p21-what, .p21-prep, .p21-habits { grid-template-columns: 1fr; }
  .p21-fee { grid-template-columns: 1fr; }
  .p21-card-plate { flex-direction: column; align-items: flex-start; }
  .p21-weeks li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 480px) {
  .p21-table, .p21-table tbody, .p21-table tfoot, .p21-table tr { display: block; }
  .p21-table thead { display: none; }
  .p21-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .p21-table tr > th { grid-column: 1 / -1; border: 0; padding: 0; }
  .p21-table td { border: 0; padding: 0; }
  .p21-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--ink-2); }
  .p21-table input { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .p21-bar > span { transition: none; } }

/* ชุดผลิตภัณฑ์จากบริษัท (หน้า /products/sets/#packs) */
.packs { margin-top: 34px; scroll-margin-top: 90px; }
.packs-h { margin: 0 0 6px; font-size: 26px; color: var(--primary); }
.pack-card .pack-name { margin: 0 0 8px; font-size: 22px; color: var(--primary); line-height: 1.35; }
.pack-card h4 { margin: 14px 0 6px; font-size: 16px; color: var(--primary); }

.pack-card .set-cover img { width: auto; max-width: 100%; margin: 0 auto; }

/* หน้าผลิตภัณฑ์: หัวข้อกลุ่มเปิด–ปิด (คงแถบเขียวเดิม · ทั้งแถบกดได้) */
.grp-head { padding: 0; }
.grp-head h2::before { content: none; }
.grp-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 9px 16px; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.grp-toggle:focus-visible { outline: 3px solid #FFE08A; outline-offset: -3px; }
.grp-ic { flex: none; transition: transform .15s ease; }
.grp-toggle[aria-expanded="false"] .grp-ic { transform: rotate(-90deg); }
.prod-cat.is-closed { margin-bottom: 10px; }
.prod-cat { scroll-margin-top: 96px; }
.grp-all { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 8px; }
.grp-all button { min-height: 36px; padding: 6px 14px; border: 1.5px solid var(--line-strong, #C3D1C8); border-radius: 999px; background: #fff; color: var(--primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.grp-all button:hover { background: var(--mist); }
.grp-all button:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
@media (max-width: 700px) {
  .grp-toggle { padding: 6px 10px; }
  .grp-ic { width: 16px; height: 16px; }
  .grp-all button { font-size: 13px; min-height: 34px; padding: 5px 12px; }
}

/* ปุ่มสั่งซื้อผ่าน LINE: การ์ดสินค้า · หน้ารายละเอียด · แถบล่างจอมือถือ */
.pg-order-wrap { padding: 0 12px 8px; }
.prod-grid > li > .pg-order-wrap { padding: 0 10px 8px; }
.pg-order { display: flex; width: 100%; justify-content: center; min-height: 46px; padding: 8px 12px; font-size: 16px; font-weight: 800; white-space: normal; text-align: center; }
.pg-order:focus-visible, .pd-order:focus-visible, .order-bar a:focus-visible { outline: 3px solid #1D5C4D; outline-offset: 2px; }
.ol-logo { flex: none; }
.pd-price .pd-order { margin-bottom: 10px; }
.order-bar { display: none; }
@media (max-width: 700px) {
  .pg-order { font-size: 14px; min-height: 44px; padding: 6px 8px; gap: 6px; }
  .order-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); box-shadow: 0 -4px 16px rgba(15, 38, 33, .14); }
  .order-bar .btn-line { display: flex; width: 100%; justify-content: center; min-height: 48px; font-size: 16px; font-weight: 800; }
  body:has(.order-bar) { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  /* หน้าที่มีแถบ LINE ติดล่าง (หน้าสินค้า) มีช่องทางติดต่ออยู่แล้ว → ซ่อนปุ่มลอยที่ซ้ำ ไม่ให้ทับชิปรส (Pwell BG-01) */
  body:has(.order-bar) .fab { display: none; }
  body.modal-open .order-bar { display: none; }
}
/* ปุ่มสั่งซื้อในการ์ด: แยกจากสไตล์ลิงก์การ์ด (.prod-grid a) */
.prod-grid a.pg-order { flex-direction: row; align-items: center; height: auto; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--line-green); color: #fff; }
.prod-grid a.pg-order:hover { background: var(--line-green-hover); border: 0; }
@media (max-width: 700px) { .prod-grid a.pg-order { padding: 6px 8px; } }

/* หน้าสั่งซื้อ: ปุ่มจังหวัด + คำแนะนำ + กล่องสอบถามการจัดส่ง */
.prov-hint { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.prov-list li { padding: 0; border: 0; background: none; position: relative; }
.prov-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.prov-btn:hover, .prov-btn:focus-visible { background: #E8F4EC; border-color: var(--green); }
.prov-btn:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.prov-check { display: none; font-weight: 800; }
.prov-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.prov-btn[aria-pressed="true"] .prov-check { display: inline; }
@media (hover: hover) {
  .prov-btn::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 6px 10px; border-radius: 6px; background: #13302A; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.4; width: max-content; max-width: min(260px, 80vw); white-space: normal; text-align: center; pointer-events: none; display: none; z-index: 5; }
  .prov-btn:hover::after, .prov-btn:focus-visible::after { display: block; }
  .prov-btn[aria-pressed="true"]::after { display: none; }
}
.prov-list .prov-pop { flex: 1 1 100%; margin: 4px 0 6px; padding: 12px 14px; border: 2px solid var(--green); border-radius: 10px; background: #F4FAF6; }
.prov-pop-h { margin: 0 0 4px; font-weight: 800; font-size: 17px; color: var(--primary); }
.prov-pop-p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.prov-pop-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.prov-pop-btns .btn-line { white-space: normal; text-align: center; }
.prov-pop-x { min-height: 44px; padding: 8px 18px; border: 1.5px solid var(--primary); border-radius: 999px; background: #fff; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
.prov-pop-x:focus-visible, .prov-pop-btns .btn-line:focus-visible { outline: 3px solid #1D5C4D; outline-offset: 2px; }
@media (max-width: 480px) { .prov-pop-btns > * { flex: 1 1 100%; justify-content: center; } }

/* หน้า /privacy/ และ /terms/: หัวข้อย่อย ตาราง ลิงก์ และระยะเผื่อเมนูด้านบนเมื่อกดลิงก์ #cookies */
.legal-sec { scroll-margin-top: 112px; }
.legal-h3 { margin: 16px 0 6px; font-size: 17px; color: var(--primary); }
.legal .art-table { font-size: 14px; }
.legal .art-table td, .legal .art-table th { word-break: break-word; }
.legal-links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal-links a { font-weight: 700; color: var(--primary); }

/* เบอร์โทรรูปแบบสากล: ไม่ตัดบรรทัดกลางเบอร์ */
.head-phone, .head-wa, .op-btn { white-space: nowrap; }
.head-operator { flex-shrink: 0; }
.op-name { white-space: nowrap; }
/* เบอร์โทร: ขนาดตัวอักษรเล็กลง (เจ้าของสั่ง 15 ต.ค. 2569) */
.head-phone, .head-wa { font-size: 15px; gap: 5px; }
.head-phone svg, .head-wa svg { width: 16px; height: 16px; }
.op-btn-tel, .op-btn-wa { font-size: 15px; letter-spacing: .1px; }
@media (max-width: 700px) { .op-btn-tel, .op-btn-wa { font-size: 12px; } }

/* ปุ่ม WhatsApp มุมขวาบน: จอกว้างแสดงไอคอน+เบอร์ · จอแคบเป็นปุ่มกลมสีเขียว WhatsApp (แสดงทุกขนาดจอ) */
@media (max-width: 1240px) {
  .head-wa { justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #25D366; color: #fff; flex-shrink: 0; }
  .head-wa svg { width: 22px; height: 22px; color: #fff; }
  .head-wa:hover { background: #1EBE5B; color: #fff; }
  .head-wa .hw-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.head-wa:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
/* มือถือ: ปุ่มข้อความยาว (เช่นภาษาอังกฤษ) ขึ้นบรรทัดใหม่ได้ ไม่ดันหน้าล้นจอ */
@media (max-width: 480px) { .btn-line, .btn-primary { white-space: normal; text-align: center; justify-content: center; max-width: 100%; } }

/* หน้าสั่งซื้อ: แผนที่ 77 จังหวัด (เดสก์ท็อป แผนที่ซ้าย ข้อมูลขวา · มือถือ แผนที่บน ข้อมูลล่าง) */
.pv-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 20px; align-items: start; margin: 14px 0 6px; }
.pv-map-fig { position: relative; max-width: 420px; width: 100%; margin: 0 auto; }
.pv-map-fig svg { display: block; width: 100%; height: auto; }
.pv-shape { fill: #E3F2E8; stroke: #8DBBA0; stroke-width: .9; stroke-linejoin: round; cursor: pointer; transition: fill .1s ease; }
.pv-shape:hover, .pv-shape:focus-visible { fill: #7CC24F; outline: none; }
.pv-shape:focus-visible { stroke: #13302A; stroke-width: 2; }
.pv-shape.is-on { fill: var(--green-dark); stroke: #13302A; stroke-width: 2.5; }
.pv-mark circle { fill: #fff; stroke: #13302A; stroke-width: 3; pointer-events: none; }
.pv-mark-t { font-weight: 700; font-size: 20px; fill: #13302A; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 5px; pointer-events: none; }
.pv-tip { position: absolute; z-index: 3; max-width: 220px; padding: 6px 10px; border-radius: 6px; background: #13302A; color: #fff; font-size: 13px; line-height: 1.4; pointer-events: none; }
.pv-side { position: sticky; top: 90px; }
.pv-label { display: block; font-weight: 700; margin-bottom: 6px; }
.pv-select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--line-strong, #C3D1C8); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.pv-select:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.pv-info { margin-top: 12px; padding: 14px; border: 2px solid var(--line); border-radius: 10px; background: #fff; }
.pv-info:has(.pv-sel:not([hidden])) { border-color: var(--green); background: #F4FAF6; }
.pv-empty { margin: 0; color: var(--ink-2); }
.pv-sel-name { margin: 0; font-size: 20px; font-weight: 800; color: var(--primary); }
.pv-sel-region { margin: 2px 0 8px; font-size: 14px; color: var(--ink-2); }
.pv-sel-ok { margin: 0 0 4px; font-weight: 700; }
.pv-sel-p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.pv-sel-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-sel-btns .btn-line { white-space: normal; text-align: center; justify-content: center; }
.pv-credit { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 760px) {
  .pv-map { grid-template-columns: 1fr; }
  .pv-map-fig { max-width: 300px; }
  .pv-side { position: static; }
  .pv-sel-btns > * { flex: 1 1 100%; }
}

/* บทความ: รูปประกอบในหัวข้อ */
.art-fig { margin: 8px 0 14px; }
.art-fig img { display: block; width: 100%; height: auto; border-radius: 10px; }
.art-fig figcaption { margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* บทความ: เครดิตภาพ + ข้อความเรียบเรียง */
.art-imgcred { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.art-imgcred li { margin: 2px 0; overflow-wrap: anywhere; }
.art-compiled { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid var(--green, #2e7d32); background: rgba(0,0,0,.03); border-radius: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* ธุรกิจ: ช่องทางแจ้งบริษัท */
.biz-report { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line, #dfe7e2); border-left: 4px solid #c58b00; border-radius: 10px; background: #fffaf0; }
.biz-report h3 { margin: 0 0 6px; font-size: 17px; }
.biz-report p { margin: 0; line-height: 1.6; }
.biz-report a { font-weight: 700; white-space: nowrap; }

/* ตัวกรองหมวดย่อย: .prod-grid > li { display:flex } ทับ [hidden] ของเบราว์เซอร์ จึงต้องประกาศซ่อนเอง */
.prod-grid > li[hidden] { display: none; }
.sub-empty { margin: 4px 0 12px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; text-align: center; color: var(--ink-2); }
.sub-empty[hidden] { display: none; }
.sub-empty button { margin-left: 8px; padding: 6px 14px; border: 1px solid var(--green); border-radius: 999px; background: #fff; color: var(--green); font: inherit; font-weight: 700; cursor: pointer; }

/* หน้าสินค้า: บทความที่เกี่ยวข้อง */
.pd-arts h2 { margin: 0 0 8px; }
.pd-art-list { margin: 0; padding: 0; list-style: none; }
.pd-art-list li { border-top: 1px solid var(--line); }
.pd-art-list li:first-child { border-top: 0; }
.pd-art-list a { display: block; padding: 10px 2px; color: var(--green-d, #1d6b4f); font-weight: 600; line-height: 1.5; text-decoration: none; }
.pd-art-list a:hover { text-decoration: underline; }

/* หน้าแรก: ข่าว/ข้อมูลสุขภาพเปิด–ปิดได้ (ใช้ .grp-toggle เดียวกับหน้าสินค้า) */
.grp-body[hidden] { display: none; }
.grp-sec.is-closed { margin-bottom: 10px; }
.grp-sec { scroll-margin-top: 96px; }

/* ตัวกรองหมวดเชค: ป้ายกลุ่มชนิดโปรตีน (ขึ้นบรรทัดใหม่ในแถบเดิม) */
.sub-chips .sub-group { flex-basis: 100%; margin: 4px 0 -2px; font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* เกี่ยวกับเรา: ข้อความคู่ภาพประกอบ (เดสก์ท็อปวางคู่ · มือถือเรียงแนวตั้ง) */
.ab-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 28px; align-items: start; }
.ab-split-text > p:first-child { margin-top: 0; }
.ab-fig { margin: 0; }
.ab-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.ab-fig figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ab-fig figcaption a { color: inherit; }
@media (max-width: 760px) { .ab-split { grid-template-columns: 1fr; gap: 16px; } }

/* เกี่ยวกับเรา: ภาพสินค้าในส่วนสิ่งที่เราช่วยคุณได้ */
.ab-prod { margin: 18px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ab-prod picture, .ab-prod img { display: block; width: 100%; height: auto; }
.ab-prod img { object-fit: contain; }
.ab-prod figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--ink-2); text-align: center; }
.ab-prod figcaption a { font-weight: 700; color: var(--primary); }

/* ธุรกิจ: ปุ่ม LINE + WhatsApp ในกล่องสอบถาม */
.biz-cta .biz-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 !important; }
.biz-cta .btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 24px; border-radius: 999px; background: #25D366; color: #08331C; font-size: 17px; font-weight: 700; text-decoration: none; }
.biz-cta .btn-wa:hover { background: #20bd5a; }
.biz-cta .btn-wa:focus-visible { outline: 3px solid #FFE08A; outline-offset: 2px; }
@media (max-width: 480px) { .biz-cta .biz-cta-btns a { width: 100%; } }

/* ปุ่มเท่ากัน: about CTA + หัวเว็บ */
.ab-cta-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); justify-content: center; }
.ab-cta-btns .ab-cta-btn { width: 100%; }
@media (max-width: 560px) { .ab-cta-btns { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 701px) { .head-contact .btn-line { min-width: 190px; justify-content: center; } }


/* แบบฟอร์มฝากข้อมูลให้ติดต่อกลับ (component กลาง: หน้าธุรกิจ + dialog) */
.lead-form { position: relative; margin: 18px 0 6px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 16px; }
.lf-h { margin: 0 0 4px; font-size: 19px; color: var(--primary); line-height: 1.35; }
.lead-form .lf-sub { margin: 0 0 12px; color: var(--ink-2); }
.lead-form .lf-product { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: #F1F6EE; border: 1px solid #DCE8D6; }
.lf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.lf-wide { grid-column: 1 / -1; }
.lf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.lf-field[hidden] { display: none; }
.lf-field > label, .lf-field legend { font-weight: 700; padding: 0; }
.lf-field b { color: #c2410c; }
.lf-field input[type=text], .lf-field input[type=tel], .lf-field select, .lf-field textarea { font: inherit; font-size: 16px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong, #C3D1C8); border-radius: 8px; background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; }
.lf-field input:focus-visible, .lf-field select:focus-visible, .lf-field textarea:focus-visible { outline: 3px solid #7CC24F; outline-offset: 1px; }
.lf-field [aria-invalid=true] { border-color: #b91c1c; }
.lf-methods { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.lf-methods legend { width: 100%; margin-bottom: 4px; }
.lf-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong, #C3D1C8); border-radius: 999px; cursor: pointer; }
.lf-radio input { width: 18px; height: 18px; margin: 0; }
.lf-radio:has(input:checked) { border-color: var(--primary); background: #F1F6EE; font-weight: 700; }
.lf-methods .lf-err { width: 100%; }
.lead-form .lf-hint { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.lead-form .lf-err { margin: 0; font-size: 14px; font-weight: 700; color: #b91c1c; }
.lf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form .lf-privacy { margin: 14px 0 12px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.lf-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 220px; padding: 10px 24px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.lf-submit:hover { filter: brightness(1.08); }
.lf-submit:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.lf-submit[disabled] { opacity: .7; cursor: wait; }
.lead-form .lf-status { margin: 10px 0 0; font-weight: 700; min-height: 1.4em; line-height: 1.6; }
.lead-form .lf-status.is-ok { color: #15803d; }
.lead-form .lf-status.is-err { color: #b91c1c; }
.lf-status .lf-line { color: #05833A; white-space: nowrap; }
.lead-cta { margin: 8px 0 0; }
.lead-cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 14px 16px; }
.lead-cta-p { margin: 0; color: var(--ink-2); text-align: center; }
.lead-open { min-height: 44px; padding: 10px 22px; border: 2px solid var(--primary); border-radius: 999px; background: #fff; color: var(--primary); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.lead-open:hover { background: #F1F6EE; }
.lead-open:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.lead-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 14px; background: transparent; overflow: auto; }
.lead-dialog::backdrop { background: rgba(15, 30, 25, .55); }
.lead-dialog .lead-form { margin: 0; padding-top: 22px; }
.lead-close { position: sticky; top: 8px; float: right; z-index: 2; margin: 8px 8px -44px 0; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.lead-close:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
@media (max-width: 600px) { .lf-grid { grid-template-columns: 1fr; } .lf-submit { width: 100%; min-width: 0; } .lead-form { padding: 16px 14px; } }
.lead-dialog .lead-form { overflow-wrap: anywhere; }

/* ฟอร์มแบบตัวอย่างที่เจ้าของเลือก (15 ต.ค. 2569): แถบหัวข้อ · 2 คอลัมน์ · ปุ่มกว้างกลาง · ล่างสุดของหน้า */
.lead-bottom { margin: 28px 0 0; padding: 28px 0 8px; background: #EEF5F0; border-top: 1px solid var(--line); }
.lead-bottom .lead-form { max-width: 960px; margin: 0 auto 18px; }
.lead-form { padding: 0; overflow: hidden; }
.lead-form .lf-bar { margin: 0; padding: 12px 16px; background: var(--primary); color: #fff; font-size: 19px; font-weight: 700; text-align: center; line-height: 1.4; }
.lead-form .lf-body { padding: 16px 20px 18px; }
.lead-form .lf-sub { margin: 0 0 14px; text-align: center; }
.lead-form .lf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.lead-form .lf-field { gap: 6px; }
.lead-form .lf-contact-note { margin-top: -6px; }
.lead-form .lf-contact-note .lf-hint b { color: #c2410c; }
.lead-form .lf-field textarea { min-height: 72px; resize: vertical; }
.lead-form .lf-privacy { margin: 16px 0; text-align: center; }
.lead-form .lf-actions { text-align: center; }
.lead-form .lf-submit { width: min(100%, 640px); min-height: 48px; padding: 10px 28px; border-radius: 8px; font-size: 17px; }
.lead-form .lf-foot { margin: 14px 0 0; text-align: center; font-size: 15px; color: var(--ink); }
.lead-form .lf-status { min-height: 0; margin: 14px auto 0; max-width: 640px; font-weight: 400; }
.lead-form .lf-status:empty { display: none; }
.lead-form .lf-status.is-err, .lead-form .lf-status.is-ok { padding: 12px 14px; border-radius: 10px; border: 1px solid; }
.lead-form .lf-status.is-err { background: #FEF2F2; border-color: #FCA5A5; color: #991B1B; }
.lead-form .lf-status.is-ok { background: #F0FDF4; border-color: #86EFAC; color: #166534; }
.lead-form .lf-status-msg { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; color: inherit; }
.lead-form .lf-status .lf-line { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: #06C755; color: #fff; font-weight: 700; text-decoration: none; }
.lead-form .lf-status .lf-line:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
.lead-dialog .lead-form .lf-bar { padding-right: 56px; padding-left: 56px; }
.lead-dialog .lead-close { margin: 4px 4px -48px 0; background: rgba(255,255,255,.92); }
@media (max-width: 600px) {
  .lead-form .lf-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lead-form .lf-body { padding: 14px; }
  .lead-form .lf-submit { width: 100%; }
  .lead-bottom { padding: 18px 0 4px; }
}

/* หน้าติดต่อเรา /contact/ */
.ct-page { margin-top: 8px; }
.ct-page .sec-head h1 { margin: 0; font-size: 18px; color: #fff; }
.ct-page .sec-head h1::before { content: "› "; }
.ct-page .ct-form-link { margin: 14px 0 0; font-weight: 700; }


/* มือถือ 2 คอลัมน์: คอลัมน์ซ้ายแสดงกล่องครบแบบคอม (เจ้าของเลือก 16 ต.ค. 2569) · ย่อระยะ/ตัวอักษรให้พอดีคอลัมน์แคบ */
@media (max-width: 700px) {
  .side-box { padding: 8px; }
  .side-box .sb-h { font-size: 13px; }
  .side-box .sb-p, .side-box .sb-more { font-size: 12px; }
  .side-areas { padding: 0; }
  .side-areas .sa-head { padding: 8px 6px; font-size: 13px; }
  .side-areas .sa-note, .side-areas .sa-join { padding: 6px 8px; font-size: 12px; }
  .side-areas .sb-more { padding: 8px; }
  .side-arts li a, .side-news .sn-row { grid-template-columns: 1fr; gap: 4px; font-size: 12px; }
  .side-arts li img, .side-news .sn-row img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .side-news .sn-ic { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .side-news .sn-t, .side-news .sn-row .sn-t { font-size: 12px; }
  .side-news .sn-date, .side-news .sn-row .sn-date { font-size: 11px; }
  .side-order .sb-ic { width: 32px; height: 32px; }
  .sa-region > summary { gap: 6px; padding: 6px 8px; font-size: 13px; }
  .sa-region li a { gap: 6px; padding: 6px 6px 6px 10px; font-size: 12px; flex-wrap: wrap; }
  .sa-region li small { font-size: 11px; }
  .sa-n { font-size: 11px; }
  .sk-list li a { gap: 6px; padding: 6px 8px; font-size: 13px; }
}

/* ปุ่มบนมือถือไม่ตกบรรทัด (เจ้าของสั่ง 16 ต.ค. 2569 "ทุกอันเลย") · การ์ดสินค้าใช้ชื่อปุ่มสั้น (.lbl-s) */
.lbl-s { display: none; }
/* ลิงก์ดูเรื่องราวบน YouTube: ลิงก์ตัวเล็ก ไม่ใช่ปุ่มใหญ่ (เจ้าของ: "ทำให้เล็ก ๆ ไม่สะดุดตา") */
.yt-more { margin: 8px 0 0; }
.yt-more a.btn-primary { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: normal; }
.yt-more a.btn-primary:hover { color: var(--primary); background: none; }
@media (max-width: 700px) {
  .pg-order .lbl-l, .pg-price .lbl-l { display: none; }
  .pg-order .lbl-s, .pg-price .lbl-s { display: inline; }
  .pg-order { min-height: 40px; padding: 6px 8px; gap: 6px; font-size: 15px; white-space: nowrap; }
  .pg-price .price-toggle { min-height: 40px; padding: 6px 8px; gap: 4px; font-size: 14px; white-space: nowrap; }
  .ct-btn { gap: 6px; padding: 8px 12px; font-size: 15px; white-space: nowrap; }
  .quick a { flex-direction: column; justify-content: center; text-align: center; gap: 4px; padding: 8px 4px; }
  .yt-more a.btn-primary { font-size: 13px; }
}

/* ส่วนข้อมูลบริษัท (หน้าเกี่ยวกับเรา · เจ้าของสั่ง 16 ต.ค. 2569): ป้ายหัวข้อตัดบรรทัดตรง "|" · หมายเหตุตัวเล็กท้ายส่วน */
.ab-company .ab-tag { max-width: 100%; line-height: 1.5; border-radius: 12px; }
.ab-company .ab-tag .nw { white-space: nowrap; }
.ab-company h2 { text-wrap: balance; }
.ab-company .ab-co-note { margin: 12px 0 18px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 700px) {
  .ab-company .ab-tag { font-size: 12px; padding: 3px 10px; }
  .ab-company h2 { font-size: 20px; line-height: 1.4; }
  .ab-company p { overflow-wrap: break-word; }
  .ab-company .ab-co-note { font-size: 12px; }
}

/* แถบหัวข้อข่าวหน้าแรก: สลับทีละรายการ (คอม 2 รายการ · มือถือ 1 รายการ) ทุก 5 วินาที · หยุดเมื่อชี้/โฟกัส · มีปุ่มหยุด (WCAG 2.2.2)
   ผู้ที่ตั้งค่าลดการเคลื่อนไหว หรือ JS ไม่ทำงาน = แสดงรายการนิ่งแบบเดิม */
.ticker .wrap { display: flex; align-items: center; gap: 8px; }
.ticker .wrap > ul { flex: 1 1 auto; min-width: 0; }
.ticker.is-rot li { display: none; }
.ticker.is-rot li.tk-on { display: block; animation: tk-in .45s ease; }
.tk-pause { flex: 0 0 auto; display: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--primary); cursor: pointer; font-size: 12px; line-height: 1; }
.ticker.is-rot .tk-pause { display: inline-grid; place-items: center; }
.tk-pause:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
@keyframes tk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) { .ticker.is-rot ul { min-height: 58px; align-content: center; } }
@media (prefers-reduced-motion: reduce) { .ticker.is-rot li.tk-on { animation: none; } }

/* พื้นที่ให้บริการบนมือถือ (≤767px): ย้ายจากคอลัมน์ซ้ายแคบมาเต็มความกว้างใต้เนื้อหา · แถวละภูมิภาค · + ซ้าย ชื่อกลาง จำนวนขวา
   คอม/แท็บเล็ตไม่เปลี่ยน (.sa-mob ซ่อน) */
.sa-mob-wrap { display: none; }
@media (max-width: 767px) {
  /* รีวิวลูกค้าบนมือถือ: กว้างเต็ม 2 คอลัมน์ใต้ส่วนบน (เจ้าของสั่ง 17 ต.ค. 2569) · ส่วนบนยังเป็น 2 คอลัมน์ */
  .layout { grid-template-rows: auto auto; }
  .layout > .sidebar { grid-row: 1; }
  .layout > .home-reviews { grid-column: 1 / -1; grid-row: 2; }
  /* ช่วง 2 คอลัมน์จบเท่ากันก่อนรีวิว: กล่องสุดท้ายที่เห็นของคอลัมน์ซ้าย (ข่าวล่าสุด) ยืดลง (เจ้าของสั่ง 17 ต.ค. 2569) */
  .layout > .sidebar > .side-news { flex-grow: 1; }
  /* คำถามที่พบบ่อยบนมือถือ: แถวเตี้ยลงให้คอลัมน์ขวาจบใกล้คอลัมน์ซ้าย (เจ้าของสั่ง 17 ต.ค. 2569) · ตัวอักษร 14px · พื้นที่กดสูงอย่างน้อย 40px */
  .home-faq .faq-list { padding: 0 12px 6px 18px; }
  .home-faq .faq-item > summary { font-size: 14px; line-height: 1.45; padding: 9px 0; min-height: 40px; box-sizing: border-box; }
  .home-faq .faq-item > p { font-size: 14px; line-height: 1.55; }
  .sidebar .sa-desk { display: none !important; }
  .sa-mob-wrap { display: block; padding: 0 8px 24px; }
  .sa-mob { width: 100%; box-sizing: border-box; }
  .sa-mob .sa-head { padding: 12px 16px; font-size: 17px; }
  .sa-mob .sa-note, .sa-mob .sa-join { padding: 10px 16px; font-size: 14px; }
  .sa-mob .sa-region > summary { min-height: 48px; padding: 8px 16px; gap: 12px; font-size: 16px; }
  .sa-mob .sa-rn { flex: 1 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: normal; line-height: 1.4; }
  .sa-mob .sa-n { flex: 0 0 auto; margin-left: auto; font-size: 14px; }
  .sa-mob .sa-region li a { min-height: 48px; padding: 8px 16px 8px 28px; gap: 10px; font-size: 15px; flex-wrap: nowrap; }
  .sa-mob .sa-pv { flex: 1 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: normal; }
  .sa-mob .sb-more { padding: 12px 16px; min-height: 48px; box-sizing: border-box; display: flex; align-items: center; font-size: 15px; }
}

/* สไลด์จัดส่งทั่วประเทศบนมือถือให้เหมือนคอม (เจ้าของสั่ง 16 ต.ค. 2569): ข้อความซ้าย (หัวเล็ก+หัวข้อ+ปุ่ม) · ป้ายจังหวัดครบ 8 + "ครบ 77 จังหวัด" ด้านขวา */
@media (max-width: 700px) {
  .slider .slide-honey .slide-text { top: 50%; transform: translateY(-50%); left: 5%; max-width: 46%; }
  .slider .slide-honey .slide-text .kicker { display: block; font-size: 10px; margin-bottom: 2px; }
  .slider .slide-honey .slide-text h2 { font-size: clamp(14px, 4.1vw, 20px); margin-bottom: 6px; }
  .slider .slide-honey .chips-art {
    display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; align-content: center; gap: 3px;
    position: absolute; left: auto; right: 5%; top: 41%; bottom: auto; width: auto; height: auto; transform: translateY(-50%);
    padding: 0; overflow: visible; touch-action: auto;
  }
  .slider .slide-honey .chips-art span { font-size: 10px; padding: 1px 8px; line-height: 1.5; white-space: nowrap; }
  .slider .slide-honey .chips-art .more { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 359px) {
  .slider .slide-honey .chips-art { gap: 2px; }
  .slider .slide-honey .chips-art span { font-size: 9px; padding: 0 6px; }
}
@media (max-width: 400px) { .op-card h2 { overflow-wrap: anywhere; } }

/* แถบหัวข้อข่าวมีหลายสิบรายการ: แบบนิ่ง (ไม่มี JS/ลดการเคลื่อนไหว) แสดง 5 รายการแรก */
.ticker li:nth-child(n+6) { display: none; }
/* สไลด์จัดส่งบนมือถือ: ป้าย 3x3 (8 จังหวัด + "ครบ 77 จังหวัด" ช่องสุดท้าย) · เจ้าของเลือก 16 ต.ค. 2569 */
@media (max-width: 700px) {
  .slider .slide-honey .chips-art { grid-template-columns: repeat(3, max-content); top: 44%; }
  .slider .slide-honey .chips-art .more { grid-column: auto; justify-self: stretch; }
}

/* สไลด์จัดส่ง: รถส่งของใต้กลางสไลด์ (คอม+มือถือ) · ไม่ทับข้อความ ป้ายจังหวัด และโลโก้มุมขวาล่าง */
.slide-honey .slide-truck { position: absolute; left: 40%; bottom: 8%; width: 17%; max-width: 230px; height: auto; pointer-events: none; }
@media (max-width: 700px) {
  .slider .slide-honey .slide-truck { left: 39%; bottom: 5%; width: 18%; max-width: 92px; }
}
/* สไลด์ผลิตภัณฑ์ 5 หมวดบนมือถือ: เห็นครบ 5 การ์ดในหน้าเดียว ไม่ต้องเลื่อน (เจ้าของสั่ง 16 ต.ค. 2569) */
@media (max-width: 700px) {
  .slider .slide-cats .cat-tiles {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 0 8px;
    overflow: visible; scroll-snap-type: none; touch-action: auto; bottom: 30px;
  }
  .slider .slide-cats .cat-tiles li { flex: none; min-width: 0; }
  /* การ์ดหมวด: รูปใหญ่ขึ้น + เนื้อหาอยู่กึ่งกลางแนวตั้ง ไม่ชิดบน (เจ้าของสั่ง 16 ต.ค. 2569) */
  .slider .slide-cats .cat-tiles a { height: 82px; padding: 4px 2px; row-gap: 5px; align-content: center; }
  .slider .slide-cats .cat-imgs { height: 36px; }
  .slider .slide-cats .cat-name { font-size: 9px; line-height: 1.15; min-height: 0; }
}
@media (max-width: 359px) {
  .slider .slide-cats .cat-tiles { bottom: 24px; gap: 3px; padding: 0 6px; }
  .slider .slide-cats .cat-tiles a { height: 64px; }
  .slider .slide-cats .cat-imgs { height: 24px; }
  .slider .slide-cats .cat-name { font-size: 8.5px; }
}
@media (max-width: 389px) {
  .slider .slide-cats .slide-text h2 { font-size: 15px; }
  .slider .slide-cats .cat-tiles a { height: 78px; }
}
@media (max-width: 359px) {
  .slider .slide-cats .slide-text { top: 4%; }
  .slider .slide-cats .slide-text h2 { font-size: 14px; }
  .slider .slide-cats .cat-tiles a { height: 66px; row-gap: 3px; }
  .slider .slide-cats .cat-imgs { height: 28px; }
}
/* รูปบทความ/ข่าวไม่ขึ้นบน iPhone (Safari): กล่องรูปเป็น grid + place-items:center ทำให้ img กว้าง/สูง % คิดเป็น 0
   รูป loading="lazy" ขนาด 0 จึงไม่ถูกโหลด · ใช้ block + ขนาดคงที่แทน (แก้ 16 ต.ค. 2569) */
.ar-thumb.has-photo { display: block; }
.ar-thumb.has-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ===== รอบ 3 (Pwell live 5.2 / 5.4 · 18 ต.ค. 2569): ตัวอักษรหน้าแรกบนมือถืออย่างน้อย 12px + พื้นที่กดสูงอย่างน้อย ~40px
   ไม่เปลี่ยนเลย์เอาต์: พื้นที่กดขยายด้วย padding + margin ติดลบ (กล่องที่จัดวางเท่าเดิม) ===== */
/* จุดเลื่อนสไลด์: ปุ่มสูง 40px (เดิม 6px) แถบที่เห็นยังเป็น 34×6 ตรงตำแหน่งเดิม · ใช้กับทุกขนาดจอ */
.dots button { height: 40px; margin: -19px 0 -15px; background: none; }
.dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 6px; border-radius: 3px; background: #C3D1C8; }
.dots button[aria-selected="true"] { background: none; }
.dots button[aria-selected="true"]::before { background: var(--green); }
.dots button::after { inset: 0 -4px; }
/* จุดแรก/สุดท้ายไม่ยื่นพื้นที่กดออกนอกจอ (ต้นเหตุหน้ากว้างเกินจอ 2px ที่ 320px · Pwell BG-07) */
.dots button:first-child::after { left: 0; }
.dots button:last-child::after { right: 0; }

@media (max-width: 700px) {
  /* ป้ายเล็กในแบนเนอร์ (หัวเล็ก · การ์ดข้อมูลสมาชิก · ป้ายหัวข้อปรึกษา · ชื่อจังหวัด · ชื่อหมวดสินค้า) */
  .slider .slide-text .kicker, .slider .slide-honey .slide-text .kicker { font-size: 12px; }
  .slider .member-cards .mt { font-size: 12px; }
  .slider .slide-green .bubble { font-size: 12px; }
  .slider .slide-honey .chips-art span { font-size: 12px; padding: 1px 6px; }
  /* การ์ดหมวดสินค้า 5 ใบ: การ์ดยืดเต็มช่องใต้หัวข้อ รูปเตี้ยลงเล็กน้อยเพื่อให้ชื่อหมวด 12px ไม่ถูกตัด */
  .slider .slide-cats .slide-text { top: 4%; }
  .slider .slide-cats .cat-tiles { top: 26px; bottom: 30px; grid-template-rows: minmax(0, 1fr); }
  .slider .slide-cats .cat-tiles a { height: 100%; box-sizing: border-box; padding: 2px; row-gap: 2px; }
  .slider .slide-cats .cat-imgs { height: 24px; }
  .slider .slide-cats .cat-name { font-size: 12px; line-height: 1.1; -webkit-hyphens: auto; hyphens: auto; }
  html[lang="en"] .slider .slide-cats .cat-name { overflow-wrap: anywhere; }
  /* EN สไลด์จัดส่ง: ชื่อจังหวัดยาว ตัดเป็น 2 บรรทัดในป้าย ไม่ทับหัวข้อ (เดิมทับอยู่แล้วที่ 10px) · ซ่อนหัวเล็ก "Nationwide" ที่ซ้ำกับหัวข้อ */
  html[lang="en"] .slider .slide-honey .slide-text { max-width: 37%; }
  html[lang="en"] .slider .slide-honey .slide-text .kicker { display: none; }
  html[lang="en"] .slider .slide-honey .chips-art { right: 3%; width: 52%; gap: 2px; grid-template-columns: repeat(3, auto); justify-content: end; }
  html[lang="en"] .slider .slide-honey .chips-art span { white-space: normal; padding: 1px 5px; line-height: 1.15; border-radius: 9px; display: flex; align-items: center; justify-content: center; }

  /* คอลัมน์ซ้าย + เนื้อหา: ข้อความ 11px → 12px */
  .op-st, .lb-contact, .side-news .sn-date, .side-news .sn-row .sn-date, .h1-brand { font-size: 12px; }
  .lb-txt { font-size: clamp(12px, 3.3vw, 14px); }
  .intro-note, .ar-date { font-size: 12px !important; }

  /* พื้นที่กด: เบอร์/LINE/WhatsApp/อีเมลในกล่อง LINE · ลิงก์ "ดู…ทั้งหมด ›" · ลิงก์ใต้ย่อหน้าแนะนำ */
  .lb-contact a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .side-box .sb-more { padding: 10.4px 0; margin: -2.4px 0 -10.4px; }
  .side-areas .sb-more { padding-top: 10.4px; padding-bottom: 10.4px; margin: -2.4px 0; }
  .intro-links a { display: inline-block; padding: 11px 0; margin: -11px 0; }
}
@media (max-width: 767px) {
  .sa-mob .sa-join a { display: inline-block; padding: 9.5px 0; margin: -9.5px 0; }
}
@media (max-width: 374px) {
  html[lang="en"] .slider .slide-cats .cat-name { line-height: 1; }
  html[lang="en"] .slider .slide-cats .cat-imgs { height: 22px; }
}
/* จอ ≤359px (เช่น 320px): พื้นที่แบนเนอร์ไม่พอสำหรับ 12px ในการ์ดหมวด/ป้ายจังหวัด → 11px (เดิม 8.5–9px) */
@media (max-width: 359px) {
  .slider .slide-cats .slide-text { top: 3%; }
  .slider .slide-cats .cat-tiles { top: 24px; bottom: 24px; }
  .slider .slide-cats .cat-tiles a { padding: 1px 2px; }
  .slider .slide-cats .cat-imgs { height: 20px; }
  .slider .slide-cats .cat-name, html[lang="en"] .slider .slide-cats .cat-name { font-size: 11px; line-height: 1.05; }
  html[lang="en"] .slider .slide-cats .cat-name { line-height: 1; }
  html[lang="en"] .slider .slide-cats .cat-imgs { height: 18px; }
  .slider .slide-honey .chips-art span { font-size: 11px; padding: 0 5px; }
  html[lang="en"] .slider .slide-honey .slide-text { max-width: 34%; }
  html[lang="en"] .slider .slide-honey .chips-art { width: 58%; top: 42%; }
  html[lang="en"] .slider .slide-honey .chips-art span { padding: 0 4px; line-height: 1.1; }
}

/* แบนเนอร์ขอความยินยอมคุกกี้ (18 ต.ค. 2569) · แถบล่างจอ ไม่บังเนื้อหาถาวร · ปุ่มยอมรับ/ปฏิเสธเท่ากัน · ซ่อนปุ่มลอยระหว่างแสดง */
.cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(15, 38, 33, .14); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.cookie-consent[hidden] { display: none; }
.cc-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); max-width: 720px; }
.cc-text a { font-weight: 600; }
.cc-btns { margin: 0; display: flex; gap: 8px; flex: 0 0 auto; }
.cc-btn { min-height: 44px; min-width: 104px; padding: 8px 18px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border: 2px solid var(--primary); }
.cc-accept { background: var(--primary); color: #fff; }
.cc-decline { background: #fff; color: var(--primary); }
.cc-btn:focus-visible { outline: 3px solid #7CC24F; outline-offset: 2px; }
body.cc-open .fab { display: none; }
@media (max-width: 480px) { .cc-btns { width: 100%; } .cc-btn { flex: 1 1 0; } }