/* ปัวตรึงใจ๋รีสอร์ท — สไตล์หน้าเว็บ */
:root {
  --wine: #800D28;
  --wine-2: #9B1634;
  --wine-d: #5C0819;
  --gold: #F3CB63;
  --gold-2: #FFE59A;
  --gold-d: #D4A43A;
  --cream: #FFFCF7;
  --cream-2: #FBF4E8;
  --ink: #303038;
  --muted: #6B6A74;
  --line: #EEE4D6;
  --ok: #2F8F5B;
  --low: #D98B1E;
  --full: #B8B2AA;
  --r-lg: 32px;
  --r: 24px;
  --r-sm: 16px;
  --shadow: 0 10px 30px -12px rgba(80, 20, 30, .18), 0 2px 6px rgba(80, 20, 30, .05);
  --shadow-lg: 0 24px 60px -20px rgba(80, 20, 30, .32);
  --f-head: "Prompt", "Noto Sans Thai", system-ui, sans-serif;
  --f-body: "Noto Sans Thai", "Prompt", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --wrap: 1200px;
  --gut: 24px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.65 var(--f-body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--wine); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold-d); outline-offset: 3px; border-radius: 8px; }
.i { width: 1.15em; height: 1.15em; flex: none; }
.flip { display: inline-flex; transform: scaleX(-1); }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--wine); color: #fff; padding: 8px 16px; border-radius: 99px; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
main section[id], footer[id] { scroll-margin-top: 92px; }

/* ปุ่ม */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 0;
  font: 600 16px/1 var(--f-head); text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-wine { background: linear-gradient(180deg, var(--wine-2), var(--wine)); color: #fff; box-shadow: 0 8px 18px -8px rgba(128, 13, 40, .6); }
.btn-wine:hover { box-shadow: 0 12px 24px -10px rgba(128, 13, 40, .7); }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, #EBB948); color: #4A1A10; box-shadow: 0 8px 18px -10px rgba(170, 120, 20, .8), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); }
.icon-btn:hover { background: var(--cream-2); }
.linkish { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ส่วนหัว */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 252, 247, .92); backdrop-filter: saturate(1.4) blur(10px); }
.header-in { display: flex; align-items: center; gap: 24px; height: 84px; max-width: 1240px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo { height: 68px; width: auto; }
.nav { display: flex; gap: 30px; margin-inline: auto; }
.nav a { color: var(--ink); text-decoration: none; font: 500 16px var(--f-head); padding: 8px 0; position: relative; opacity: .85; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--wine); opacity: 1; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; border-radius: 2px; background: var(--wine); }
.nav-cta-m { display: none !important; }
.header-cta { flex: none; min-height: 50px; padding: 0 30px; }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--cream-2); color: var(--wine); place-items: center; }
.menu-btn .i { width: 24px; height: 24px; }

/* ภาพหลัก */
.hero { position: relative; max-width: 1440px; padding-inline: 12px; }
.hero-media { position: relative; border-radius: var(--r-lg); overflow: hidden; height: clamp(500px, 50vw, 660px); background: #e9dccb; box-shadow: var(--shadow); }
.slides, .slide { position: absolute; inset: 0; margin: 0; }
.slide { opacity: 0; transition: opacity .6s ease; }
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.pos-room { object-position: 62% 60%; }
.pos-suite { object-position: 50% 60%; }
.pos-field { object-position: 50% 55%; }
.pos-r2 { object-position: 66% 62%; }
.pos-r3 { object-position: 62% 64%; }
.pos-ext { object-position: 58% 60%; }
.slide img { transform: scale(1.03); transition: transform 6.5s ease-out; }
.slide.is-active img { transform: scale(1); }
.hero-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); z-index: 2; }
.hero-progress span { display: block; height: 100%; width: 0; background: var(--gold); }
.hero-badge-row { position: absolute; right: 22px; bottom: 74px; display: flex; align-items: center; gap: 14px; }
.hero-badge { background: rgba(40, 36, 40, .62); color: #fff; padding: 8px 18px; border-radius: 99px; font: 500 14px var(--f-head); backdrop-filter: blur(6px); }
.dots { display: flex; gap: 2px; }
.dot { width: 30px; height: 30px; border: 0; background: transparent; display: grid; place-items: center; padding: 0; }
.dot::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: background .2s; }
.dot.is-active::before { background: #fff; }
.price-card { position: absolute; left: 38px; top: 40px; width: 316px; padding: 26px 28px 24px; border-radius: 30px; color: #fff;
  background: radial-gradient(120% 80% at 0% 0%, #9E1A38 0%, var(--wine) 45%, #6D0A21 100%); box-shadow: var(--shadow-lg); }
.pc-name { margin: 0 0 6px; font: 500 18px var(--f-head); opacity: .95; }
.pc-title { margin: 0; font: 700 50px/1.12 var(--f-head); letter-spacing: -.5px; }
.pc-title span { display: block; }
.pc-title span + span { font-size: 38px; }
.pc-from { margin: 16px 0 0; font: 600 21px var(--f-head); }
.pc-price { margin: 0; display: flex; flex-direction: column; }
.pc-num { font: 800 104px/.92 var(--f-head); letter-spacing: -3px;
  background: linear-gradient(180deg, #FFF0B8 0%, var(--gold) 45%, #D79B2B 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(70, 8, 20, .35)); }
.pc-unit { font: 600 27px/1.3 var(--f-head); }
.pc-sell { margin: 14px 0 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); font: 600 19px var(--f-head); }
.pc-btn { width: 100%; min-height: 54px; font-size: 21px; }

/* แถบค้นหา */
.searchbar { position: relative; z-index: 5; margin-top: -54px; max-width: 1260px; }
.sb-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: 0; background: #fff; border-radius: 28px; padding: 12px 12px 12px 18px; box-shadow: var(--shadow-lg); }
.sb-field { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 18px; min-height: 64px; border-right: 1px solid var(--line); cursor: pointer; }
.sb-guests { border-right: 0; }
.sb-ic { color: var(--wine); display: grid; }
.sb-ic .i { width: 28px; height: 28px; }
.sb-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
.sb-lbl { font: 500 14px var(--f-head); color: var(--muted); }
.sb-disp { font: 500 16px var(--f-head); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-disp.empty { color: #8C8A93; }
/* ช่องวันที่จริงซ้อนทับทั้งช่อง (โปร่งใส) เพื่อเปิดตัวเลือกวันที่ของระบบ แต่แสดงวันที่แบบไทย */
.sb-date { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer; font-size: 16px; }
.sb-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sb-field:focus-within { box-shadow: inset 0 0 0 2px var(--gold-d); border-radius: 18px; }
.guests-btn { border: 0; background: transparent; padding: 0; }
.sb-val { font: 500 16px var(--f-head); }
.sb-caret { color: var(--ink); }
.sb-btn { min-height: 58px; padding: 0 34px; font-size: 18px; margin-left: 8px; }
.sb-err { margin: 10px 8px 0; min-height: 1.2em; color: var(--wine); font-weight: 600; font-size: 15px; }
.sb-err:empty { display: none; }
.sb-err.show { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 10px 18px 10px 12px; border-radius: 999px; background: #FDECEC; color: #B42318; border: 1.5px solid #F4B4B4; font: 600 16px var(--f-head); box-shadow: 0 8px 20px -12px rgba(180, 35, 24, .45); animation: err-pop .25s ease-out; }
.sb-err.show::before { content: "!"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #D92D20; color: #fff; font: 800 16px/1 var(--f-head); }
@keyframes err-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.sb-field.need { box-shadow: inset 0 0 0 2px #D92D20 !important; border-radius: 18px; background: #FFF5F5; }
.sb-field.need .sb-lbl::after { content: " *"; color: #D92D20; }
.sb-field.need .sb-disp.empty { color: #B42318; }
.sb-field.need .sb-ic { color: #D92D20; }
.sb-field.shake { animation: sb-shake .42s ease; }
@keyframes sb-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .sb-field.shake, .sb-err.show { animation: none; } }
.guests-pop { position: absolute; top: calc(100% + 10px); right: 0; width: min(320px, 86vw); background: #fff; border-radius: 22px; padding: 14px 18px 18px; box-shadow: var(--shadow-lg); z-index: 20; display: grid; gap: 6px; }
.stepper { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-weight: 500; }
.st-ctl { display: flex; align-items: center; gap: 10px; }
.st-ctl output { min-width: 24px; text-align: center; font: 600 17px var(--f-head); }
.st-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--cream); font-size: 20px; line-height: 1; color: var(--wine); }
.st-btn:hover { border-color: var(--wine); }


/* จุดเด่นห้องพัก 3 ช่อง (ใต้แถบค้นหา) */
.features { list-style: none; margin: 18px auto 0; padding-top: 6px; padding-bottom: 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; }
.features li { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 20px; }
.features li + li { border-left: 1px solid var(--line); }
.ft-ic { width: 52px; height: 52px; color: var(--wine); flex: none; }
.features .ft-t { margin: 0; color: var(--wine); font: 700 20px/1.3 var(--f-head); }
.features p { margin: 2px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; white-space: nowrap; }
@media (max-width: 1000px) {
  .features li { padding: 10px 12px; gap: 12px; }
  .ft-ic { width: 42px; height: 42px; }
  .features .ft-t { font-size: 18px; }
  .features p { font-size: 14px; }
}
@media (max-width: 760px) {
  .features { grid-template-columns: 1fr; margin-top: 14px; padding: 4px 16px; }
  .features li { justify-content: flex-start; padding: 12px 6px; gap: 14px; }
  .features li + li { border-left: 0; border-top: 1px solid var(--line); }
  .ft-ic { width: 44px; height: 44px; }
  .features .ft-t { font-size: 18px; }
  .features p { white-space: normal; font-size: 14.5px; }
  .features .d-br { display: none; }
}

/* หัวข้อ */
.eyebrow { margin: 0 0 6px; color: var(--gold-d); font: 600 13px var(--f-head); letter-spacing: .28em; display: flex; align-items: center; gap: 14px; }
.eyebrow::after { content: ""; width: 46px; height: 2px; background: var(--gold); border-radius: 2px; }
.h2 { margin: 0; color: var(--wine); font: 700 clamp(30px, 4.2vw, 46px)/1.18 var(--f-head); letter-spacing: -.3px; }
.lead { margin: 8px 0 0; color: var(--muted); font-size: 17px; }

/* ห้องพัก */
.rooms { padding-top: 52px; }
.room-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.room-card { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.room-media { border: 0; padding: 0; background: #eee; display: block; aspect-ratio: 16 / 8.2; overflow: hidden; }
.room-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.room-card:hover .room-media img { transform: scale(1.03); }
.room-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px 24px; }
.room-body h3 { margin: 0; color: var(--wine); font: 700 24px/1.3 var(--f-head); }
.room-body p { margin: 4px 0 0; color: var(--muted); }
.arrow-btn { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; color: var(--ink);
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 6px 14px -6px rgba(180, 130, 20, .8); transition: transform .15s; }
.arrow-btn:hover { transform: translateX(3px); }
.arrow-btn .i { width: 22px; height: 22px; }

/* ห้องว่าง & ราคา */
.booking { padding-top: 72px; }
.booking-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rt-select { display: grid; gap: 4px; font: 500 14px var(--f-head); color: var(--muted); }
.rt-select select { min-height: 48px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; padding: 0 40px 0 18px; font: 500 16px var(--f-head); color: var(--ink); }
.booking-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.booking-grid > * { min-width: 0; }
/* แถบวันที่เหนือปฏิทิน */
.stay-bar { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 8px 10px; box-shadow: 0 6px 18px -14px rgba(80, 20, 30, .25); }
.stay-bar + .booking-grid { margin-top: 18px; }
.sbar-f { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 18px; min-height: 64px; cursor: pointer; border-radius: 16px; }
.sbar-f:hover { background: var(--cream); }
.sbar-f:focus-within { box-shadow: inset 0 0 0 2px var(--gold-d); }
.sbar-f .sb-disp { font-size: 17px; font-weight: 600; }
.sbar-arrow { color: var(--ink); display: grid; place-items: center; padding: 0 6px; }
.sbar-arrow .i { width: 22px; height: 22px; }
.sbar-g { border-left: 1px solid var(--line); border-radius: 0 16px 16px 0; margin-left: 8px; }
.sbar-g .sb-val { font-size: 17px; font-weight: 600; }
.sbar-g .guests-pop { right: 0; }
.cal-card, .sum-card { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); }
.cal-card { padding: 24px 26px 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-title { margin: 0; color: var(--wine); font: 700 24px var(--f-head); }
.cal-ctrl { display: flex; align-items: center; gap: 8px; }
.month-pick { position: relative; display: inline-flex; align-items: center; }
.month-pick select { appearance: none; -webkit-appearance: none; min-height: 46px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; padding: 0 42px 0 20px; font: 600 16px var(--f-head); color: var(--ink); cursor: pointer; }
.month-pick select:hover { border-color: var(--gold-d); }
.month-pick .i { position: absolute; right: 16px; pointer-events: none; color: var(--ink); }
.round-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--ink); }
.round-btn:hover:not([disabled]) { border-color: var(--wine); color: var(--wine); }
.round-btn[disabled] { opacity: .35; cursor: default; }
.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14.5px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lg { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.lg-ok { background: var(--ok); } .lg-low { background: var(--low); } .lg-full { background: var(--full); }
.cal-loading { text-align: center; color: var(--muted); padding: 80px 0; }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 8px; column-gap: 0; }
.cal-wd { text-align: center; font: 500 15px var(--f-head); color: var(--muted); padding-bottom: 6px; }
/* ช่องวัน: ปุ่มมีระยะขอบซ้าย-ขวา 4px ส่วนพื้นหลังอยู่ที่ .cin เพื่อให้แถบช่วงวันที่ต่อกันได้ */
.cal-d, .cal-empty { position: relative; border: 0; background: transparent; padding: 0 4px; min-width: 0; min-height: 92px; display: flex; }
.cal-d .cin, .cal-empty .cin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 16px; background: var(--cream); transition: background .15s, box-shadow .15s; }
.cal-empty .cin { background: #FBF8F3; }
.cal-d .n { font: 600 19px/1 var(--f-head); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
.cal-d .cdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.cal-d.low .cdot { background: var(--low); } .cal-d.full .cdot { background: var(--full); }
.cal-d .p { font: 500 14px/1.1 var(--f-head); color: var(--muted); white-space: nowrap; }
.cal-d .a { font-size: 12px; line-height: 1.1; font-weight: 600; white-space: nowrap; }
.cal-d.ok .a { color: var(--ok); } .cal-d.low .a { color: var(--low); }
.cal-d.full .cin { background: #F4F1EC; }
.cal-d.full { color: #A9A39B; cursor: not-allowed; }
.cal-d.full .a { color: #A9A39B; }
.cal-d.past { color: #C9C3BB; cursor: default; }
.cal-d.past .cin { background: transparent; }
.cal-d:not(.past):not(.full):not(.in-range):not(.sel):hover .cin { box-shadow: inset 0 0 0 2px var(--gold); }
.cal-d.co-ok { cursor: pointer; } /* วันเช็กเอาต์ที่เลือกได้แม้ห้องเต็ม */
.cal-d.co-ok.full:hover .cin { box-shadow: inset 0 0 0 2px var(--gold); }
.cal-d.today:not(.sel) .n { box-shadow: inset 0 0 0 1.5px var(--gold-d); }
/* ช่วงวันที่ที่เลือก */
.cal-d.in-range { background: #FBE4E8; }
.cal-d.in-range .cin { background: transparent; border-radius: 0; }
.cal-d.r-start { background: linear-gradient(to right, transparent calc(100% - 4px), #FBE4E8 calc(100% - 4px)); }
.cal-d.r-start .cin { background: #FBE4E8; border-radius: 16px 0 0 16px; }
.cal-d.r-end { background: linear-gradient(to left, transparent calc(100% - 4px), #FBE4E8 calc(100% - 4px)); }
.cal-d.r-end .cin { background: #FBE4E8; border-radius: 0 16px 16px 0; }
.cal-d.sel:not(.r-start):not(.r-end) .cin { background: #FBE4E8; }
.cal-d.sel .n { background: var(--wine); color: #fff; box-shadow: 0 4px 10px -4px rgba(128, 13, 40, .6); }
.cal-d.sel .p, .cal-d.in-range .p { color: var(--ink); }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.clear-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--wine); font: 600 15px var(--f-head); min-height: 40px; padding: 0 6px; border-radius: 10px; }
.clear-btn:hover { background: #FBE4E8; }
.sum-card { padding: 26px; position: sticky; top: 100px; }
.sum-card h3 { margin: 0 0 12px; color: var(--wine); font: 700 22px var(--f-head); }
.sum-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.sum-dates div { background: var(--cream); border-radius: 14px; padding: 10px 14px; }
.sum-dates small { display: block; color: var(--muted); font-size: 14px; }
.sum-dates b { font: 600 18px var(--f-head); }
.sum-rows { list-style: none; margin: 0; padding: 0; font-size: 16px; }
.sum-rows li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); gap: 12px; }
.sum-rows .sr-d { display: flex; flex-direction: column; font-weight: 500; }
.sum-rows .sr-d small { color: var(--muted); font-size: 14px; font-weight: 400; }
.sum-rows b { font: 600 17px var(--f-head); white-space: nowrap; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 4px; font: 600 16px var(--f-head); }
.sum-total b { font: 800 30px var(--f-head); color: var(--wine); }
.sum-avail { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; font: 600 15px var(--f-head); margin: 4px 0 8px; }
.sum-avail.ok { background: #E6F4EC; color: var(--ok); } .sum-avail.no { background: #F8E7EA; color: var(--wine); }
.sum-card .btn { width: 100%; margin-top: 10px; }
.sum-card .btn-ghost { white-space: normal; font-size: 15px; line-height: 1.3; padding: 8px 18px; }
.sum-note { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
.sum-results { display: grid; gap: 10px; margin-top: 6px; }
.res-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 12px; background: var(--cream); text-align: left; width: 100%; }
.res-item.active { border-color: var(--wine); background: #fff; }
.res-item small { display: block; color: var(--muted); }

/* บรรยากาศ */
.about { margin-top: 80px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; max-width: 1260px; }
.about-media { border: 0; padding: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9.5; box-shadow: var(--shadow); }
.about-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.about-body p { color: var(--muted); font-size: 17px; margin: 14px 0; }
.about-body .addr-line { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.about-body .addr-line .i { color: var(--wine); margin-top: 4px; }



/* รูปเปลี่ยนเองในการ์ด */
.af { position: relative; display: block; width: 100%; height: 100%; }
.af-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.af-slide.is-active { opacity: 1; }
.af-slide img { width: 100%; height: 100%; object-fit: cover; }
.room-media, .about-media { position: relative; }
.af-count { position: absolute; right: 14px; bottom: 14px; background: rgba(30, 20, 24, .62); color: #fff; font: 600 13px var(--f-head); padding: 5px 12px; border-radius: 99px; backdrop-filter: blur(6px); line-height: 1.4; }
.af-count::before { content: "▣ "; color: var(--gold); }

/* แถบภาพจริงจากรีสอร์ท (เลื่อนวนเอง) */
.photostrip { margin-top: 84px; }
.ps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ps-viewport { margin-top: 24px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ps-track { list-style: none; margin: 0; padding: 6px 0 14px; display: flex; gap: 16px; width: max-content; }
.ps-track.is-moving { animation: ps-scroll 70s linear infinite; }
.ps-viewport:hover .ps-track, .ps-viewport:focus-within .ps-track { animation-play-state: paused; }
@keyframes ps-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ps-item { display: block; border: 0; padding: 0; width: 320px; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #eee; box-shadow: var(--shadow); cursor: zoom-in; }
.ps-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ps-item:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .ps-viewport { overflow-x: auto; } .slide img { transition: none; transform: none; } }
@media (max-width: 760px) {
  .photostrip { margin-top: 60px; }
  .ps-item { width: 240px; border-radius: 18px; }
  .ps-track { gap: 12px; }
  .ps-track.is-moving { animation-duration: 55s; }
  .af-count { right: 10px; bottom: 10px; font-size: 12px; }
}

/* ที่เที่ยวใกล้รีสอร์ท */
.nearby { margin-top: 88px; }
.nearby-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.nmap { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: #DCE9C4; box-shadow: var(--shadow); aspect-ratio: 1042 / 725; }
.nmap-scroll { height: 100%; }
/* แสดงแผนที่เต็มภาพ ไม่ครอปขอบ */
.nmap-scroll img { width: 100%; height: 100%; object-fit: contain; }
.nmap-tag { position: absolute; left: 16px; top: 16px; background: rgba(255, 255, 255, .92); color: var(--wine); font: 600 13px var(--f-head); padding: 5px 12px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.nmap-zoom { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 99px;
  background: rgba(40, 20, 26, .72); color: #fff; font: 600 14.5px var(--f-head); backdrop-filter: blur(6px); }
.nmap-zoom:hover { background: var(--wine); }
.nmap-hint { display: none; }
.ndist { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 12px; display: flex; flex-direction: column; }
.ndist-title { margin: 0 0 10px; text-align: center; color: #fff; font: 600 17px var(--f-head); background: linear-gradient(180deg, var(--wine-2), var(--wine)); border-radius: 99px; padding: 10px 16px; }
.ndist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; align-content: space-between; }
.ndist-list li { display: grid; grid-template-columns: 46px 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border-radius: 14px; background: var(--cream); }
.ndist-list img { width: 46px; height: 36px; object-fit: cover; border-radius: 10px; }
.nd-no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--wine); font: 700 13px var(--f-head); }
.nd-name { font: 600 14.5px/1.25 var(--f-head); color: var(--ink); }
.nd-name .nw { white-space: nowrap; }
.nd-km { font: 700 16px var(--f-head); color: var(--wine); white-space: nowrap; }
.nroute { margin-top: 22px; display: flex; align-items: center; gap: 22px; padding: 22px 30px; border-radius: var(--r); color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #9E1A38 0%, var(--wine) 50%, #5E0A1E 100%); box-shadow: var(--shadow); }
.nroute-art { width: 110px; flex: none; }
.nroute-tx { flex: 1; min-width: 0; }
.nroute-title { margin: 0; font: 700 clamp(20px, 2.6vw, 32px)/1.3 var(--f-head); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.nroute-title .gold { color: var(--gold); }
.nroute-title .arr { color: var(--gold); font-weight: 600; }
.nroute-sub { margin: 4px 0 0; font-size: 16px; opacity: .92; }
.hwy { flex: none; display: grid; place-items: center; min-width: 84px; padding: 8px 12px; border-radius: 14px; background: #fff; color: var(--ink); border: 3px solid #fff; box-shadow: inset 0 0 0 2px var(--ink); font: 800 24px/1 var(--f-head); }
.hwy small { font: 600 11px var(--f-head); color: var(--muted); margin-bottom: 2px; }
.nfoot { margin: 10px 4px 0; font-size: 13.5px; color: var(--muted); text-align: center; }
@media (max-width: 1100px) {
  .nearby-grid { grid-template-columns: minmax(0, 1fr); }
  .nmap-scroll img { height: auto; }
  .nearby-grid { gap: 18px; }
  .ndist-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nearby { margin-top: 64px; }
  .nmap { border-radius: 22px; aspect-ratio: auto; }
  .nmap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .nmap-scroll img { width: 720px; max-width: none; height: auto; }
  .nmap-zoom { right: 10px; bottom: 10px; font-size: 13.5px; padding: 0 14px; }
  .nmap-hint { display: block; position: absolute; left: 10px; bottom: 16px; font-size: 12px; color: #fff; background: rgba(40, 20, 26, .6); padding: 4px 10px; border-radius: 99px; max-width: 52%; line-height: 1.3; }
  .ndist { padding: 16px 12px; }
  .ndist-list { grid-template-columns: 1fr; gap: 6px; }
  .ndist-list li { grid-template-columns: 52px 28px minmax(0, 1fr) auto; gap: 8px; }
  .ndist-list img { width: 52px; height: 40px; }
  .nd-name { font-size: 14.5px; }
  .nd-km { font-size: 16px; }
  .nroute { flex-wrap: wrap; padding: 18px 18px; gap: 12px; }
  .nroute-art { display: none; }
  .nroute-sub { font-size: 14.5px; }
  .hwy { min-width: 72px; font-size: 20px; }
}

/* ท้ายเว็บ */
.site-footer { margin-top: 80px; background: linear-gradient(180deg, #8A1230, var(--wine-d)); color: #FBEFE2; padding: 30px 0 16px; }
.footer-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; max-width: 1240px; align-items: start; }
.footer-in .brand-logo { height: 84px; }
.f-addr { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 14.5px; color: rgba(255, 245, 232, .85); max-width: 300px; }
.f-addr .i { color: var(--gold); width: 18px; height: 18px; margin-top: 3px; flex: none; }
.f-h { margin: 4px 0 12px; font: 700 16px var(--f-head); color: var(--gold); letter-spacing: .2px; }
.f-contact, .f-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.f-contact a { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; color: #FFF8EC; text-decoration: none; font-size: 15.5px; }
.f-contact a:hover span:last-child { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.f-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.f-ic svg { width: 32px; height: 32px; display: block; border-radius: 9px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.f-ic-mail { background: #FFF8EC; border-radius: 9px; color: var(--wine); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.f-ic-mail svg { width: 19px; height: 19px; box-shadow: none; }
.f-tel svg rect { fill: #FFF8EC; }
.f-tel svg path { fill: var(--wine); }
.f-links a, .f-links .linkish { display: inline-flex; align-items: center; min-height: 36px; color: rgba(255, 245, 232, .88); text-decoration: none; font-size: 15px; }
.f-links a::before, .f-links .linkish::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 10px; opacity: .8; }
.f-links a:hover, .f-links .linkish:hover { color: var(--gold); }
.f-bottom { display: flex; justify-content: flex-start; gap: 6px 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: rgba(255, 245, 232, .62); max-width: 1240px; }
.f-bottom a { color: rgba(255, 245, 232, .62); text-decoration: none; }
.f-bottom a:hover { color: var(--gold); }

/* ปุ่มติดต่อลอย */
.fab { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab-btn { position: relative; display: block; width: 280px; padding: 0; border: 0; background: transparent; border-radius: 999px; line-height: 0; transition: transform .2s ease, filter .2s ease;
  filter: drop-shadow(0 0 1.2px rgba(243, 203, 99, .95)) drop-shadow(0 12px 18px rgba(80, 0, 20, .38)); }
.fab-btn:hover { transform: translateY(-2px); filter: drop-shadow(0 0 1.6px rgba(243, 203, 99, 1)) drop-shadow(0 16px 22px rgba(80, 0, 20, .45)); }
.fab-btn:focus-visible { outline: 3px solid var(--gold-d); outline-offset: 4px; }
.fab-img { width: 100%; height: auto; display: block; }
/* ปุ่มติดต่อ: กระดิกเบา ๆ ทุก 4 วินาที เพื่อดึงความสนใจ (หยุดเมื่อชี้เมาส์/เปิดเมนู และปิดเมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว) */
@keyframes fab-wiggle {
  0%, 76%, 100% { transform: rotate(0) scale(1); }
  79% { transform: rotate(-4deg) scale(1.04); }
  82% { transform: rotate(3.5deg) scale(1.04); }
  85% { transform: rotate(-3deg) scale(1.03); }
  88% { transform: rotate(2deg) scale(1.02); }
  91% { transform: rotate(-1deg) scale(1.01); }
  94% { transform: rotate(0) scale(1); }
}
@keyframes fab-ring {
  0%, 74% { opacity: 0; transform: scale(1); }
  78% { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.14, 1.5); }
}
.fab-btn { animation: fab-wiggle 4s ease-in-out 1.5s infinite; transform-origin: 70% 60%; }
.fab-btn::after { content: ""; position: absolute; inset: 6% 3%; border-radius: 999px; border: 2px solid var(--gold); opacity: 0; pointer-events: none; animation: fab-ring 4s ease-out 1.5s infinite; }
.fab-btn:hover, .fab-btn:focus-visible, .fab.open .fab-btn { animation-play-state: paused; }
.fab-btn:hover::after, .fab.open .fab-btn::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fab-btn, .fab-btn::after { animation: none !important; } }

.fab-panel { width: min(300px, calc(100vw - 36px)); background: #fff; border-radius: 22px; padding: 12px 14px 14px; box-shadow: var(--shadow-lg); transform-origin: bottom right; animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.fab-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 6px 4px; }
.fab-head h2 { margin: 0; font: 700 18px var(--f-head); color: var(--wine); }
.fab-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--cream); margin-top: 8px; min-height: 60px; }
.fab-item:hover { background: var(--cream-2); }
.fab-item.is-off { opacity: .55; cursor: not-allowed; }
.fab-ic svg { width: 42px; height: 42px; display: block; }
.fab-tx { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.fab-tx b { font: 600 16px var(--f-head); }
.fab-tx small { color: var(--muted); font-size: 13px; }

/* Dialog */
.modal, .lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
.modal::backdrop { background: rgba(40, 10, 18, .55); backdrop-filter: blur(3px); }
.modal { width: min(640px, calc(100vw - 24px)); margin: auto; }
.modal-in { background: #fff; border-radius: 28px; padding: 22px 26px 24px; max-height: calc(100dvh - 24px); overflow: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { margin: 0; font: 700 23px var(--f-head); color: var(--wine); }
.bd-summary { background: var(--cream); border-radius: 18px; padding: 12px 16px; margin: 12px 0 16px; font-size: 15px; display: grid; gap: 2px; }
.bd-summary b { font-family: var(--f-head); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.span2 { grid-column: 1 / -1; }
.fld { display: grid; gap: 4px; font: 500 14px var(--f-head); color: var(--muted); }
.fld input, .fld textarea, .fld select { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 14px; background: #fff; font: 400 16px var(--f-body); color: var(--ink); min-height: 48px; }
.fld input:focus, .fld textarea:focus { border-color: var(--wine); outline: none; box-shadow: 0 0 0 3px rgba(128, 13, 40, .12); }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.chk input { width: 20px; height: 20px; accent-color: var(--wine); margin-top: 3px; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-err { color: var(--wine); font-weight: 600; min-height: 1.2em; margin: 12px 0 0; }
.fine { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; }
.modal-act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.done { text-align: center; }
.done .tick { width: 70px; height: 70px; border-radius: 50%; margin: 6px auto 10px; display: grid; place-items: center; background: #FDF1D2; color: var(--wine); font-size: 34px; }
.done h2 { margin: 0; color: var(--wine); font: 700 24px var(--f-head); }
.code-pill { display: inline-block; font: 700 26px var(--f-head); letter-spacing: 2px; background: var(--cream); border: 2px dashed var(--gold-d); border-radius: 14px; padding: 6px 18px; margin: 10px 0; }
.status-tag { display: inline-flex; padding: 4px 12px; border-radius: 99px; font: 600 14px var(--f-head); }
.st-pending { background: #FFF3D6; color: #8A5A00; } .st-confirmed { background: #E2F3E9; color: #1D6B41; }
.st-cancelled { background: #F3E3E6; color: var(--wine); } .st-completed { background: #E8E8EE; color: #444; }
.st-awaiting_payment { background: #E6EEFB; color: #24508F; } .st-expired { background: #EFEDEA; color: #6B635A; }

/* รีวิวจากผู้เข้าพัก — premium */
.rv { padding-top: 80px; }
.rv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.rv-head .h2 { margin: 0; }
.rv-lead { margin: 10px 0 0; }
.rv-nav { display: flex; gap: 10px; }
.rv-nav .round-btn { border-color: #E8DCC6; transition: border-color .2s, background .2s; }
.rv-nav .round-btn:hover:not(:disabled) { border-color: var(--gold-d); background: #FFFBF2; }
.rv-nav .round-btn:disabled { opacity: .35; cursor: default; }
.rv-viewport { margin: 28px auto 0; max-width: calc(var(--wrap) + var(--gut) * 2); padding-inline: var(--gut); }
.rv-track { list-style: none; margin: 0 -12px; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px;
  padding: 4px 12px 24px; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) and (min-width: 761px) { .rv-card { flex-basis: calc((100% - 20px) / 2); } }
.rv-track:focus-visible { outline-offset: -3px; }
.rv-card { position: relative; flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; background: #fff; border: 1px solid #EFE5D3; border-radius: 26px;
  padding: 30px 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 2px rgba(80, 50, 20, .04), 0 18px 40px -30px rgba(80, 50, 20, .35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.rv-card::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, transparent, var(--gold-d), transparent); opacity: .55; }
.rv-card:hover { transform: translateY(-3px); border-color: #E3D2B2; box-shadow: 0 1px 2px rgba(80, 50, 20, .05), 0 24px 46px -28px rgba(80, 50, 20, .4); }
.rv-q { width: 34px; height: 26px; fill: #EAD7AE; }
.rv-stars { display: inline-flex; gap: 3px; }
.rv-stars i { width: 16px; height: 16px; display: block; } .rv-stars svg { width: 100%; height: 100%; fill: #EDE6DA; }
.rv-stars i.on svg { fill: #D9A93B; }
.rv-text { margin: 0; font-size: 16px; line-height: 1.8; color: #3A3640; flex: 1; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rv-by { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid #F2EADC; }
.rv-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--wine); color: var(--gold); font: 600 17px var(--f-head); flex: none; box-shadow: 0 0 0 3px #FFF7E6; }
.rv-who { flex: 1; min-width: 0; display: grid; line-height: 1.4; }
.rv-who b { font: 600 15.5px var(--f-head); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-who small { color: var(--muted); font-size: 12.5px; letter-spacing: .2px; }
.rv-more { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--wine); border: 1px solid #EFE5D3; }
.rv-more .i { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .rv { padding-top: 52px; }
  .rv-nav { display: none; }
  .rv-card { padding: 26px 22px 20px; flex-basis: 86%; }
}

/* ติดต่อ & แผนที่ */
.loc { padding-top: 64px; scroll-margin-top: 90px; }
.loc-card { display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.loc-map { position: relative; min-height: 380px; background: var(--cream-2); overflow: hidden; }
.loc-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; filter: blur(5px) saturate(.9); transform: scale(1.08); }
.loc-veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px; text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(30, 12, 18, .18), rgba(30, 12, 18, .45) 75%); }
.loc-veil small { color: rgba(255, 255, 255, .9) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.loc-pin { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 99px; padding: 8px 16px 8px 10px; box-shadow: 0 8px 20px -10px rgba(80, 20, 30, .35); font: 600 15px var(--f-head); color: var(--wine); }
.loc-pin .i { width: 22px; height: 22px; color: var(--wine); }
.loc-veil small { color: var(--muted); font-size: 13px; }
.loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.loc-map.is-live .loc-veil, .loc-map.is-live .loc-ph { display: none; }
.loc-info { padding: 34px clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 6px; }
.loc-info .h2 { margin: 0 0 6px; }
.loc-addr { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0; font-size: 16px; line-height: 1.6; }
.loc-addr .i { width: 22px; height: 22px; color: var(--wine); flex: none; margin-top: 2px; }
.loc-note { margin: 4px 0; color: var(--muted); font-size: 15px; white-space: pre-line; }
.loc-facts { margin: 12px 0 4px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.loc-facts > div { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.loc-facts dt { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; }
.loc-facts dt svg { width: 20px; height: 20px; color: var(--wine); flex: none; }
.loc-facts dd { margin: 0; font-size: 15px; font-weight: 500; }
@media (max-width: 760px) { .loc-facts > div { grid-template-columns: 1fr; gap: 2px; } }
.loc-act { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.loc-act .btn .i { width: 18px; height: 18px; }
.loc-links { list-style: none; margin: 10px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.loc-links a { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink); text-decoration: none; font-size: 15px; }
.loc-links a:hover span { color: var(--wine); text-decoration: underline; }
.loc-links svg { width: 26px; height: 26px; flex: none; }
.loc-links .i { color: var(--wine); width: 22px; height: 22px; margin: 0 2px; }
@media (max-width: 900px) {
  .loc-card { grid-template-columns: 1fr; }
  .loc-map { min-height: 280px; }
}
@media (max-width: 760px) {
  .loc { padding-top: 40px; }
  .loc-card { border-radius: var(--r); }
  .loc-info { padding: 24px 20px; }
  .loc-act .btn { flex: 1 1 100%; }
}

/* ชำระเงิน & ใบยืนยันการจอง — Premium resort */
.pw { --pw-ivory: #FBF8F3; --pw-beige: #EDE4D6; --pw-champ: #D9BE85; --pw-champ-l: #F4EAD5; --pw-green: #2F6B4F; --pw-green-l: #EAF2EC;
  --pw-rose: #B5546A; --pw-rose-l: #F8ECEE; --pw-gray: #7A746C; --pw-r: 20px;
  display: grid; gap: 14px; text-align: left; font-size: 15px; color: var(--ink); }
.pw svg { width: 1.15em; height: 1.15em; flex: none; }
.pw b { font-weight: 600; }
.pw-card { background: #fff; border-radius: var(--pw-r); border: 1px solid var(--pw-beige); box-shadow: 0 1px 2px rgba(60, 40, 20, .04); }
/* ขั้นตอน */
.pw-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
.pw-steps li { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; color: #ADA69C; font: 500 12.5px var(--f-head); }
.pw-steps li:last-child { flex: none; }
.pw-steps li:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--pw-beige); margin-left: 2px; }
.pw-steps li.done:not(:last-child)::after { background: var(--pw-champ); }
.pw-steps span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--pw-beige); background: #fff; font-size: 11.5px; flex: none; }
.pw-steps b { white-space: nowrap; font-weight: 500; }
.pw-steps .done { color: var(--ink); } .pw-steps .done span { background: var(--wine); border-color: var(--wine); color: #fff; }
.pw-steps .done span svg { width: 13px; height: 13px; }
.pw-steps .on { color: var(--wine); } .pw-steps .on b { font-weight: 600; } .pw-steps .on span { border: 1.5px solid var(--wine); color: var(--wine); font-weight: 600; }
/* ยอดเงิน */
.pw-hero { padding: 18px 20px; background: var(--wine); color: #fff; border: 0; position: relative; }
.pw-hero::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; background: var(--pw-champ); opacity: .7; border-radius: 0 0 2px 2px; }
.pw-hero-top { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.pw-timer { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: 99px; padding: 4px 12px 4px 5px; color: #fff; font: 600 15px var(--f-head); font-variant-numeric: tabular-nums; }
.pw-timer svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.pw-timer circle { fill: none; stroke-width: 3.5; } .pw-timer .bg { stroke: rgba(255, 255, 255, .2); }
.pw-timer .fg { stroke: var(--pw-champ); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.pw-timer.warn { background: #fff; color: var(--wine); border-color: #fff; } .pw-timer.warn .fg { stroke: var(--wine); } .pw-timer.warn .bg { stroke: #F1DDE1; }
.pw-amt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 6px; }
.pw-amt { font: 700 42px/1.1 var(--f-head); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.pw-amt span { font-size: .5em; font-weight: 500; color: var(--pw-champ); margin-right: 3px; vertical-align: .45em; }
.pw-hero-sub { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.pw-hero-sub b { color: #fff; }
.pw-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 99px; padding: 7px 12px;
  background: transparent; color: #fff; font: 500 13px var(--f-head); cursor: pointer; transition: background .2s; }
.pw-chip:hover { background: rgba(255, 255, 255, .1); }
/* QR */
.pw-qr { overflow: hidden; }
.pw-qr-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--pw-ivory); border-bottom: 1px solid var(--pw-beige); font-size: 13.5px; color: var(--pw-gray); }
.pw-pp { font: 700 13px var(--f-head); letter-spacing: .4px; background: #113A63; color: #fff; border-radius: 6px; padding: 3px 9px; }
.pw-qr-img { display: grid; place-items: center; padding: 20px 16px 14px; }
.pw-qr-img img { width: min(264px, 70vw); height: auto; display: block; image-rendering: pixelated; }
.pw-payee { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px dashed var(--pw-beige); }
.pw-payee > div { flex: 1; min-width: 0; display: grid; line-height: 1.4; }
.pw-payee b { font: 600 15px var(--f-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-payee small { color: var(--pw-gray); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--pw-champ-l); color: var(--wine); font: 600 16px var(--f-head); flex: none; }
.pw-save { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--pw-beige); background: #fff; color: var(--ink); font: 500 13.5px var(--f-head); text-decoration: none; white-space: nowrap; transition: border-color .2s, background .2s; }
.pw-save:hover { border-color: var(--pw-champ); background: var(--pw-ivory); }
/* วิธีชำระ */
.pw-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pw-how li { background: var(--pw-ivory); border: 1px solid #F2EBE0; border-radius: 16px; padding: 12px; display: grid; gap: 6px; font: 600 13.5px var(--f-head); }
.pw-how svg { width: 20px; height: 20px; color: #A88A4E; }
.pw-how small { display: block; font: 400 12px/1.45 var(--f-body); color: var(--pw-gray); margin-top: 2px; }
/* รายละเอียด */
.pw-det { padding: 0 16px; }
.pw-det summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 14.5px var(--f-head); }
.pw-det summary::-webkit-details-marker { display: none; }
.pw-det summary span { flex: 1; }
.pw-det summary code { font: 600 13px var(--f-head); background: var(--pw-ivory); border: 1px solid var(--pw-beige); padding: 2px 8px; border-radius: 8px; letter-spacing: 1.5px; }
.pw-det summary svg { color: var(--pw-gray); transition: transform .2s; }
.pw-det[open] summary svg { transform: rotate(180deg); }
.pw-det dl { margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; border-top: 1px solid #F3ECE1; padding-top: 12px; }
.pw-det dt { color: var(--pw-gray); } .pw-det dd { margin: 0; text-align: right; }
.pw-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--wine); font: 500 13.5px var(--f-head); padding: 0 0 14px; cursor: pointer; }
/* ปุ่ม */
.pw-dock { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 10px; padding: 14px 0 calc(4px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, #fff 75%, rgba(255, 255, 255, 0)); margin-top: -6px; }
.pw-cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; border-radius: 16px; cursor: pointer;
  background: var(--wine); color: #fff; font: 600 16.5px var(--f-head); box-shadow: 0 6px 16px -10px rgba(92, 8, 25, .7); transition: background .2s, transform .15s; }
.pw-cta:hover { background: var(--wine-d); } .pw-cta:active { transform: scale(.985); }
.pw-cta:focus-within { outline: 3px solid var(--pw-champ); outline-offset: 2px; }
.pw-cta input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pw-cta svg { width: 20px; height: 20px; }
.pw-alt { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 16px; border: 1px solid var(--pw-beige); background: #fff; color: var(--ink); font: 500 15px var(--f-head); text-decoration: none; transition: border-color .2s, background .2s; }
.pw-alt:hover { border-color: #BFE3CC; background: #F6FBF8; }
.pw-alt svg { width: 22px; height: 22px; color: #06C755; }
.pw-ghost { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 16px; border: 1px solid var(--pw-beige); background: #fff; color: var(--ink); font: 500 15px var(--f-head); text-decoration: none; }
.pw-ghost:hover { border-color: var(--pw-champ); background: var(--pw-ivory); }
.pw-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pw-actions > :only-child { grid-column: 1 / -1; }
.pw-map { gap: 8px; color: var(--wine); font-weight: 600; }
.pw-map svg { width: 19px; height: 19px; }
@media (max-width: 420px) { .pw-actions { grid-template-columns: 1fr; } }
/* แจ้งเตือนตรวจสอบไม่สำเร็จ */
.pw-alert:focus { outline: none; }
.pw-alert { display: flex; gap: 12px; align-items: flex-start; background: var(--pw-rose-l); border: 1px solid #EED3D8; border-radius: 16px; padding: 14px; animation: pw-in .25s ease; }
.pw-alert-ic { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--pw-rose); display: grid; place-items: center; flex: none; }
.pw-alert-ic svg { width: 15px; height: 15px; }
.pw-alert b { display: block; font: 600 14.5px var(--f-head); color: #6E2A39; }
.pw-alert p { margin: 3px 0 4px; font-size: 14px; line-height: 1.55; color: #5E4A4E; }
.pw-alert small { display: block; font-size: 12.5px; color: var(--pw-gray); line-height: 1.5; }
@keyframes pw-in { from { opacity: 0; transform: translateY(6px); } }
/* กำลังตรวจสอบ */
.pw-verify { padding: 18px; display: grid; gap: 14px; }
.pw-vhead { display: flex; gap: 14px; align-items: center; }
.pw-vhead b { display: block; font: 600 16px var(--f-head); }
.pw-vhead small { color: var(--pw-gray); font-size: 13px; }
.pw-slip { width: 52px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--pw-ivory); border: 1px solid var(--pw-beige); flex: none; }
.pw-slip img { width: 100%; height: 100%; object-fit: cover; }
.pw-vbar { height: 4px; border-radius: 4px; background: var(--pw-champ-l); overflow: hidden; }
.pw-vbar i { display: block; height: 100%; width: 35%; border-radius: 4px; background: var(--pw-champ); animation: pw-bar 1.4s ease-in-out infinite; }
@keyframes pw-bar { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.pw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: c; }
.pw-checks li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #B3ACA2; animation: pw-c 3.6s ease infinite; }
.pw-checks li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--pw-beige); box-sizing: border-box; flex: none; animation: pw-dot 3.6s ease infinite; }
.pw-checks li:nth-child(2), .pw-checks li:nth-child(2)::before { animation-delay: 1.1s; }
.pw-checks li:nth-child(3), .pw-checks li:nth-child(3)::before { animation-delay: 2.2s; }
@keyframes pw-c { 10%, 100% { color: var(--ink); } }
@keyframes pw-dot { 10%, 100% { border-color: var(--pw-champ); background: var(--pw-champ); box-shadow: inset 0 0 0 3px #fff; } }
/* ผลลัพธ์ */
.pw-result { text-align: center; display: grid; justify-items: center; gap: 6px; padding: 6px 0 2px; }
.pw-result h2 { margin: 6px 0 0; font: 700 23px var(--f-head); color: var(--ink); outline: none; }
.pw-result p { margin: 0; color: var(--pw-gray); max-width: 36ch; font-size: 14.5px; line-height: 1.6; }
.pw-burst svg { width: 64px; height: 64px; }
.pw-burst circle { fill: var(--pw-green-l); stroke: var(--pw-green); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: pw-draw .6s ease forwards; }
.pw-burst path { fill: none; stroke: var(--pw-green); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: pw-draw .4s .45s ease forwards; }
.pw-burst { animation: pw-pop .5s .3s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pw-draw { to { stroke-dashoffset: 0; } }
@keyframes pw-pop { from { transform: scale(.9); } }
.pw-ico { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--pw-champ-l); color: #8A6A2E; }
.pw-ico svg { width: 28px; height: 28px; }
.pw-result.bad .pw-ico { background: var(--pw-rose-l); color: var(--pw-rose); }
.pw-note { text-align: center; color: var(--pw-gray); font-size: 13.5px; margin: 0; }
/* ใบยืนยันการจอง (Booking Confirmation) */
.pw-voucher { background: #fff; border: 1px solid var(--pw-champ); border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px -22px rgba(80, 50, 20, .45); }
.pv-photo { position: relative; aspect-ratio: 16 / 7; background: var(--pw-ivory); }
.pv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.pv-badge { position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .94); color: var(--pw-green); border-radius: 99px; padding: 4px 11px 4px 8px; font: 600 12.5px var(--f-head); }
.pv-badge svg { width: 14px; height: 14px; }
.pv-head { text-align: center; padding: 16px 18px 14px; }
.pv-head small { display: block; font: 500 11.5px var(--f-head); letter-spacing: 1.2px; color: #A88A4E; }
.pv-code { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; }
.pv-code b { font: 700 30px/1.15 var(--f-head); letter-spacing: 4px; color: var(--wine); }
.pv-copy { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--pw-beige); background: #fff; color: var(--pw-gray); display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.pv-copy:hover { border-color: var(--pw-champ); color: var(--ink); } .pv-copy.ok { color: var(--pw-green); border-color: #BFDCCB; }
.pv-place { background: var(--pw-ivory); border-block: 1px solid #F1E9DC; padding: 12px 18px; display: grid; gap: 2px; }
.pv-place b { font: 600 15.5px var(--f-head); } .pv-place small { color: var(--pw-gray); font-size: 13px; line-height: 1.5; }
.pv-dates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 16px 18px 6px; }
.pv-dates > div:last-child { text-align: right; }
.pv-dates small, .pv-guest small { display: block; color: var(--pw-gray); font-size: 12.5px; }
.pv-dates b { display: block; font: 600 17px/1.35 var(--f-head); margin-top: 2px; }
.pv-dates span { font-size: 12.5px; color: var(--pw-gray); }
.pv-arrow { position: relative; width: 64px; height: 1px; background: var(--pw-champ); }
.pv-arrow::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 6px solid var(--pw-champ); border-right: 0; }
.pv-arrow i { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); background: #fff; padding: 0 6px; font: 500 11.5px var(--f-head); font-style: normal; color: #A88A4E; white-space: nowrap; }
.pv-guest { padding: 10px 18px 16px; }
.pv-guest b { display: block; font: 600 19px var(--f-head); margin-top: 2px; }
.pv-tear { position: relative; height: 0; border-top: 1.5px dashed var(--pw-champ); margin: 0 18px; }
.pv-tear::before, .pv-tear::after { content: ""; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--pw-hole, #fff); border: 1px solid var(--pw-champ); }
.pv-tear::before { left: -29px; clip-path: inset(0 0 0 50%); } .pv-tear::after { right: -29px; clip-path: inset(0 50% 0 0); }
.pv-lines { margin: 0; padding: 14px 18px; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
.pv-lines dt { color: var(--pw-gray); } .pv-lines dd { margin: 0; text-align: right; }
.pv-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--pw-green-l); border-top: 1px solid #D6E6DB; }
.pv-total span { font: 500 14px var(--f-head); color: var(--pw-green); }
.pv-total b { font: 700 22px var(--f-head); color: #1F4D37; font-variant-numeric: tabular-nums; }
/* ในหน้าต่างจอง */
.done.pw-host { text-align: left; padding-top: 16px; background: #fff; --pw-hole: #fff; }
.pw-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pw-top h2 { margin: 0; font: 600 18px var(--f-head); color: var(--ink); }
/* หน้า /pay */
body:has(.pay-page) .fab { display: none; }
.pay-page.doc-art { max-width: 480px; background: transparent; box-shadow: none; padding: 8px 0 30px; }
.pay-page > .h2 { text-align: center; margin: 0 0 16px; font-size: 24px; }
.pay-page .pw { --pw-hole: var(--cream); }
.pay-page .pw-dock { background: linear-gradient(to top, var(--cream) 75%, rgba(255, 252, 247, 0)); }
@media (max-width: 420px) {
  .pw-amt { font-size: 36px; }
  .pw-how { grid-template-columns: 1fr; }
  .pw-how li { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
  .pw-steps b { font-size: 11.5px; }
  .pv-code b { font-size: 26px; letter-spacing: 3px; }
  .pv-dates { grid-template-columns: 1fr 1fr; }
  .pv-arrow { display: none; }
  .pv-dates b { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .pw *, .pw *::before { animation: none !important; transition: none !important; } .pw-burst circle, .pw-burst path { stroke-dashoffset: 0; } }

/* แกลเลอรี */
.lightbox { width: 100vw; height: 100dvh; margin: 0; background: rgba(18, 8, 12, .94); color: #fff; }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: rgba(18, 8, 12, .94); }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.lb-close { color: #fff; } .lb-close:hover { background: rgba(255, 255, 255, .12); }
.lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 8px 20px; min-height: 0; }
.lb-fig { margin: 0; flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 0; height: 100%; justify-content: center; }
.lb-img { max-width: 100%; max-height: calc(100dvh - 130px); object-fit: contain; border-radius: 18px; }
.lb-cap { margin-top: 10px; font-size: 14px; opacity: .85; text-align: center; }
.lb-nav { width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; flex: none; }
.lb-nav:hover { background: rgba(255, 255, 255, .22); }

/* คุกกี้ */
.consent { position: fixed; left: 16px; right: 300px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; max-width: 720px; background: #fff; border-radius: 22px; padding: 14px 18px; box-shadow: var(--shadow-lg); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.consent p { margin: 0; flex: 1 1 280px; font-size: 14.5px; }
.consent-act { display: flex; gap: 8px; }
.consent .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* เอกสาร */
.doc-main { padding-top: 30px; }
.doc-art { max-width: 820px; margin: 0 auto; background: #fff; border-radius: var(--r); padding: 34px clamp(20px, 4vw, 48px) 40px; box-shadow: var(--shadow); }
.doc-art h2 { color: var(--wine); font: 700 21px var(--f-head); margin: 28px 0 8px; }
.doc-art li { margin: 4px 0; }
.pending-box { background: #FFF6DE; border: 1.5px dashed var(--gold-d); border-radius: 18px; padding: 12px 18px; margin: 18px 0; font-size: 14.5px; }
.pending-box p { margin: 0 0 4px; } .pending-box ul { margin: 0; padding-left: 20px; }
.status-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin: 20px 0; }
.status-card { background: var(--cream); border-radius: 18px; padding: 16px 20px; display: grid; gap: 6px; }

/* Responsive */
@media (max-width: 1100px) {
  .nav { gap: 22px; }
  .booking-grid { grid-template-columns: minmax(0, 1fr); }
  .sum-card { position: static; }
}
@media (max-width: 960px) {
  .header-in { height: 72px; }
  .brand-logo { height: 52px; }
  .menu-btn { display: grid; }
  .header-cta { display: none; }
  .nav { position: absolute; top: 100%; left: 12px; right: 12px; flex-direction: column; gap: 0; background: #fff; border-radius: 22px; padding: 10px 18px 18px; box-shadow: var(--shadow-lg); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 17px; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav-cta-m { display: inline-flex !important; margin-top: 14px; border-bottom: 0 !important; color: #fff !important; }
  .sb-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px; gap: 6px; }
  .sb-field { padding: 8px 12px; gap: 10px; }
  .sb-field { border-right: 0; background: var(--cream); border-radius: 18px; }
  .sb-guests { grid-column: 1 / -1; }
  .sb-btn { grid-column: 1 / -1; margin: 4px 0 0; }
  .about { grid-template-columns: 1fr; gap: 24px; }
  .footer-in { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --gut: 16px; }
  .hero { padding-inline: 10px; }
  .hero-media { height: auto; aspect-ratio: 4 / 3.1; border-radius: 26px; }
  .pos-room { object-position: 70% 60%; }
  .hero-badge-row { top: 12px; bottom: auto; right: 12px; left: 12px; justify-content: space-between; gap: 6px; }
  .hero-badge { font-size: 12.5px; padding: 6px 12px; }
  .price-card { position: relative; left: auto; top: auto; width: auto; margin: -18px 12px 0; padding: 18px 20px 20px; border-radius: 24px;
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: end; }
  .pc-name { grid-column: 1 / -1; font-size: 15px; }
  .pc-title { grid-column: 1 / -1; font-size: 36px; }
  .pc-title span + span { font-size: 27px; }
  .pc-from { font-size: 16px; margin-top: 8px; grid-column: 1 / -1; }
  .pc-price { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .pc-num { font-size: 72px; }
  .pc-unit { font-size: 22px; }
  .pc-sell { grid-column: 1 / -1; font-size: 16px; margin: 10px 0 12px; }
  .pc-btn { grid-column: 1 / -1; font-size: 19px; }
  .searchbar { margin-top: 18px; }
  .rooms { padding-top: 48px; }
  .room-grid { grid-template-columns: 1fr; gap: 18px; }
  .room-body { padding: 18px 20px 20px; }
  .room-body h3 { font-size: 21px; }
  .stay-bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 6px; border-radius: 18px; }
  .sbar-f { padding: 8px 10px; gap: 8px; min-height: 58px; }
  .sbar-f .sb-ic .i { width: 22px; height: 22px; }
  .sbar-f .sb-disp, .sbar-g .sb-val { font-size: 15px; }
  .sbar-arrow { padding: 0 2px; }
  .sbar-g { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); margin: 4px 0 0; border-radius: 0 0 14px 14px; }
  .cal-card { padding: 16px 10px 14px; }
  .cal-top { padding: 0 4px; }
  .cal-title { font-size: 20px; }
  .month-pick select { min-height: 42px; padding: 0 34px 0 14px; font-size: 14.5px; }
  .round-btn { width: 42px; height: 42px; }
  .cal-g { row-gap: 5px; }
  .cal-wd { font-size: 13px; }
  .cal-d, .cal-empty { padding: 0 2px; min-height: 66px; }
  .cal-d.r-start { background: linear-gradient(to right, transparent calc(100% - 2px), #FBE4E8 calc(100% - 2px)); }
  .cal-d.r-end { background: linear-gradient(to left, transparent calc(100% - 2px), #FBE4E8 calc(100% - 2px)); }
  .cal-d .cin, .cal-empty .cin { border-radius: 12px; gap: 2px; }
  .cal-d.r-start .cin { border-radius: 12px 0 0 12px; } .cal-d.r-end .cin { border-radius: 0 12px 12px 0; }
  .cal-d .n { font-size: 15px; width: 28px; height: 28px; }
  .cal-d .cdot { width: 5px; height: 5px; }
  .cal-d .p { font-size: 11px; }
  .cal-d .a { font-size: 10px; }
  .cal-legend { font-size: 13px; gap: 12px; }
  .cal-foot { padding: 12px 4px 0; }
  .form-grid { grid-template-columns: 1fr; }
  .modal-in { padding: 18px 18px 20px; border-radius: 24px; }
  .status-form { grid-template-columns: 1fr; }
  .footer-in { grid-template-columns: 1fr; gap: 22px; }
  .site-footer { padding-bottom: 110px; }
  .fab-btn { width: 210px; }
  .consent { right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .lb-nav { position: absolute; bottom: 24px; }
  .lb-prev { left: 30%; } .lb-next { right: 30%; }
  .lb-img { max-height: calc(100dvh - 190px); }
}
@media (max-width: 380px) {
  .sb-in { grid-template-columns: 1fr; }
  .pc-num { font-size: 64px; }
}

/* ---------- v1.6.0 เหมาะกับใคร + สิ่งอำนวยความสะดวก ---------- */
.why { padding-top: 64px; }
.amen { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.amen li { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 12px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font: 600 16px var(--f-head); color: var(--wine); }
.amen svg { width: 26px; height: 26px; color: var(--wine); flex: none; }
.why-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.why-card { background: #fff; border-radius: var(--r-sm); padding: 22px 24px; box-shadow: var(--shadow); border-top: 4px solid var(--gold); display: flex; flex-direction: column; gap: 6px; }
.why-card h3 { margin: 0; color: var(--wine); font: 700 20px/1.3 var(--f-head); }
.why-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.why-link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--wine); font: 600 15px var(--f-head); text-decoration: none; }
.why-link .i { width: 16px; height: 16px; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } .why { padding-top: 48px; } }

/* ---------- v1.6.0 คำถามที่พบบ่อย ---------- */
.faq { padding-top: 64px; max-width: 900px; }
.faq-list { margin-top: 18px; display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 20px; font: 600 17px/1.4 var(--f-head); color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .i { width: 20px; height: 20px; color: var(--wine); flex: none; transition: transform .2s; }
.faq-item[open] summary .i { transform: rotate(180deg); }
.faq-item p { margin: 0; padding: 0 20px 18px; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
@media (max-width: 760px) { .faq { padding-top: 48px; } .faq-item summary { font-size: 16px; } }

/* ---------- v1.6.3 จัดภาพหลัก + การ์ดราคาในมือถือ/แท็บเล็ตให้กระชับ ---------- */
@media (max-width: 960px) {
  .hero { padding-inline: 10px; }
  .hero-media { aspect-ratio: auto; height: min(calc((100vw - 20px) * .72), 60vh); min-height: 240px; border-radius: 26px; }
  .hero-progress { top: 0; bottom: auto; }
  .hero-badge-row { top: 12px; bottom: auto; right: 12px; left: 12px; justify-content: space-between; gap: 6px; }
  .hero-badge { font-size: 12.5px; padding: 6px 12px; }
  .price-card { position: relative; z-index: 3; left: auto; top: auto; width: auto; margin: -46px 14px 0; padding: 16px 18px 18px; border-radius: 22px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "title from" "title price" "sell sell" "btn btn";
    column-gap: 14px; row-gap: 0; align-items: center; }
  .pc-name { grid-area: name; font-size: 14px; margin: 0 0 4px; }
  .pc-title { grid-area: title; font-size: 27px; line-height: 1.15; align-self: center; }
  .pc-title span + span { font-size: 19px; }
  .pc-from { grid-area: from; margin: 0; font-size: 13px; text-align: right; align-self: end; opacity: .9; }
  .pc-price { grid-area: price; flex-direction: column; align-items: flex-end; gap: 0; flex-wrap: nowrap; }
  .pc-num { font-size: 50px; letter-spacing: -1.5px; }
  .pc-unit { font-size: 14px; line-height: 1.2; }
  .pc-sell { grid-area: sell; font-size: 15px; margin: 12px 0 12px; padding-top: 10px; }
  .pc-btn { grid-area: btn; min-height: 48px; font-size: 17px; }
  .searchbar { margin-top: 18px; }
}
@media (min-width: 600px) and (max-width: 960px) {
  .pc-title { font-size: 32px; } .pc-title span + span { font-size: 22px; }
  .pc-num { font-size: 60px; }
}
@media (max-width: 760px) { .fab-btn { width: 172px; } }
@media (max-width: 380px) {
  .pc-title { font-size: 24px; } .pc-title span + span { font-size: 17px; }
  .pc-num { font-size: 44px; }
}
@media (min-width: 961px) and (max-width: 1240px) {
  .hero-media { height: clamp(540px, 50vw, 660px); }
  .price-card { top: 28px; width: 290px; padding: 20px 24px 20px; }
  .pc-title { font-size: 42px; } .pc-title span + span { font-size: 31px; }
  .pc-from { margin-top: 10px; font-size: 18px; }
  .pc-num { font-size: 84px; }
  .pc-unit { font-size: 22px; }
  .pc-sell { margin: 10px 0 12px; font-size: 17px; }
  .pc-btn { min-height: 48px; font-size: 18px; }
}

/* ---------- v1.7.0 ปฏิทินเลือกวันแบบใหม่ ---------- */
[data-dp-field] { outline: none; }
[data-dp-field]:focus-visible, [data-dp-field][aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--gold-d); border-radius: 18px; }
.dp { position: absolute; z-index: 80; background: #fff; border-radius: 26px; box-shadow: 0 30px 70px -20px rgba(70, 10, 25, .38), 0 4px 14px rgba(70, 10, 25, .08); padding: 16px 20px 16px; font-family: var(--f-body); color: var(--ink); animation: dp-in .18s ease-out; }
@keyframes dp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dp[hidden], .dp-back[hidden] { display: none; }
.dp-grab { display: none; }
.dp-head { display: flex; align-items: center; gap: 12px; }
.dp-tabs { flex: 1; display: flex; align-items: stretch; gap: 8px; background: var(--cream); border-radius: 18px; padding: 5px; }
.dp-tab { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 52px; padding: 6px 14px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; text-align: left; transition: background .15s, box-shadow .15s; }
.dp-tab small { font: 500 12.5px var(--f-head); color: var(--muted); }
.dp-tab b { font: 600 16px var(--f-head); color: var(--ink); white-space: nowrap; }
.dp-tab.on { background: #fff; box-shadow: 0 2px 10px rgba(80, 20, 30, .12), inset 0 0 0 1.5px var(--wine); }
.dp-tab.on small { color: var(--wine); }
.dp-arrow { align-self: center; color: var(--gold-d); font-weight: 700; }
.dp-x { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.dp-x svg { width: 20px; height: 20px; }
.dp-nav { position: relative; height: 0; }
.dp-nb { position: absolute; top: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--wine); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.dp-nb svg { width: 20px; height: 20px; }
.dp-nb:disabled { opacity: .35; cursor: default; }
.dp-nb[data-dp-prev] { left: 0; } .dp-nb[data-dp-next] { right: 0; }
.dp-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 28px; margin-top: 14px; }
.dp-mt { text-align: center; font: 700 17px/40px var(--f-head); color: var(--wine); margin-bottom: 6px; }
.dp-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.dp-wd { text-align: center; font: 600 12.5px/28px var(--f-head); color: var(--muted); }
.dp-wd.we { color: var(--wine); opacity: .75; }
.dp-d { position: relative; height: 50px; border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: var(--ink); font-family: var(--f-head); }
.dp-d b { font-size: 15px; font-weight: 600; line-height: 1.2; position: relative; z-index: 1; }
.dp-d .dp-p { font-style: normal; font-size: 10.5px; line-height: 1.2; color: #2E8B57; font-weight: 500; position: relative; z-index: 1; }
.dp-d .dp-p.f { color: #B8B4BC; }
.dp-d::before { content: ""; position: absolute; inset: 2px; border-radius: 14px; transition: background .12s; }
.dp-d:hover:not([aria-disabled="true"])::before { background: var(--cream-2); }
.dp-d:focus-visible { outline: none; }
.dp-d:focus-visible::before { box-shadow: inset 0 0 0 2px var(--gold-d); }
.dp-d.today b::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold-d); }
.dp-d[aria-disabled="true"] { cursor: default; }
.dp-d.past b { color: #CFCBD2; }
.dp-d.full b { color: #B8B4BC; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dp-d[aria-disabled="true"]:not(.past):not(.full) b { color: #C9C4CC; }
.dp-d.in-r::before { inset: 2px 0; border-radius: 0; background: #FBE4E8; }
.dp-d.s-in::before, .dp-d.s-out::before { inset: 2px; border-radius: 14px; background: var(--wine); box-shadow: 0 6px 14px -6px rgba(128, 13, 40, .6); }
.dp-d.s-in b, .dp-d.s-out b { color: #fff; }
.dp-d.s-in .dp-p, .dp-d.s-out .dp-p { color: var(--gold-2); }
.dp-d.s-in.today b::after, .dp-d.s-out.today b::after { background: #fff; }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dp-hint { font: 500 14.5px var(--f-head); color: var(--muted); }
.dp-hint b { color: var(--wine); }
.dp-hint.warn { color: #B42318; }
.dp-act { display: flex; align-items: center; gap: 8px; }
.dp-clear { border: 0; background: none; color: var(--ink); font: 600 14.5px var(--f-head); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 10px; cursor: pointer; }
.dp-clear:disabled { opacity: .35; cursor: default; }
.dp-ok { min-height: 44px; padding: 0 26px; }
.dp-back { position: fixed; inset: 0; z-index: 79; background: rgba(30, 10, 16, .42); animation: dp-fade .2s ease-out; }
@keyframes dp-fade { from { opacity: 0; } }
html.dp-lock, html.dp-lock body { overflow: hidden; }
.dp.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 92dvh; overflow-y: auto; border-radius: 26px 26px 0 0; padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); animation: dp-up .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes dp-up { from { transform: translateY(100%); } to { transform: none; } }
.dp.sheet .dp-grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: #E3D9CC; margin: 2px auto 10px; }
.dp.sheet .dp-tab { padding: 6px 10px; }
.dp.sheet .dp-tab b { font-size: 15px; }
.dp.sheet .dp-d { height: 52px; }
.dp.sheet .dp-foot { position: sticky; bottom: calc(-14px - env(safe-area-inset-bottom)); background: #fff; padding-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .dp, .dp.sheet, .dp-back { animation: none; } }
.dp .dp-d.in-r::before, .dp .dp-d.in-r:hover::before { inset: 2px 0; border-radius: 0; background: #FBE4E8; }
.dp .dp-d.s-in::before, .dp .dp-d.s-out::before, .dp .dp-d.s-in:hover::before, .dp .dp-d.s-out:hover::before { inset: 2px; border-radius: 14px; background: var(--wine); }
.dp .dp-d[aria-disabled="true"] .dp-p { color: #CFCBD2; }
.dp-clear, .dp-ok { white-space: nowrap; }
.dp-hint { flex: 1; min-width: 0; line-height: 1.4; }
@media (max-width: 760px) { .dp-hint { font-size: 13.5px; } .dp-clear { padding: 0 6px; } }

/* ---------- v1.9.2 จุดเด่น 3 การ์ด + ป้ายสิ่งอำนวยความสะดวก (มือถือ) ---------- */
.ft-m, .ft-amen { display: none; }
@media (max-width: 760px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding: 0 16px; }
  .features li, .features li + li { flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; gap: 6px; padding: 16px 6px 14px; background: #fff; border: 1px solid #F1E9DE; border-radius: 20px; box-shadow: 0 8px 20px -16px rgba(80, 20, 30, .3); }
  .features li > div { display: flex; flex-direction: column; align-items: center; }
  .ft-ic { width: 38px; height: 38px; }
  .features .ft-t { font-size: 16px; }
  .features p { display: none; }
  .ft-m { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
  .ft-amen { list-style: none; margin: 12px 0 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 6px; }
  .ft-amen li { padding: 7px 14px; border-radius: 99px; background: #FBF0E0; color: var(--wine-d); font: 600 13px var(--f-head); }
}
@media (max-width: 360px) { .features .ft-t { font-size: 14.5px; } .ft-m { font-size: 11px; } }
@media (max-width: 760px) { .ft-m { white-space: nowrap; font-size: 11.5px; } .features li, .features li + li { padding-inline: 4px; } }
@media (max-width: 360px) { .ft-m { font-size: 10.5px; } .ft-amen li { padding: 6px 11px; font-size: 12px; } }

/* ---------- v1.9.3 มือถือ: "เช็กห้องว่างและราคา" + "WHY STAY" ---------- */
@media (max-width: 760px) {
  /* หัวข้อของทั้งสองส่วน */
  .booking-head .h2, .why .h2 { font-size: 27px; line-height: 1.2; }
  .booking-head .lead, .why .lead { font-size: 14.5px; line-height: 1.6; }

  /* แถบวันที่ + ผู้เข้าพัก: การ์ดเดียว ช่องวันเป็นกล่องครีม */
  .stay-bar { margin-top: 18px; padding: 8px; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 22px; border: 1px solid #F1E9DE; box-shadow: 0 14px 30px -22px rgba(80, 20, 30, .45); }
  .sbar-arrow { display: none; }
  .sbar-f { min-height: 58px; padding: 8px 12px; border-radius: 16px; background: var(--cream); gap: 10px; }
  .sbar-g { grid-column: 1 / -1; margin: 0; border: 0; border-radius: 16px; }
  .sbar-f .sb-lbl { font-size: 12px; }

  /* ปฏิทิน: ตัวเลข + ราคา อ่านง่าย ตัด "ว่าง x" ใช้จุดสีแทน */
  .cal-card { padding: 16px 12px 14px; border-radius: 24px; box-shadow: 0 14px 30px -22px rgba(80, 20, 30, .45); border: 1px solid #F1E9DE; }
  .cal-top { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 10px; }
  .cal-title { font-size: 19px; padding: 0 4px; }
  .cal-ctrl { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; }
  .cal-ctrl .month-pick { order: 2; } .cal-ctrl [data-cal-prev] { order: 1; } .cal-ctrl [data-cal-next] { order: 3; }
  .month-pick, .month-pick select { width: 100%; }
  .month-pick select { text-align: center; text-align-last: center; padding: 0 34px; background: var(--cream); border-color: transparent; }
  .cal-wd { font-size: 12.5px; padding-bottom: 4px; }
  .cal-d, .cal-empty { min-height: 58px; padding: 0 1.5px; }
  .cal-d .cin, .cal-empty .cin { border-radius: 12px; gap: 1px; }
  .cal-d .n { font-size: 15px; width: 26px; height: 26px; }
  .cal-d .a { display: none; }
  .cal-d .p { font-size: 10.5px; font-weight: 600; color: #2E8B57; }
  .cal-d.low .p { color: #C07A12; }
  .cal-d .cdot { width: 4px; height: 4px; }
  .cal-legend { justify-content: center; font-size: 12.5px; gap: 14px; }
  .cal-foot { padding-top: 10px; }

  /* สรุปการเข้าพัก */
  .sum-card { border-radius: 24px; padding: 18px 16px; border: 1px solid #F1E9DE; box-shadow: 0 14px 30px -22px rgba(80, 20, 30, .45); border-top: 4px solid var(--wine); }
  .sum-card h3 { font-size: 19px; }

  /* WHY STAY: สิ่งอำนวยความสะดวกเป็นตาราง 2x2 */
  .amen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .amen li { min-height: 52px; padding: 0 12px; border-radius: 16px; font-size: 14.5px; gap: 10px; }
  .amen li svg { width: 24px; height: 24px; flex: none; padding: 6px; box-sizing: content-box; border-radius: 10px; background: #FBF0E0; }
  /* การ์ด 3 ใบเป็นแถวปัดซ้าย-ขวา */
  .why-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 16px calc(-1 * var(--gut, 16px)) 0; padding: 4px var(--gut, 16px) 14px; scroll-padding-left: var(--gut, 16px); scrollbar-width: none; }
  .why-grid::-webkit-scrollbar { display: none; }
  .why-card { flex: 0 0 80%; scroll-snap-align: start; padding: 18px 18px 16px; border-radius: 20px; border-top: 0; background: linear-gradient(160deg, #fff 0%, #FFF8EC 100%); border: 1px solid #F1E9DE; box-shadow: 0 12px 26px -20px rgba(80, 20, 30, .45); position: relative; }
  .why-card::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--gold); margin-bottom: 10px; }
  .why-card h3 { font-size: 18px; }
  .why-card p { font-size: 14px; }
}
@media (max-width: 760px) { .why .h2, .booking-head .h2 { text-wrap: balance; } }

/* ======================= v2.0.0 หน้าแรกบนมือถือ แบบ P5 ======================= */
.m-tabs, .m-ticket, .about-thumbs { display: none; }
.why-toggle { all: unset; display: block; font: inherit; color: inherit; }
.why-toggle svg { display: none; }
@media (max-width: 760px) {
  /* แถบแท็บค้างบน (อยู่ในหัวเว็บที่ sticky อยู่แล้ว) */
  .m-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 10px; scrollbar-width: none; background: rgba(255, 252, 247, .97); border-top: 1px solid #F3EADC; box-shadow: 0 8px 16px -14px rgba(80, 20, 30, .35); }
  .m-tabs::-webkit-scrollbar { display: none; }
  .m-tabs a { flex: none; padding: 8px 14px; border-radius: 99px; font: 600 13px var(--f-head); color: var(--muted); background: #fff; border: 1px solid #EEE4D6; text-decoration: none; white-space: nowrap; }
  .m-tabs a.on { background: var(--wine); color: #fff; border-color: var(--wine); }
  body.home main section[id], body.home footer[id], body.home #rooms { scroll-margin-top: 130px; }

  /* ภาพหลักเต็มความกว้าง + การ์ดตั๋ว */
  body.home .hero { padding-inline: 0; }
  body.home .hero-media { height: 300px; min-height: 0; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  body.home .hero-progress, body.home .hero-badge { display: none; }
  body.home .hero-badge-row { top: auto; bottom: 70px; left: 0; right: 0; justify-content: center; }
  body.home .price-card, body.home .searchbar { display: none; }
  .m-ticket { display: block; position: relative; z-index: 3; margin: -60px 16px 0; border-radius: 24px; color: #fff; background: radial-gradient(120% 100% at 0% 0%, #A31C3B 0%, var(--wine) 55%, var(--wine-d) 100%); box-shadow: 0 20px 40px -18px rgba(80, 10, 25, .6); }
  .mt-top { padding: 16px 18px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
  .mt-chip { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--gold); color: #4A0614; font: 600 12px var(--f-head); }
  .mt-title { margin: 8px 0 0; font: 700 24px/1.15 var(--f-head); }
  .mt-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .mt-price small { font: 500 12px var(--f-head); opacity: .92; }
  .mt-price b { font: 800 38px/1 var(--f-head); color: var(--gold); }
  .mt-cut { position: relative; height: 0; margin: 0 14px; border-top: 2px dashed rgba(255, 255, 255, .28); }
  .mt-cut::before, .mt-cut::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); }
  .mt-cut::before { left: -26px; } .mt-cut::after { right: -26px; }
  .mt-form { padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; }
  .mt-f { border: 0; border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; padding: 8px 10px; min-height: 52px; text-align: left; display: flex; flex-direction: column; justify-content: center; cursor: pointer; font-family: var(--f-head); min-width: 0; }
  .mt-f small { font: 500 11px var(--f-head); opacity: .85; }
  .mt-f span { font: 600 13.5px var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mt-f span.empty { opacity: .82; }
  .mt-f:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .mt-f.need { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 2px #FFB4A8; }
  .mt-f.need small::after { content: " *"; color: #FFB4A8; }
  .mt-f.shake { animation: sb-shake .42s ease; }
  .mt-go { border: 0; border-radius: 14px; padding: 0 16px; min-height: 52px; background: linear-gradient(180deg, #FFE59A, var(--gold) 60%, #D9A63A); color: #4A0614; font: 700 15px var(--f-head); cursor: pointer; }
  .mt-err { margin: -4px 16px 0; padding-bottom: 12px; font: 600 13px var(--f-head); color: #FFD3CC; }
  .mt-err:empty { display: none; }
  body.home .features { margin-top: 14px; }

  /* หัวข้อส่วนแบบมีเลขลำดับ 1–6 */
  body.home .rooms .eyebrow, body.home .booking .eyebrow, body.home .why .eyebrow, body.home .about .eyebrow, body.home .nearby .eyebrow, body.home .faq .eyebrow { display: none; }
  body.home #rooms-h, body.home #booking-h, body.home #why-h, body.home #about-h, body.home #nearby-h, body.home #faq-h { display: flex; align-items: flex-start; gap: 10px; font: 700 20px/1.3 var(--f-head); color: var(--ink); text-wrap: balance; }
  body.home #rooms-h::before, body.home #booking-h::before, body.home #why-h::before, body.home #about-h::before, body.home #nearby-h::before, body.home #faq-h::before { flex: none; width: 32px; height: 32px; margin-top: -2px; border-radius: 10px; background: var(--wine); color: var(--gold); display: grid; place-items: center; font: 800 14px/32px var(--f-head); text-align: center; }
  body.home #rooms-h::before { content: "1"; } body.home #booking-h::before { content: "2"; } body.home #why-h::before { content: "3"; }
  body.home #about-h::before { content: "4"; } body.home #nearby-h::before { content: "5"; } body.home #faq-h::before { content: "6"; }
  body.home #about-h br { display: none; }
  body.home .rooms { padding-top: 34px; } body.home .booking { padding-top: 34px; } body.home .why { padding-top: 34px; } body.home .faq { padding-top: 34px; }
  body.home .rooms > .lead, body.home .booking-head .lead { font-size: 13.5px; }

  /* ห้องพัก: การ์ดแนวนอน รูปซ้าย */
  .room-grid { gap: 10px; margin-top: 12px; }
  .room-card { flex-direction: row; border-radius: 20px; border: 1px solid #F1E9DE; box-shadow: 0 10px 24px -18px rgba(80, 20, 30, .4); }
  .room-media { flex: 0 0 132px; aspect-ratio: auto; height: 116px; }
  .room-media .af-count { right: 6px; bottom: 6px; font-size: 10.5px; padding: 3px 8px; }
  .room-body { flex: 1; min-width: 0; padding: 12px 12px 12px 14px; gap: 8px; }
  .room-body h3 { font-size: 15.5px; }
  .room-body p { font-size: 12.5px; line-height: 1.5; }
  .room-body p .d-br { display: none; }
  .room-body .arrow-btn { width: 36px; height: 36px; }
  .room-body .arrow-btn .i { width: 16px; height: 16px; }

  /* ทำไมต้องพักที่นี่: กดเปิด-ปิด (การ์ดเดียว) */
  body.home .why-grid { display: block; margin: 12px 0 0; padding: 0; overflow: visible; background: #fff; border: 1px solid #F1E9DE; border-radius: 20px; box-shadow: 0 10px 24px -18px rgba(80, 20, 30, .4); }
  body.home .why-card { flex: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; border-bottom: 1px solid #F3EADC; }
  body.home .why-card:last-child { border-bottom: 0; }
  body.home .why-card::before { display: none; }
  body.home .why-card h3 { margin: 0; font-size: 15.5px; }
  .why-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 14px 16px; cursor: pointer; }
  .why-toggle svg { display: block; width: 20px; height: 20px; color: var(--wine); flex: none; transition: transform .2s; }
  .why-card.open .why-toggle svg { transform: rotate(180deg); }
  body.home .why-card p, body.home .why-card .why-link { display: none; }
  body.home .why-card.open p { display: block; padding: 0 16px 10px; margin: -4px 0 0; }
  body.home .why-card.open .why-link { display: inline-flex; padding: 0 16px 14px; }
  .why-toggle:focus-visible { outline: 2px solid var(--gold-d); outline-offset: -2px; border-radius: 12px; }

  /* บรรยากาศ + รูปย่อ (แทนแถบภาพเลื่อนบนมือถือ) */
  body.home .about { margin-top: 34px; gap: 14px; }
  body.home .about-media { border-radius: 20px; }
  body.home .about-body p { font-size: 14px; margin: 8px 0; }
  body.home .about-body > .btn { display: none; }
  .about-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
  .about-thumbs button { position: relative; padding: 0; border: 0; height: 96px; border-radius: 14px; overflow: hidden; cursor: pointer; background: #e9dccb; }
  .about-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .about-thumbs span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(60, 6, 20, .55); color: #fff; font: 700 15px var(--f-head); }
  body.home .photostrip { display: none; }

  /* ที่เที่ยว: การ์ดแผนที่ + รายการ */
  body.home .nearby { padding-top: 34px; }
  body.home .nearby-head .lead { font-size: 13.5px; }
  body.home .ndist { border-radius: 20px; }

  /* ถาม-ตอบ: การ์ดเดียวมีเส้นคั่น */
  body.home .faq-list { gap: 0; background: #fff; border: 1px solid #F1E9DE; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 24px -18px rgba(80, 20, 30, .4); }
  body.home .faq-item { border: 0; border-radius: 0; border-bottom: 1px solid #F3EADC; }
  body.home .faq-item:last-child { border-bottom: 0; }
  body.home .faq-item summary { font-size: 14.5px; min-height: 52px; padding: 10px 16px; }

  /* footer แบบ P1: สีเลือดหมู ขอบบนโค้ง กระชับ */
  .site-footer { margin-top: 40px; border-radius: 28px 28px 0 0; padding: 26px 0 14px; }
  .footer-in { gap: 18px; }
  .footer-in .brand-logo { height: 64px; }
  .f-addr { font-size: 13px; margin-top: 10px; }
  .f-h { font-size: 14px; margin: 0 0 8px; }
  .f-contact { gap: 2px; }
  .f-contact a { min-height: 36px; font-size: 14px; gap: 10px; }
  .f-ic, .f-ic svg { width: 28px; height: 28px; }
  .f-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .f-links a, .f-links .linkish { min-height: 32px; font-size: 13px; }
  .f-bottom { font-size: 12px; }
}
@media (max-width: 360px) {
  .mt-title { font-size: 21px; } .mt-price b { font-size: 32px; }
  .mt-go { padding: 0 12px; font-size: 14px; }
  .mt-f span { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .mt-f.shake { animation: none; } }

/* ---------- v2.0.1 มือถือ: footer ลิงก์บรรทัดเดียว · แผนที่ไม่ต้องเลื่อน · รูปห้องปัดซ้าย-ขวา ---------- */
@media (max-width: 760px) {
  /* ลิงก์ข้อมูลสำหรับผู้เข้าพัก: 2 คอลัมน์ ไม่ล้นจอ (v2.8.5) */
  .f-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .f-links li { min-width: 0; }
  .f-links a, .f-links .linkish { padding: 0; white-space: normal; font-size: 13.5px; min-height: 34px; text-align: left; line-height: 1.35; }
  .f-links a::before, .f-links .linkish::before { display: inline-block; flex: none; width: 5px; height: 5px; margin-right: 8px; }

  /* แผนที่: เห็นทั้งภาพในจอ ไม่ต้องเลื่อน */
  .nmap-scroll { overflow: visible; }
  .nmap-scroll img { width: 100%; max-width: 100%; height: auto; }
  .nmap-hint { display: none; }
  .nmap-zoom { min-height: 36px; font-size: 12.5px; padding: 0 12px; }
  .nmap-tag { left: 10px; top: 10px; font-size: 11.5px; padding: 4px 10px; }

  /* รูปห้องพัก/บรรยากาศ: ปัดซ้าย-ขวาดูรูปได้ */
  .af { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .af::-webkit-scrollbar { display: none; }
  .af-slide { position: relative; inset: auto; flex: 0 0 100%; width: 100%; height: 100%; opacity: 1; transition: none; scroll-snap-align: start; }
  body.home .room-card { flex-direction: column; }
  body.home .room-media { flex: none; width: 100%; height: 210px; }
  body.home .room-media .af-count { right: 10px; bottom: 10px; font-size: 12px; padding: 4px 10px; }
  body.home .room-media .af-count::after { content: " · ปัดดู"; }
  body.home .about-media .af-count::after { content: " · ปัดดู"; }
  body.home .room-body { padding: 12px 14px 14px; }
}
@media (max-width: 760px) { .footer-in > * { min-width: 0; } .f-links { max-width: 100%; } }

/* v2.0.2 — มือถือ: การ์ดจองอยู่ใต้รูป ไม่ทับรูป (แบบ H1) */
@media (max-width: 760px) {
  body.home .hero-media { height: 260px; }
  body.home .hero-badge-row { bottom: 14px; }
  .m-ticket { margin: 14px 16px 0; box-shadow: 0 16px 30px -18px rgba(80, 10, 25, .55); border-radius: 22px; }
  .mt-title { font-size: 22px; }
  .mt-price b { font-size: 36px; }
}

/* v2.0.3 — มือถือ: รูปห้อง/บรรยากาศเลื่อนเองแบบสไลด์ + จุดบอกตำแหน่ง */
.af-dots { display: none; }
@media (max-width: 760px) {
  .af { scroll-behavior: smooth; }
  .af-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
  .af-dots i { width: 6px; height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .6); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: width .3s ease, background .3s ease; }
  .af-dots i.on { width: 18px; background: #fff; }
}

/* v2.0.4 — มือถือ: รายการระยะทางเป็นการ์ดเล็กปัดซ้าย-ขวา (สั้นลง) */
@media (max-width: 760px) {
  body.home .ndist { padding: 12px 0 14px; }
  body.home .ndist-title { margin: 0 12px 10px; font-size: 14.5px; padding: 8px 14px; }
  body.home .ndist-title::after { content: " · ปัดดู"; font-weight: 500; opacity: .85; }
  body.home .ndist-list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 12px 2px; scroll-padding: 0 12px; }
  body.home .ndist-list::-webkit-scrollbar { display: none; }
  body.home .ndist-list li { position: relative; flex: 0 0 104px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 14px; background: var(--cream); border: 1px solid #F1E9DE; }
  body.home .ndist-list img { width: 100%; height: 66px; border-radius: 0; }
  body.home .nd-no { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; font-size: 11.5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
  body.home .nd-name { padding: 7px 8px 0; font-size: 12.5px; line-height: 1.3; min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.home .nd-name .nw { white-space: normal; }
  body.home .nd-km { padding: 4px 8px 8px; font-size: 14px; }
}

/* v2.0.8 — มือถือ: แถบรูปบรรยากาศใต้ที่อยู่ เลื่อนไปเรื่อย ๆ แบบจอคอม (ครบทุกรูป) */
@media (max-width: 760px) {
  body.home .about-body { min-width: 0; }
  body.home .about-thumbs { display: block; overflow: hidden; contain: inline-size; margin: 12px calc(-1 * var(--gut, 16px)) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  body.home .at-track { display: flex; gap: 8px; width: max-content; animation: at-move 70s linear infinite; }
  body.home .about-thumbs:active .at-track { animation-play-state: paused; }
  body.home .about-thumbs button { flex: 0 0 140px; height: 100px; }
  @keyframes at-move { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 4px)); } }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  body.home .about-thumbs { overflow-x: auto; }
  body.home .at-track { animation: none; }
}

/* v2.0.11 — กดจองเลยแล้วเลื่อนมาที่สรุปการเข้าพัก: เว้นที่ให้หัวเว็บ+แถบแท็บ */
#summary { scroll-margin-top: 96px; }
@media (max-width: 760px) { body.home #summary { scroll-margin-top: 136px; } }

/* v2.0.12 — มือถือ: รูปห้องพักแสดงเต็มสัดส่วนภาพ 3:2 ไม่ถูกตัดหัว-ท้าย */
@media (max-width: 760px) {
  body.home .room-media { height: auto; aspect-ratio: 3 / 2; }
  body.home .room-media .af, body.home .room-media .af-slide { height: 100%; }
}

/* v2.1.0 — ข้อความใหม่ตามรายงาน SEO */
.features p.ft-t { margin: 0; }
.pc-name span { display: block; }
.pc-name { font-size: 16px; line-height: 1.35; }
.pc-brand { margin: 0 0 10px; font: 500 13px var(--f-head); opacity: .8; }
.pc-title2 span:first-child { font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.pc-title2 span + span { font-size: 44px; }
.pc-sell { font-size: 16px; line-height: 1.4; }
.pc-sell small { display: none; }
.h2-sub { display: block; font-size: .62em; font-weight: 600; color: var(--muted); margin-top: 4px; }
.ps-lead { margin: 8px 0 0; max-width: 620px; }
.mt-guest { margin: -4px 18px 12px; padding: 6px 12px; border-radius: 12px; background: rgba(243, 203, 99, .16); color: #FFE7A6; font: 600 13px/1.35 var(--f-head); }
@media (max-width: 760px) {
  .features p.ft-t { display: block; }
  .mt-title { font-size: 23px; line-height: 1.2; }
  .mt-title small { display: block; margin-bottom: 3px; font: 600 13.5px/1.3 var(--f-head); opacity: .88; white-space: nowrap; }
}
@media (max-width: 360px) { .mt-title small { font-size: 12px; } }

/* v2.2.0 — กรอบราคา: H1 เด่นสุด ข้อความน้อยลง · มือถือใช้กรอบเดียวกันต่อกับการ์ดเลือกวัน */
.pc-h1 { margin: 0; font: 700 40px/1.1 var(--f-head); letter-spacing: -.3px; }
.pc-h1 span { display: block; margin-top: 2px; font-size: 30px; }
.price-card .pc-brand { margin: 8px 0 0; font: 500 15px var(--f-head); opacity: .85; }
.price-card .pc-from { margin: 14px 0 0; font-size: 18px; }
.price-card .pc-num { font-size: 88px; }
.price-card .pc-unit { font-size: 24px; }
.price-card .pc-sell { margin: 12px 0 16px; font: 600 17px/1.4 var(--f-head); }
.price-card .pc-sell b { display: block; color: var(--gold); font-size: 19px; }
.price-card .pc-btn { font-size: 18px; min-height: 52px; }
@media (min-width: 961px) and (max-width: 1240px) {
  .pc-h1 { font-size: 36px; } .pc-h1 span { font-size: 27px; }
  .price-card .pc-num { font-size: 76px; }
}
@media (max-width: 960px) {
  .price-card { grid-template-areas: "h1 from" "h1 price" "brand price" "sell sell" "btn btn"; }
  .pc-h1 { grid-area: h1; font-size: 28px; align-self: center; }
  .pc-h1 span { font-size: 21px; }
  .price-card .pc-brand { grid-area: brand; margin: 4px 0 0; font-size: 13.5px; align-self: start; }
  .price-card .pc-from { grid-area: from; margin: 0; font-size: 13px; }
  .price-card .pc-num { font-size: 52px; }
  .price-card .pc-unit { font-size: 14px; }
  .price-card .pc-sell { grid-area: sell; margin: 12px 0; font-size: 15px; }
  .price-card .pc-sell b { display: inline; font-size: 15px; }
  .price-card .pc-sell b::before { content: "· "; color: #fff; }
}
@media (max-width: 760px) {
  body.home .price-card { display: grid; position: relative; z-index: 2; margin: 14px 16px 0; padding: 16px 18px 6px; border-radius: 22px 22px 0 0; box-shadow: none;
    background: radial-gradient(120% 100% at 0% 0%, #A31C3B 0%, var(--wine) 55%, var(--wine-d) 100%); }
  body.home .pc-h1 { font-size: 25px; }
  body.home .pc-h1 span { font-size: 19px; }
  body.home .price-card .pc-num { font-size: 44px; letter-spacing: -1px; }
  body.home .price-card .pc-unit { font-size: 13px; }
  body.home .price-card .pc-sell { margin: 12px 0 4px; padding: 7px 12px; border: 0; border-radius: 12px; background: rgba(243, 203, 99, .16); color: #FFE7A6; font-size: 13.5px; }
  body.home .price-card .pc-sell b { color: #FFE7A6; font-size: 13.5px; }
  body.home .price-card .pc-sell b::before { color: #FFE7A6; }
  body.home .pc-btn { display: none; }
  body.home .m-ticket { margin-top: 0; border-radius: 0 0 22px 22px; background: radial-gradient(140% 120% at 100% 100%, var(--wine-d) 0%, var(--wine) 70%); }
}
@media (max-width: 360px) {
  body.home .pc-h1 { font-size: 22px; } body.home .pc-h1 span { font-size: 17px; }
  body.home .price-card .pc-num { font-size: 38px; }
  body.home .price-card .pc-sell, body.home .price-card .pc-sell b { font-size: 12.5px; }
}

/* v2.3.0 — ปุ่มส่งรายละเอียดการจองทาง LINE (หน้าจอส่งคำขอจองสำเร็จ) */
.line-cta { margin: 14px auto 6px; max-width: 360px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.btn-line { background: #06C755; color: #fff; min-height: 52px; font-size: 17px; gap: 8px; box-shadow: 0 10px 20px -12px rgba(6, 120, 60, .7); }
.btn-line:hover { background: #05b04b; color: #fff; }
.btn-line svg { width: 26px; height: 26px; flex: none; }
.line-cta small { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* v2.4.0 — Google Maps: หมุดรีสอร์ท + ปุ่มนำทาง */
.f-map { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 14px; border-radius: 99px; background: rgba(255, 245, 232, .12); color: var(--gold); font: 600 13.5px var(--f-head); text-decoration: none; }
.f-map:hover { background: rgba(255, 245, 232, .2); color: var(--gold); }
.f-map .i { width: 16px; height: 16px; }
.map-link { margin-left: 6px; font-weight: 600; color: var(--wine); white-space: nowrap; }
.ndist-list li { position: relative; }
.nd-go { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.nd-go:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.ndist-list li:hover { background: var(--cream-2, #F6EDE2); }
.nd-km { text-align: right; }
.nd-dir { display: block; font: 600 11px var(--f-head); color: var(--muted); letter-spacing: .2px; }
.nroute-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 16px; border-radius: 99px; background: var(--gold); color: #4A0614; font: 700 14px var(--f-head); text-decoration: none; position: relative; z-index: 1; }
.nroute-btn .i { width: 16px; height: 16px; }
@media (max-width: 760px) {
  body.home .nd-km { text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
  body.home .nd-dir { display: inline; font-size: 10.5px; color: var(--wine); }
}
.nroute-btn { white-space: nowrap; }
@media (max-width: 760px) { .nroute-btn { font-size: 13px; padding: 8px 14px; } }
@media (max-width: 440px) { .f-links { grid-template-columns: 1fr; gap: 0; } }