/* ═══════════════════════════════════════════════════════════════
   ONZON WELLNESS — สไตล์กลางของทั้งเว็บ
   อ้างอิงจาก design_mockup/ (index.html, welcome.html)
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   โทเคนสีกลางของทั้งเว็บ (ครีม #FDFBF6 + เขียว #2F5F19)
   กติกา: โค้ดใหม่ให้ใช้ var(--…) เสมอ ห้ามใส่สีตรง ๆ
   โหมดมืด = เขียนทับชุดนี้ในบล็อก [data-theme="dark"] ข้างล่างบล็อกเดียว
   ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #fdfbf6;          /* พื้นหลังหน้า */
  --panel: #fffefa;       /* แถบหัวเว็บ · การ์ด · dropdown */
  --panel-2: #fffefa;     /* กล่องซ้อนชั้นใน */
  --ink: #404040;         /* ตัวอักษรหลัก */
  --ink-soft: rgba(64, 64, 64, 0.72); /* คำอธิบาย · รายการรอง */
  --ink-faint: rgba(64, 64, 64, 0.5); /* ข้อความจาง · ป้ายกำกับ */
  --hair: rgba(64, 64, 64, 0.22);     /* เส้นขอบ · เส้นคั่น */
  --accent: #2f5f19;      /* hover · เส้นใต้ · ปุ่มหลัก */
  --accent-ink: #fdfbf6;  /* ตัวอักษรบนพื้นเขียว */
  --accent-wash: rgba(47, 95, 25, 0.07); /* พื้นจาง ๆ ตอน hover */
  --gold-ink: #b08d4f;    /* ทองที่อ่านออกบนพื้นสว่าง (เครื่องหมายคำพูด · เส้นคั่น) */
  --warn: #a2452f;        /* ข้อความเตือน */
  --shadow: 0 4px 4px 0 rgba(82, 52, 41, 0.25);
  --shadow-sm: 0 6px 18px rgba(82, 52, 41, 0.1); /* เงานุ่มสำหรับการ์ดเล็ก */
  --shadow-lg: 0 14px 34px rgba(82, 52, 41, 0.22);

  /* ── โทนเดิม (น้ำตาล/ทอง) — ยังใช้ในหน้าที่ยังไม่แปลงเป็นโทเคน ── */
  --brown-deep: #40200f;
  --brown-mid: #5e2f1c;
  --brown-warm: #753d24;
  --gold: #e8c37a;
  --cream: #f7ede1;
  --card-bg: #f2e6d5;
  --card-title: #5f3a22;
  --card-text: #8a5b3c;
  --line: rgba(247, 237, 225, 0.34);
  --danger: #ffb4a8;
}

/* ── โหมดมืด — ทั้งโหมดคือบล็อกนี้บล็อกเดียว ──
   หมายเหตุ: --accent ต้องสว่างขึ้นเป็น #8FBF6E เพราะเขียวแบรนด์ #2F5F19
   บนพื้นมืดมี contrast แค่ ~1.6:1 (ขั้นต่ำที่อ่านออกคือ 4.5:1) */
[data-theme="dark"] {
  --bg: #12150f;
  --panel: #1b1f17;
  --panel-2: #232820;
  --ink: #e7e4dc;
  --ink-soft: rgba(231, 228, 220, 0.72);
  --ink-faint: rgba(231, 228, 220, 0.45);
  --hair: rgba(231, 228, 220, 0.16);
  --accent: #8fbf6e;
  --accent-ink: #14210c;
  --accent-wash: rgba(143, 191, 110, 0.12);
  --gold-ink: #e8c37a;
  --warn: #ffb4a8;
  --shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans Thai", sans-serif;
  color: var(--ink);
  min-height: 100svh;
  /* background:
    linear-gradient(rgba(136, 65, 37, 0.3), rgba(136, 65, 37, 1)),
    url("../images/bg-pages.png") center / cover no-repeat; สีเคลือบเปลี่ยนเป็น #884125 = rgb(136,65,37) */
  background-color: var(--bg);
  background-attachment: fixed;
  transition:
    background-color 0.35s,
    color 0.35s;
  overflow-x: clip; /* clip = กันล้นแนวนอนเหมือน hidden แต่ไม่สร้าง scroll container → ไม่พัง position:sticky */
}

/* ───────── ตกแต่งพื้นหลัง ───────── */
.deco {
  position: fixed;
  z-index: 0;
  pointer-events: none;
}
.deco-leaf {
  top: 12%;
  left: -40px;
  width: min(230px, 26vw);
  opacity: 0.3;
}
.deco-candle {
  right: -60px;
  bottom: -40px;
  width: min(340px, 34vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(255, 196, 120, 0.28),
    transparent 62%
  );
}
.wrap {
  position: relative;
  z-index: 1;
}

/* ───────── HEADER ───────── */
/* กล่องครอบหัวเว็บ — ธีมสว่าง: พื้นครีมทึบ + เงาใต้แถบ (เลิกใช้รูป bg-topbar.png แล้ว)
   โครงใหม่ = แถวเดียว: โลโก้ซ้าย · เมนูไดนามิก (partials/site_menu) กลาง · ปุ่มบัญชีขวา */
.site-header {
  /* แบบค้างไว้ */
  /* position: relative; */

  /* แบบเลื่อน */
  position: sticky; /* ติดบนสุดตลอด — โชว์เสมอแม้เลื่อนลง · z-index → ลอยเหนือเนื้อหา (กัน dropdown มุดหลัง) */
  top: 0;
  z-index: 100;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.topbar {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  flex-wrap: nowrap;
  padding: 8px clamp(16px, 3vw, 44px);
}
.logo {
  display: block;
  width: clamp(132px, 13vw, 196px);
  height: auto;
  flex-shrink: 0;
}
.hd-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* เส้นคั่นตั้งระหว่างเมนูกับปุ่มบัญชี — กันสายตาอ่านปุ่มเป็นหัวข้อเมนูอันสุดท้าย */
.nav-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 26px;
  background: var(--hair);
}

/* ปุ่มบัญชีขวาสุด — pills โทนน้ำตาลบนพื้นครีม (ธีมสว่าง) */
.nav-auth {
  flex: 0 0 auto;
  align-items: center;
}
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s,
    transform 0.2s;
}
/* ปุ่มบัญชีหลัก (เข้าสู่ระบบ/ออกจากระบบ) — มีไอคอนนำหน้า */
.nav-acc {
  padding-left: 15px;
}
/* ปุ่มสลับโหมดสว่าง/มืด — ไอคอนล้วน 38px (ดีไซน์ A) */
.theme-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.theme-btn:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}
.theme-btn svg {
  display: block;
}
/* โชว์ไอคอนเดียวตามโหมดปัจจุบัน — สว่างโชว์ ☀ (กดไปมืด) · มืดโชว์ 🌙 (กดกลับสว่าง) */
[data-theme="dark"] .ic-sun {
  display: none;
}
:root:not([data-theme="dark"]) .ic-moon {
  display: none;
}
.nav-ico {
  flex: 0 0 auto;
  color: var(--accent);
  transition: color 0.3s;
}
.nav a:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}
.nav a:active {
  transform: translateY(1px);
}
.nav a.is-active {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}
.nav a.is-active .nav-ico {
  color: var(--accent-ink);
  opacity: .8;
}

.rule {
  width: min(1520px, 94vw);
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(247, 237, 225, 0.4) 14%,
    rgba(247, 237, 225, 0.46) 50%,
    rgba(247, 237, 225, 0.4) 86%,
    transparent
  );
}

/* ───────── HERO ───────── */
.hero {
  text-align: center;
  padding: clamp(14px, 3vw, 34px) 20px 0;
}
.hero h1 {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1.02;
  color: var(--accent);   /* 🎛️ สีหัวเรื่องใหญ่ (เดิมเป็นครีมสำหรับพื้นหลังเข้ม) */
  animation: rise 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.quote {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 2.3vw, 1.6rem);
  color: var(--ink-soft);
  margin-top: clamp(6px, 1.4vw, 14px);
  line-height: 1.6;
  animation: rise 1s 0.1s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.quote b {
  font-weight: 400;
  color: var(--gold-ink);
  padding: 0 0.18em;
}

/* ───────── การ์ดเลือกบทบาท ───────── */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
  width: min(650px, 92vw); /* ย่อการ์ด (ค่าเดิมก่อนย่อ = min(840px, 92vw)) */
  margin: clamp(22px, 3vw, 40px) auto 0;
  padding-bottom: clamp(40px, 6vw, 80px);
}
.card {
  background: var(--card-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 22px 48px -20px rgba(28, 12, 6, 0.62),
    0 -2px 12px 1px rgba(178, 98, 69, 0.5);
  display: flex;
  flex-direction: column;
  animation: rise 1s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.card:nth-child(1) {
  animation-delay: 0.16s;
}
.card:nth-child(2) {
  animation-delay: 0.26s;
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 60px -22px rgba(28, 12, 6, 0.72);
}

.collage {
  display: grid;
  gap: 5px;
  aspect-ratio: 408 / 346;
  padding: 5px 5px 0;
  background: var(--card-bg);
  position: relative;
}
.collage.layout-a {
  grid-template-columns: 1.32fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.collage.layout-b {
  grid-template-columns: 1fr 1.28fr;
  grid-template-rows: 1fr 1fr;
}

.tile {
  border-radius: 5px;
  background-color: #b07a52;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ph);
}
.tile[style*="--img"]::after {
  opacity: 0;
}

/* collage แสดงรูปเดียวเต็มพื้นที่ (รูปทะลุผ่าน tile ที่โปร่งใส) */
.collage.has-photo {
  background:
    var(--photo) center / cover no-repeat,
    var(--card-bg);
}
.collage.has-photo .tile {
  background: transparent;
}
.collage.has-photo .tile::after {
  opacity: 0;
}

/* hover การ์ด → tile ขยับแยกทิศ (parallax) + สว่างขึ้นเล็กน้อย */
.tile {
  transition:
    transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1),
    filter 0.45s ease;
}
.card:hover .tile {
  filter: brightness(1.06) saturate(1.04);
}
.card:hover .collage .tile:nth-child(1) {
  transform: translate(-3px, -3px) scale(1.045);
}
.card:hover .collage .tile:nth-child(2) {
  transform: translate(3px, -3px) scale(1.045);
}
.card:hover .collage .tile:nth-child(3) {
  transform: translate(-3px, 3px) scale(1.045);
}
.card:hover .collage .tile:nth-child(4) {
  transform: translate(3px, 3px) scale(1.045);
}

/* ประกายแสงกวาดผ่าน collage ตอน hover (card overflow:hidden เป็นตัวคลิปให้) */
.collage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 246, 225, 0.3) 48%,
    transparent 63%
  );
  translate: -125% 0;
  transition: translate 0.85s ease;
}
.card:hover .collage::after {
  translate: 125% 0;
}

.badge {
  position: absolute;
  left: 50%;
  bottom: -34px;
  translate: -50% 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(160deg, #6d3f26, #4a2715);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(28, 12, 6, 0.4);
  z-index: 2;
}
.badge svg {
  width: 34px;
  height: 34px;
}
.badge img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.card-body {
  text-align: center;
  padding: 40px clamp(18px, 2.4vw, 32px) clamp(14px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 15px;
}
.card-body h2 {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  color: var(--card-title);
  line-height: 1.1;
}
.card-body p {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
  font-size: clamp(0.86rem, 1.35vw, 1rem);
  color: var(--card-text);
  line-height: 1.62;
  margin-top: 10px;
  max-width: 34ch;
}
/* pin ปุ่มไว้ก้นการ์ด → ปุ่ม 2 การ์ดตรงกันเสมอ แม้ข้อความยาวไม่เท่ากัน */
.card-body .btn {
  margin-top: auto;
}

.btn {
  margin-top: clamp(16px, 2.4vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 30px;
  border: 1px solid rgba(122, 74, 48, 0.55);
  border-radius: 999px;
  color: var(--card-title);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 400;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.3s,
    border-color 0.3s,
    gap 0.3s;
}
.btn:hover {
  background: rgba(122, 74, 48, 0.1);
  border-color: rgba(122, 74, 48, 0.85);
  gap: 16px;
}
.btn svg {
  width: 15px;
  height: 15px;
}

/* ───────── ฟอร์ม / กล่องกลางจอ ───────── */
.panel {
  width: min(460px, 92vw);
  margin: clamp(24px, 5vh, 62px) auto clamp(40px, 8vh, 90px);
  background: var(--card-bg);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 26px 56px -22px rgba(28, 12, 6, 0.66);
  animation: rise 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.panel h1 {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.7rem);
  color: var(--card-title);
  text-align: center;
  line-height: 1.1;
}
.panel .sub {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
  font-size: 0.92rem;
  color: var(--card-text);
  text-align: center;
  margin-top: 6px;
}

.field {
  margin-top: 20px;
}
.field label {
  display: block;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--card-title);
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}
.field input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(122, 74, 48, 0.32);
  border-radius: 10px;
  background: #fbf5ec;
  color: #4a2c19;
  font-family: inherit;
  font-size: 1rem;
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    background 0.25s;
}
.field input:focus {
  outline: none;
  border-color: rgba(122, 74, 48, 0.8);
  box-shadow: 0 0 0 3px rgba(160, 106, 66, 0.18);
  background: #fff;
}
.field input::placeholder {
  color: #b7967a;
}

.btn-primary {
  width: 100%;
  margin-top: 26px;
  justify-content: center;
  border-radius: 50px;
  background: linear-gradient(160deg, #7a4728, #57301a);
  color: #fbf1e4;
  padding: 14px 30px;
  font-size: 1.02rem;
  box-shadow: 0 10px 22px -10px rgba(58, 30, 14, 0.8);
}
.btn-primary:hover {
  background: linear-gradient(160deg, #8a5230, #63371e);
  gap: 10px;
}

.alert {
  margin-top: 18px;
  padding: 12px 15px;
  border-radius: 10px;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
}
.alert-error {
  background: #fbe3de;
  border: 1px solid #e9b3a8;
  color: #96331f;
}
.alert-success {
  background: #e3f3e5;
  border: 1px solid #a9d2af;
  color: #2c6b36;
}
.alert-info {
  background: #fdf0da;
  border: 1px solid #e8cd9a;
  color: #8a5a12;
}

.panel-foot {
  margin-top: 22px;
  text-align: center;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 0.86rem;
  color: var(--card-text);
}
.panel-foot a {
  color: var(--card-title);
  font-weight: 400;
}

/* ───────── หน้าแรก (hero โลโก้กลางจอ) ───────── */
/* overflow:hidden — กันแสงเรือง (.brand::before) ที่ animation ขยายตัว
   ไม่ให้ดันความสูงหน้าจนเกิด scrollbar โผล่ๆ หายๆ (เนื้อหาจริงยัง fit เต็มจอ ไม่โดนตัด) */
.home {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: url("../images/bg-home.png") center / cover no-repeat;
}
.home .nav {
  justify-content: center;
  padding: 42px 20px 0;
  gap: 18px;
}
.home .nav a {
  padding: 13px 34px;
  font-size: 1.18rem;
}
.home .rule {
  margin-top: 34px;
}

/* แถบไล่เฉดตัดรอยต่อฮีโร่ → เนื้อหาด้านล่าง (กันเส้นแบ่งแข็งๆ) */
.home::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--brown-deep));
  pointer-events: none;
}

/* ───────── เนื้อหาต่อจากฮีโร่ — 3 section 3 สี (โครงเปล่าไว้เติมเนื้อหา) ───────── */
.home-more {
  position: relative;
  z-index: 1;
}
.home-more > section {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: clamp(40px, 7vw, 90px) 20px;
}
.home-more .sec-in {
  width: min(
    1400px,
    92vw
  ); /* content container 1400px ตามดีไซน์ · มือถือ = 92vw */
  text-align: center;
}
.home-more h2 {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem);
}

/* ───────── session1 = HERO แบนเนอร์ (รื้อทำใหม่ 2026-07-31) ─────────
   layer1 = แถบ flat-lay (image_01) บนสุด · layer2 = กรอบรูป (animation-figure-banner) ทับกลาง · layer3 = ข้อความ
   (เวอร์ชัน banner frame 1920×1000 เดิม ดูย้อนได้ใน git) */
.home-more .session1 {
  position: relative;
  display: block; /* ล้าง grid/place-items:center ที่สืบทอดจาก .home-more>section (ไม่งั้น stage หดกว้าง 0 → content absolute หาย) */
  height: 200vh; /* โซนสูงให้ scroll · stage ข้างในจะ pin ค้าง (สเต็ป scroll-expand) */
  min-height: 0;
  padding: 0;
  /* ⚠️ ห้ามใส่ overflow:hidden ที่นี่ — จะทำให้ sticky ข้างในพัง */
}
/* stage = พื้นที่ pin ค้าง 100vh ตอน scroll ผ่าน section 200vh */
.s1-stage {
  position: sticky;
  top: 0;
  width: 100%; /* บังคับเต็มกว้าง — กัน grid/การสืบทอดทำให้ stage หดเหลือ 0 */
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* ═══════════ แผงควบคุม session1 · จูนทุกอย่างที่นี่ที่เดียว ═══════════
     รื้อใหม่ 2026-07-31: ขนาด/ตำแหน่งขับด้วย CSS ล้วน · JS แค่ป้อน --p (progress 0→1)
     ขับด้วย height (คมชัด) แทน scale (เบลอตอนซูม) · width auto จาก aspect-ratio = คงสัดส่วน */
  --p: 0; /* progress 0→1 · JS ป้อนให้ตอน scroll — อย่าแก้มือ */

  /* ── ตอนเริ่ม (รูปเล็ก คงสัดส่วน 3:4) ── */
  --fig-start-w: clamp(
    140px,
    22vw,
    360px
  ); /* กว้างตอนเริ่ม (responsive เอง) — max 360px */
  --fig-start-h: calc(
    var(--fig-start-w) * 520 / 387
  ); /* สูงตอนเริ่ม (คงสัดส่วน) */
  --fig-start-y: 44vh; /* 🎛️ กลางรูปแนวตั้งตอนเล็ก (น้อย=สูง เหลือที่ให้ text) */

  /* ── ตอนขยายเต็มจอ ── */
  --fig-end-w: 100vw; /* 🎛️ กว้างตอนเต็ม (100vw=ชนขอบซ้ายขวา · 92vw=เหลือขอบ) */
  --fig-end-h: 100vh; /* 🎛️ สูงตอนเต็ม (100vh=ชนขอบบนล่าง) */
  --fig-end-y: 50vh; /* กลางจอพอดี (คู่กับ 100vh = เต็มจอเป๊ะ · อย่าแก้ถ้าไม่จำเป็น) */

  --fig-gap: 6vh; /* 🎛️ ระยะห่างรูป↔text ตอนรูปเล็ก */
  --text-max-y: 72vh; /* 🎛️ text ไหลลงได้ถึงระดับนี้แล้วหยุด (ตอนเต็มจอ text ค้างทับรูปตรงนี้) */

  /* ── คำนวณอัตโนมัติ — ไม่ต้องแตะ ── */
  --fig-cur-w: calc(
    var(--fig-start-w) + var(--p) * (var(--fig-end-w) - var(--fig-start-w))
  );
  --fig-cur-h: calc(
    var(--fig-start-h) + var(--p) * (var(--fig-end-h) - var(--fig-start-h))
  );
  --fig-cur-y: calc(
    var(--fig-start-y) + var(--p) * (var(--fig-end-y) - var(--fig-start-y))
  );
}
/* layer1: แถบ flat-lay ด้านบน — จางหายตอนรูปขยาย (opacity ผูกกับ --p) */
.session1 .s1-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1920 / 573; /* สัดส่วน image_01 */
  background: url("../images/Frame1.png") top center / cover no-repeat;
  opacity: calc(1 - var(--p) * 1.5); /* p↑ → จาง (ติดลบ = CSS ปัดเป็น 0 เอง) */
}
/* layer2: กรอบรูปตรงกลาง — morph จากตั้ง → เต็มจอ (width/height ขับตรง = คมชัด · cover ครอปให้พอดี) */
.session1 .s1-figure {
  position: absolute;
  left: 50%;
  top: var(--fig-cur-y);
  transform: translate(-50%, -50%); /* ขยายจากจุดกลาง */
  z-index: 1;
  width: var(--fig-cur-w);
  height: var(--fig-cur-h);
  border-radius: calc(
    10px - var(--p) * 10px
  ); /* 10px → 0 ตอนเต็มจอ (มุมโค้งไม่โผล่ขอบ) */
  background: url("../images/animation-figure-banner.png") center / cover
    no-repeat;
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.35);
}
/* ฉากมืดจางๆ ด้านล่างรูป — โผล่ตอนรูปใหญ่ (opacity ผูก --p) → text อ่านออกตอนทับบนรูป */
.session1 .s1-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 45%);
  opacity: var(--p);
  pointer-events: none;
}
/* layer3: ข้อความ — เกาะใต้ก้นรูปเสมอ (top คำนวณจาก --fig-cur-h) */
.session1 .sec-in {
  position: absolute;
  top: min(
    calc(var(--fig-cur-y) + var(--fig-cur-h) / 2 + var(--fig-gap)),
    var(--text-max-y)
  ); /* ไหลตามก้นรูปลงมา · แต่ไม่เกิน --text-max-y (ตอนเต็มจอ = ค้างทับรูปตรงนั้น) */
  left: 0;
  right: 0;
  width: auto; /* ล้าง width:min(1400,92vw) ที่สืบทอดมา → เต็มจอ (title ชิดขวาถึงขอบจริง) */
  z-index: 2; /* อยู่หน้ากรอบ กันข้อความจมหลังรูป */
  padding-inline: clamp(
    30px,
    20vw,
    500px
  ); /* ดันข้อความเข้าข้างใน (ซ้าย+ขวา) */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); /* อ่านออกตอนทับบนรูป */
}
/* พื้นหลังฝ้าขาวหมุ่นๆ หลัง text (frosted glass) — โผล่ตอนรูปขยาย (opacity ผูก --p) */
.session1 .sec-in::before {
  content: "";
  position: absolute;
  inset: -16px 0; /* คลุมบน-ล่าง text · เต็มกว้าง (เปลี่ยน 0 เป็นเลข/vw = หดขอบเข้า) */
  z-index: -1; /* อยู่หลังตัวอักษร */
  background: rgba(
    0,
    0,
    0,
    0.32
  ); /* 🎛️ ฝ้าดำ (มาก=เข้มจัด) — ครีม/ส้มเด่นบนพื้นเข้ม */
  backdrop-filter: blur(14px); /* 🎛️ ความหมุ่น (มาก=ฟุ้ง) */
  -webkit-backdrop-filter: blur(14px);
  opacity: var(--p); /* โผล่ตามการขยายรูป */
  pointer-events: none;
}
.session1 .s1-kicker {
  margin: 0;
  text-align: left;
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
  font-size: clamp(1.2rem, 2.5vw, 48px); /* = 48px @ จอ 1920 · ย่อลงจอเล็ก */
  line-height: normal;
  color: #ff962d;
}
/* .session1 นำหน้า = (0,2,0) ชนะ .home-more h2 (0,1,1) ที่ทับฟอนต์เป็น Cormorant */
.session1 .s1-title {
  margin: 0px 0 0;
  text-align: right; /* หัวข้อชิดขวา เยื้องไปทางรูป (ตามดีไซน์ · kicker ชิดซ้าย) */
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 6.67vw, 128px); /* = 128px @ จอ 1920 · ย่อลงจอเล็ก */
  line-height: normal;
  color: #f8f1e7;
}
/* ───────── session1 บนมือถือ — แก้ padding ยักษ์ที่บีบ text พันบรรทัด + ขยับขนาดให้พอดีจอแคบ ───────── */
@media (max-width: 600px) {
  .s1-stage {
    --fig-start-w: 200px; /* รูปเริ่มใหญ่ขึ้นบนมือถือ (เดิม 140px เล็ก/โล่งไป) */
    --fig-gap: 4vh; /* ลดช่องว่างรูป↔text นิด (จอเตี้ย) */
  }
  /* แถบพื้นหลัง flat-lay: ปลดล็อก aspect-ratio → คลุมเต็มจอแบบ .home (กันพื้นน้ำตาลโล่ง) */
  .session1 .s1-banner {
    inset: 0; /* คลุมเต็ม stage แทนแถบบางบนสุด */
    aspect-ratio: auto; /* ปลดล็อกสัดส่วน (ไม่งั้นสูงตามรูป = แถบบาง) */
    background-position: center; /* โชว์กลางรูป (flat-lay แนวนอนจะครอปซ้าย-ขวา) */
  }
  .session1 .sec-in {
    padding-inline: 24px; /* เดิม 20vw=75px บนจอ 375 → บีบ text · ลดเหลือ 24px = text มีที่หายใจ */
  }
  .session1 .s1-kicker {
    font-size: 1.05rem; /* ~17px — พอดีบรรทัดเดียว */
  }
  .session1 .s1-title {
    font-size: 2rem; /* ~32px — ไม่พันบรรทัดแรง */
  }
}

/* ───────── session2 = "ค้นหาสปาที่ใช่..." (ตามดีไซน์ Figma) ───────── */
/* .home-more นำหน้า = (0,2,0) ชนะ .home-more>section (0,1,1) จะได้ override align ได้ */
.home-more .session2 {
  /* Figma export = สีทึบ #432113 (gradient สีเดียว 0→100%) */
  /* background: linear-gradient(0deg, #432113 0%, #432113 100%), #fff;
  color: var(--cream); */
  text-align: center;
  align-items: start; /* ดันเนื้อหาชิดบน (ทับ place-items:center แนวตั้ง) */
  /* padding-top: 65px;  */
  /* เอา padding บนออก → content ติดบนสุด แล้วค่อยดันด้วย margin-top */
}
/* หัวข้อ 2 สี — 96px บนจอใหญ่ (6rem) ย่อด้วย clamp() ไม่ให้ล้นมือถือ */
/* .session2 นำหน้า = specificity (0,2,0) ชนะ .home-more h2 (0,1,1) ที่แอบทับฟอนต์ */
.session2 .s2-head {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 6rem);
  line-height: normal;
  color: #f8f1e7; /* "สปาที่ใช่..." = ครีม */
}
.s2-head-hi {
  color: #ff962d; /* "ค้นหา" = ส้ม */
}
/* คำโปรยใต้หัวข้อ — 32px น้ำหนักบาง จัดกลาง (clamp กันเล็กไปบนมือถือ) */
.session2 .s2-sub {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
  font-size: clamp(1.1rem, 2.4vw, 2rem); /* = 32px จอใหญ่ (2rem) */
  line-height: 1.37; /* 137% */
  color: #f8f1e7;
  margin-top: 0; /* ติดหัวข้อเลย ไม่เว้น */
}
/* ปุ่มค้นหา — โครง/ขนาด/hover ก๊อปจาก .btn เดิมเป๊ะ เปลี่ยนแค่สี (คลาสใหม่ ไม่กระทบหน้าอื่น) */
.s2-btn {
  margin-top: clamp(16px, 2.4vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 30px;
  border: 1px solid #613120; /* สีใหม่ */
  border-radius: 999px;
  color: #613120; /* สีใหม่ */
  text-decoration: none;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 0.98rem;
  font-weight: 400;
  background: #f8f1e7; /* สีใหม่ */
  cursor: pointer;
  transition:
    background 0.3s,
    border-color 0.3s,
    gap 0.3s;
}
.s2-btn:hover {
  background: #d9c3a8; /* สีใหม่ เข้มขึ้นตอน hover */
  gap: 16px; /* gap animation เหมือน .btn เดิม */
}
.s2-btn svg {
  width: 15px;
  height: 15px;
}

/* ───── แถบรูปเลื่อน marquee (พอร์ตจาก React AnimatedMarqueeHero) ───── */
.s2-marquee {
  width: 100vw; /* full-bleed หลุดกรอบ 1400 (body มี overflow-x:hidden กันล้น) */
  margin-left: calc(50% - 50vw);
  margin-top: clamp(32px, 5vw, 64px);
  overflow: hidden; /* คลิป track ที่เลื่อน */
  /* จางขอบบน-ล่างเนียนๆ ตามต้นฉบับ */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
}
.s2-marquee-track {
  display: flex;
  width: max-content;
  animation: s2-marquee 40s linear infinite;
  will-change: transform;
}
.s2-marquee-item {
  flex: 0 0 auto;
  height: clamp(
    240px,
    30vw,
    422.357px
  ); /* = 422px @ จอใหญ่ (Figma) · ย่อลงมือถือ */
  aspect-ratio: 316.072 / 422.357; /* สัดส่วนจริงจาก Figma (≈ 3:4) → กว้าง 316px ตอนสูง 422px */
  margin-right: 16px; /* ระยะห่าง (margin ไม่ใช่ gap → -50% loop เนียน) */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}
.s2-marquee-item:nth-child(odd) {
  rotate: -2deg; /* เอียงสลับตามต้นฉบับ */
}
.s2-marquee-item:nth-child(even) {
  rotate: 5deg;
}
.s2-marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes s2-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* -50% = เลื่อนพ้น 1 ชุดพอดี */
  }
}
/* เคารพผู้ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
  .s2-marquee-track {
    animation: none;
  }
}
/* ───────── session3 = "Onzon" (bg-about + โลโก้ fade-in + ข้อความซ้าย) ───────── */
.home-more .session3 {
  position: relative;
  aspect-ratio: 1920 / 787; /* เฟรมตามรูป → โลโก้กับข้อความ scale พร้อมกัน */
  min-height: 0; /* ล้าง 70vh */
  padding: 0; /* ล้าง padding */
  display: block; /* ล้าง grid */
  overflow: hidden;
  background: url("../images/bg-about.png") center / cover no-repeat;
}
/* โลโก้ Onzon (รูปโปร่ง) ซ้อนเต็มเฟรม → fade in ตอนเลื่อนถึง (JS เพิ่ม .is-visible) */
.s3-onzon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
  z-index: 1;
}
/* เผยเมื่อ section เข้าจอ (JS เพิ่ม .is-in ที่ .session3) */
.session3.is-in .s3-onzon {
  opacity: 1;
}
/* ข้อความ + ปุ่ม — ชิดซ้าย ใต้โลโก้ Onzon · fade + rise ตามหลังโลโก้ */
.s3-content {
  position: absolute;
  left: 13.3%; /* ตรงกับตำแหน่งโลโก้ Onzon ในรูป */
  top: 50%;
  width: min(38%, 560px);
  z-index: 2;
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s ease 0.35s,
    transform 0.9s ease 0.35s; /* delay 0.35s = ขึ้นหลังโลโก้ */
}
.session3.is-in .s3-content {
  opacity: 1;
  transform: none;
}
.s3-text {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
  font-size: clamp(
    0.9rem,
    1.2vw,
    1rem
  ); /* = 16px @ จอใหญ่ · ไม่เล็กเกินบนมือถือ */
  line-height: 1.37; /* 137% */
  color: #f8f1e7;
}
/* <br> ในคำอธิบาย: โผล่เฉพาะจอกว้าง ≥1400px (กล่องกว้างพอ) = 4 บรรทัดตามดีไซน์
   จอแคบกว่า (iPad Pro/laptop เล็ก/มือถือ) → ซ่อน → ข้อความไหลเอง ไม่มีคำห้อย
   (space นำหน้า <br> ใน HTML → ตอนซ่อนยังมีเว้นวรรคคั่นประโยค) */
@media (max-width: 1399.98px) {
  .s3-br {
    display: none;
  }
}
/* ลดการเคลื่อนไหว → โชว์เลย ไม่ fade */
@media (prefers-reduced-motion: reduce) {
  .s3-onzon,
  .s3-content {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* โลโก้ Onzon แบบตัวอักษร — โชว์เฉพาะมือถือ (เดสก์ท็อปใช้รูป .s3-onzon) */
.s3-title {
  display: none;
}

/* ───── มือถือ session3 (< 768px): ปลดเฟรม → เรียงตั้ง ชิดซ้าย ───── */
@media (max-width: 768px) {
  .home-more .session3 {
    aspect-ratio: auto; /* ปลดกรอบ 1920×787 → สูงตาม content */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding: clamp(44px, 11vw, 72px) clamp(20px, 6vw, 34px);
    /* โชว์รูปผู้หญิงเป็นพื้น + ม่านเข้มให้อ่านออก */
    background:
      linear-gradient(rgba(30, 15, 8, 0.5), rgba(30, 15, 8, 0.82)),
      url("../images/bg-about.png") 72% center / cover no-repeat;
  }
  .s3-onzon {
    display: none; /* ซ่อนรูปโลโก้เต็มเฟรม → ใช้ตัวอักษรแทน */
  }
  .s3-content {
    position: static; /* ออกจาก absolute → flow ปกติ */
    left: auto;
    top: auto;
    width: 100%;
    max-width: 560px;
  }
  .s3-title {
    display: block;
    height: clamp(54px, 15vw, 80px); /* คุมความสูง · กว้างตามสัดส่วน img เอง */
    width: auto;
    margin-bottom: clamp(16px, 4vw, 24px);
  }
}

/* session6 = FAQ "คำถาม ทั่วไป" — หัวข้อใช้สไตล์เดียวกับ session5 */
.home-more .session6 {
  align-items: start; /* text เริ่มจากบน · ตรงกลาง (เหมือน session5) */
  /* background: #502618;
  color: var(--cream); */
}

/* ───────── session4 = "วิดีทัศน์" (หัวข้อไล่เฉด + เส้น) ───────── */
.home-more .session4 {
  align-items: start; /* ดันเนื้อหาชิดบน (หัวข้ออยู่บน · การ์ดจะต่อล่าง) */
}
.s4-head {
  display: flex;
  align-items: baseline; /* เส้นเกาะ baseline ของตัวอักษร (ใต้ตัวหนังสือพอดี ไม่สนกล่องสูง) */
  gap: 20px; /* ระยะหัวข้อ↔เส้น ตามดีไซน์ */
}
/* .session4 นำหน้า = (0,2,0) ชนะ .home-more h2 (0,1,1) ที่แอบทับฟอนต์ */
.session4 .s4-title {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 5rem); /* = 80px @ จอใหญ่ */
  line-height: normal;
  white-space: nowrap; /* ไม่ให้หัวข้อตกบรรทัด */
  /* ไล่เฉดตัวอักษร ครีม → น้ำตาล ตามดีไซน์ */
  color: #f8f1e7;
}
.s4-line {
  flex: 1; /* ยืดเต็มพื้นที่เหลือ (design 1128px → responsive) */
  height: 1px;
  background: #fff;
}

/* ── การ์ดวิดีโอ 3 ใบ · จัดกลาง ห่าง 72px ── */
.v-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 72px;
  margin-top: clamp(36px, 5vw, 60px);
}
.v-card {
  width: min(384px, 100%);
  display: flex;
  flex-direction: column; /* เรียงแนวตั้ง → ดันแถวปุ่มลงล่างสุดได้ */
  padding: 0; /* ไม่มีช่องว่าง → กรอบ hover ชิดวิดีโอเลย */
  text-align: left; /* ดีไซน์ข้อความในการ์ดชิดซ้าย (สเปกเขียน center แต่รูปเป็นซ้าย) */
  border: 1px solid transparent; /* จองที่ไว้ กัน layout ขยับตอน hover */
  border-radius: 15px;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.v-card:hover {
  border-color: #bda18d;
  box-shadow:
    -3px -3px 4px 0 rgba(178, 98, 69, 0.57),
    2px 4px 4px 0 #481a07;
}
/* กล่องวิดีโอ */
.v-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 384.248 / 241.915;
  border-radius: 15px;
  background-color: #2a1710;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  box-shadow:
    -3px -3px 4px 0 rgba(178, 98, 69, 0.25),
    0 4px 4px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.v-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: #cc2b1d; /* ปุ่มเล่นสีแดง */
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.v-play svg {
  width: 24px;
  height: 24px;
  margin-left: 3px; /* ชดเชยให้สามเหลี่ยมดูอยู่กลาง */
}
/* ข้อความในการ์ด — เยื้องเข้า 20px ซ้าย+ขวา (วิดีโอยังเต็มความกว้าง) */
.v-title,
.v-sub,
.v-loc,
.v-actions {
  padding-inline: 20px;
}
.v-title {
  margin-top: 32px; /* ห่างจากกล่องวิดีโอ 32px */
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.5; /* ไทยมีสระ/วรรณยุกต์สูง → เผื่อที่ กันหางอักขระบรรทัดถัดไปโผล่ */
  color: #f8f1e7;
  display: -webkit-box; /* ตัดที่ 2 บรรทัด + … */
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v-sub {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 179.6%;
  color: #f8f1e7;
}
.v-loc {
  display: flex;
  align-items: center;
  gap: 8px; /* ไอคอน↔ข้อความ 8px */
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 179.6%;
  color: #f8f1e7;
}
.v-loc img {
  width: 11px;
  height: 15px;
  flex-shrink: 0;
}
/* ปุ่มไอคอน โทร/ดูรายละเอียด — วงกลม → ขยายเป็น pill ตอน hover */
.v-actions {
  display: flex;
  align-items: center;
  margin-top: auto; /* ดันแถวปุ่มลงชิดล่างสุดเสมอ → text ยาวไม่เท่ากันปุ่มก็ตรงแถว */
  padding-top: 14px; /* กันปุ่มติดข้อความเกินไปตอน text สั้น */
  padding-bottom: 20px; /* เว้นใต้ปุ่ม → ขอบล่างการ์ด */
}
.v-act {
  display: inline-flex;
  align-items: center;
  height: 37.313px;
  border-radius: 37.313px; /* วงกลม */
  border: 0.5px solid #e1ccb8;
  background: #3b1c0f;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  color: #f8f1e7;
  transition:
    border-radius 0.35s ease,
    background 0.35s ease;
}
.v-act + .v-act {
  margin-left: -16px; /* ซ้อนทับกันให้ชิดขึ้น */
}
.v-act:hover {
  position: relative;
  z-index: 1;
  border-radius: 18.5px; /* วงกลม → pill */
}
.v-act > img {
  width: 37.313px;
  height: 37.313px;
  padding: 9px; /* จัดไอคอนให้อยู่กลางวงกลม */
  object-fit: contain;
  flex-shrink: 0;
  box-sizing: border-box;
}
.v-act > span {
  max-width: 0;
  opacity: 0;
  padding-right: 0;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 15px;
  transition:
    max-width 0.35s ease,
    opacity 0.3s ease,
    padding-right 0.35s ease;
}
.v-act:hover > span {
  max-width: 160px;
  opacity: 1;
  padding-right: 16px;
}
/* ปุ่มดูทั้งหมด — จัดกลาง */
.s4-more {
  display: flex;
  width: fit-content;
  margin: clamp(30px, 4vw, 50px) auto 0;
}

/* ───────── session5 = "โปรแกรม และกิจกรรมที่น่าสนใจ" (หัวข้อ + sub + คำอธิบาย) ───────── */
.home-more .session5 {
  align-items: start; /* text เริ่มจากบน (การ์ดจะต่อล่างทีหลัง) */
}
/* .sessionX นำหน้า = (0,2,0) ชนะ .home-more h2 (0,1,1) ที่แอบทับฟอนต์ · session5+6 ใช้หัวข้อสไตล์เดียวกัน */
.session5 .s5-title,
.session6 .s6-title {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 5rem); /* = 80px @ จอใหญ่ */
  line-height: 1.35; /* = 108px */
  text-wrap: balance;
}
.s5-title-a,
.s6-title-a {
  color: #f8f1e7;
}
.s5-title-b,
.s6-title-b {
  color: #ff962d; /* "และกิจกรรมที่น่าสนใจ" / "ทั่วไป" = ส้ม */
}
.s5-sub,
.s6-sub {
  margin-top: 0; /* ชิดกับ title ด้านบน */
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.25rem); /* = 20px */
  line-height: normal; /* สเปกเขียน 108px (540%) = artifact → ใช้ normal กันช่องว่างเว่อร์ */
  color: #f8f1e7;
}
.s5-desc,
.s6-desc {
  margin: 10px auto 0; /* ห่างจาก sub 17px */
  max-width: min(1040px, 92vw); /* กว้างพอให้บรรทัด 2 อยู่บรรทัดเดียว */
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
  font-size: clamp(0.9rem, 1.2vw, 1rem); /* = 16px */
  line-height: 1.37; /* 137% */
  color: #f8f1e7;
}
/* <br> คำอธิบาย: โผล่เฉพาะจอกว้าง ≥1100px (2 บรรทัดพอดี) · แคบกว่า → ซ่อน → ไหลเอง ไม่รั่ว */
@media (max-width: 1099.98px) {
  .s5-br,
  .s6-br {
    display: none;
  }
}

/* หัวข้อ session5/6: fade + rise ตอนเลื่อนถึง (JS ใส่ .is-in ที่ section · เหมือน session3) */
.session5 .s5-title,
.session5 .s5-sub,
.session5 .s5-desc,
.session6 .s6-title,
.session6 .s6-sub,
.session6 .s6-desc {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.session5 .s5-sub,
.session6 .s6-sub {
  transition-delay: 0.13s; /* ทยอยขึ้นหลัง title */
}
.session5 .s5-desc,
.session6 .s6-desc {
  transition-delay: 0.26s; /* ทยอยขึ้นหลัง sub */
}
.session5.is-in .s5-title,
.session5.is-in .s5-sub,
.session5.is-in .s5-desc,
.session6.is-in .s6-title,
.session6.is-in .s6-sub,
.session6.is-in .s6-desc {
  opacity: 1;
  transform: none;
}
/* ลดการเคลื่อนไหว → โชว์เลย ไม่ fade */
@media (prefers-reduced-motion: reduce) {
  .session5 .s5-title,
  .session5 .s5-sub,
  .session5 .s5-desc,
  .session6 .s6-title,
  .session6 .s6-sub,
  .session6 .s6-desc {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── การ์ด FAQ (accordion · คลิกหัวข้อ = กาง/พับ) ── */
.faq {
  width: min(1271px, 100%);
  margin: clamp(30px, 4vw, 50px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left; /* ทับ text-align:center ของ .sec-in */
}
.faq-item {
  background: #f8f1e7;
  border-radius: 15px;
  overflow: hidden; /* กันมุมโค้งตอนคำตอบกาง */
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between; /* หัวข้อซ้าย · ลูกศรขวา */
  gap: 20px;
  width: 100%;
  padding: 23px clamp(20px, 3vw, 40px); /* 1 บรรทัด ≈ 80px (ตามสเปก) */
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: padding-bottom 0.3s ease;
}
.faq-item.open .faq-q {
  padding-bottom: 8px; /* กาง = หด padding-bottom → คำตอบชิดหัวข้อ */
}
.faq-qt {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem); /* = 24px @ จอใหญ่ */
  line-height: 1.4;
  color: #311205;
}
.faq-arrow {
  flex: 0 0 auto;
  transition: transform 0.3s ease;
}
.faq-item.open .faq-arrow {
  transform: rotate(180deg); /* กาง = ลูกศรชี้ขึ้น */
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease; /* JS ใส่ max-height = scrollHeight ตอนกาง */
}
.faq-at {
  margin: 0;
  padding: 0px clamp(20px, 3vw, 40px) 15px;
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
  font-size: clamp(0.9rem, 1.1vw, 1.0625rem); /* = 17px · เล็ก+อ่อนกว่าหัวข้อ */
  line-height: 1.6;
  color: #613120;
}

/* ── การ์ดโปรแกรม: CAROUSEL (โชว์ 4 ใบเป๊ะ · เลื่อนทีละแถว · แถวบนใหญ่) ── */
.p-carousel {
  display: flex;
  gap: 18px;
  max-width: 1270px;
  margin: clamp(30px, 4vw, 50px) auto 0;
  -webkit-user-select: none; /* สไลเดอร์ห้ามลากเลือกข้อความ (กัน "effect" ไฮไลต์ลากทั้งหน้า) */
  user-select: none;
}
.p-view {
  flex: 1;
  min-width: 0;
  height: 686px; /* = 2 แถวเป๊ะ (ใหญ่ 367.79 + gap 41 + เล็ก 277.395) */
  overflow: hidden; /* คลิป → เห็นแค่ 4 ใบ ไม่มีเศษ */
  padding-inline: 6px; /* เผื่อเงาการ์ด */
}
/* rail = scrollbar (ครีม) + thumb (น้ำตาลเข้ม) sync กับ JS */
.p-rail {
  position: relative;
  flex: 0 0 12px;
  width: 12px;
  background: #f8f1e7;
  border-radius: 24px;
  cursor: pointer;
}
.p-railthumb {
  position: absolute;
  left: 2px;
  right: 2px; /* thumb กว้าง 8px */
  top: 0;
  height: 60px; /* JS คำนวณ */
  background: #3d1c10;
  border-radius: 24px;
  cursor: grab;
  transition: top 0.4s ease;
}
.p-rail.dragging .p-railthumb {
  transition: none;
  cursor: grabbing;
}
/* แถวการ์ด — เลื่อนทั้งแผงด้วย translateY (JS คุม) */
.p-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  row-gap: 41px;
  transform: translateY(0);
  transition: transform 0.45s ease; /* ดูราชั่นเท่ากับการ์ดขยาย → เนียน */
}
/* การ์ด — default = เล็ก */
.p-card {
  display: flex;
  flex-direction: column; /* รูปบน + เนื้อหาล่าง → รูปเติมส่วนที่เหลือ (เนื้อหาไม่โดนอัด) */
  width: 463.194px;
  height: 277.395px;
  margin-inline: 10px; /* เล็ก: 10+10 = 20px */
  background: #f1e3d3;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  text-align: left; /* ข้อความชิดซ้ายตามรูป */
  text-decoration: none; /* การ์ดเป็น <a> — เอาเส้นใต้/สีลิงก์ออก */
  color: inherit;
  transition:
    width 0.45s ease,
    height 0.45s ease,
    transform 0.25s ease; /* ขยาย/หด(สไลด์) + hover */
}
/* แถวบน = ใหญ่ (JS ใส่ .is-big) */
.p-card.is-big {
  width: 579.117px;
  height: 367.79px;
  margin-inline: 13px; /* ใหญ่: 13+13 = 26px */
}
.p-card:hover {
  transform: scale(0.97); /* hover การ์ดโตขึ้นเล็กน้อย */
}

/* รูปในการ์ด */
.p-thumb {
  position: relative;
  width: 100%;
  flex: 1; /* รูปเติมพื้นที่ที่เหลือ (การ์ดใหญ่=รูปสูง, เล็ก=รูปเตี้ยลง) — เนื้อหาโชว์ครบ */
  min-height: 0;
  border-radius: 15px 15px 0 0;
  background-color: #2a1710;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}
/* ไม่มีรูปปก → โลโก้แบรนด์จาง ๆ กลางกรอบ (เหมือน activities) */
.p-thumb.noimg {
  display: grid;
  place-items: center;
  background-color: #e6dccb;
}
.p-thumb.noimg .p-ph-logo {
  width: 34%;
  max-width: 130px;
  opacity: 0.34;
}
.p-eye {
  position: absolute;
  top: 14px;
  right: 14px;
  display: block;
  line-height: 0;
  transition: transform 0.25s ease;
}
.p-eye img {
  width: 38px;
  height: 38px;
}
.p-eye:hover {
  transform: scale(1.12); /* ไอคอนตาโตขึ้นเล็กน้อยตอน hover */
}
/* เนื้อหาการ์ด — padding บน 12 (ห่างรูป) · ซ้ายขวาล่าง 20 */
.p-body {
  padding: 12px 20px 20px;
}
.p-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.p-title {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 179.6%;
  color: #432113;
  /* 1 บรรทัด · ยาวเกิน → ตัด "..." (min-width:0 ให้หดในกล่อง flex ได้) */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 14px;
  color: #613120;
  white-space: nowrap;
}
.p-date img {
  width: 20px;
  height: 20px;
}
.p-desc {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 134%;
  color: #613120;
  /* 2 บรรทัด · ยาวเกิน → ตัด "…" */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ───── < 1280px (แท็บเล็ต/มือถือ): carousel เดสก์ท็อป → สไลด์แนวนอน (swipe) ───── */
@media (max-width: 1279.98px) {
  .p-rail {
    display: none; /* ซ่อน scrollbar เดสก์ท็อป */
  }
  .p-view {
    height: auto; /* ปลดความสูง 2 แถว */
    overflow: visible;
    padding: 0;
  }
  .p-grid {
    flex-wrap: nowrap; /* เรียงแนวนอนแถวเดียว */
    justify-content: flex-start;
    transform: none !important; /* ยกเลิก translateY จาก JS */
    overflow-x: auto; /* เลื่อนแนวนอน = swipe */
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 4px 4px 14px;
    scrollbar-width: none; /* ซ่อน scrollbar แนวนอน */
  }
  .p-grid::-webkit-scrollbar {
    display: none;
  }
  .p-card,
  .p-card.is-big {
    /* การ์ดเท่ากันหมด (ไม่มีใหญ่/เล็ก) · กว้าง ~เต็มจอ + peek ใบถัดไป */
    width: min(85vw, 360px) !important;
    height: auto !important; /* สูงตามเนื้อหา */
    flex: 0 0 auto;
    margin-inline: 0 !important;
    scroll-snap-align: center;
    transform: none !important; /* ยกเลิก scale/is-big */
  }
  .p-card .p-thumb {
    flex: none;
    aspect-ratio: 16 / 10; /* รูปสัดส่วนสวยบนมือถือ */
  }
  /* มือถือ: วันที่ลงบรรทัดใหม่ (หัวข้อได้เต็มกว้าง) + หัวข้อบรรทัดเดียว → การ์ดสูงเท่ากันทุกใบ */
  .p-head {
    flex-direction: column-reverse; /* วันที่(เล็ก)ขึ้นบน · หัวข้อล่าง = eyebrow pattern */
    align-items: flex-start;
    gap: 4px;
  }
  .p-date {
    font-size: 13px; /* เล็กลง (eyebrow) */
  }
  .p-title {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* เดสก์ท็อป: กันการ์ด "นอกจอ" (แถวที่ถูก translate พ้น view) ดัก click ทับ section อื่น */
@media (min-width: 1280px) {
  .p-view {
    /* บังคับคลิป hit-test ของ grid ที่ transform (overflow:hidden ไม่พอเมื่อมี compositing layer) */
    contain: paint;
  }
  .p-grid {
    pointer-events: none; /* ช่องว่าง grid ให้ click ทะลุ */
  }
  .p-card {
    pointer-events: none; /* การ์ดนอกจอ = ไม่ดัก */
  }
  .p-card.is-big,
  .p-card.is-btm {
    pointer-events: auto; /* เฉพาะ 2 แถวที่เห็น = คลิก/hover ได้ */
  }
}

.brand {
  flex: 1;
  display: grid;
  place-content: center;
  position: relative;
  padding: 3vh 20px 6vh;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  animation: rise 1.3s 0.18s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  transition: scale 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.brand:hover {
  scale: 1.022;
}
.brand:focus-visible {
  outline: 1px solid var(--line);
  outline-offset: 18px;
  border-radius: 12px;
}
.brand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(560px, 88vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(
    circle,
    rgba(255, 226, 178, 0.16) 0%,
    transparent 62%
  );
  pointer-events: none;
  animation: breathe 7s ease-in-out infinite;
}

.mark {
  width: min(390px, 66vw);
  height: auto;
  display: block;
  margin-inline: auto;
  filter: drop-shadow(0 10px 32px rgba(0, 0, 0, 0.42));
}

/* โลโก้รูปภาพหน้า Home (แทน SVG mark + wordmark) */
.brand-logo {
  display: block;
  margin-inline: auto;
  width: min(949px, 76vw);
  height: auto;
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, 0.45));
}

.wordmark {
  margin-top: 6px;
  text-align: center;
  position: relative;
}
.wordmark h1 {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 400;
  font-size: clamp(3.6rem, 11vw, 7.4rem);
  line-height: 0.96;
  color: #fffaf4;
  text-shadow:
    0 0 18px rgba(255, 232, 200, 0.38),
    0 0 46px rgba(255, 214, 160, 0.2),
    0 4px 18px rgba(0, 0, 0, 0.35);
}
.leaf-accent {
  display: inline-block;
  width: clamp(20px, 4.4vw, 34px);
  margin-left: 0.06em;
  translate: 0 -0.34em;
}

.tagline {
  margin-top: clamp(10px, 2vw, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 20px);
}
.tagline span {
  font-size: clamp(0.95rem, 2.5vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #fdf4ea;
}
.tagline i {
  display: block;
  width: clamp(48px, 12vw, 118px);
  height: 1px;
  position: relative;
  background: linear-gradient(90deg, transparent, rgba(246, 236, 226, 0.72));
}
.tagline i:last-child {
  background: linear-gradient(90deg, rgba(246, 236, 226, 0.72), transparent);
}
.tagline i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  translate: 0 -50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cream);
}
.tagline i:last-child::after {
  right: auto;
  left: -1px;
}

.flourish {
  display: block;
  width: clamp(46px, 9vw, 68px);
  margin: clamp(14px, 2.4vw, 22px) auto 0;
  opacity: 0.95;
}

#sparkle {
  transform-origin: 210px 42px;
  animation: twinkle 3.6s ease-in-out infinite;
}
@keyframes breathe {
  0%,
  100% {
    opacity: 0.55;
    scale: 1;
  }
  50% {
    opacity: 1;
    scale: 1.06;
  }
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.45;
    scale: 0.82;
  }
  50% {
    opacity: 1;
    scale: 1.12;
  }
}

/* ───────── ตาราง / รายการข้อมูล (ในกล่อง .panel) ───────── */
.tbl {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 0.92rem;
}
.tbl th,
.tbl td {
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid rgba(122, 74, 48, 0.18);
}
.tbl th {
  color: var(--card-text);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}
.tbl td {
  color: var(--card-title);
  vertical-align: middle;
}
.tbl tbody tr:last-child td {
  border-bottom: 0;
}
.tbl tbody tr:hover td {
  background: rgba(122, 74, 48, 0.05);
}

.muted {
  color: var(--card-text);
  font-weight: 300;
}

.pill {
  display: inline-block;
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(122, 74, 48, 0.3);
  color: var(--card-text);
  background: rgba(122, 74, 48, 0.06);
}
.pill-published {
  background: #e3f3e5;
  border-color: #a9d2af;
  color: #2c6b36;
}
.pill-draft {
  background: #fdf0da;
  border-color: #e8cd9a;
  color: #8a5a12;
}
.pill-pending_review {
  background: #e6eefc;
  border-color: #a9bfe4;
  color: #2f4d84;
}
.pill-archived {
  background: #ece7e2;
  border-color: #cabfb5;
  color: #6b5d51;
}

.btn-sm {
  margin-top: 0;
  padding: 7px 16px;
  font-size: 0.85rem;
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 20px;
  margin-top: 22px;
}
.kv-grid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px dashed rgba(122, 74, 48, 0.2);
}
.kv-grid span {
  font-size: 0.76rem;
  color: var(--card-text);
  letter-spacing: 0.03em;
}
.kv-grid b {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 400;
  color: var(--card-title);
}

.sec {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--card-title);
  margin-top: 26px;
  margin-bottom: 4px;
}

ul.plain {
  list-style: none;
  margin-top: 10px;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 0.92rem;
}
ul.plain li {
  padding: 9px 0;
  border-bottom: 1px dashed rgba(122, 74, 48, 0.2);
  color: var(--card-title);
}
ul.plain li:last-child {
  border-bottom: 0;
}

/* ───────── ตารางเมนูหลัก (dashboard) ───────── */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.menu-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(122, 74, 48, 0.06);
  border: 1px solid rgba(122, 74, 48, 0.2);
  color: var(--card-title);
  transition:
    background 0.25s,
    border-color 0.25s,
    transform 0.2s;
}
.menu-card:hover {
  background: rgba(122, 74, 48, 0.12);
  border-color: rgba(122, 74, 48, 0.5);
  transform: translateY(-2px);
}
.menu-card.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.menu-card.is-soon:hover {
  transform: none;
  background: rgba(122, 74, 48, 0.06);
  border-color: rgba(122, 74, 48, 0.2);
}

.menu-ico {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #f4e7d7;
  background: linear-gradient(160deg, #7a4728, #57301a);
}
.menu-ico svg {
  width: 23px;
  height: 23px;
}

.menu-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.menu-txt b {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--card-title);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.menu-txt small {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
  font-size: 0.8rem;
  color: var(--card-text);
  line-height: 1.45;
}
.tag-soon {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(122, 74, 48, 0.14);
  border: 1px solid rgba(122, 74, 48, 0.26);
  color: var(--card-text);
}
.menu-arw {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--card-text);
}

/* ───────── อื่น ๆ ───────── */
.center-note {
  text-align: center;
  margin-top: 16px;
  font-size: 0.86rem;
  color: rgba(247, 237, 225, 0.72);
}
.center-note a {
  color: #ffaa3b;
  text-decoration: none;
}
.center-note a:hover {
  text-decoration: underline;
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 28px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
}

/* ───────── จอเล็ก ───────── */
@media (max-width: 860px) {
  .cards {
    grid-template-columns: 1fr;
    width: min(500px, 92vw);
  }
  .topbar {
    padding: 6px 14px;
    gap: 8px;
  }
}
/* ต่ำกว่า 1650px: เหลือปุ่มบัญชีปุ่มเดียว (ซ่อน "ออกจากระบบ" — กดออกได้จากหน้าบัญชี)
   เหตุผล: เมนูไทย 7 หัวข้อ + โลโก้ กินความกว้างเกือบหมดแถบ ปุ่มที่ 2 จะดันจนเมนูทับโลโก้ */
@media (max-width: 1650px) {
  .nav-auth .nav-extra {
    display: none;
  }
}
@media (max-width: 560px) {
  .nav {
    gap: 6px;
  }
  .nav a {
    padding: 7px 13px;
    font-size: 0.84rem;
  }
  .logo {
    width: clamp(112px, 34vw, 150px);
  }
  .deco-leaf {
    display: none;
  }

  /* หน้า Home — ย่อเมนูกลางจอให้พอดีมือถือ (ทับค่า .home .nav a ที่ specificity สูงกว่า) */
  .home .nav {
    padding: 26px 16px 0;
    gap: 9px;
  }
  .home .nav a {
    padding: 10px 18px;
    font-size: 0.96rem;
  }
  .home .rule {
    margin-top: 22px;
  }
  .brand {
    padding: 2vh 16px 5vh;
  }
}

/* ═══════════════════════════════════════════════════════════════
   EXPLORE — หน้าลูกค้า (รายการร้านสาธารณะ)
   ═══════════════════════════════════════════════════════════════ */

/* ── ช่องค้นหา ── */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(620px, 92vw);
  margin: clamp(18px, 3vw, 30px) auto 0;
  padding: 7px 7px 7px 16px;
  background: #fbf5ec;
  border: 1px solid rgba(122, 74, 48, 0.28);
  border-radius: 999px;
  box-shadow: 0 16px 40px -22px rgba(28, 12, 6, 0.7);
  animation: rise 0.9s 0.12s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.search:focus-within {
  border-color: rgba(122, 74, 48, 0.6);
  box-shadow:
    0 0 0 3px rgba(160, 106, 66, 0.18),
    0 16px 40px -22px rgba(28, 12, 6, 0.7);
}
.search-ico {
  width: 20px;
  height: 20px;
  color: #a06a42;
  flex-shrink: 0;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: #4a2c19;
  padding: 10px 2px;
}
.search input:focus {
  outline: none;
}
.search input::placeholder {
  color: #b7967a;
}
.search .btn-primary {
  /* override ค่า width:100% ที่ตั้งไว้สำหรับฟอร์ม */
  width: auto;
  margin-top: 0;
  padding: 12px 26px;
  flex-shrink: 0;
  font-size: 0.96rem;
  /* ⚠️ ทับสีเฉพาะปุ่มค้นหาหน้าบ้าน — .btn-primary ตัวกลางยังเป็นน้ำตาลของหลังบ้าน
     ถ้าไปแก้ที่ .btn-primary ตรง ๆ จะเปลี่ยนปุ่มในหน้า login/หลังบ้านทั้งระบบด้วย */
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 22px -12px rgba(47, 95, 25, 0.8);
}
.search .btn-primary:hover {
  background: var(--accent);
  filter: brightness(1.15);
}
.search-note {
  text-align: center;
  color: var(--warn);
  font-size: 0.86rem;
  margin-top: 12px;
  font-family: "Noto Sans Thai", sans-serif;
}

/* ── chips กรองจังหวัด ── */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(1120px, 92vw);
  margin: clamp(18px, 2.6vw, 26px) auto 0;
}
.chip {
  padding: 8px 20px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1;
  transition:
    background 0.25s,
    border-color 0.25s,
    transform 0.2s,
    color 0.25s;
}
.chip:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}
.chip:active {
  transform: translateY(1px);
}
.chip.is-active {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 400;
}

/* ── grid การ์ดร้าน ── */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  width: min(1200px, 92vw);
  margin: clamp(26px, 4vw, 46px) auto 0;
}
.shop-card {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  animation: rise 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  animation-delay: var(--d, 0s);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.shop-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

/* ปก: gradient + อักษรย่อ + ป้ายประเภท (แทนรูปภาพ) */
.shop-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cover, linear-gradient(150deg, #c08a5b, #7c4a2c));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.shop-cover::after {
  /* ประกายแสงมุมบน */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 78% 8%,
    rgba(255, 240, 214, 0.32),
    transparent 60%
  );
}
.shop-initial {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
  font-size: 3.4rem;
  color: rgba(255, 246, 236, 0.92);
  text-shadow: 0 4px 18px rgba(28, 12, 6, 0.4);
  transition: transform 0.4s ease;
  z-index: 1;
}
.shop-card:hover .shop-initial {
  transform: scale(1.08);
}
/* รูปปกจริง (banner/gallery) — เต็มปก + ซูมนุ่มตอน hover */
.shop-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.5s ease;
}
.shop-card:hover .shop-cover-img {
  transform: scale(1.06);
}
.shop-cover .shop-area {
  z-index: 2;
}
.shop-cover.has-img::after {
  z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(24, 10, 4, 0.34));
}
.shop-area {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 400;
  color: #fff6ec;
  background: rgba(40, 20, 10, 0.42);
  border: 1px solid rgba(255, 246, 236, 0.35);
  backdrop-filter: blur(3px);
}

.shop-body {
  padding: 16px clamp(15px, 2vw, 20px) 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.shop-name {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: 1.42rem;
  color: var(--accent);
  line-height: 1.15;
}
.shop-en {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 2px;
  font-weight: 300;
}
.shop-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-weight: 300;
}
.shop-loc svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--accent);
}

.shop-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.shop-actions .btn {
  margin-top: 0;
}
/* ปก/ชื่อ เป็นลิงก์เข้าหน้ารายละเอียด */
.shop-cover {
  text-decoration: none;
}
.shop-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.shop-name a:hover {
  color: var(--gold-ink);
}
/* ปุ่ม "ดูรายละเอียด" — ทึบให้เด่นกว่าปุ่มโทร */
.btn-detail {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
}
.btn-detail:hover {
  filter: brightness(1.15);
}

/* ── สถานะว่าง / ตัวนับผล ── */
.empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.05rem;
  width: min(560px, 92vw);
  margin: clamp(40px, 8vh, 90px) auto;
  line-height: 2.2;
}
.empty .btn {
  color: var(--ink);
  border-color: var(--hair);
}
.empty .btn:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}
.result-count {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.86rem;
  margin: clamp(24px, 3vw, 34px) auto clamp(40px, 6vw, 70px);
}

@media (max-width: 560px) {
  .search {
    flex-wrap: wrap;
    border-radius: 20px;
    padding: 12px;
  }
  .search .btn-primary {
    width: 100%;
  }
  .shop-grid {
    grid-template-columns: 1fr;
    width: min(420px, 92vw);
  }
}

/* ═══════════════════════════════════════════════════════════════
   EXPLORE DETAIL — หน้ารายละเอียดร้าน
   ═══════════════════════════════════════════════════════════════ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  color: #fff6ec;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 400;
  padding: 9px 18px 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 246, 236, 0.5);
  background: rgba(255, 246, 236, 0.08);
  backdrop-filter: blur(3px);
  transition:
    gap 0.25s,
    background 0.25s,
    border-color 0.25s;
}
.back-link:hover {
  gap: 11px;
  background: rgba(255, 246, 236, 0.16);
  border-color: rgba(255, 246, 236, 0.8);
}
.back-link svg {
  width: 17px;
  height: 17px;
}

/* ── HERO เต็มกว้าง ── */
.sd-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  min-height: clamp(320px, 46vw, 460px);
  background: var(--cover, linear-gradient(150deg, #c08a5b, #7c4a2c));
}
/* hero มีรูป banner จริง — รูปเป็นพื้น + ซ่อนลายพฤกษา + scrim เข้มขึ้นให้อ่านชัด */
.sd-hero.has-img {
  background:
    var(--hero-img) center / cover no-repeat,
    var(--cover);
}
.sd-hero.has-img .sd-hero-botanical {
  display: none;
}
.sd-hero.has-img::before {
  background:
    radial-gradient(
      80% 92% at 86% -12%,
      rgba(255, 244, 222, 0.16),
      transparent 52%
    ),
    linear-gradient(180deg, rgba(28, 12, 6, 0.22), rgba(28, 12, 6, 0.68));
}
.sd-hero::before {
  /* แสงชั้น + สcrim ล่างให้ตัวหนังสืออ่านชัด */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      80% 92% at 86% -12%,
      rgba(255, 244, 222, 0.4),
      transparent 54%
    ),
    linear-gradient(180deg, rgba(28, 12, 6, 0.14), rgba(28, 12, 6, 0.56));
}
.sd-hero-botanical {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  color: rgba(255, 246, 230, 0.16);
  filter: drop-shadow(0 2px 6px rgba(28, 12, 6, 0.16));
}
.sd-hero-in {
  position: relative;
  z-index: 1;
  width: min(1120px, 92vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 3vw, 26px) 0 clamp(20px, 3vw, 34px);
}
.sd-hero-body {
  margin-top: auto;
}
.sd-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  color: #fff6ec;
  background: rgba(40, 20, 10, 0.4);
  border: 1px solid rgba(255, 246, 236, 0.4);
  backdrop-filter: blur(3px);
  font-family: "Noto Sans Thai", sans-serif;
}
.sd-hero-body h1 {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  line-height: 1.04;
  font-size: clamp(2.2rem, 6.5vw, 4rem);
  color: #fff9f2;
  margin-top: 12px;
  text-shadow: 0 3px 22px rgba(28, 12, 6, 0.5);
}
.sd-en {
  color: rgba(255, 246, 236, 0.82);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 300;
  margin-top: 4px;
  font-family: "Noto Sans Thai", sans-serif;
}
.sd-loc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 246, 236, 0.92);
  font-size: 0.98rem;
  margin-top: 12px;
  font-family: "Noto Sans Thai", sans-serif;
}
.sd-loc svg {
  width: 17px;
  height: 17px;
}
.sd-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 3vw, 26px);
}

.btn-lg {
  padding: 14px 30px;
  font-size: 1rem;
  margin-top: 0;
}
.btn-solid {
  border: 0;
  color: #fbf1e4;
  background: linear-gradient(160deg, #7a4728, #57301a);
  box-shadow: 0 12px 26px -12px rgba(28, 12, 6, 0.7);
}
.btn-solid:hover {
  background: linear-gradient(160deg, #8a5230, #63371e);
}
.btn-ghost {
  color: #fff6ec;
  border: 1px solid rgba(255, 246, 236, 0.5);
  background: rgba(255, 246, 236, 0.08);
  backdrop-filter: blur(3px);
}
.btn-ghost:hover {
  background: rgba(255, 246, 236, 0.16);
  border-color: rgba(255, 246, 236, 0.8);
}

/* ── เนื้อหา 2 คอลัมน์ ── */
.sd-body {
  width: min(1120px, 92vw);
  margin: clamp(28px, 4vw, 48px) auto clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}
@media (min-width: 860px) {
  .sd-body {
    grid-template-columns: 1.7fr 1fr;
    align-items: start;
  }
  .sd-side {
    position: sticky;
    top: 20px;
  }
}
.sd-side {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vw, 24px);
} /* เว้นช่องว่างการ์ดติดต่อ↔รีวิว */
.sd-block {
  background: var(--card-bg);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 18px 40px -26px rgba(28, 12, 6, 0.45);
}
.sd-block + .sd-block {
  margin-top: clamp(18px, 2.6vw, 26px);
}
.sd-block h2 {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  color: var(--card-title);
  margin-bottom: 12px;
  position: relative;
  padding-left: 14px;
}
.sd-block h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(#e8c37a, #a6703a);
}
.sd-block p {
  font-family: "Noto Sans Thai", sans-serif;
  color: var(--card-text);
  font-size: 0.98rem;
  line-height: 1.78;
}

/* แกลเลอรีรูปร้าน */
.sd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.sd-gallery-item {
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px -12px rgba(28, 12, 6, 0.4);
}
.sd-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sd-gallery-item:hover img {
  transform: scale(1.07);
}

/* hero — badge คะแนน Google */
.sd-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #fff6ec;
  font-family: "Noto Sans Thai", sans-serif;
}
.sd-stars {
  color: #ffd27a;
  letter-spacing: 1px;
  font-size: 1.05rem;
}
.sd-rating b {
  font-size: 1.05rem;
}
.sd-rating span {
  opacity: 0.85;
  font-size: 0.9rem;
}

/* ลิงก์ Google Maps ใต้แผนที่ OSM */
.sd-maplink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: #9a5a30;
  text-decoration: none;
  font-size: 0.92rem;
  font-family: "Noto Sans Thai", sans-serif;
}
.sd-maplink:hover {
  color: #7a4728;
  gap: 10px;
}
.sd-maplink svg {
  width: 16px;
  height: 16px;
}

/* รีวิวจาก Google */
.sd-rv-avg {
  font-size: 1rem;
  color: #c98a3a;
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
}
/* รายการรีวิว — scroll ถ้ายาว */
.sd-reviews {
  display: grid;
  gap: 12px;
  margin-top: 6px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 5px;
}
.sd-reviews::-webkit-scrollbar {
  width: 6px;
}
.sd-reviews::-webkit-scrollbar-thumb {
  background: rgba(122, 74, 48, 0.3);
  border-radius: 999px;
}
.sd-review {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(122, 74, 48, 0.05);
  border: 1px solid rgba(122, 74, 48, 0.12);
}
.sd-review-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sd-rv-name {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 500;
  color: var(--card-title);
  font-size: 0.95rem;
}
.sd-rv-stars {
  color: #e6a94b;
  font-size: 0.9rem;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.sd-review p {
  font-family: "Noto Sans Thai", sans-serif;
  color: var(--card-text);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 7px;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sd-review.open p {
  -webkit-line-clamp: unset;
}
.sd-rv-toggle {
  margin-top: 5px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #9a5a30;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 0.82rem;
}
.sd-rv-toggle:hover {
  color: #7a4728;
  text-decoration: underline;
}
.sd-rv-when {
  display: block;
  margin-top: 7px;
  color: var(--card-text);
  opacity: 0.7;
  font-size: 0.78rem;
  font-family: "Noto Sans Thai", sans-serif;
}
.sd-rv-more {
  display: inline-block;
  margin-top: 14px;
  color: #9a5a30;
  text-decoration: none;
  font-size: 0.9rem;
  font-family: "Noto Sans Thai", sans-serif;
  border-bottom: 1px solid rgba(154, 90, 48, 0.35);
}
.sd-rv-more:hover {
  color: #7a4728;
}
.sd-addr {
  color: var(--card-title);
  font-weight: 400;
}
.sd-muted {
  color: var(--card-text);
  opacity: 0.82;
  font-size: 0.9rem;
}

.sd-map {
  margin-top: 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(122, 74, 48, 0.2);
  box-shadow: 0 12px 30px -20px rgba(28, 12, 6, 0.4);
}
.sd-map iframe {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 320px);
  border: 0;
}

/* map placeholder (ตอนไม่มี API key — dev) — ดูเหมือนแผนที่ ลิงก์ออก Google Maps */
.sd-map-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(200px, 30vw, 280px);
  padding: 20px;
  text-decoration: none;
  text-align: center;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(122, 74, 48, 0.06) 0 1px,
      transparent 1px 36px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(122, 74, 48, 0.06) 0 1px,
      transparent 1px 36px
    ),
    radial-gradient(120% 100% at 28% 18%, #efe3d0, #e6d7c2);
  transition: filter 0.25s;
}
.sd-map-static:hover {
  filter: brightness(0.97);
}
.sd-map-pin {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #7a4728, #57301a);
  color: #fbe6cf;
  box-shadow: 0 10px 22px -8px rgba(58, 30, 14, 0.6);
}
.sd-map-pin svg {
  width: 24px;
  height: 24px;
}
.sd-map-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sd-map-text strong {
  color: var(--card-title);
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
}
.sd-map-text small {
  color: var(--card-text);
  font-size: 0.84rem;
  font-family: "Noto Sans Thai", sans-serif;
}

/* ── sidebar: การ์ดติดต่อ ── */
.sd-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 30px);
  box-shadow: 0 20px 44px -26px rgba(28, 12, 6, 0.5);
}
.sd-card h3 {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  color: var(--card-title);
  margin-bottom: 16px;
}
.sd-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.sd-contact li {
  display: flex;
  gap: 12px;
  align-items: center;
}
.sd-cico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(
    150deg,
    rgba(232, 195, 122, 0.3),
    rgba(122, 74, 48, 0.12)
  );
  border: 1px solid rgba(201, 154, 82, 0.3);
}
.sd-cico svg {
  width: 18px;
  height: 18px;
  color: #8a5230;
}
.sd-contact li > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sd-contact small {
  color: var(--card-text);
  font-size: 0.74rem;
  font-family: "Noto Sans Thai", sans-serif;
}
.sd-contact a {
  color: var(--card-title);
  font-weight: 400;
  text-decoration: none;
  word-break: break-word;
  font-family: "Noto Sans Thai", sans-serif;
}
.sd-contact a:hover {
  color: #9a5a30;
}
.sd-noinfo {
  color: var(--card-text);
  line-height: 1.7;
  font-size: 0.92rem;
  margin-bottom: 18px;
  font-family: "Noto Sans Thai", sans-serif;
}
.sd-fullbtn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  border: 0;
  color: #fbf1e4;
  background: linear-gradient(160deg, #7a4728, #57301a);
  box-shadow: 0 10px 22px -10px rgba(58, 30, 14, 0.8);
}
.sd-fullbtn:hover {
  background: linear-gradient(160deg, #8a5230, #63371e);
}
.sd-fullbtn svg {
  width: 16px;
  height: 16px;
}

/* ═══ FOOTER ═══ */
.site-footer {
  background: var(--panel-2);
  border-top: 1px solid var(--hair);
}
.site-footer-in {
  width: min(1120px, 92vw);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 48px) 0 clamp(18px, 2.6vw, 28px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 40px);
}
@media (min-width: 720px) {
  .site-footer-in {
    grid-template-columns: 1.7fr 1fr 1fr;
  }
}
.foot-word {
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.foot-word span {
  font-family: "Jost", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
.foot-brand p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 10px;
  max-width: 36ch;
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
}
.foot-nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.foot-h {
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.foot-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 300;
  transition: color 0.2s;
}
.foot-nav a:hover {
  color: var(--accent);
}
.foot-base {
  border-top: 1px solid var(--hair);
  text-align: center;
  padding: 16px;
  color: var(--ink-faint);
  font-size: 0.82rem;
  font-family: "Noto Sans Thai", sans-serif;
}

/* ── UI รหัสผ่าน (หน้าเปลี่ยนรหัสครั้งแรก) ── */
/* panel .panel กำหนด width: min(460px,92vw) แบบ explicit → ต้อง override ด้วย width (max-width ทับไม่ได้) */
.panel-wide {
  width: min(680px, 94vw);
  max-width: none;
}
/* ปุ่มแสดง/ซ่อนรหัสผ่าน (eye toggle) */
.pw-input {
  position: relative;
  display: block;
}
.pw-input > input {
  width: 100%;
  padding-right: 44px;
}
.pw-row .pw-input {
  flex: 1;
}
.pw-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 5px;
  cursor: pointer;
  color: #a8927b;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
}
.pw-eye:hover {
  color: #6b3f28;
  background: rgba(192, 138, 94, 0.1);
}
.pw-eye svg {
  width: 19px;
  height: 19px;
}
.pw-eye .eye-off {
  display: none;
}
.pw-eye.on .eye-on {
  display: none;
}
.pw-eye.on .eye-off {
  display: inline;
}
.pw-2col {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 4px 28px;
  align-items: start;
}
@media (max-width: 640px) {
  .pw-2col {
    grid-template-columns: 1fr;
  }
  .pw-reqs {
    padding-top: 4px !important;
  }
}
.pw-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.pw-row input {
  flex: 1;
}
.pw-gen {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid #d9c3a8;
  border-radius: 10px;
  background: #fff;
  color: #6b3f28;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 0.84rem;
  cursor: pointer;
}
.pw-gen:hover {
  background: #f6efe6;
  border-color: #c08a5e;
}
.pw-gen svg {
  width: 15px;
  height: 15px;
}
.pw-bar {
  height: 6px;
  border-radius: 999px;
  background: #eadfce;
  overflow: hidden;
  margin: 9px 0 5px;
}
.pw-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition:
    width 0.2s,
    background 0.2s;
}
.pw-lbl {
  font-size: 0.78rem;
  color: #8d7867;
}
.pw-match {
  font-size: 0.8rem;
  margin-top: 5px;
}
.pw-match.ok {
  color: #2f7d54;
}
.pw-match.no {
  color: #c0392b;
}
.pw-reqs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 28px;
}
.pw-req-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: #4a3325;
  margin-bottom: 2px;
}
.pw-req {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  color: #8d7867;
}
.pw-req .rq-ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #efe7dc;
  color: #b0a291;
  flex: 0 0 auto;
}
.pw-req .rq-ic svg {
  width: 11px;
  height: 11px;
  opacity: 0.4;
}
.pw-req.ok {
  color: #2f7d54;
}
.pw-req.ok .rq-ic {
  background: #e6f5ec;
  color: #2f9e6b;
}
.pw-req.ok .rq-ic svg {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT — หน้าติดต่อเรา
   ═══════════════════════════════════════════════════════════════ */
.ct-wrap {
  width: min(1000px, 94vw);
  margin: clamp(24px, 3.5vw, 44px) auto clamp(50px, 7vw, 80px);
}
.ct-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: clamp(16px, 2.2vw, 26px);
  box-shadow: 0 20px 44px -26px rgba(28, 12, 6, 0.5);
}
.ct-one {
  animation: rise 0.9s 0.22s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.ct-list li {
  animation: rise 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  animation-delay: var(--d, 0.34s);
}
.ct-map-col {
  animation: rise 0.8s 0.4s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
/* การ์ดเดียวรวมข้อมูลติดต่อ + แผนที่ */
.ct-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(16px, 2.4vw, 24px);
  align-items: start;
}
@media (min-width: 780px) {
  .ct-body {
    grid-template-columns: 1.05fr 1fr;
  }
}
.ct-card h2 {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--card-title);
  margin-bottom: 14px;
  position: relative;
  padding-left: 14px;
}
.ct-card h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(#e8c37a, #a6703a);
}
.ct-about {
  font-family: "Noto Sans Thai", sans-serif;
  color: var(--card-text);
  font-size: 0.96rem;
  line-height: 1.8;
  margin-bottom: 18px;
}
.ct-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ct-list li {
  display: flex;
  gap: 13px;
  align-items: center;
}
.ct-ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(
    150deg,
    rgba(232, 195, 122, 0.3),
    rgba(122, 74, 48, 0.12)
  );
  border: 1px solid rgba(201, 154, 82, 0.3);
}
.ct-ico svg {
  width: 19px;
  height: 19px;
  color: #8a5230;
}
.ct-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ct-text small {
  color: var(--card-text);
  font-size: 0.76rem;
  font-family: "Noto Sans Thai", sans-serif;
}
.ct-text a,
.ct-text > span {
  color: var(--card-title);
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 0.98rem;
  word-break: break-word;
}
.ct-text a {
  text-decoration: none;
}
.ct-text a:hover {
  color: #9a5a30;
}
.ct-map {
  margin-bottom: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(122, 74, 48, 0.2);
  box-shadow: 0 12px 30px -20px rgba(28, 12, 6, 0.4);
}
.ct-map iframe {
  display: block;
  width: 100%;
  height: clamp(200px, 25vw, 285px);
  border: 0;
}
.ct-mapbtn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  border: 0;
  color: #fbf1e4;
  background: linear-gradient(160deg, #7a4728, #57301a);
  box-shadow: 0 10px 22px -10px rgba(58, 30, 14, 0.8);
}
.ct-mapbtn:hover {
  background: linear-gradient(160deg, #8a5230, #63371e);
}
.ct-mapbtn svg {
  width: 16px;
  height: 16px;
}

/* ═══════════ Modal: FAQ ทั้งหมด (session6 · ปุ่ม "ดูทั้งหมด") ═══════════ */
.faq-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.faq-modal.open {
  display: block;
}
.faq-modal-back {
  position: absolute;
  inset: 0;
  background: rgba(20, 8, 2, 0.62);
  backdrop-filter: blur(2px);
}
.faq-modal-box {
  position: relative;
  z-index: 1;
  margin: clamp(16px, 5vh, 60px) auto;
  width: min(880px, 92vw);
  max-height: min(84vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--brown-mid);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: faqPop 0.22s ease;
}
@keyframes faqPop {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.faq-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(18px, 3vw, 30px) 10px;
}
.faq-modal-title {
  margin: 0;
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
}
.faq-modal-x {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  background: rgba(247, 237, 225, 0.1);
  color: var(--cream);
  border-radius: 12px;
  transition: background 0.15s;
}
.faq-modal-x:hover {
  background: rgba(247, 237, 225, 0.22);
}
.faq-modal-x svg {
  width: 20px;
  height: 20px;
}
.faq-modal-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px clamp(18px, 3vw, 30px) 4px;
  padding: 0 14px;
  background: var(--cream);
  border-radius: 12px;
}
.faq-modal-search svg {
  width: 18px;
  height: 18px;
  color: var(--card-text);
  flex: 0 0 auto;
}
.faq-modal-search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  padding: 12px 0;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 1rem;
  color: var(--brown-deep);
}
.faq-modal-body {
  overflow-y: auto;
  padding: 6px clamp(18px, 3vw, 30px) clamp(18px, 3vw, 30px);
}
.faq-modal-body .faq {
  width: 100%;
  margin: 10px 0 0;
}
.faq-modal-empty {
  text-align: center;
  color: var(--cream);
  opacity: 0.7;
  padding: 30px 10px;
  font-family: "Noto Sans Thai", sans-serif;
}
.faq-modal-body::-webkit-scrollbar {
  width: 8px;
}
.faq-modal-body::-webkit-scrollbar-thumb {
  background: rgba(247, 237, 225, 0.25);
  border-radius: 8px;
}

/* ═══════════ Lightbox (ของกลาง — public/assets/js/lightbox.js) ═══════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.86);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.open {
  display: flex;
}
.lightbox .lb-img {
  max-width: 90vw;
  max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.lightbox .lb-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  transition: background 0.15s;
}
.lightbox .lb-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.lightbox .lb-close {
  top: 20px;
  right: 22px;
}
.lightbox .lb-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox .lb-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox .lb-count {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  opacity: 0.8;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 14px;
}
body.lb-open {
  overflow: hidden;
}
@media (max-width: 760px) {
  .lightbox .lb-prev {
    left: 8px;
  }
  .lightbox .lb-next {
    right: 8px;
  }
}

/* ═══════════ Video popup (session4 วิดีทัศน์) ═══════════ */
.vpop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vpop.open {
  display: flex;
}
.vpop-inner {
  width: min(960px, 92vw);
  aspect-ratio: 16 / 9;
}
.vpop-inner iframe,
.vpop-inner video {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.vpop-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.15s;
}
.vpop-close:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* ═══════════════════════════════════════════════════════════════
   HOME (ดีไซน์ใหม่ 2026-09-01) — คลาส .hm-*
   ใช้โทเคนสีกลางทั้งหมด → รองรับโหมดมืดอัตโนมัติ
   ลำดับ: แบนเนอร์ → ปุ่มลัด 6 ปุ่ม → สปาแนะนำ → เราคือใคร → การ์ดใหญ่ 3 ใบ
   หมายเหตุ: กฎของหน้าแรกเวอร์ชันเก่า (.home / .sessionN / .sN-*) ยังค้างอยู่ด้านบน
             ไม่ได้ถูกใช้แล้ว รอยืนยันก่อนลบทิ้ง
   ═══════════════════════════════════════════════════════════════ */
.hm,
/* ── สีตัวอักษรในแบนเนอร์ — ตั้งตายตัว ไม่ผูกกับโทเคนธีม ──
   เพราะพื้นหลังคือ "รูป" ที่สว่างคงที่ทั้งสองโหมด (วัดแล้ว: ครึ่งซ้ายของ bg-banner.png
   ความสว่าง ~233 จาก 255 ≈ ขาว) ถ้าใช้ var(--ink) พอสลับโหมดมืดตัวอักษรจะกลายเป็น
   ครีมเกือบขาว ทับบนรูปสีขาว → อ่านไม่ออก */
.hm-hero {
  --hm-gold: #b08d4f;                        /* 🎛️ ทอง (บรรทัดที่ 2) */
  --hero-green: #2f5f19;                     /* 🎛️ เขียว (บรรทัดที่ 1) */
  --hero-ink: #404040;                       /* 🎛️ ตัวอักษรหลัก */
  --hero-ink-soft: rgba(64, 64, 64, 0.78);   /* 🎛️ คำโปรย */
}
.hm {
  width: min(1680px, 94vw);   /* 🎛️ ความกว้างเนื้อหา */
  margin: 0 auto;
  padding: 22px 0 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hm-ico {
  width: 22px;
  height: 22px;
}

/* ── 1 · แบนเนอร์ — เต็มความกว้างจอ (full-bleed) ตัวอักษรทับบนรูป ──
   รูปคลุมเต็มกล่อง + ไล่เฉดสีพื้นจากซ้ายให้ตัวอักษรอ่านออก
   ตัวอักษรเยื้องให้ตรงกับขอบซ้ายของคอนเทนเนอร์ .hm พอดี */
.hm-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 24vw, 400px); /* 🎛️ ความสูงแบนเนอร์ (รูปจริง 1880x436 — สูงกว่านี้รูปจะถูกซูมครอปบน-ล่าง) */
  overflow: hidden;
  background: var(--panel);
}
.hm-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
/* ม่านไล่เฉดจากซ้าย — ใช้ครีมคงที่ (ไม่ใช่ var(--bg)) ให้เข้ากับพื้นสว่างในตัวรูป
   ถ้าลบบล็อกนี้ทิ้งก็ยังอ่านออก เพราะตัวอักษรเป็นสีเข้มคงที่และพื้นรูปฝั่งซ้ายสว่างอยู่แล้ว */
.hm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hm-hero-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(22px, 3vw, 44px) 0;
  /* เยื้องซ้ายให้ตรงกับ .hm (= min(1680px, 94vw) จัดกลาง)
     ⚠️ ต้องเป็น margin ไม่ใช่ padding — box-sizing:border-box ทำให้ padding กินพื้นที่จาก
     max-width จนข้อความถูกบีบเหลือไม่กี่ตัวอักษรเมื่อจอกว้างมาก (ระยะเยื้องโตขึ้นเรื่อย ๆ) */
  margin-left: calc((100vw - min(1680px, 94vw)) / 2);
  max-width: min(720px, 52vw);
}
.hm-hero-h {
  display: flex;
  flex-direction: column;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.22;
  font-weight: 700;
}
.hm-h-green {
  color: var(--hero-green);
}
.hm-h-gold {
  color: var(--hm-gold, #b08d4f);
}
.hm-hero-sub {
  font-size: clamp(0.98rem, 1.35vw, 1.25rem);
  font-weight: 600;
  color: var(--hero-ink);
}
.hm-hero-desc {
  color: var(--hero-ink-soft);
  line-height: 1.8;
  max-width: 44ch;
  font-size: 0.88rem;
}

/* ── อนิเมชันตัวอักษรในแบนเนอร์ — จางเข้าทีละตัว → ค้างไว้ → จางออก → วนลูป ──
   หัวข้อ 2 บรรทัดถูก JS ตัดเป็น <span class="hm-ch"> ทีละตัว (ดูท้าย home/index.php)
   ตัดด้วย Intl.Segmenter แบบ grapheme → สระ/วรรณยุกต์ไทยติดไปกับพยัญชนะ ไม่หลุดจากกัน
   คำโปรย 2 บรรทัดล่างเล่นเป็นก้อน (ทีละตัวจะรกเกินไป) แต่อยู่ในลูปเดียวกัน
   🎛️ --hm-cycle = ความยาว 1 รอบ · --hm-char-step = ระยะห่างระหว่างตัวอักษร */
.hm-hero-text,
.blk-hero-text {
  --hm-cycle: 8s;
  --hm-char-step: 0.045s;
}
@keyframes hm-char-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
  }
  7% {
    opacity: 1;
    transform: none;
  }
  /* ── ช่วงค้างไว้ให้อ่าน (7% → 80% ของรอบ) ── */
  80% {
    opacity: 1;
    transform: none;
  }
  92% {
    opacity: 0;
    transform: translate3d(0, -7px, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -7px, 0);
  }
}
.hm-hero-text .hm-ch,
.hm-hero-text .hm-hero-sub,
.hm-hero-text .hm-hero-desc,
.blk-hero-text .hm-ch,
.blk-hero-text .blk-hero-sub {
  animation: hm-char-in var(--hm-cycle) linear infinite both;
  animation-delay: calc(var(--i, 0) * var(--hm-char-step));
}
.hm-hero-text .hm-ch,
.blk-hero-text .hm-ch {
  display: inline-block;
  white-space: pre; /* กันช่องว่างระหว่างคำหาย ตอนตัดเป็น span */
}
/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว → โชว์ค้างไว้เฉย ๆ ไม่วนลูป */
@media (prefers-reduced-motion: reduce) {
  .hm-hero-text .hm-ch,
  .hm-hero-text .hm-hero-sub,
  .hm-hero-text .hm-hero-desc,
  .blk-hero-text .hm-ch,
  .blk-hero-text .blk-hero-sub {
    animation: none;
  }
}

/* ── 2 · ปุ่มลัด 6 ปุ่ม ── */
.hm-quick {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 13px;
}
.hm-q {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 92px;          /* 🎛️ ความสูงปุ่มลัด */
  padding: 18px 18px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition:
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.25s;
}
.hm-q:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.hm-q-ico {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 7px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--panel-2);
  color: var(--accent);
}
.hm-q-ico .hm-ico {
  width: 25px;
  height: 25px;
}
/* ไอคอนไฟล์รูป — ไฟล์ขนาดไม่เท่ากัน (45x42 ถึง 109x100)
   จึงใส่ในกล่องขนาดคงที่แล้วย่อแบบ contain ให้ทุกอันดูเสมอกัน */
.hm-q-ico img,
.hm-head-ico img,
.hm-about-ico img,
.hm-about-i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* .hm-about-i เดิมเป็นแค่ span ห่อ svg ขนาด 22px — พอเป็นรูปต้องกำหนดกล่องให้ชัด */
.hm-about-i {
  width: 40px;   /* 🎛️ ขนาดไอคอน 3 จุดเด่น */
  height: 40px;
}
.hm-q-text {
  min-width: 0;
}
.hm-q-text b {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--accent);   /* 🎛️ สีหัวข้อปุ่มลัด */
}
.hm-q-text small {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* ── กล่องเนื้อหา + หัวข้อบล็อก ── */
.hm-panel {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: clamp(18px, 2.4vw, 30px);
  box-shadow: var(--shadow);
}
.hm-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}
.hm-head-ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 6px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--accent);
}
.hm-head h2 {
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--accent);
}
.hm-head p {
  margin-top: 2px;
  font-size: 0.84rem;
  color: var(--ink-faint);
}
.hm-more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.89rem;
  white-space: nowrap;
  transition: color 0.25s;
}
.hm-more:hover {
  color: var(--accent);
}
.hm-empty {
  color: var(--ink-faint);
  font-size: 0.9rem;
  padding: 8px 2px;
}

/* ── 3 · สปาแนะนำ — ไม่มีกล่องครอบ (ไม่ใช้ .hm-panel) วางบนพื้นหน้าเลย ── */
.hm-spa .hm-head {
  margin-bottom: 14px;
  padding-left: 2px;
}

/* ── การ์ดสปา ── */
.hm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 17px;
}
.hm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.hm-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.hm-card-cover {
  display: block;
  aspect-ratio: 5 / 2;   /* 🎛️ สัดส่วนรูปปก (เลขหลังมาก = เตี้ยลง) */
  overflow: hidden;
  background: var(--panel);
}
.hm-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ปกที่มาจากรูป "โลโก้ร้าน" — โลโก้เป็นจัตุรัส ถ้า crop เป็นแนวนอนจะโดนตัดหัวตัดท้าย
   จึงย่อให้เห็นทั้งใบ (contain) แล้วเอา "รูปตัวเอง" มาเบลอเป็นพื้นหลัง กันดูโล่ง
   รูปพื้นหลังส่งมาทาง --cover (inline style ใน view) */
.hm-card-cover.is-logo {
  position: relative;
  background: var(--panel-2);
}
.hm-card-cover.is-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cover);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.2);   /* 🎛️ ความเบลอ */
  transform: scale(1.25);            /* ขยายกันขอบเบลอโปร่งรอบกรอบ */
  opacity: 0.5;                      /* 🎛️ ความเข้มของพื้นหลัง */
}
.hm-card-cover.is-logo img {
  position: relative;   /* ลอยเหนือชั้นเบลอ */
  z-index: 1;
  object-fit: contain;
  /* padding: 10px 14px; */
}
.hm-card-cover.is-blank {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-wash), var(--panel));
}
.hm-card-initial {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.45;
}
/* ปุ่มถูกใจ (เก็บใน localStorage — ยังไม่ผูกบัญชี)
   ⚠️ ต้องมี z-index สูงกว่ารูปปก — ปกแบบโลโก้ตั้ง img{position:relative;z-index:1}
   ไว้ให้ลอยเหนือชั้นเบลอ ถ้าปุ่มไม่มี z-index จะไปอยู่ใต้รูป กดแล้วโดนลิงก์การ์ดแทน */
.hm-fav {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    color 0.25s,
    border-color 0.25s;
}
.hm-fav:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.hm-fav.is-on {
  color: #c2483c;
  border-color: #c2483c;
}
.hm-fav.is-on svg {
  fill: currentColor;
}
.hm-card-body {
  flex: 1;
  padding: 11px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hm-card-body h3 a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}
.hm-card-body h3 a:hover {
  color: var(--accent);
}
.hm-card-place {
  font-size: 0.79rem;
  color: var(--ink-faint);
}
.hm-card-desc {
  font-size: 0.79rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 2px;
}
/* แถวล่างสุดของการ์ด — ดาวซ้าย / ป้ายประเภทขวา (ป้ายชิดขวาเสมอแม้ไม่มีดาว) */
.hm-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}
/* คะแนนจาก Google Reviews (tbl_shop_google_places) — ไม่มีคะแนน = ไม่เรนเดอร์ ไม่ใช่ 0 ดาว */
.hm-rate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hm-rate svg {
  flex: 0 0 auto;
  color: #e8a13a;   /* สีดาว — ใช้เหลืองอำพันทั้งสองโหมด (สื่อว่าเป็นคะแนนรีวิว) */
}
.hm-rate b {
  color: var(--ink);
  font-weight: 600;
}
.hm-rate small {
  color: var(--ink-faint);
}
.hm-tag {
  padding: 4px 11px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

/* ── 4 · เราคือใคร ── */
.hm-about {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
}
.hm-about-lead {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.hm-about-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;   /* 🎛️ เท่ากับไอคอน 3 จุดเด่น (.hm-about-i) */
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--panel-2);
  color: var(--accent);
}
.hm-about-ico .hm-ico {
  width: 27px;
  height: 27px;
}
.hm-about-lead h2 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 7px;
}
.hm-about-lead p {
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.8;
}
.hm-about-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
}
.hm-about-list li {
  display: flex;
  gap: 11px;
  padding-left: clamp(14px, 2vw, 24px);
  border-left: 1px solid var(--hair);
}
.hm-about-i {
  flex: 0 0 auto;
  color: var(--accent);
}
.hm-about-list b {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.hm-about-list small {
  display: block;
  font-size: 0.77rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ── 5 · การ์ดใหญ่ 3 ใบ ── */
.hm-bigs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
}
.hm-big {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  min-height: 172px;   /* 🎛️ ความสูงการ์ดใหญ่ */
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hm-big-text {
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hm-big-text h3 {
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.4;
}
.hm-big-text p {
  font-size: 0.79rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.hm-big-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.83rem;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}
.hm-big-btn:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}
/* รูปวางแบบ absolute — ไม่งั้น height:100% จะ resolve เป็น auto แล้วรูปแนวตั้ง
   จะยืดการ์ดสูงตามสัดส่วนตัวเอง (802x1080 → สูง ~330px) */
.hm-big-media {
  position: relative;
  overflow: hidden;
}
.hm-big-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ── แผนที่อีสาน (SVG ฝังในหน้า) — ระบายสีด้วยโทเคน จึงเปลี่ยนตามโหมดเอง ──
   ที่มาขอบเขตจังหวัด: Natural Earth (public domain) · สคริปต์สร้าง: scratchpad/build_map.php */
.hm-big-media.is-map {
  display: grid;
  place-items: center;
  padding: 8px;
  background: var(--panel);
}
/* ป้ายชื่อจังหวัดตอนชี้เมาส์ — ลอยตามเคอร์เซอร์ ไม่รับ pointer เอง (ไม่งั้นจะกระพริบ) */
.hm-map-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));   /* ปกติลอยเหนือเคอร์เซอร์ */
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: var(--shadow-sm);
}
/* จังหวัดแถวบน ๆ — ป้ายจะโผล่พ้นกรอบการ์ด (กล่องมี overflow:hidden) จึงพลิกลงล่างแทน */
.hm-map-tip.is-below {
  transform: translate(-50%, 12px);
}
.hm-map-tip.is-on {
  opacity: 1;
}
.hm-big-media.is-map .isan-map path {
  cursor: pointer;
}
/* คุมด้วย "ความสูง" ไม่ใช่ความกว้าง — แผนที่เกือบเป็นจัตุรัส ถ้าปล่อยกว้าง 100% การ์ดจะสูงตาม */
.hm-big-media.is-map .isan-map {
  width: auto;
  height: 100%;
  max-height: 152px;   /* 🎛️ ความสูงแผนที่ในการ์ด */
  max-width: 100%;
  display: block;
}
.hm-big-media.is-map .isan-map path {
  fill: var(--accent);
  fill-opacity: 0.28;              /* 🎛️ ความเข้มของจังหวัด */
  stroke: var(--panel);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: fill-opacity 0.25s;
}
/* ไล่เฉดให้เห็นเป็นรายจังหวัด ไม่ใช่ก้อนเดียว */
.hm-big-media.is-map .isan-map path:nth-child(3n) {
  fill-opacity: 0.44;
}
.hm-big-media.is-map .isan-map path:nth-child(3n + 1) {
  fill-opacity: 0.18;
}
.hm-big-media.is-map .isan-map path:hover {
  fill-opacity: 0.72;
}

/* รูปที่ "ไล่ขอบซ้ายเป็นสีครีมมาในไฟล์" (เช่น spar-travel.png ไล่จาก #FFFEFA ~42% ซ้าย)
   → mask ส่วนนั้นทิ้ง ให้พื้นการ์ดจริงโผล่แทน ไม่งั้นโหมดมืดจะเห็นเป็นแผ่นขาวติดอยู่
   🎛️ ปรับจุดเริ่ม/จบของการไล่ให้ตรงกับรูปแต่ละไฟล์ */
.hm-big-media.is-fade img {
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 76%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 76%);
}

/* ── เรดาร์ 5 เสา (SVG ฝังในหน้า) — ภาพประกอบการ์ด "วิเคราะห์อัตลักษณ์สปา" ──
   ชื่อ 5 ด้าน = เสาจริงของเครื่องมือวิเคราะห์ (Ai\Rubric) · ค่าคะแนนเป็นตัวอย่างประกอบภาพ
   สคริปต์สร้าง: scripts/build_identity_radar.php */
.hm-big-media.is-chart {
  display: grid;
  place-items: center;
  padding: 6px;
  background: var(--panel);
}
.hm-big-media.is-chart .id-radar {
  width: auto;
  height: 100%;
  max-height: 158px;   /* 🎛️ ขนาดเรดาร์ในการ์ด */
  max-width: 100%;
  display: block;
}
.id-radar .rd-grid {
  fill: none;
  stroke: var(--hair);
  stroke-width: 1;
}
.id-radar .rd-axis {
  stroke: var(--hair);
  stroke-width: 1;
}
.id-radar .rd-area {
  fill: var(--accent);
  fill-opacity: 0.22;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
.id-radar .rd-dot {
  fill: var(--accent);
}
.id-radar .rd-label {
  fill: var(--ink-soft);
  font-size: 9px;
  font-family: inherit;
}

/* ── จอกลาง/เล็ก ── */
@media (max-width: 1180px) {
  .hm-quick {
    grid-template-columns: repeat(3, 1fr);
  }
  .hm-bigs {
    grid-template-columns: 1fr;
  }
  .hm-big {
    grid-template-columns: 1.2fr 0.8fr;
  }
}
@media (max-width: 900px) {
  .hm-hero-text {
    max-width: 74vw;
  }
  .hm-hero-h {
    text-wrap: balance;
  }
  .hm-about {
    grid-template-columns: 1fr;
  }
  .hm-about-list {
    grid-template-columns: 1fr;
  }
  .hm-about-list li {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--hair);
    padding-top: 14px;
  }
}
@media (max-width: 620px) {
  .hm-quick {
    grid-template-columns: repeat(2, 1fr);
  }
  .hm-q {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
  .hm-head {
    flex-wrap: wrap;
  }
  .hm-more {
    /* ตกลงมาบรรทัดใหม่แล้วยังชิดขวา — อย่าตั้ง width:100% + margin-left:0
       เพราะจะกางเต็มบรรทัดแล้วข้อความไปเริ่มที่ขอบซ้าย */
    width: auto;
    margin-left: auto;
  }
  .hm-big {
    grid-template-columns: 1fr;
  }
  .hm-big {
    min-height: 0;
  }
  .hm-big-media {
    order: -1;
    position: static;
  }
  .hm-big-media img {
    position: static;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER (ดีไซน์ใหม่ 2026-09-01) — คลาส .ft-*
   5 คอลัมน์: แบรนด์ · เมนูหลัก (2 คอลัมน์ย่อย) · เกี่ยวกับเรา · คู่มือ · ติดต่อเรา
   มาร์กอัป: app/Views/partials/site_footer.php · ข้อมูลติดต่อจาก tbl_settings
   กฎเก่า (.site-footer / .foot-*) ยังค้างอยู่ด้านบน ไม่ได้ใช้แล้ว รอยืนยันก่อนลบ
   ═══════════════════════════════════════════════════════════════ */
.ft {
  margin-top: 40px;
  background: var(--panel-2);
  border-top: 1px solid var(--hair);
}
.ft-in {
  width: min(1680px, 94vw);
  margin: 0 auto;
  padding: clamp(30px, 3.4vw, 48px) 0 clamp(22px, 2.4vw, 32px);
  display: grid;
  grid-template-columns: 1.5fr 1.6fr 1fr 1.1fr 1.2fr;
  gap: clamp(20px, 2.4vw, 44px);
  align-items: start;
}

/* ── แบรนด์ ── */
.ft-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.ft-logo img {
  width: 40px;
  height: auto;
  display: block;
}
.ft-logo span {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.ft-tag {
  margin-top: 12px;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 34ch;
}
.ft-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
/* ไอคอนโซเชียล = ไฟล์โลโก้แบรนด์สีเต็ม มีพื้นวงกลมมาในตัว → ไม่ต้องใส่พื้น/สีจาก CSS */
.ft-soc {
  width: 34px;
  height: 34px;
  display: block;
  text-decoration: none;
  transition:
    transform 0.25s,
    opacity 0.25s;
}
.ft-soc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ft-soc:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}
/* ช่องทางที่ยังไม่ได้กรอกค่าในหลังบ้าน — แสดงสีปกติเหมือนอันอื่น แค่กดไม่ได้ */
.ft-soc.is-off {
  cursor: default;
}
.ft-soc.is-off:hover {
  transform: none;
  opacity: 1;
}

/* ── คอลัมน์ลิงก์ ── */
.ft-col h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 13px;
}
.ft-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ft-col a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.5;
  transition: color 0.25s;
}
.ft-col a:hover {
  color: var(--accent);
}
/* หัวข้อที่ยังไม่มีหน้ารองรับ — แสดงเป็นข้อความ ไม่ใช่ลิงก์ (กันกดแล้วเจอ 404) */
.ft-soon {
  color: var(--ink-faint);
  font-size: 0.82rem;
  line-height: 1.5;
  cursor: default;
}
.ft-menu-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px clamp(14px, 1.6vw, 28px);
}

/* ── ติดต่อเรา ── */
.ft-contact ul {
  gap: 11px;
}
.ft-contact li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.ft-contact svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent);
}

/* ── แถบท้ายสุด ── */
.ft-base {
  border-top: 1px solid var(--hair);
  text-align: center;
  padding: 15px;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.ft-base a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  transition: color 0.25s, border-color 0.25s;
}
.ft-base a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── จอกลาง/เล็ก ── */
@media (max-width: 1180px) {
  .ft-in {
    grid-template-columns: 1.4fr 1.6fr 1fr;
    row-gap: clamp(24px, 3vw, 36px);
  }
}
@media (max-width: 760px) {
  .ft-in {
    grid-template-columns: 1fr 1fr;
  }
  .ft-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .ft-in {
    grid-template-columns: 1fr;
  }
  .ft-menu-2 {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REVEAL ON SCROLL — บล็อกเนื้อหาจางลอยขึ้นตอนเลื่อนถึง (เล่นครั้งเดียว)
   คลาส .reveal ถูกใส่โดย public/assets/js/reveal.js ไม่ได้เขียนไว้ใน HTML
   → ปิด JS แล้วเนื้อหายังแสดงปกติ ไม่หายทั้งหน้า
   ═══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0); /* 🎛️ ระยะลอยขึ้น */
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.9, 0.3, 1),
    transform 0.65s cubic-bezier(0.22, 0.9, 0.3, 1);
  transition-delay: var(--rv-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}