/**
 * style.css - PP First Pool Villa (ppfirstpoolvilla.com) design system
 *
 * Change Order 3 ต.ค. 2569 (ข้อ 20 ส่วนสี - ลูกค้า confirm ให้เปลี่ยนจากโทนฟ้า+ส้มเดิม
 * เป็นโทนดำ+แดงให้ตรงกับภาพ mockup search.php/villa.php ที่แนบมาตั้งแต่ข้อ 16 เป๊ะๆ
 * (คำถามค้างเดิมของข้อ C.16 - ตอนนี้ confirm แล้ว) เปลี่ยนเฉพาะฝั่งลูกค้า (Front Office)
 * เท่านั้น - หลังบ้าน (admin.css) ยังคงโทนฟ้า+ส้มเดิมไว้ตั้งใจ เพราะภาพ mockup ทั้งหมด
 * เป็นหน้าฝั่งลูกค้าเท่านั้น ไม่มีภาพอ้างอิงฝั่งแอดมิน - ดู override ท้ายไฟล์ admin.css
 *
 * แนวทางสี/องค์ประกอบเดิมอ้างอิงจากการสำรวจเว็บพูลวิลล่าที่ได้รับความนิยม 2 เว็บ
 * (havepoolvilla.com, poolvillacity.co.th) - การ์ดวิลล่าแบบมีรูปคลุมเต็ม + badge ทำเล +
 * ไอคอนสรุปห้องนอน/ผู้เข้าพัก และ search/booking widget แบบการ์ดลอยเหนือ hero banner
 * ยังคงใช้โครงสร้างเดิมทั้งหมด เปลี่ยนแค่ค่าสีตัวแปรด้านล่างนี้
 */

:root {
  /* ---- Brand colors (ดำ+แดง ตาม mockup - Change Order 3 ต.ค. 2569) ---- */
  --color-primary: #1a1a1a;       /* ดำ - โลโก้/หัวเว็บ/ลิงก์ (เดิมฟ้า #0d6ab3) */
  --color-primary-dark: #000000;
  --color-primary-light: #f0f0f0;
  --color-accent: #e02020;        /* แดง - ปุ่ม CTA หลัก/ราคา/badge (เดิมส้ม #ff8a1e) */
  --color-accent-dark: #b81a1a;
  --color-line: #06c755;          /* เขียว LINE - ปุ่มติดต่อด่วน (คงเดิม - สีแบรนด์ LINE) */
  --color-line-dark: #05a648;

  /* ---- Neutrals ---- */
  --color-navy: #141414;          /* ดำ - footer/ตัวอักษรหัวข้อเข้ม (เดิม #142b45 กรมท่า) */
  --color-text: #24303d;
  --color-text-muted: #667180;
  --color-border: #e3e8ee;
  --color-bg: #f5f8fb;
  --color-white: #ffffff;

  /* ---- Status ---- */
  --color-success: #1ea672;
  --color-warning: #e0a300;
  --color-danger: #e0453f;

  /* ---- Typography ---- */
  --font-body: "Noto Sans Thai", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-base: 16px;

  /* ---- Spacing / radius / shadow ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 10px rgba(20, 43, 69, 0.08);
  --shadow-card-hover: 0 10px 24px rgba(20, 43, 69, 0.14);
  --shadow-widget: 0 16px 40px rgba(20, 43, 69, 0.18);
  --container-width: 1180px;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-wrap: break-word; /* กันข้อความ/ลิงก์ยาวๆ (เช่นอีเมล) ดันเลย์เอาต์ล้นจอแคบ */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn-accent {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 138, 30, 0.35);
}
.btn-accent:hover { box-shadow: 0 10px 22px rgba(255, 138, 30, 0.45); }

.btn-line {
  background: var(--color-line);
  color: #fff;
  box-shadow: 0 8px 18px rgba(6, 199, 85, 0.3);
}
.btn-line:hover { background: var(--color-line-dark); }

.btn-outline {
  background: #fff;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border);
}
.btn-outline:hover { border-color: var(--color-primary); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 14px; }
/* Phase 7 กลุ่ม C ข้อ 16 (Change Order 3 ต.ค. 2569) - ปุ่ม outline สำหรับวางบน
   พื้นหลังเข้ม (การ์ดค้นหาสีเข้มในหน้า search.php) .btn-outline ปกติพื้นขาว/
   ขอบจาง มองไม่เห็นถ้าวางบนพื้นเข้ม เลยต้องมีตัวแปรสีสว่างแยกต่างหาก */
.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
}
.btn-outline-light:hover { border-color: #fff; }

/* ============ Header ============ */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  /* Round 20: above page content (fab 200) but below lightbox (1000) / popup (2000) so the overhanging logo floats on top */
  z-index: 900;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 99px; /* Round 21: +30% (76px -> 99px) */
}
/* Change Order 3 ต.ค. 2569 (Phase 7 กลุ่ม D - โลโก้ 2 บรรทัดตามภาพ mockup
   "แผนผังเว็บไซต์"): บรรทัด 1 "PP FIRST" ตัวหนา, บรรทัด 2 "POOL VILLA" บาง
   กว่า+เว้นระยะตัวอักษร, บรรทัด 3 สโลแกนเล็กตัวเอน - ไม่มี logo.svg จริง
   (onerror ซ่อนรูปอัตโนมัติ) โชว์เฉพาะข้อความ 3 บรรทัดนี้แทน */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary-dark);
  line-height: 1.15;
}
.site-header__logo-img { height: 42px; width: auto; }
.site-header__logo-text { display: flex; flex-direction: column; }
.site-header__logo-line1 { font-weight: 800; font-size: 18px; letter-spacing: .02em; }
.site-header__logo-line2 { font-weight: 600; font-size: 12.5px; letter-spacing: .12em; color: var(--color-text-muted); }
.site-header__logo-tagline { font-style: italic; font-size: 10.5px; color: var(--color-accent); margin-top: 1px; }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-header__nav a {
  font-weight: 600;
  color: var(--color-text);
  font-size: 15px;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.site-header__nav a:hover { color: var(--color-primary); }
.site-header__nav a.is-active {
  color: var(--color-accent);
  font-weight: 700;
  border-bottom-color: var(--color-accent);
}
.site-header__actions { display: flex; align-items: center; gap: 10px; }

/* ไอคอนค้นหา/หัวใจแบบเส้น (SVG) แทนอีโมจิเดิม - ปุ่มกลม เส้นขอบบาง */
.site-header__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--color-text);
  flex-shrink: 0;
}
.site-header__icon-btn:hover { background: var(--color-bg); color: var(--color-primary); }
.site-header__icon-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.site-header__contact-pill { white-space: nowrap; }

.site-header__burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  align-items: center; justify-content: center;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
}
.site-header__burger.is-open { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* เมนูมือถือ/แท็บเล็ต - dropdown ใต้ header เปิดด้วยปุ่ม ☰ (ดู header.php) */
.site-header__mobile-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
  background: #fff;
}
.site-header__mobile-nav.is-open { display: flex; }
.site-header__mobile-nav a {
  padding: 13px 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.site-header__mobile-nav a.is-active { color: var(--color-accent); }
.site-header__mobile-nav a.is-line { color: var(--color-line-dark); }

/* ============ Hero ============ */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: 56px 0 150px;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .35;
}
.hero__content { position: relative; text-align: center; }
.hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.15);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}
.hero__title {
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.25;
}
.hero__title span { color: #ff8a8a; } /* ไฮไลต์ชมพู-แดงอ่อนบนพื้นรูปเข้ม (เดิม #ffd08a ส้มอ่อน) - Change Order 3 ต.ค. 2569 */
.hero__subtitle {
  font-size: 17px;
  opacity: .92;
  max-width: 620px;
  margin: 0 auto;
}
.hero__badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
/* Phase 7 กลุ่ม C ข้อ 16 (Change Order 3 ต.ค. 2569) - hero เฉพาะหน้า search.php
   ไม่มีการ์ดลอยทับด้านล่างเหมือนหน้าแรก เลยไม่ต้องเผื่อ padding ล่างเยอะขนาด
   เดียวกับ .hero ปกติ (150px) */
.hero--search { padding-bottom: 56px; }
/* Change Order 3 ต.ค. 2569 (Phase 7 กลุ่ม D - ปรับ hero หน้า search.php ให้
   ตรงภาพ mockup "แผนผังเว็บไซต์" มากขึ้น): ข้อความชิดซ้าย (ของเดิมอยู่กึ่งกลาง)
   + ข้อความสไตล์ลายมือ "Search / Your Perfect Stay" ซ้อนบนรูป + คำโปรยมุม
   ขวาล่าง "More Than Just a Stay" - เฉพาะหน้า search.php เท่านั้น (ไม่กระทบ
   .hero ของหน้าแรก) */
.hero--search .hero__content { text-align: left; max-width: 620px; }
.hero--search .hero__subtitle { margin: 0; }
.hero__script {
  font-family: "Dancing Script", cursive;
  font-size: 56px;
  line-height: 1;
  margin: 0 0 4px;
  color: #fff;
}
.hero__script-sub {
  font-size: 26px;
  font-weight: 300;
  letter-spacing: .03em;
  margin: 0 0 18px;
  color: #fff;
}
.hero__corner-cursive {
  position: absolute;
  right: 24px; bottom: 18px;
  font-family: "Dancing Script", cursive;
  font-size: 22px;
  color: #fff;
  text-align: right;
  line-height: 1.2;
  opacity: .92;
  margin: 0;
}
.hero__badges span {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
}

/* ============ Search / Booking widget ============ */
.search-widget {
  position: relative;
  max-width: 980px;
  margin: -104px auto 0;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-widget);
  padding: 22px;
}
.search-widget__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.search-field {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.search-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.search-field input,
.search-field select {
  border: none;
  outline: none;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  font-family: inherit;
  background: transparent;
}
.search-widget__price {
  grid-column: 1 / -1;
  /* grid item เองก็มี min-width:auto โดย default เหมือนกับ flex item - ต่อให้
     ช่อง input ข้างในตั้ง min-width:0 ไว้แล้ว (ดู index.php) ตัว div นี้ซึ่งเป็น
     grid item ก็ยังลาก track ทั้งแถวให้กว้างเกินจอได้อยู่ดีถ้าไม่ตั้ง min-width:0
     ให้มันด้วย (สาเหตุจริงของการ์ด search-widget ทั้งใบล้นขอบจอมือถือ) */
  min-width: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.search-widget__price-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
}
.search-widget__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

/* Phase 7 กลุ่ม C ข้อ 16 (Change Order 3 ต.ค. 2569) - การ์ดค้นหาสีเข้มเฉพาะ
   หน้า search.php ("ค้นหาบ้านพักในพัทยา") ตามภาพ mockup - ใช้สีกรมท่าเข้ม
   (--color-navy) ของธีมเดิมแทนสีดำล้วนในภาพ เพื่อให้เข้ากับโทนสีที่ตั้งไว้
   ทั้งเว็บ (ปุ่ม CTA ยังใช้สีส้มแบรนด์เดิม ไม่เปลี่ยนเป็นสีแดงตามภาพ เพื่อให้
   ปุ่มทั้งเว็บเป็นสีเดียวกันหมด) */
.search-bar-dark {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin-top: -64px;
  position: relative;
  box-shadow: var(--shadow-widget);
}
.search-bar-dark__head { color: #fff; margin-bottom: 18px; }
.search-bar-dark__head h2 { margin: 0 0 4px; font-size: 20px; }
.search-bar-dark__head p { margin: 0; font-size: 13.5px; opacity: .75; }
.search-bar-dark__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.search-field--dark {
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.14);
}
.search-field--dark label { color: rgba(255,255,255,.65); }
.search-field--dark input,
.search-field--dark select { color: #fff; }
.search-field--dark input::placeholder { color: rgba(255,255,255,.45); }
.search-field--dark select option { color: var(--color-text); }
.search-field--range .search-field__range-row { display: flex; align-items: center; gap: 6px; }
.search-field__range-row input { min-width: 0; }
.search-field__range-row span { color: rgba(255,255,255,.5); flex-shrink: 0; }
.search-bar-dark__toggle-extra {
  background: none; border: none; color: rgba(255,255,255,.75);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  margin-top: 14px; padding: 0; display: flex; align-items: center; gap: 6px;
}
.search-bar-dark__toggle-extra:hover { color: #fff; }
.search-bar-dark__extra {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; gap: 14px;
}
.search-bar-dark__amenities-label { color: rgba(255,255,255,.65); font-size: 12.5px; font-weight: 700; display: block; margin-bottom: 8px; }
.filter-panel__checkbox-list--dark .filter-panel__checkbox { color: #fff; }
.search-bar-dark__actions {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

/* ============ Section headings ============ */
.section { padding: 64px 0; }
.section-head { text-align: center; margin-bottom: 36px; }
.section-head h2 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--color-navy);
}
.section-head h2 .accent { color: var(--color-accent); }
.section-head p { color: var(--color-text-muted); margin: 0; }

/* ============ Feature icon row ============ */
.feature-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin: 40px 0 0;
}
.feature-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 96px;
  text-align: center;
}
.feature-row__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.feature-row__item span { font-size: 12.5px; font-weight: 700; color: var(--color-text); }

/* Phase 7 กลุ่ม C ข้อ 16 (Change Order 3 ต.ค. 2569) - "วิธีการจองที่พัก" 4
   ขั้นตอน เนื้อหาคงที่ไม่ผูกกับ DB ตามภาพ mockup หน้า search.php */
.how-to-book { padding-top: 0; }
.how-to-book__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.how-to-book__item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.how-to-book__icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--color-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 4px;
}
.how-to-book__item strong { font-size: 15px; color: var(--color-navy); }
.how-to-book__item span { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }

/* ============ Villa card ============ */
.villa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.villa-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .2s ease;
}
.villa-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.villa-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--color-border); }
.villa-card__media img { width: 100%; height: 100%; object-fit: cover; }
.villa-card__badge {
  /* [แก้ 21 ก.ย. 2569] เดิม hardcode สีฟ้า rgba(13,106,179,.92) ตรงๆ ทำให้
     badge ทำเลไม่เปลี่ยนสีตาม Theme ที่ Superadmin เลือก (Change Order Phase 6)
     - เปลี่ยนเป็นอ้างอิงตัวแปรสีแทน ให้ badge เปลี่ยนสีตาม Theme ถูกต้องทุกจุด */
  position: absolute; top: 10px; left: 10px;
  background: color-mix(in srgb, var(--color-navy) 88%, transparent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.villa-card__fav {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  font-size: 15px;
  transition: transform .15s ease;
}
/* Phase 7 กลุ่ม E (Change Order 3 ต.ค. 2569) - Wishlist จริง: กดแล้วเด้งนิดๆ
   ให้รู้สึกว่ากดสำเร็จ (ไม่มีผลกับ layout อื่น) */
.villa-card__fav:active { transform: scale(.88); }
.villa-card__fav.is-busy { opacity: .6; pointer-events: none; }
.villa-card__body { padding: 16px; }
.villa-card__name { font-size: 16px; font-weight: 800; margin: 0 0 4px; color: var(--color-navy); }
.villa-card__loc {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--color-text-muted); margin-bottom: 10px;
}
.villa-card__price { font-size: 12px; color: var(--color-text-muted); }
.villa-card__price strong { font-size: 20px; color: var(--color-accent-dark); display: block; }
.villa-card__stats {
  display: flex; gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.villa-card__stats span { display: flex; align-items: center; gap: 4px; }
/* Phase 7 กลุ่ม C ข้อ 16 (Change Order 3 ต.ค. 2569) - ปุ่ม "ดูรายละเอียด →"
   ท้ายการ์ด ตาม mockup หน้า search.php (การ์ดทั้งใบยังคลิกได้เหมือนเดิม ปุ่มนี้
   เป็นแค่ span ที่ดูเป็นปุ่ม ไม่ใช่ลิงก์ซ้อนลิงก์) */
.villa-card__cta {
  display: block; margin-top: 12px; text-align: center;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff; font-size: 13.5px; font-weight: 700;
  padding: 9px 14px; border-radius: var(--radius-pill);
}

/* ---- Round 44: havepoolvilla-style card layout (our theme colours / wording) ----
   cover -> area label -> code | price -> stats -> extra-guest line -> 4 thumbs -> full-width button */
.villa-card--r44 { display: flex; flex-direction: column; color: inherit; position: relative; }
.villa-card--r44.villa-card--wishlist .villa-card__fav { top: 10px; right: 10px; }
.villa-card--r44 .villa-card__link { display: flex; flex-direction: column; color: inherit; flex: 1; }
.villa-card--r44 .villa-card__media { display: block; }
.villa-card--r44 .villa-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 14px 16px; }
.villa-card--r44 .villa-card__body > span { display: block; }
.villa-card--r44 .villa-card__area {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent-dark); margin-bottom: 4px;
}
.villa-card--r44 .villa-card__head {
  display: flex !important; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.villa-card--r44 .villa-card__name { margin: 0; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.villa-card--r44 .villa-card__price { text-align: right; font-size: 12px; white-space: nowrap; }
.villa-card--r44 .villa-card__price strong { display: inline; font-size: 18px; }
.villa-card--r44 .villa-card__stats {
  display: flex !important; justify-content: space-between; gap: 6px;
  margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--color-border);
  font-size: 12.5px; color: var(--color-text-muted);
}
.villa-card--r44 .villa-card__stats b { color: var(--color-navy); font-weight: 800; }
.villa-card--r44 .villa-card__extra { margin-top: 6px; font-size: 12.5px; color: var(--color-accent-dark); font-weight: 600; }
.villa-card--r44 .villa-card__thumbs {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px;
}
.villa-card--r44 .villa-card__thumbs img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: var(--color-border); display: block;
}
.villa-card--r44 .villa-card__cta { margin-top: auto; }
.villa-card--r44 .villa-card__body > :nth-last-child(2) { margin-bottom: 14px; }
.villa-card--r44 .villa-card__body { justify-content: flex-start; }
.villa-card--r44 .villa-card__body > .villa-card__cta { margin-top: auto; }
.villa-card--r44 .villa-card__cta { padding: 10px 14px; border-radius: var(--radius-md); font-size: 14px; }
.villa-card--r44 .villa-card__body::after { content: none; }

/* Phase 7 กลุ่ม C ข้อ 16 - มุมมอง "รายการ" (list) สลับจากแกลเลอรีด้วย JS ล้วนๆ
   (ppvSetResultsView() ใน search.php) การ์ดเรียงเป็นแถวแนวนอนแทน grid */
.villa-grid--list { grid-template-columns: 1fr; }
.villa-grid--list .villa-card { display: flex; flex-direction: row; }
.villa-grid--list .villa-card__media { width: 240px; flex-shrink: 0; aspect-ratio: auto; }
.villa-grid--list .villa-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.villa-grid--list .villa-card--r44 .villa-card__link { flex-direction: row; }
.villa-grid--list .villa-card--r44 .villa-card__cta { margin-top: 14px; max-width: 260px; }
.villa-grid--list .villa-card--r44 .villa-card__thumbs { max-width: 320px; }

/* ============ Articles (Phase 5) - ใช้แนวเดียวกับ villa-card ============ */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.article-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .2s ease;
}
.article-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.article-card__media { aspect-ratio: 16 / 9; background: #dbe6ee; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { padding: 16px; }
.article-card__date { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }
.article-card__title { font-size: 16px; font-weight: 800; margin: 0 0 8px; color: var(--color-navy); }
.article-card__excerpt { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.6; }
.article-detail__cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 24px; }
.article-detail__body { font-size: 15.5px; line-height: 1.9; white-space: pre-wrap; }
@media (max-width: 900px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .article-grid { grid-template-columns: 1fr; } }

/* ============ Footer ============ */
.site-footer { background: var(--color-navy); color: #cdd8e3; padding: 56px 0 24px; margin-top: 40px; }
/* Change Order 3 ต.ค. 2569 (Phase 7 กลุ่ม D) - รื้อเป็น 4 คอลัมน์ตามภาพ
   mockup: โลโก้+สโลแกน / ที่อยู่ / ช่องทางติดต่อ / Follow Us (เดิม 3 คอลัมน์
   โลโก้+คำบรรยายยาว / ลิงก์ด่วน / ติดต่อ - คอลัมน์ "ลิงก์ด่วน" ย้ายไปเป็นแถว
   ลิงก์แนวนอนใน .site-footer__bottom แทน ตรงกับภาพ mockup) */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer h4 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.site-footer a { color: #cdd8e3; font-size: 14px; }
.site-footer a:hover { color: #fff; }
.site-footer__logo { line-height: 1.2; margin-bottom: 10px; }
.site-footer__logo-line1 { display: block; font-weight: 800; font-size: 19px; color: #fff; letter-spacing: .02em; }
.site-footer__logo-line2 { display: block; font-weight: 600; font-size: 13px; color: #cdd8e3; letter-spacing: .14em; }
.site-footer__tagline { font-style: italic; font-size: 14px; color: #cdd8e3; max-width: 280px; margin: 0; }
.site-footer__address { font-size: 14px; line-height: 1.7; color: #cdd8e3; max-width: 260px; margin: 0; }
.site-footer__links { display: flex; flex-direction: column; gap: 10px; }
.site-footer__contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; margin: 0; padding: 0; }
.site-footer__contact li { display: flex; align-items: center; gap: 8px; list-style: none; }
.site-footer__social { display: flex; gap: 10px; margin-top: 0; }
.site-footer__social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}
.site-footer__signature { font-style: italic; font-size: 15px; color: #fff; margin: 14px 0 0; }
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px; font-size: 13px; color: #93a2b3;
  flex-wrap: wrap; gap: 10px 20px;
}
.site-footer__bottom-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer__bottom-nav a { font-size: 13px; color: #93a2b3; }
.site-footer__bottom-nav a:hover { color: #fff; }
.site-footer__bottom-credit { font-size: 13px; color: #93a2b3; }
.site-footer__bottom-credit:hover { color: #fff; text-decoration: underline; }

/* ============ Search / listing page (search.php) ============ */
.page-header {
  background: var(--color-primary-light);
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
}
.page-header h1 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--color-navy);
}
.page-header p { margin: 0; color: var(--color-text-muted); font-size: 14px; }

.search-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: flex-start;
  padding: 32px 0 64px;
}

.filter-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  position: sticky;
  top: 115px; /* Round 21: header is 99px tall */
  /* .filter-panel เป็น grid item ของ .search-layout (display:grid) - grid item
     มี min-width:auto เป็นค่า default เหมือนกัน ต่อให้ input ข้างในตั้ง
     min-width:0 ไว้แล้วก็ตาม ตัว .filter-panel เองก็ยังลาก track ทั้งคอลัมน์
     ให้กว้างเกินจอมือถือได้อยู่ดีถ้าไม่ตั้ง min-width:0 ให้ตัวมันเองด้วย */
  min-width: 0;
}
.filter-panel__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 16px;
}
.filter-panel__group { margin-bottom: 20px; }
.filter-panel__group:last-of-type { margin-bottom: 0; }
.filter-panel__group label.filter-panel__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}
.filter-panel__group select,
.filter-panel__group input[type="date"],
.filter-panel__group input[type="number"] {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
}
.filter-panel__range {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ช่องในแถว range (ต่ำสุด/สูงสุด, ช่วงวันที่) ต้องบังคับ min-width:0 เพราะ
   input[type=number/date] มี intrinsic width ของตัวเอง - ถ้าไม่ใส่ flex item
   จะไม่ยอมหดตามพื้นที่จริง ทำให้ 2 ช่องรวมกันล้นกรอบบนจอแคบ (มือถือ/ไอแพด) */
.filter-panel__range input[type="number"],
.filter-panel__range input[type="date"] {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}
.filter-panel__range span { color: var(--color-text-muted); font-size: 13px; flex-shrink: 0; }
.filter-panel__checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 220px;
  overflow-y: auto;
}
.filter-panel__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}
.filter-panel__checkbox input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.filter-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.results-toolbar__count { font-size: 14px; color: var(--color-text-muted); }
.results-toolbar__count strong { color: var(--color-navy); }
.results-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.results-toolbar__sort select {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
/* Phase 7 กลุ่ม C ข้อ 16 (Change Order 3 ต.ค. 2569) - หัวข้อผลลัพธ์แบบ 2 บรรทัด
   ("บ้านพักทั้งหมด" + "พบ N หลัง...") ตาม mockup หน้า search.php แทนบรรทัดเดียว
   เดิม และกลุ่มปุ่มสลับมุมมองแกลเลอรี/รายการข้างปุ่มเรียงลำดับ */
.results-toolbar__count { display: flex; flex-direction: column; gap: 2px; }
.results-toolbar__count strong:first-child { font-size: 18px; color: var(--color-navy); }
.results-toolbar__count span { font-size: 13px; color: var(--color-text-muted); }
.results-toolbar__count span strong { color: var(--color-navy); }
.results-toolbar__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.results-toolbar__view { display: flex; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.results-toolbar__view button {
  width: 36px; height: 36px; border: none; background: #fff; cursor: pointer;
  font-size: 15px; color: var(--color-text-muted);
}
.results-toolbar__view button.is-active { background: var(--color-primary); color: #fff; }

.empty-state {
  text-align: center;
  padding: 64px 20px;
  color: var(--color-text-muted);
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}
.empty-state__icon { font-size: 40px; margin-bottom: 12px; }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  background: #fff;
}
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }

/* ============ Villa detail page (villa.php) ============ */
.sender-bar {
  background: var(--color-navy);
  color: #fff;
}
.sender-bar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px; /* Round 14: คงระยะขอบ 20px ของ .container (เดิม padding 10px 0 ทับทำให้ชิดขอบ) */
  font-size: 14px;
}
.sender-bar__avatar {
  /* Round 14: ขยายรูปโปรไฟล์ผู้ส่งลิงก์ +150% (34px -> 85px) */
  width: 85px; height: 85px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  flex-shrink: 0;
  overflow: hidden;
}
.sender-bar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sender-bar__text strong { display: block; }
.sender-bar__text span { color: #b9c6d6; }
.sender-bar a.btn { margin-left: auto; flex-shrink: 0; }

.breadcrumb {
  padding: 14px 0;
  font-size: 13px;
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-primary); font-weight: 600; }

.gallery {
  display: grid;
  grid-template-columns: 2.4fr 1fr;
  gap: 10px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.gallery__main {
  aspect-ratio: 16 / 10;
  background: #dbe6ee;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__side {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
.gallery__side > div { background: #dbe6ee; overflow: hidden; position: relative; }
.gallery__side img { width: 100%; height: 100%; object-fit: cover; }
.gallery__more {
  position: absolute; inset: 0;
  background: rgba(20,43,69,.55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 15px;
}
.gallery__strip {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.gallery__strip img {
  width: 92px; height: 70px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: 2px solid transparent;
}
.gallery__strip img.is-active { border-color: var(--color-primary); }

.villa-detail__layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: flex-start;
  padding: 28px 0 64px;
}

.villa-detail__title { font-size: 26px; font-weight: 800; color: var(--color-navy); margin: 18px 0 6px; }
/* Change Order 3 ต.ค. 2569 (Phase 7 กลุ่ม D) - ไอคอนหัวใจข้างชื่อวิลล่า +
   คำโปรยตัวเอนใต้ชื่อ ตามภาพ mockup "PF-573" */
.villa-detail__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.villa-detail__title-row .villa-detail__title { margin: 18px 0 0; flex: 1; }
.villa-detail__heart {
  color: var(--color-text-muted); flex-shrink: 0; margin-top: 14px;
  background: none; border: 0; padding: 0; cursor: pointer; line-height: 0;
}
.villa-detail__heart:hover { color: var(--color-accent); }
/* Phase 7 กลุ่ม E (Change Order 3 ต.ค. 2569) - Wishlist จริง: หัวใจทึบสีแดง
   เมื่อกดเก็บไว้แล้ว ใช้ร่วมกับไอคอนหัวใจที่ header.php (.site-header__icon-btn--heart) */
.villa-detail__heart.is-active,
.site-header__icon-btn--heart.is-active { color: var(--color-accent); }
.villa-detail__heart.is-active svg,
.site-header__icon-btn--heart.is-active svg { fill: var(--color-accent); stroke: var(--color-accent); }

/* Phase 7 กลุ่ม E (Change Order 3 ต.ค. 2569) - ลิงก์ "▶ ดูรายละเอียดเพิ่มเติม"
   ตามภาพ mockup PF-573: กล่องไหนเนื้อหายาวเกิน ~5 บรรทัด จะถูกครอบ (clamp)
   ไว้อัตโนมัติด้วย JS (ดู footer.php) แล้วมีปุ่มกดขยาย/ย่อ ใช้เนื้อหาจริงที่มี
   อยู่แล้วทั้งหมด ไม่ได้เพิ่ม field ใหม่ */
.detail-box__body.is-clamped,
.detail-box__list.is-clamped {
  max-height: 112px;
  overflow: hidden;
  position: relative;
}
.detail-box__body.is-clamped::after,
.detail-box__list.is-clamped::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}
.detail-box__expand-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px;
  background: none; border: 0; padding: 0;
  color: var(--color-accent); font-weight: 700; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.detail-box__expand-btn:hover { text-decoration: underline; }
.villa-detail__quote { font-style: italic; color: var(--color-text-muted); font-size: 14.5px; margin: 6px 0 0; }
.villa-detail__meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  color: var(--color-text-muted); font-size: 14px; margin-bottom: 18px;
}
.villa-detail__meta .code-pill {
  background: var(--color-primary-light); color: var(--color-primary-dark);
  padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 700; font-size: 12.5px;
}

.stat-pills {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 16px 0; margin-bottom: 8px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stat-pills__item {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--color-text);
}
.villa-detail__stats { margin: -6px 0 18px; padding: 12px 0; gap: 8px 22px; }

.detail-section { padding: 28px 0; border-bottom: 1px solid var(--color-border); }
.detail-section:last-child { border-bottom: none; }
.detail-section h2 { font-size: 19px; font-weight: 800; color: var(--color-navy); margin: 0 0 14px; }
.detail-section__body { color: var(--color-text); font-size: 15px; line-height: 1.8; white-space: pre-line; }

/* Change Order 3 ต.ค. 2569 (Phase 7 กลุ่ม D - รื้อ villa.php ตามภาพ mockup
   "PF-573"): grid กล่องเนื้อหา 3 คอลัมน์ แทน .detail-section เรียงคอลัมน์
   เดียวแบบเดิม - แต่ละกล่องเป็นการ์ดขอบบาง สูงตามเนื้อหาจริง (ไม่บังคับความสูง
   เท่ากันทั้งแถว เพราะข้อมูลแต่ละวิลล่ายาวไม่เท่ากัน ช่องไหนไม่มีข้อมูลก็ซ่อน
   กล่องนั้นไปเลยเหมือนเดิม) */
.detail-box-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
}
.detail-box {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  background: #fff;
}
.detail-box h2 { font-size: 15.5px; font-weight: 800; color: var(--color-navy); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.detail-box__body { color: var(--color-text); font-size: 14px; line-height: 1.75; white-space: pre-line; }
.detail-box__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--color-text); font-size: 14px; line-height: 1.6; }
.detail-box__list li { padding-left: 14px; position: relative; }
.detail-box__list li::before { content: "-"; position: absolute; left: 0; color: var(--color-text-muted); }
.detail-box__highlight {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.detail-box__subhead { font-weight: 700; font-size: 13.5px; color: var(--color-navy); margin: 4px 0 8px; }
/* กล่อง "ทำเลที่ตั้ง" - ไม่ต่อ Google Maps API จริง (เลี่ยงค่าใช้จ่าย/คีย์
   เพิ่มเติม) ใช้กราฟิกตัวแทนเฉยๆ แล้วให้ปุ่มลิงก์ไปเปิด Google Maps จริงแทน */
.detail-box__map {
  aspect-ratio: 16 / 9;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  margin: 10px 0 12px;
}
.amenities-grid.amenities-grid--box { grid-template-columns: 1fr; gap: 8px; }

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 20px;
}
.amenities-grid__item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--color-text);
}
.amenities-grid__item .tick {
  color: var(--color-success); font-weight: 800;
}

.bedroom-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bedroom-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.bedroom-card__title { font-weight: 800; color: var(--color-navy); margin-bottom: 6px; font-size: 14.5px; }
.bedroom-card__meta { font-size: 13px; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 10px; }

.calendar__nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.calendar__nav strong { font-size: 15px; color: var(--color-navy); }
.calendar__nav a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendar__dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--color-text-muted); padding-bottom: 6px; }
.calendar__day {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px;
  gap: 2px;
}
.calendar__day.is-empty { border-color: transparent; }
.calendar__day.is-available { background: #eafbf3; border-color: #bfe9d3; }
.calendar__day-price { font-size: 10.5px; font-weight: 800; line-height: 1; white-space: nowrap; }
.calendar__day.is-available .calendar__day-price { color: var(--color-success); }
.calendar__day.is-pending .calendar__day-price { color: #8a6d00; }
.calendar__price-note { font-size: 12px; color: var(--color-text-muted); margin: 10px 0 0; }
[data-villa-calendar] { transition: opacity .15s ease; }
.calendar__day.is-unknown { background: #fff; color: var(--color-text-muted); }
/* Phase 7 กลุ่ม C ข้อ 17 (Change Order 3 ต.ค. 2569 - แก้ไขเพิ่มเติมหลังเจอภาพ
   mockup จริง PF-573): ปฏิทินมี 5 สถานะที่โชว์จริง ตรงกับภาพ "ว่าง(เขียว)/
   ติดจอง(แดง)/รอยืนยัน(เหลือง)/ไม่ว่าง(เทา)" บวก "โปรโมชั่น" (🔥) ที่ Superadmin
   ปักหมุดเองจากหน้าจัดการวิลล่า */
.calendar__day.is-unavailable { background: var(--color-bg); color: var(--color-text-muted); }
.calendar__day.is-booked { background: #fdecea; border-color: #f3b4ab; color: #9e3a2e; }
.calendar__day.is-pending { background: #fff9db; border-color: #ffe066; color: #8a6d00; }
.calendar__day.is-promotion { background: #fff7e6; border-color: #ffd77a; }
.calendar__day.is-promotion .calendar__day-price { color: #b4790a; font-weight: 800; font-size: 11px; }
.calendar__day-flame { font-size: 11px; line-height: 1; }
.calendar__legend { display: flex; gap: 18px; margin-top: 14px; font-size: 12.5px; color: var(--color-text-muted); flex-wrap: wrap; }
.calendar__legend span { display: flex; align-items: center; gap: 6px; }
.calendar__legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Phase 7 กลุ่ม C ข้อ 17 - ปฏิทิน/โปรโมชั่นฝั่งแอดมิน (admin/villa_edit.php)
   ใช้ grid เดียวกับฝั่งลูกค้าแต่ปุ่มปักหมุดเล็กกว่า เพิ่ม hover ให้รู้ว่ากดได้ */
.admin-calendar__day { position: relative; }
.admin-calendar__day form { position: absolute; inset: 0; margin: 0; }
.admin-calendar__day button {
  width: 100%; height: 100%; border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 12px; border-radius: var(--radius-sm); font-family: var(--font-body);
}
.admin-calendar__day button:hover { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* Change Order 3 ต.ค. 2569 (Phase 7 กลุ่ม C - แก้ไขเพิ่มเติม): ราคาในปฏิทิน
   แอดมินเปลี่ยนจากรูปแบบย่อ "7.9k" เป็นจำนวนราคาปกติ "฿7,900" ซึ่งยาวขึ้น
   เลยลดฟอนต์ลงเล็กน้อยไม่ให้ล้นช่องปฏิทิน */
.admin-calendar__day .calendar__day-price { font-size: 9px; white-space: nowrap; }
.admin-calendar__legend-hint { font-size: 12.5px; color: var(--color-text-muted); margin-top: 10px; }

/* Phase 7 กลุ่ม C ข้อ 15 (Change Order 3 ต.ค. 2569) - รื้อหน้า villa.php:
   วิดีโอเฉพาะวิลล่า / สถานที่ใกล้เคียง */
.villa-video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.villa-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nearby-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nearby-list__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: 14.5px; color: var(--color-text);
}
.nearby-list__distance { color: var(--color-text-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }

.booking-box {
  position: sticky;
  top: 115px; /* Round 21: header is 99px tall */
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.booking-box__price { font-size: 13px; color: var(--color-text-muted); margin-bottom: 2px; }
.booking-box__price strong { font-size: 26px; color: var(--color-accent-dark); display: block; }
/* Change Order 3 ต.ค. 2569 (Phase 7 กลุ่ม C - แก้ไขเพิ่มเติม): ราคาเริ่มต้น
   ต่อคน (วงเล็บต่อจาก "/ คืน") และประโยคเตือนราคาอาจต่างกันในแต่ละวัน */
.booking-box__price-per-person { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.booking-box__price-hint { font-size: 11.5px; color: var(--color-text-muted); font-style: italic; margin: 2px 0 0; }
.booking-box__form { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.booking-box__form label { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); display: block; margin-bottom: 4px; }
.booking-box__form input {
  width: 100%; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 9px 12px; font-family: inherit; font-size: 14px;
}
.booking-box__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.booking-box__note { font-size: 12.5px; color: var(--color-text-muted); margin-top: 12px; text-align: center; }

/* ============ Gallery lightbox (villa.php - view all photos) ============ */
.lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10, 15, 24, .94);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.lightbox__img {
  max-width: 88vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 6px;
}
.lightbox__close {
  position: absolute; top: 18px; right: 22px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
}
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255,255,255,.24); }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
}
@media (max-width: 640px) {
  .lightbox__nav { width: 40px; height: 40px; font-size: 20px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* ============ Booking form + confirmation (booking.php / booking_confirm.php) ============ */
.booking-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: flex-start;
  padding: 28px 0 64px;
}
.form-card {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  min-width: 0;
}
.form-card h2 { font-size: 18px; font-weight: 800; color: var(--color-navy); margin: 0 0 18px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.form-group input {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--color-text);
}
.form-group input:focus { outline: none; border-color: var(--color-primary); }
.form-group__hint { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-error {
  background: #fdeceb;
  border: 1px solid #f5c2be;
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.summary-card {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  position: sticky;
  top: 115px; /* Round 21: header is 99px tall */
}
.summary-card__villa { display: flex; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.summary-card__villa img { width: 76px; height: 76px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: #dbe6ee; }
.summary-card__villa-name { font-weight: 800; color: var(--color-navy); font-size: 14.5px; margin-bottom: 4px; }
.summary-card__villa-loc { font-size: 12.5px; color: var(--color-text-muted); }
.summary-card__row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; padding: 8px 0;
}
.summary-card__row span:first-child { color: var(--color-text-muted); }
.summary-card__row span:last-child { font-weight: 700; color: var(--color-text); }
.summary-card__total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--color-border);
  font-weight: 800; color: var(--color-navy);
}
.summary-card__total strong { color: var(--color-accent-dark); font-size: 19px; }
.summary-card__note { font-size: 12px; color: var(--color-text-muted); margin-top: 12px; line-height: 1.6; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700;
  background: #fff4e0; color: var(--color-warning);
}

.confirm-hero {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 20px 24px;
}
.confirm-hero__icon {
  width: 76px; height: 76px; border-radius: 50%;
  background: #eafbf3; color: var(--color-success);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; margin: 0 auto 18px;
}
.confirm-hero h1 { font-size: 24px; font-weight: 800; color: var(--color-navy); margin: 0 0 8px; }
.confirm-hero p { color: var(--color-text-muted); margin: 0; }
.confirm-ref {
  display: inline-block; margin-top: 14px;
  background: var(--color-primary-light); color: var(--color-primary-dark);
  font-weight: 800; letter-spacing: .5px;
  padding: 8px 18px; border-radius: var(--radius-pill); font-size: 14px;
}

.confirm-card {
  max-width: 640px;
  margin: 0 auto 40px;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
}
.confirm-card__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 14.5px;
}
.confirm-card__row:last-child { border-bottom: none; }
.confirm-card__row span:first-child { color: var(--color-text-muted); }
.confirm-card__row span:last-child { font-weight: 700; color: var(--color-text); text-align: right; }
.confirm-contact {
  max-width: 640px;
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .booking-layout { grid-template-columns: 1fr; padding-top: 20px; }
  .summary-card { position: static; }
  .form-row { grid-template-columns: 1fr; }
  .confirm-contact { grid-template-columns: 1fr; }
}

/* ============ Floating quick-contact button ============ */
.fab-contact {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(255,138,30,.45);
  font-size: 26px;
  z-index: 200;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ปุ่มแชทกับเรา แบบเลือกช่องทาง (LINE / Facebook Messenger) - Change Order 19 ก.ย. 2569 */
.fab-contact-wrap {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 200;
}
.fab-contact-wrap .fab-contact {
  position: static;
}
.fab-contact-menu {
  position: absolute;
  right: 0;
  bottom: 72px;
  min-width: 220px;
  background: var(--color-white, #fff);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.fab-contact-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fab-contact-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-navy, #1b2a41);
  text-decoration: none;
  white-space: nowrap;
}
.fab-contact-menu__item:hover {
  background: var(--color-bg, #f4f6f9);
}

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .search-widget__grid { grid-template-columns: repeat(2, 1fr); }
  .villa-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .search-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .villa-detail__layout { grid-template-columns: 1fr; }
  .booking-box { position: static; }
  .amenities-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-box-grid { grid-template-columns: repeat(2, 1fr); }
  /* Phase 7 กลุ่ม C ข้อ 16 (Change Order 3 ต.ค. 2569) */
  .how-to-book__grid { grid-template-columns: repeat(2, 1fr); }
  .search-bar-dark__grid { grid-template-columns: repeat(2, 1fr); }
  .villa-grid--list .villa-card__media { width: 180px; }
}
/* จอแท็บเล็ต (เช่น iPad แนวตั้ง ~768-834px) แคบเกินกว่าจะแสดง logo + เมนู 3
   ลิงก์ + ปุ่มลัด 3 ปุ่มในแถวเดียวพร้อมกันได้ (ของเดิม breakpoint นี้เคยอยู่ที่
   640px เท่านั้น ทำให้ช่วง 641-900px header ตัดคำ/ล้น) เลยยุบเป็นเมนู ☰ ตั้งแต่
   900px ลงมา ให้ครอบคลุมแท็บเล็ตแนวตั้งด้วย ไม่ใช่แค่มือถือ */
@media (max-width: 900px) {
  /* Change Order 3 ต.ค. 2569 (Phase 7 กลุ่ม D) - .site-header__quicklinks
     ของเดิมถูกแทนด้วยไอคอนค้นหา/หัวใจ + ปุ่มแดง "ติดต่อเรา" แล้ว (ดู
     header.php) ยุบเหลือแค่ปุ่ม ☰ บนจอแคบเหมือนเดิม ส่วนไอคอนค้นหา/หัวใจ
     ยังโชว์ไว้คู่กับปุ่มแฮมเบอร์เกอร์ได้ (ไม่กินที่มาก) */
  .site-header__nav, .site-header__contact-pill { display: none; }
  .site-header__burger { display: flex; }
}
@media (max-width: 640px) {
  .hero__title { font-size: 28px; }
  .search-widget { margin-top: -70px; padding: 16px; }
  .search-widget__grid { grid-template-columns: 1fr; }
  .search-widget__actions { grid-template-columns: 1fr; }
  .villa-grid { grid-template-columns: 1fr; }
  .results-toolbar { flex-direction: column; align-items: flex-start; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__side { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
  .amenities-grid { grid-template-columns: 1fr; }
  .bedroom-list { grid-template-columns: 1fr; }
  .detail-box-grid { grid-template-columns: 1fr; }
  .villa-detail__title-row { flex-wrap: wrap; }
  .booking-box__row { grid-template-columns: 1fr; }
  .sender-bar__inner { flex-wrap: wrap; }
  .sender-bar__avatar { width: 72px; height: 72px; }
  .sender-bar a.btn { margin-left: 0; width: 100%; }
  .fab-contact-menu { min-width: 200px; right: -6px; }
  .why-choose-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  /* Phase 7 กลุ่ม C ข้อ 16 (Change Order 3 ต.ค. 2569) */
  .how-to-book__grid { grid-template-columns: 1fr; }
  .search-bar-dark { margin-top: -40px; padding: 18px; }
  .search-bar-dark__grid { grid-template-columns: 1fr; }
  .search-bar-dark__actions { grid-template-columns: 1fr; }
  .results-toolbar__actions { width: 100%; justify-content: space-between; }
  .villa-grid--list .villa-card { flex-direction: column; }
  .villa-grid--list .villa-card__media { width: 100%; aspect-ratio: 4 / 3; }
}

/* ============ Phase 7 กลุ่ม B (Change Order 3 ต.ค. 2569) ============ */
/* ทำไมเลือกเรา (ข้อ 11) - หน้าแรก + หน้าบทความ */
.why-choose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why-choose-grid__item {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.why-choose-grid__icon { font-size: 34px; margin-bottom: 10px; }
/* Change Order 3 ต.ค. 2569 (รอบ Feedback 6) - รูปภาพแทนไอคอน emoji เมื่อมี image_url */
.why-choose-grid__image { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; margin: 0 auto 10px; display: block; }
.why-choose-grid__item h3 { font-size: 16px; font-weight: 800; margin: 0 0 8px; color: var(--color-navy); }
.why-choose-grid__item p { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .why-choose-grid { grid-template-columns: repeat(2, 1fr); } }

/* รีวิวลูกค้า (ข้อ 10) - หน้าแรก */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 22px 20px;
  box-shadow: var(--shadow-card);
}
.review-card__rating { font-size: 14px; margin-bottom: 8px; }
.review-card__text { font-size: 14px; line-height: 1.7; color: var(--color-navy); margin: 0 0 12px; font-style: italic; }
.review-card__images { display: flex; gap: 8px; margin-bottom: 12px; }
.review-card__images img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.review-card__author { font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
@media (max-width: 900px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }

/* ชมคลิปเพิ่มเติม (ข้อ 12) - หน้าแรก 3 คอลัมน์ 1 แถว (ปกแนวนอน 16:9) */
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.video-grid__item {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9; /* Change Order 4 ต.ค. 2569: ปกคลิปแนวนอน */
  background: var(--color-navy);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.video-grid__item img { width: 100%; height: 100%; object-fit: cover; }
.video-grid__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; }
.video-grid__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--color-navy);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  transition: transform .2s ease;
}
.video-grid__item:hover .video-grid__play { transform: translate(-50%, -50%) scale(1.1); }
.video-grid__title {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color: #fff; font-size: 12.5px; font-weight: 600;
}
@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ Change Order 4 ต.ค. 2569 (รอบ Feedback 8): section หน้าแรก ============ */
.home-cards-section {
  background: linear-gradient(180deg, #fff 0%, var(--color-bg, #f5f8fb) 120px, var(--color-bg, #f5f8fb) 100%);
  padding: 72px 0 80px;
}
.home-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; margin-bottom: 64px; }
.home-duo--single { grid-template-columns: 1fr; }
.home-block { min-width: 0; }

/* หัวข้อ section: ชิดซ้าย + แถบแดงสั้นใต้หัวข้อ */
.home-block__head { margin-bottom: 26px; }
.home-block__head h2 {
  position: relative;
  font-size: 28px; font-weight: 800; line-height: 1.25; letter-spacing: -.2px;
  margin: 0; padding-bottom: 14px;
  color: var(--color-navy);
}
.home-block__head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 44px; height: 4px; border-radius: 4px; background: var(--color-accent);
}
.home-block__head h2 .accent { color: var(--color-accent); }

/* ---------- ทำไมเลือกเรา: การ์ดแนวนอน ไอคอนซ้าย ข้อความขวา ---------- */
.why-choose-grid--in-card { grid-template-columns: 1fr; gap: 14px; }
.home-block .why-choose-grid__item {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 18px; align-items: center;
  text-align: left; padding: 18px 22px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(20,20,20,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-block .why-choose-grid__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: rgba(224,32,32,.25); }
.home-block .why-choose-grid__icon,
.home-block .why-choose-grid__image {
  grid-row: 1 / span 2; width: 60px; height: 60px; margin: 0; border-radius: 16px;
}
.home-block .why-choose-grid__icon {
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  background: linear-gradient(135deg, #fff1f1, #ffe0e0);
}
.home-block .why-choose-grid__image { object-fit: cover; }
.home-block .why-choose-grid__item h3 { grid-column: 2; font-size: 16.5px; margin: 0 0 3px; align-self: end; }
.home-block .why-choose-grid__item p { grid-column: 2; font-size: 13.5px; line-height: 1.6; align-self: start; }
/* กรณีไม่มีไอคอน/รูป ให้ข้อความใช้พื้นที่เต็ม */
.home-block .why-choose-grid__item > h3:first-child { grid-column: 1 / -1; }
.home-block .why-choose-grid__item > h3:first-child + p { grid-column: 1 / -1; }

/* ---------- เสียงจากลูกค้า: การ์ดรีวิว 2 คอลัมน์ ---------- */
.review-grid--in-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home-block .review-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 20px 18px; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(20,20,20,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-block .review-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.home-block .review-card::before {
  content: "\201C"; position: absolute; top: 4px; right: 16px;
  font: 800 64px/1 Georgia, serif; color: rgba(224,32,32,.12); pointer-events: none;
}
.home-block .review-card__rating { font-size: 13px; letter-spacing: 1px; margin-bottom: 10px; }
.home-block .review-card__text {
  font-style: normal; font-size: 14px; line-height: 1.7; margin: 0 0 14px; color: var(--color-text);
  white-space: pre-line; overflow-wrap: anywhere; /* Round 44: full text */
}
.home-block .review-card__images { margin-bottom: 14px; }
.home-block .review-card__author {
  display: flex; align-items: center; gap: 10px; margin-top: auto;
  padding-top: 14px; border-top: 1px solid var(--color-border);
}
.review-card__avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-navy); color: #fff; font-size: 14px; font-weight: 700;
}
.review-card__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.review-card__who strong { font-size: 13.5px; color: var(--color-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-card__who small { font-size: 12px; color: var(--color-accent); font-weight: 700; letter-spacing: .3px; }

/* ---------- Review slider: หน้าละ 2 x 2 การ์ด เลื่อนซ้าย-ขวา ---------- */
.review-slider__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: 6px;
  scrollbar-width: none; -ms-overflow-style: none;
  margin: -6px; padding: 6px; /* กัน hover/เงาของการ์ดโดนตัดขอบ */
  transition: height .3s ease;
}
.review-slider__viewport::-webkit-scrollbar { display: none; }
.review-slider__track { display: flex; align-items: flex-start; gap: 12px; } /* gap กันขอบการ์ดหน้าถัดไปโผล่ในช่อง padding */
.review-slider__page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.review-slider__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.review-slider__btn {
  width: 42px; height: 42px; border-radius: 50%; padding: 0 0 3px;
  border: 1px solid var(--color-border); background: #fff; color: var(--color-navy);
  font-size: 26px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20,20,20,.06);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.review-slider__btn:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: scale(1.06); }
.review-slider__btn:disabled { opacity: .35; cursor: not-allowed; }
.review-slider__btn:focus-visible, .review-slider__dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.review-slider__dots { display: flex; align-items: center; gap: 8px; }
.review-slider__dot {
  width: 9px; height: 9px; border-radius: 999px; padding: 0; border: 0; cursor: pointer;
  background: #c9d1da; transition: width .25s ease, background .25s ease;
}
.review-slider__dot.is-active { width: 26px; background: var(--color-accent); }

/* ---------- ชมคลิปเพิ่มเติม: 3 คอลัมน์ 1 แถว ปก 16:9 ---------- */
.home-block--wide .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.home-block--wide .video-grid__item {
  border-radius: var(--radius-lg); background: #111;
  box-shadow: 0 6px 18px rgba(20,20,20,.14);
  transition: transform .25s ease, box-shadow .25s ease;
}
.home-block--wide .video-grid__item:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20,20,20,.22); }
.home-block--wide .video-grid__item img { transition: transform .5s ease; }
.home-block--wide .video-grid__item:hover img { transform: scale(1.06); }
.home-block--wide .video-grid__item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 55%);
}
.home-block--wide .video-grid__play {
  z-index: 2; width: 58px; height: 58px; font-size: 19px; padding-left: 3px;
  background: rgba(255,255,255,.92); color: var(--color-accent);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.home-block--wide .video-grid__title { z-index: 2; background: none; padding: 14px 18px; font-size: 14.5px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.video-grid__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  backdrop-filter: blur(4px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .home-duo { gap: 40px; }
}
@media (max-width: 900px) {
  .home-cards-section { padding: 52px 0 60px; }
  .home-duo { grid-template-columns: 1fr; gap: 44px; margin-bottom: 48px; }
  .review-grid--in-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-duo--single .why-choose-grid--in-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-block--wide .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .home-block__head h2 { font-size: 24px; }
  .review-slider__page { grid-template-columns: 1fr !important; }
  .review-grid--in-card,
  .home-duo--single .why-choose-grid--in-card,
  .home-block--wide .video-grid { grid-template-columns: 1fr; }
  .home-block .why-choose-grid__item { padding: 16px; column-gap: 14px; grid-template-columns: 52px minmax(0, 1fr); }
  .home-block .why-choose-grid__icon, .home-block .why-choose-grid__image { width: 52px; height: 52px; font-size: 24px; }
}
@media (min-width: 901px) {
  .home-duo--single .why-choose-grid--in-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Round 9 (4 ต.ค. 2569): หัวใจ wishlist สถานะ "ยังไม่ชอบ" ใช้ตัวอักษร ♡ (รองรับทุกเครื่อง) แทน emoji 🤍
   ที่เป็น emoji รุ่นใหม่ (ปี 2019) บางเครื่องแสดงเป็นกล่อง ▯ - ใส่สีแดงแบรนด์ให้เห็นชัด (❤️ ไม่ได้รับผลจากสี) */
.villa-card__fav { color: var(--color-accent); line-height: 1; font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif; }

/* Round 10 (7 ต.ค. 2569): ไฮไลต์ช่วงวันที่ที่ลูกค้าเลือกมาจากหน้าค้นหา + ข้อความสรุปผลช่วงที่เลือก */
.calendar__day.is-selected { box-shadow: inset 0 0 0 2px var(--color-accent); }
.calendar__selected-note { font-size: 13px; font-weight: 700; margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); }
.calendar__selected-note.is-ok { background: #eafbf3; color: #17724f; }
.calendar__selected-note.is-bad { background: #fdecea; color: #9e3a2e; }


/* ===== Round 10: โลโก้กำหนดเอง + Pop-up หน้าแรก ===== */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/caveat-700.woff2") format("woff2"); }
/* Round 20-25: custom logo. Round 25: logo now sits fully INSIDE the header bar (no overhang): header 99px, logo 87px tall,
   vertically centred, still clearly larger than the handwritten tagline (22px, two lines ~46px). */
.site-header__logo.has-custom-logo { position: relative; z-index: 2; height: 99px; gap: 16px; align-items: center; }
.site-header__logo-img--custom {
  height: 87px; width: auto; max-width: none; object-fit: contain; flex: none;
  align-self: center; margin: 0; position: relative; z-index: 3;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, .22));
}
.site-header__script-tagline {
  /* Round 21: real handwriting (Caveat 700, self-hosted - OFL), red */
  font-family: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-weight: 700;
  font-size: 25px; line-height: 1.02; color: #d7191f; display: flex; flex-direction: column; letter-spacing: .01em;
  transform: rotate(-2deg); transform-origin: left center; padding-top: 2px;
}
.site-header__script-tagline > span { display: block; white-space: nowrap; }
@media (max-width: 640px) {
  .site-header__logo.has-custom-logo { gap: 8px; }
  .site-header__logo-img--custom { height: 80px; max-width: calc(100vw - 200px); }
  .site-header__script-tagline { font-size: 17px; }
}
/* Round 41: the handwritten tagline now shows on EVERY phone (it used to be hidden under 400px) and is ~14% bigger than before
   (22/15/12.5px -> 25/17/14.5px), i.e. larger than the menu text (15-16px). */
@media (max-width: 420px) { .site-header__script-tagline { font-size: 16px; } .site-header__logo.has-custom-logo { gap: 6px; } }
@media (max-width: 340px) { .site-header__script-tagline { font-size: 14.5px; } }
@media (max-width: 360px) {
  /* very small phones: shrink logo + icon buttons so the tagline AND the menu button both fit without horizontal scroll */
  .site-header__logo-img--custom { height: 64px; max-width: 64px; }
  .site-header__logo.has-custom-logo { gap: 6px; }
  .site-header__actions { gap: 2px; }
  .site-header__icon-btn { width: 34px; height: 34px; }
  .site-header__burger { width: 38px; height: 38px; }
  .site-header__inner.container { padding-left: 14px; padding-right: 14px; }
}
.ppv-popup { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ppv-popup[hidden] { display: none; }
.ppv-popup__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .6); }
.ppv-popup__box { position: relative; background: #fff; border-radius: 16px; max-width: 460px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); animation: ppvPopIn .28s ease-out; }
@keyframes ppvPopIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.ppv-popup__img { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 16px 16px 0 0; }
.ppv-popup__body { padding: 20px 22px 22px; }
.ppv-popup__title { margin: 0 0 8px; font-size: 22px; line-height: 1.3; }
.ppv-popup__text { margin: 0 0 16px; color: var(--color-text-muted, #475569); line-height: 1.6; }
.ppv-popup__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ppv-popup__close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.ppv-popup__close:hover { background: rgba(0, 0, 0, .75); }
html.ppv-popup-open { overflow: hidden; }


/* ============ Round 23 (10 ต.ค. 2569): ปฏิทินห้องว่าง หน้าตาตามเว็บต้นทาง (หน้าบ้าน + หลังบ้านใช้ชุดเดียวกัน) ============
   ช่องวันธรรมดา = ขาว ขอบฟ้าอ่อน เลขวันที่ตัวหนาสีน้ำเงิน ราคาตัวเอนเล็ก + 👤จำนวนคน
   ติดจองแล้ว = แดงเข้ม + กากบาท / ติดจองแต่ยังไม่โอน = เขียวเข้ม / วันหยุด = เหลือง / โปรไฟลุก = 🔥 บนช่อง
   ผ่านไปแล้ว/ไม่มีข้อมูล = จาง - กรอบแดงหนา = ช่วงที่ลูกค้าเลือกเข้าพัก (นับเป็นคืน) */
.calendar__grid { gap: 7px; }
.calendar__day {
  aspect-ratio: 5 / 6; padding: 4px 2px; gap: 1px; background: #fff; border: 1.5px solid #c9d7ee; color: #0e4a8c;
  border-radius: 10px; overflow: hidden;
}
.calendar__day-num { font-size: 17px; font-weight: 800; line-height: 1.1; }
.calendar__day-price { font-size: 10.5px; font-weight: 500; font-style: italic; line-height: 1.1; color: #4b5563; white-space: nowrap; }
.calendar__day-cap { font-size: 10px; line-height: 1.1; color: #6b7280; white-space: nowrap; }
.calendar__day-flame { position: absolute; top: 2px; right: 3px; font-size: 13px; line-height: 1; }
.calendar__day.is-base { background: #fff; border-color: #c9d7ee; color: #0e4a8c; }
.calendar__day.is-holiday { background: #fff6cc; border-color: #f2b705; color: #6b4a00; }
.calendar__day.is-holiday::after { content: ""; position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: #f2b705; }
.calendar__day.is-promotion { background: #fff1e0; border-color: #ff8a1f; color: #b3270f; }
.calendar__day.is-promotion .calendar__day-price { color: #c2410c; font-style: normal; font-weight: 800; }
.calendar__day.is-held { background: #0b7a4b; border-color: #075f3a; color: #fff; }
.calendar__day.is-booked {
  background-color: #9b1c1f; border-color: #7a1013; color: #fff;
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1.2px), rgba(255,255,255,.45) calc(50% - 1.2px), rgba(255,255,255,.45) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
    linear-gradient(to bottom right, transparent calc(50% - 1.2px), rgba(255,255,255,.45) calc(50% - 1.2px), rgba(255,255,255,.45) calc(50% + 1.2px), transparent calc(50% + 1.2px));
}
.calendar__day.is-booked .calendar__day-num, .calendar__day.is-held .calendar__day-num { font-size: 18px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.calendar__day.is-booked .calendar__day-price, .calendar__day.is-held .calendar__day-price,
.calendar__day.is-booked .calendar__day-cap, .calendar__day.is-held .calendar__day-cap { display: none; }
.calendar__day.is-blocked { background: #c9ced6; border-color: #9aa2ad; color: #4b5563; }
.calendar__day.is-unknown { background: #fff; border-color: #e1e6ee; color: #9aa3b0; }
.calendar__day.is-past { background: #f4f6f9; border-color: #e6eaf0; color: #b3bac5; }
.calendar__day.is-past .calendar__day-price, .calendar__day.is-past .calendar__day-cap { color: #c3c9d3; }
/* legend = pill chips like the source site */
.calendar__legend { gap: 8px 10px; }
.calendar__legend span { border: 1.5px solid #d3dcec; border-radius: 999px; padding: 5px 13px; background: #fff; font-size: 12.5px; font-weight: 600; color: #1f3a5f; gap: 8px; }
.calendar__legend i { width: 16px; height: 16px; border-radius: 50%; }
.calendar__legend i.legend-held { background: #0b7a4b; }
.calendar__legend i.legend-holiday { background: #f2b705; border: 0; }
.calendar__legend i.legend-booked { background: #9b1c1f; border: 0; position: relative; }
.calendar__legend i.legend-booked::before, .calendar__legend i.legend-booked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.calendar__legend i.legend-booked::after { transform: translate(-50%, -50%) rotate(-45deg); }
.calendar__legend i.legend-base { background: #fff; border: 1.5px solid #c9d7ee; }
.calendar__legend i.legend-stay { background: #fff; border: 2px solid #e11d1d; border-radius: 4px; }
.calendar__legend .legend-flame { font-size: 15px; line-height: 1; }

/* กรอบแดงช่วงเข้าพัก: ทุกคืนที่พักมีกรอบแดง, ช่องเช็คเอาท์เป็นกรอบแดงประ */
.calendar__day { position: relative; }
.calendar__day.is-selected { box-shadow: none; border: 3px solid #e11d1d; }
/* Round 18: วันเช็คเอาท์ไม่นับเป็นคืน - ไม่ใส่กรอบแดง (กันอ่านว่า 2 คืน) ใช้แค่ป้าย "ออก" */
.calendar__day.is-selected-out { box-shadow: none; }
.calendar__day.is-selected-out .calendar__day-tag { background: #fff; border: 1px solid #e11d1d; border-radius: 4px; padding: 1px 3px; top: 3px; right: 3px; }
.calendar__legend i.legend-blocked { background: #c9ced6; border: 1px solid #9aa2ad; }
.calendar__legend em.legend-out { font-style: normal; font-size: 9px; font-weight: 800; color: #e11d1d; background: #fff; border: 1px solid #e11d1d; border-radius: 4px; padding: 1px 3px; }
.stay-summary__note { font-size: 12px; color: #1d4e89; background: #eaf2fb; border-radius: 8px; padding: 6px 9px; margin-top: 6px; }
.calendar__day-tag {
  position: absolute; top: 1px; right: 3px;
  font-size: 9px; line-height: 1; font-weight: 800; color: #e11d1d;
}

/* กล่องสรุปจำนวนคืน + ราคา ใน booking box (อัปเดตทันทีเมื่อเปลี่ยนวัน) */
.stay-summary { margin: 4px 0 12px; }
.stay-summary__hint { font-size: 12.5px; color: var(--color-text-muted); margin: 0; }
.stay-summary__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; padding-bottom: 6px; }
.stay-summary__head strong { font-size: 16px; color: var(--color-navy); }
.stay-summary__list { list-style: none; margin: 0; padding: 8px 10px; background: var(--color-bg); border-radius: var(--radius-sm); max-height: 170px; overflow: auto; font-size: 12.5px; }
.stay-summary__list li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.stay-summary__list li em { font-style: normal; font-size: 11px; color: #8a6200; background: #fff1b8; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.stay-summary__list li.is-bad b { color: #c93232; }
.stay-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: #fdecea; border: 1px solid #f3b4ab; }
.stay-summary__total strong { font-size: 20px; color: var(--color-accent); }
.stay-summary__warn { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: #fdecea; color: #9e3a2e; font-size: 12.5px; font-weight: 700; }


/* Round 16 (8 ต.ค. 2569): รูป Hero สว่าง 100% ไม่มีฟิล์มคลุม (เดิม opacity .35 บนพื้นน้ำเงินเข้ม)
   ใช้เงาตัวอักษรช่วยให้ข้อความอ่านง่ายบนรูปสว่างแทน; ปิดข้อความ = โชว์รูปล้วน ๆ (ความสูงคงที่) */
.hero__bg { opacity: 1; }
.hero__content, .hero__corner-cursive { text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 2px 14px rgba(0,0,0,.45); }
.hero__eyebrow { background: rgba(0,0,0,.38); text-shadow: none; }
.hero__badges span { background: rgba(0,0,0,.38); border-color: rgba(255,255,255,.4); text-shadow: none; }
.hero--no-text { min-height: 360px; padding-top: 0; }
@media (max-width: 700px) { .hero--no-text { min-height: 240px; } }


/* ============ Round 21: "Why choose us" + customer reviews - two cards (reviews slide 4 at a time, 2 x 2) ============ */
.trust-banner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: 24px; margin-bottom: 40px; align-items: stretch;
}
.trust-banner--single { grid-template-columns: minmax(0, 1fr); }
.tb-card {
  position: relative; min-width: 0; padding: 26px; border-radius: 26px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  border: 1px solid rgba(15, 23, 42, .07);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px -12px rgba(15, 23, 42, .18);
}
.tb-card::before { /* thin brand accent line on top */
  content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #d7191f, #f5a623);
}
.tb-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex: none; }
.tb-head__badge {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; color: #fff; background: linear-gradient(145deg, #e0262c, #a80f16);
  box-shadow: 0 6px 14px -4px rgba(215, 25, 31, .55);
}
.tb-head__text { min-width: 0; flex: 1 1 auto; }
.tb-head h2 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--color-navy); }
.tb-head__stars { color: #f5a623; font-size: 17px; letter-spacing: 1px; white-space: nowrap; margin-left: 4px; }
.tb-head p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--color-text-muted); }
.tb-nav { flex: none; display: flex; gap: 8px; }
.tb-nav__btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .14); background: #fff; color: #111;
  font-size: 24px; line-height: 1; padding: 0 0 3px; cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.tb-nav__btn:hover { background: #111; color: #fff; transform: translateY(-1px); }

/* LEFT card: one image fills the remaining height (absolute img -> card height always follows the reviews card) */
.tb-image { position: relative; flex: 1 1 auto; min-height: 220px; border-radius: 20px; overflow: hidden; background: #eaf3fb; box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .45); }
.tb-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-image::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); pointer-events: none; }
.trust-banner--single .tb-card--why .tb-image { flex: none; aspect-ratio: 16 / 6; }

/* RIGHT card: slides of 4 reviews (2 x 2) */
.tb-viewport { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; flex: 1 1 auto; margin: 0 -6px; }
.tb-viewport::-webkit-scrollbar { display: none; }
.tb-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; padding: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tb-review {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 16px;
  background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: 18px; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tb-review:hover { transform: translateY(-2px); border-color: rgba(215, 25, 31, .25); box-shadow: 0 12px 24px -14px rgba(15, 23, 42, .35); }
.tb-review__quote { position: absolute; right: 14px; top: -6px; font-family: Georgia, "Times New Roman", serif; font-size: 78px; line-height: 1; color: rgba(215, 25, 31, .10); pointer-events: none; }
.tb-review__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-review__avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #fdf1f1; color: #d7191f; font-size: 21px; font-weight: 800; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f5c04a;
}
.tb-review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb-review__who { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.tb-review__who strong { font-size: 14.5px; line-height: 1.25; color: var(--color-navy); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-review__who small { font-size: 11.5px; font-weight: 700; color: #b3121a; background: #fdecec; border-radius: 999px; padding: 1px 9px; }
.tb-review__rating { color: #f5a623; letter-spacing: 2px; font-size: 14px; line-height: 1; }
.tb-review__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #374151; white-space: pre-line; overflow-wrap: anywhere; } /* Round 44: full review text, no clamp */
.tb-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; flex: none; }
.tb-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: #cfd4db; cursor: pointer; transition: width .2s, background .2s; }
.tb-dot.is-active { width: 24px; background: #d7191f; }

@media (max-width: 1000px) { .trust-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
@media (max-width: 900px) {
  .trust-banner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tb-image { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .trust-banner--single .tb-card--why .tb-image { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .tb-card { padding: 20px 16px; border-radius: 22px; }
  .tb-card::before { left: 18px; right: 18px; }
  .tb-head { gap: 11px; margin-bottom: 14px; }
  .tb-head__badge { width: 40px; height: 40px; font-size: 20px; }
  .tb-head h2 { font-size: 18.5px; }
  .tb-head__stars { display: block; margin: 2px 0 0; font-size: 15px; }
  .tb-nav__btn { width: 34px; height: 34px; }
  .tb-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 10px; }
  .tb-review { padding: 13px 15px; }
}

/* ============ Round 20: bedroom details grouped by floor (like the source site) ============ */
.bedroom-floor { margin-bottom: 12px; }
.bedroom-floor__title { margin: 0 0 6px; font-size: 15.5px; font-weight: 800; color: var(--color-navy); }
.bedroom-floor__title small { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); margin-left: 4px; }
.bedroom-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bedroom-rooms li { display: block; padding: 8px 12px; background: var(--color-bg); border-radius: 10px; font-size: 14px; line-height: 1.6; }
.bedroom-rooms__name { display: inline; font-weight: 700; color: var(--color-navy); margin-right: 6px; }
.bedroom-rooms li span { display: inline; } /* Round 41 (was Round 38: one block per line): room name + beds + en-suite flow as ONE line of text */
.bedroom-summary { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border); }

/* ============ Round 23 (10 ต.ค. 2569) ============ */
/* A1) เมนูมือถือ/แท็บเล็ตที่เปิดอยู่ ต้องอยู่เหนือโลโก้ที่ยื่นลงมา (เดิมวงกลมทับคำว่า "หน้าแรก") */
.site-header__mobile-nav { position: relative; z-index: 10; box-shadow: 0 14px 24px -16px rgba(15, 23, 42, .35); }
.site-header__mobile-nav a { padding: 15px 22px; font-size: 16px; }

/* A2/3) Hero = รูปล้วนแสดงเต็มภาพ (ไม่มีข้อความทับ) และกรอบค้นหาอยู่ใต้รูป ไม่ทับรูป */
.hero--full { padding: 0; background: #0b2a4a; overflow: hidden; position: relative; }
/* Round 33: ป้ายจุดเด่นซ้อนขอบล่างของรูป Hero (กรณีปิดข้อความบนรูปแต่เปิดป้าย) */
.hero__badges--overlay { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; padding: 0 16px; z-index: 2; color: #fff; }
.hero__badges--overlay span { background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.45); color: #fff; text-shadow: none; backdrop-filter: blur(2px); }
@media (max-width: 640px) { .hero__badges--overlay { bottom: 8px; gap: 6px; } .hero__badges--overlay span { font-size: 11px; padding: 5px 9px; } }
.hero__full-img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; }
.search-bar-dark { margin-top: 28px; }
@media (max-width: 640px) { .search-bar-dark { margin-top: 18px; } }

/* C) หน้าวิลล่า: รายละเอียดเรียงเป็นแถวลงมา (1 คอลัมน์) + ฟอนต์ใหญ่ขึ้น */
.detail-box-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.detail-box { padding: 22px 26px; border-radius: 18px; box-shadow: 0 8px 22px -16px rgba(15, 23, 42, .35); }
.detail-box h2 { font-size: 19px; margin-bottom: 14px; }
.detail-box__body, .detail-box__list { font-size: 16px; line-height: 1.8; }
.detail-box__highlight { font-size: 16px; }
.detail-box__subhead { font-size: 15.5px; }
.amenities-grid__item { font-size: 16px; }
.nearby-list__item { font-size: 16px; }
.nearby-list__distance { font-size: 14px; }
.bedroom-floor__title { font-size: 17px; }
.bedroom-rooms li { font-size: 16px; }
.villa-detail__quote { font-size: 17px; font-style: normal; color: var(--color-text); line-height: 1.7; }
.villa-detail__meta { font-size: 15.5px; }
.stat-pills__item { font-size: 15.5px; }
.detail-section h2 { font-size: 21px; }
.calendar__nav strong { font-size: 18px; }
.calendar__price-note { font-size: 13px; }
.booking-box__form label { font-size: 14px; }
@media (max-width: 640px) {
  .detail-box { padding: 18px 16px; }
  .detail-box__body, .detail-box__list, .bedroom-rooms li { font-size: 15.5px; }
  .calendar__day { aspect-ratio: 5 / 6.4; padding: 3px 1px; border-radius: 8px; }
  .calendar__day-num { font-size: 15.5px; }
  .calendar__day-price { font-size: 9.5px; }
  .calendar__day-cap { font-size: 9px; }
  .calendar__grid { gap: 5px; }
}

/* C6) รีวิวจากผู้เข้าพัก (แทนที่ตำแหน่งวิดีโอเดิม) */
.villa-reviews__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.villa-reviews .tb-review__text { font-size: 15px; }
@media (max-width: 760px) { .villa-reviews__grid { grid-template-columns: minmax(0, 1fr); } }

/* C8) "ทำไมต้องเลือกเรา" ล่างสุดของหน้าวิลล่า: การ์ดกว้างเต็ม + รูปแถบกว้าง */
.tb-card--wide .tb-image { flex: none; min-height: 0; aspect-ratio: 16 / 6; }
@media (max-width: 900px) { .tb-card--wide .tb-image { aspect-ratio: 16 / 9; } }

/* Round 23b: calendar tag/legend polish */
.calendar__day.is-selected .calendar__day-tag { top: 5px; right: 6px; font-size: 10px; }
.calendar__legend span .legend-flame { border: 0; padding: 0; background: none; border-radius: 0; display: inline; }
@media (max-width: 520px) {
  .calendar__day.is-selected .calendar__day-tag { top: 4px; right: 5px; font-size: 8px; }
  .calendar__day.is-selected-out .calendar__day-tag { font-size: 8px; padding: 0 2px; top: 3px; right: 2px; }
  .calendar__day.is-selected .calendar__day-num, .calendar__day.is-selected-out .calendar__day-num { margin-top: 6px; }
}


/* ===== Round 24: popup without a card - floating image, text and button over the dimmed page ===== */
.ppv-popup__backdrop { background: rgba(10, 16, 30, .72); }
.ppv-popup__box { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; width: auto; max-width: min(560px, calc(100vw - 32px)); max-height: none; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ppv-popup__img { width: auto; max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.ppv-popup__body { padding: 0; text-align: center; color: #fff; max-width: 100%; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.ppv-popup__title { margin: 0 0 8px; color: #fff; font-size: 26px; font-weight: 800; line-height: 1.3; }
.ppv-popup__text { margin: 0 0 16px; color: rgba(255, 255, 255, .92); font-size: 17px; line-height: 1.65; }
.ppv-popup__cta { display: inline-block; padding: 13px 34px; border-radius: 999px; background: linear-gradient(135deg, #e11d1d, #b91c1c); color: #fff; font-weight: 800; font-size: 17px; text-decoration: none; text-shadow: none; box-shadow: 0 10px 26px rgba(225, 29, 29, .45); transition: transform .15s ease, box-shadow .15s ease; }
.ppv-popup__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(225, 29, 29, .55); color: #fff; }
.ppv-popup__close { top: -12px; right: -8px; width: 38px; height: 38px; background: #fff; color: #111; font-size: 26px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.ppv-popup__close:hover { background: #f1f1f1; }
@media (max-width: 520px) {
  .ppv-popup__title { font-size: 22px; }
  .ppv-popup__text { font-size: 16px; }
  .ppv-popup__close { top: -10px; right: -4px; }
}
.ppv-popup__box--text .ppv-popup__img { max-height: calc(100vh - 330px); min-height: 160px; }
.ppv-popup { overflow-y: auto; }

/* Round 33: guests accepted per day are emphasised in every calendar */
.calendar__day-cap { font-weight: 700; color: #1f2937; }
.calendar__day.is-promotion .calendar__day-cap { color: #9a3412; }
.stay-summary__cap { font-weight: 700; color: #374151; margin-left: 4px; white-space: nowrap; }

/* ============ Round 33: "Why choose us" = one full-width row, reviews = their own row (4 per row, square photo on top) ============ */
.trust-banner { display: flex; flex-direction: column; gap: 26px; margin-bottom: 40px; }
.tb-card--row { padding: 28px 30px; }
.tb-card--row .tb-head { margin-bottom: 20px; }
.tb-why-rich { max-width: 100%; }
.tb-why-rich img { max-width: 100%; height: auto; }
.tb-why-legacy { display: grid; grid-template-columns: minmax(220px, 420px) minmax(0, 1fr); gap: 28px; align-items: center; }
.tb-why-legacy--solo { grid-template-columns: minmax(0, 420px); }
.tb-why-legacy__img { position: relative; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: #eaf3fb; box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .45); }
.tb-why-legacy__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-why-legacy__text { font-size: 17px; line-height: 1.85; color: #374151; }
.tb-card--reviews .tb-viewport { margin: 0 -8px; }
.tb-card--reviews .tb-page { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 16px; padding: 8px; align-content: start; } /* Round 41: 3 columns x 1 row */
.tb-rcard { position: relative; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: 18px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tb-rcard:hover { transform: translateY(-2px); border-color: rgba(215, 25, 31, .25); box-shadow: 0 14px 26px -14px rgba(15, 23, 42, .38); }
.tb-rcard__photo { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(145deg, #fdecec, #fff4d9); overflow: hidden; }
.tb-rcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-rcard__initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 72px; font-weight: 800; color: #d7191f; opacity: .85; }
.tb-rcard__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1 1 auto; }
.tb-rcard__text { margin: 0; font-size: 14px; line-height: 1.65; color: #374151; white-space: pre-line; overflow-wrap: anywhere; } /* Round 44: full review text, no clamp */
.tb-rcard__who { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 4px; }
.tb-rcard__who strong { font-size: 14.5px; color: var(--color-navy); max-width: 100%; overflow-wrap: anywhere; }
.tb-rcard__who small { font-size: 11.5px; font-weight: 700; color: #b3121a; background: #fdecec; border-radius: 999px; padding: 1px 9px; }
@media (max-width: 900px) {
  .tb-card--row { padding: 22px 18px; }
  .tb-why-legacy, .tb-why-legacy--solo { grid-template-columns: minmax(0, 1fr); }
  .tb-card--reviews .tb-page { gap: 10px; }
}
@media (max-width: 700px) {
  /* Round 41: phones show the 3 reviews of a slide as 1 column x 3 rows (photo is 16:10 so the three cards stay reasonably short) */
  .tb-card--reviews .tb-page { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tb-card--reviews .tb-rcard__photo { aspect-ratio: 16 / 10; }
  .tb-rcard__initial { font-size: 54px; }
  .tb-rcard__body { padding: 10px 12px 12px; }
  .tb-rcard__text { font-size: 13px; }
}

/* ============ Round 34: online booking path (booking.php -> booking_quote.php -> booking_pay.php) ============ */
.pay-page { padding: 8px 0 64px; }
.pay-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 22px; padding: 0; }
.pay-steps__item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); position: relative; }
.pay-steps__item::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--color-border); z-index: 0; }
.pay-steps__item:first-child::before { display: none; }
.pay-steps__num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--color-border); color: var(--color-text-muted); font-size: 13px; position: relative; z-index: 1; }
.pay-steps__item.is-current { color: var(--color-navy); }
.pay-steps__item.is-current .pay-steps__num { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.pay-steps__item.is-done { color: var(--color-navy); }
.pay-steps__item.is-done .pay-steps__num { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.pay-steps__item.is-done::before, .pay-steps__item.is-current::before { background: var(--color-navy); }
.pay-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: flex-start; }
.pay-card { background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; min-width: 0; }
.pay-card--cta { position: sticky; top: 115px; }
.pay-card--center { max-width: 640px; margin: 0 auto; text-align: center; }
.pay-card--center h1 { font-size: 22px; }
.pay-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pay-card h1 { font-size: 20px; font-weight: 800; color: var(--color-navy); margin: 0; }
.pay-chip { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 800; font-size: 12.5px; padding: 6px 12px; border-radius: var(--radius-pill); }
.pay-h2 { font-size: 15px; font-weight: 800; color: var(--color-navy); margin: 22px 0 10px; }
.pay-villa { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); margin-bottom: 8px; }
.pay-villa img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--radius-sm); background: #dbe6ee; flex-shrink: 0; }
.pay-villa__name { font-weight: 800; color: var(--color-navy); font-size: 16px; margin-bottom: 4px; }
.pay-villa__loc { font-size: 13px; color: var(--color-text-muted); }
.pay-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.pay-dl > div { display: flex; flex-direction: column; padding: 9px 0; border-bottom: 1px dashed var(--color-border); min-width: 0; }
.pay-dl dt { font-size: 12px; color: var(--color-text-muted); }
.pay-dl dd { margin: 2px 0 0; font-weight: 700; color: var(--color-text); font-size: 14.5px; overflow-wrap: anywhere; }
.pay-dl--stack { grid-template-columns: 1fr; }
.pay-dl--card { text-align: left; margin: 18px 0; }
.pay-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pay-table td { padding: 8px 6px; border-bottom: 1px solid var(--color-border); }
.pay-table td.num { text-align: right; font-weight: 700; white-space: nowrap; }
.pay-table em { font-style: normal; font-size: 11px; font-weight: 800; background: #fff4e0; color: #b45309; padding: 1px 7px; border-radius: var(--radius-pill); margin-left: 4px; }
.pay-details summary { cursor: pointer; font-weight: 700; color: var(--color-navy); padding: 8px 0; }
.pay-sum { margin-top: 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.pay-sum__row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 14px; font-size: 14px; border-bottom: 1px solid var(--color-border); }
.pay-sum__row:last-child { border-bottom: none; }
.pay-sum__row.is-due { background: #fff1f0; color: var(--color-accent-dark); font-weight: 800; }
.pay-sum__row b { white-space: nowrap; }
.pay-edit { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--color-text-muted); text-decoration: underline; }
.pay-due { background: #141414; color: #fff; border-radius: var(--radius-md); padding: 18px; text-align: center; margin-bottom: 14px; }
.pay-due span { display: block; font-size: 13px; opacity: .8; }
.pay-due strong { display: block; font-size: 32px; color: #ff5a4f; margin: 4px 0; letter-spacing: .3px; }
.pay-due small { opacity: .75; }
.pay-due--inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; text-align: left; }
.pay-due--inline span { flex-basis: 100%; }
.pay-due--inline strong { margin: 0; font-size: 30px; }
.pay-note { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.7; margin: 10px 0 0; }
.pay-check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.6; color: var(--color-text); margin: 14px 0; cursor: pointer; }
.pay-check input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-accent); }
.pay-alert { border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 18px; font-size: 14px; line-height: 1.7; border: 1px solid; }
.pay-alert.is-ok { background: #eafbf3; border-color: #bfe9d4; color: #146c43; }
.pay-alert.is-warn { background: #fff8e6; border-color: #f3dd9b; color: #8a5a00; }
.pay-alert.is-bad { background: #fdeceb; border-color: #f5c2be; color: #a02620; }
.pay-methods { display: grid; gap: 20px; margin-top: 8px; }
.pay-methods.has-both { grid-template-columns: 1fr 1fr; }
.pay-method { border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 8px 18px 18px; min-width: 0; }
.pay-qr { width: 100%; max-width: 280px; margin: 0 auto; }
.pay-qr svg { width: 100%; height: auto; display: block; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.pay-copy { border: 1.5px solid var(--color-border); background: #fff; border-radius: var(--radius-pill); font-family: inherit; font-size: 12px; font-weight: 700; padding: 4px 12px; cursor: pointer; color: var(--color-navy); }
.pay-copy:hover { border-color: var(--color-navy); }
.pay-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-acc b { font-size: 18px; letter-spacing: .5px; }
.pay-hr { border: none; border-top: 1px solid var(--color-border); margin: 18px 0; }
.pay-preview { margin-top: 10px; }
.pay-preview img { max-width: 220px; max-height: 280px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); display: block; }
.pay-big { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; margin: 0 auto 16px; }
.pay-big--ok { background: #eafbf3; color: var(--color-success); }
.pay-big--wait { background: #fff4e0; color: var(--color-warning); }
.pay-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.form-group input[type="file"], .form-group input[type="datetime-local"] { padding: 9px 12px; }
@media (max-width: 860px) {
  .pay-grid { grid-template-columns: 1fr; }
  .pay-card--cta { position: static; }
  .pay-methods.has-both { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pay-card { padding: 18px 16px; }
  .pay-dl { grid-template-columns: 1fr; }
  .pay-steps__label { font-size: 11px; }
  .pay-due strong { font-size: 28px; }
}


/* ============ Round 41: floating chat button (operator avatar + glow + "แอดมินพร้อมตอบ") and back-to-top button ============ */
.fab-chat {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  display: flex; align-items: center; gap: 0;
  height: 52px; padding: 0 20px 0 0;
  background: #fff; color: #111; text-decoration: none;
  border: 2px solid var(--color-accent); border-radius: 999px;
  box-shadow: 0 10px 26px rgba(224, 32, 32, .28), 0 2px 8px rgba(0, 0, 0, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab-chat:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(224, 32, 32, .38), 0 3px 10px rgba(0, 0, 0, .15); }
.fab-chat:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.fab-chat__avatar { position: relative; flex: none; width: 74px; height: 74px; margin: -12px 4px -12px -16px; display: block; }
.fab-chat__svg { position: relative; z-index: 2; width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .28)); }
.fab-chat__glow {
  position: absolute; z-index: 1; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 79, .65) 0%, rgba(255, 90, 79, .28) 48%, rgba(255, 90, 79, 0) 72%);
  animation: fabChatGlow 1.9s ease-in-out infinite;
}
.fab-chat__online {
  position: absolute; z-index: 3; left: 7px; bottom: 12px; width: 14px; height: 14px; border-radius: 50%;
  background: #22c55e; border: 2.5px solid #fff; box-sizing: border-box;
  animation: fabChatOnline 1.6s ease-in-out infinite;
}
.fab-chat__spark {
  position: absolute; z-index: 4; width: 12px; height: 12px; pointer-events: none; opacity: 0;
  background: #ffd23f; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: fabChatSpark 2.2s ease-in-out infinite;
}
.fab-chat__spark--1 { top: -4px; right: 2px; animation-delay: 0s; }
.fab-chat__spark--2 { top: 14px; left: -6px; width: 9px; height: 9px; animation-delay: .7s; }
.fab-chat__spark--3 { bottom: 6px; right: -7px; width: 10px; height: 10px; animation-delay: 1.4s; }
.fab-chat__label { font-weight: 800; font-size: 15px; line-height: 1.1; white-space: nowrap; color: #111; }
@keyframes fabChatGlow { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes fabChatOnline { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } }
@keyframes fabChatSpark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 45% { opacity: 1; transform: scale(1.1) rotate(20deg); } 70% { opacity: 0; transform: scale(.5) rotate(40deg); } }
@media (prefers-reduced-motion: reduce) {
  .fab-chat__glow, .fab-chat__online, .fab-chat__spark { animation: none; }
  .fab-chat__glow { opacity: .8; }
  .fab-chat__spark { opacity: 0; }
}
@media (max-width: 480px) {
  .fab-chat { right: 12px; bottom: 12px; height: 48px; padding-right: 16px; }
  .fab-chat__avatar { width: 68px; height: 68px; margin: -10px 3px -10px -14px; }
  .fab-chat__label { font-size: 14px; }
}
.back-to-top {
  position: fixed; right: 20px; bottom: 98px; z-index: 199;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #111; color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
  opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.back-to-top[hidden] { display: none; }
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--color-accent); }
.back-to-top:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 480px) { .back-to-top { right: 16px; bottom: 88px; width: 42px; height: 42px; } }
/* Round 81: on phones / tablets the floating chat button covered the last footer line (links such as "สำหรับผู้ดูแลระบบ") when the page was
   scrolled to the very bottom. Lift both floating buttons a little AND leave room under the footer, so the last line can always scroll
   clear of the button. Desktop is unchanged. */
.site-footer__bottom { padding-bottom: 88px; } /* desktop: button is 16px from the bottom + 52px tall */
@media (max-width: 1024px) {
  .fab-chat { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .back-to-top { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .site-footer__bottom { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
  .back-to-top { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* Round 41: clickable popup picture (opens the popup's link) */
.ppv-popup__img-link { display: block; cursor: pointer; text-align: center; border-radius: 14px; }
.ppv-popup__img-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Round 46: instant extra-guest message under the guests field (villa.php box + booking.php form) */
.stay-extra:empty { display: none; }
.stay-extra { margin-top: 8px; font-size: 13.5px; }
.stay-extra__row, .stay-extra__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm); background: #fdecea; border: 1px solid #f3b4ab; color: var(--color-accent-dark);
}
.stay-extra__row strong { white-space: nowrap; }
.stay-extra__total { margin-top: 6px; background: #fff; font-weight: 700; color: var(--color-navy); }
.stay-extra__total strong { font-size: 17px; color: var(--color-accent); white-space: nowrap; }
.stay-extra__warn { padding: 8px 12px; border-radius: var(--radius-sm); background: #fff4e5; border: 1px solid #f5c37a; color: #8a4b00; font-weight: 600; }


/* ============ Round 58: all photos page (villa.php) - grouped photos, tap = large view ============ */
.allphotos { display: none; position: fixed; inset: 0; z-index: 900; background: var(--color-white, #fff); overflow: hidden; flex-direction: column; }
.allphotos[style*="block"] { display: flex !important; }
.allphotos__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border, #e3e8ee); background: #fff; }
.allphotos__close { border: 0; background: #eef2f6; width: 38px; height: 38px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.allphotos__tabs { display: flex; gap: 8px; overflow-x: auto; padding: 10px max(16px, calc((100% - 1200px) / 2)); border-bottom: 1px solid var(--color-border, #e3e8ee); background: #fff; white-space: nowrap; }
.allphotos__tabs a { padding: 6px 12px; border: 1px solid var(--color-border, #e3e8ee); border-radius: 999px; font-size: 13px; text-decoration: none; color: inherit; flex: 0 0 auto; }
.allphotos__body { flex: 1; overflow-y: auto; padding: 8px max(16px, calc((100% - 1200px) / 2)) 40px; position: relative; }
.allphotos__group h3 { margin: 22px 0 10px; font-size: 18px; }
.allphotos__group h3 span { font-weight: 400; font-size: 14px; color: var(--color-text-muted, #6b7685); }
.allphotos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.allphotos__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: #dbe6ee; }
@media (max-width: 1000px) { .allphotos__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .allphotos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .allphotos__grid { gap: 5px; } .allphotos__body { padding: 4px 8px 40px; } }