/* ============================================================
   Bon's Homestay Ninh Bình — Design System
   Style: Organic Editorial Luxury (hospitality / boutique stay)
   Tokens → Base → Layout → Components → Sections → Responsive
   ============================================================ */

/* ── 1. Design tokens ─────────────────────────────────────── */
:root {
  /* Brand — olive-moss lấy đúng từ logo (#45532B), clay (đất nung), gold (lúa chín) */
  --moss-900: #1A2312;
  --moss-800: #22301A;
  --moss-700: #45532B;   /* = màu chữ trên logo; nền này với chữ kem đạt 8.0:1 */
  --moss-600: #55663A;
  --moss-500: #6B7D4C;
  --moss-200: #CBD4B8;
  --moss-100: #E1E7D5;

  --clay-600: #9C5330;
  --clay-500: #B4633C;
  --clay-400: #C97F58;
  --gold-500: #C08A3E;
  --gold-300: #E0BE86;

  /* Semantic — light theme */
  --bg:         #FBF8F3;
  --bg-alt:     #F4EFE5;
  --surface:    #FFFFFF;
  --surface-2:  #F7F2E9;
  --ink:        #16211C;
  --ink-2:      #4B594F;
  --ink-3:      #616E66;   /* 5.05:1 trên --bg, 4.68:1 trên --bg-alt — đạt WCAG AA */
  --line:       #E5DCCC;
  --line-soft:  #EFE8DA;
  --primary:    var(--moss-700);
  --primary-hv: var(--moss-600);
  --on-primary: #FDFBF6;
  --accent:     var(--clay-500);
  --gold:       var(--gold-500);
  --danger:     #A6301F;
  --success:    #2C6A4A;

  --shadow-1: 0 1px 2px rgba(22,33,28,.05), 0 2px 8px rgba(22,33,28,.04);
  --shadow-2: 0 2px 6px rgba(22,33,28,.06), 0 12px 28px -8px rgba(22,33,28,.12);
  --shadow-3: 0 6px 16px rgba(22,33,28,.08), 0 28px 60px -16px rgba(22,33,28,.22);
  --glass:    rgba(251,248,243,.82);
  --scrim:    rgba(18,38,29,.55);

  /* Type */
  --f-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-xs:   clamp(.75rem, .72rem + .12vw, .8125rem);
  --t-sm:   clamp(.8125rem, .79rem + .14vw, .875rem);
  --t-base: clamp(.9375rem, .91rem + .18vw, 1.0625rem);
  --t-lg:   clamp(1.0625rem, 1.01rem + .3vw, 1.1875rem);
  --t-xl:   clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --t-h3:   clamp(1.375rem, 1.2rem + .85vw, 1.875rem);
  --t-h2:   clamp(1.875rem, 1.4rem + 2.1vw, 3.25rem);
  --t-h1:   clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);

  /* Space — 4/8 rhythm */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --sec-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gut:   clamp(1.25rem, .8rem + 2.2vw, 2.5rem);
  --maxw:  1180px;
  --maxw-wide: 1440px;

  /* Radius */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;
  --r-pill: 999px;
  --arch: 50% 50% var(--r-md) var(--r-md) / 44% 44% 2% 2%;

  /* Motion */
  --e-out: cubic-bezier(.22,.68,.36,1);
  --e-in:  cubic-bezier(.55,.06,.68,.19);
  --e-spring: cubic-bezier(.34,1.32,.5,1);
  --d-fast: 150ms;  --d-mid: 240ms;  --d-slow: 420ms;

  /* Layers */
  --z-base: 1; --z-sticky: 40; --z-hdr: 60; --z-scrim: 70; --z-modal: 80; --z-toast: 95;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:         #0F1512;
  --bg-alt:     #141C18;
  --surface:    #172019;
  --surface-2:  #1C2721;
  --ink:        #EFEAE0;
  --ink-2:      #AFBCB2;
  --ink-3:      #8C9A90;
  --line:       #2A3831;
  --line-soft:  #232F29;
  --primary:    #A8C286;   /* olive sáng — 9.6:1 trên nền tối */
  --primary-hv: #B8D199;
  --on-primary: #101507;
  --accent:     #E39264;
  --gold:       #D8AE6A;
  --danger:     #F08A78;
  --success:    #6FC49A;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,.45), 0 16px 32px -12px rgba(0,0,0,.55);
  --shadow-3: 0 8px 20px rgba(0,0,0,.5), 0 32px 64px -20px rgba(0,0,0,.7);
  --glass:    rgba(15,21,18,.84);
  --scrim:    rgba(0,0,0,.7);

  color-scheme: dark;
}

/* ── 2. Reset & base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Subtle paper grain — adds warmth without weight */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before { mix-blend-mode: overlay; opacity: .28; }

/* Thuộc tính [hidden] phải thắng mọi display của component (.modal, .lb, .toast…) */
[hidden] { display: none !important; }

img, svg, video, iframe { display: block; max-width: 100%; }
/* Nền chờ trong lúc ảnh tải — nhưng phải tắt cho PNG trong suốt, nếu không
   nền kem sẽ tô kín phía sau logo và biến nó thành một khối đặc. */
img { height: auto; background: var(--surface-2); }
img[src$=".png"], img[src$=".svg"] { background: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:root[data-theme="dark"] :focus-visible { outline-color: var(--gold-300, #E0BE86); }

::selection { background: var(--moss-700); color: #FDFBF6; }
:root[data-theme="dark"] ::selection { background: var(--primary); color: var(--on-primary); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  z-index: 200; padding: .75rem 1.25rem;
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--r-sm); font-weight: 600;
  transition: top var(--d-fast) var(--e-out);
}
.skip-link:focus { top: var(--s-4); }

.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ── 3. Layout ────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--wide { max-width: var(--maxw-wide); }
.sec { padding-block: var(--sec-y); position: relative; }
.sec--story { background: var(--bg-alt); }
.sec--amen  { background: var(--bg-alt); }
/* Bỏ mục Cảm nhận (vốn có nền khác) làm 5 mục cuối cùng màu nền giống hệt nhau;
   chuyển nền phụ sang mục Đặt phòng để giữ nhịp sáng–tối của trang. */
.sec--book  { background: var(--bg-alt); }
.sec--faq   { padding-bottom: calc(var(--sec-y) * 1.2); }

/* ── 4. Typography components ─────────────────────────────── */
.overline {
  display: inline-flex; align-items: center; gap: .625rem;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.overline::before {
  content: ""; width: 28px; height: 1px;
  background: currentColor; opacity: .55;
}
.overline--light { color: var(--gold-300); }

.h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.08;
}
.h2 em { font-style: italic; color: var(--primary); display: block; }
.h3 { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 500; letter-spacing: -.015em; }

.lead { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.62; max-width: 56ch; }

.sechead { max-width: 42rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead--center .overline::before { display: none; }
.sechead--center .overline::after {
  content: ""; position: absolute; left: 50%; top: 100%; margin-top: .5rem;
  transform: translateX(-50%);
  width: 40px; height: 1px; background: currentColor; opacity: .5;
}
.sechead--center .overline { position: relative; }
.sechead__lead { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--t-lg); }
.sechead--center .sechead__lead { margin-inline: auto; }

/* ── 5. Icons ─────────────────────────────────────────────── */
.ic { width: 24px; height: 24px; flex: none; }
.ic--xs { width: 15px; height: 15px; }
.ic--sm { width: 18px; height: 18px; }

/* ── 6. Buttons ───────────────────────────────────────────── */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em;
  cursor: pointer; position: relative; isolation: isolate;
  transition: background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-mid) var(--e-out),
              transform var(--d-fast) var(--e-out);
  touch-action: manipulation;
}
.btn .ic { transition: transform var(--d-mid) var(--e-out); }
.btn:hover .ic--sm { transform: translateX(3px); }
.btn:active { transform: scale(.975); }

.btn--primary { --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-bd: var(--primary); box-shadow: var(--shadow-1); }
.btn--primary:hover { --btn-bg: var(--primary-hv); --btn-bd: var(--primary-hv); box-shadow: var(--shadow-2); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bd: var(--primary); --btn-fg: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.btn--sm { min-height: 44px; padding: .5rem 1.125rem; font-size: var(--t-xs); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-width: 44px; min-height: 44px; padding: .5rem;
  border-radius: var(--r-pill); color: inherit;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
  touch-action: manipulation;
}
.iconbtn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.iconbtn:active { transform: scale(.93); }
.iconbtn__lbl { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; }
.iconbtn--round { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.iconbtn--round:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); }

.ic--moon, :root[data-theme="dark"] .ic--sun { display: none; }
:root[data-theme="dark"] .ic--moon { display: block; }

/* ── 7. Topbar ────────────────────────────────────────────── */
.topbar {
  background: var(--moss-900); color: #E7EDE7;
  font-size: var(--t-xs); position: relative; z-index: var(--z-hdr);
}
.topbar__in { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-4); min-height: 44px; }
/* min-height 44px: đây là số điện thoại bấm để gọi, phải đủ lớn cho ngón tay */
.topbar__tel { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; padding: .25rem .5rem; border-radius: var(--r-xs); }
.topbar__tel:hover { color: var(--gold-300); }

/* ── 8. Header ────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: var(--z-hdr);
  background: transparent;
  transition: background var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out);
  border-bottom: 1px solid transparent;
}
.hdr__in { display: flex; align-items: center; gap: var(--s-5); min-height: 88px; }

.hdr.is-over { color: #FFF; }
.hdr.is-over .nav__list > li > a { color: rgba(255,255,255,.9); }
.hdr.is-over .btn--primary { --btn-bg: rgba(255,255,255,.14); --btn-bd: rgba(255,255,255,.4); --btn-fg: #FFF; backdrop-filter: blur(8px); }
.hdr.is-over .btn--primary:hover { --btn-bg: rgba(255,255,255,.24); --btn-bd: rgba(255,255,255,.6); }

.hdr.is-stuck {
  /* Đặc hơn --glass (82%) để chữ hero trôi bên dưới không còn lộ mờ qua thanh header */
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 24px -12px rgba(22,33,28,.4);
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo {
  height: 54px; width: auto;
  transition: transform var(--d-mid) var(--e-spring);
}
.brand:hover .brand__logo { transform: scale(1.04); }

/* Logo xanh đậm sẽ chìm trên ảnh bìa tối và trong giao diện tối → đổi sang bản kem */
.brand__logo--light { display: none; }
.hdr.is-over .brand__logo--dark { display: none; }
.hdr.is-over .brand__logo--light { display: block; }
:root[data-theme="dark"] .brand__logo--dark { display: none; }
:root[data-theme="dark"] .brand__logo--light { display: block; }

.brand--ft .brand__logo { height: 92px; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.25rem, -.5rem + 1.6vw, 1.25rem); }
.nav__list > li > a {
  display: block; padding: .625rem .75rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2);
  position: relative;
  transition: color var(--d-fast) var(--e-out);
}
.nav__list > li > a::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .35rem;
  height: 1.5px; background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-mid) var(--e-out);
}
.nav__list > li > a:hover, .nav__list > li > a.is-active { color: var(--primary); }
.hdr.is-over .nav__list > li > a:hover, .hdr.is-over .nav__list > li > a.is-active { color: #FFF; }
.nav__list > li > a:hover::after, .nav__list > li > a.is-active::after { transform: scaleX(1); }

.hdr__act { display: flex; align-items: center; gap: .25rem; }
.burger { display: none; }
.ic--close { display: none; }
.burger[aria-expanded="true"] .ic--open { display: none; }
.burger[aria-expanded="true"] .ic--close { display: block; }

.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: var(--scrim);
  backdrop-filter: blur(3px);
  animation: fade var(--d-mid) var(--e-out);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* ── 9. Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  margin-top: -88px;   /* phải khớp .hdr__in min-height để header nổi trên ảnh bìa */
  padding-top: clamp(9.5rem, 6.5rem + 14vw, 15.5rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  color: #FFF;
  isolation: isolate;
  min-height: min(94svh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

/* Mỗi slide chồng lên nhau, chuyển bằng độ mờ nên không gây nhảy bố cục */
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1200ms var(--e-out);
  will-change: opacity;
}
.hero__slide.is-on { opacity: 1; }
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
}
/* Chỉ slide đang hiện mới phóng chậm, và chạy lại từ đầu mỗi lần đổi slide */
.hero__slide.is-on img { animation: kenburns 9s var(--e-out) forwards; }
@keyframes kenburns { from { transform: scale(1.01) } to { transform: scale(1.09) } }

/* Ảnh bìa giờ có cả ảnh sáng (trời xanh, nắng gắt) nên lớp phủ phải đậm hơn hẳn,
   nhất là dải dọc bên trái nơi đặt chữ, nếu không chữ trắng sẽ chìm. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,16,12,.80) 0%, rgba(8,16,12,.62) 32%, rgba(8,16,12,.22) 62%, rgba(8,16,12,.30) 100%),
    linear-gradient(180deg, rgba(8,16,12,.55) 0%, rgba(8,16,12,.18) 26%, rgba(8,16,12,.42) 68%, rgba(8,16,12,.85) 100%);
}

/* Chấm chọn ảnh */
.hero__dots { display: flex; gap: .5rem; margin-top: var(--s-6); }
.hero__dot {
  width: 44px; height: 44px; padding: 0;   /* 44×44 là vùng bấm tối thiểu */
  display: grid; place-items: center;
  cursor: pointer; background: none; border: 0;
}
.hero__dot::before {
  content: ""; display: block;
  width: 34px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.42);
  transition: background var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.hero__dot:hover::before { background: rgba(255,255,255,.7); }
.hero__dot[aria-current="true"]::before { background: var(--gold-300); transform: scaleY(1.6); }

.hero__in { position: relative; }
.hero__title {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.03em;
  max-width: 16ch;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.hero__title em { font-style: italic; color: var(--gold-300); display: block; }
.hero__lead {
  margin-top: var(--s-5);
  max-width: 53ch;
  font-size: var(--t-lg);
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 20px rgba(0,0,0,.4);
}

/* Quick booking bar */
.qbook {
  position: relative;
  margin-top: clamp(2rem, 1rem + 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: var(--s-2);
  padding: .625rem .625rem .625rem 1.5rem;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-3);
  color: var(--ink);
}
.qbook__f { display: flex; flex-direction: column; min-width: 0; }
.qbook__f > label { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.qbook__ctl { position: relative; display: flex; align-items: center; gap: .5rem; color: var(--primary); }
/* 44px: ô ngày/số khách là vùng bấm thật, trước đây chỉ cao 28px nên rất khó chạm trúng */
.qbook__ctl input, .qbook__ctl select {
  width: 100%; max-width: 100%; min-width: 0; min-height: 44px;
  border: 0; background: transparent; color: var(--ink);
  font-size: 16px; font-weight: 600;   /* 16px để iOS không phóng to trang khi chạm */
  padding: 0; cursor: pointer;
}
/* Thanh đặt nhanh đã có icon lịch riêng — trải icon mặc định của trình duyệt phủ kín ô
   và làm trong suốt: chỉ còn một icon, đồng thời bấm chỗ nào trong ô cũng mở được lịch. */
.qbook__ctl input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0; cursor: pointer;
}
.qbook__sep { width: 1px; height: 34px; background: var(--line); }
.qbook__go { white-space: nowrap; }

/* ── 10. Trust strip ──────────────────────────────────────── */
.strip { padding-block: clamp(2rem, 1.4rem + 2vw, 3rem); border-bottom: 1px solid var(--line-soft); }
.strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.strip__i { display: flex; align-items: flex-start; gap: .875rem; }
.strip__i .ic { color: var(--accent); margin-top: 2px; }
.strip__i strong { display: block; font-size: var(--t-sm); font-weight: 600; }
.strip__i span { display: block; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }

/* ── 11. Story ────────────────────────────────────────────── */
.story { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 6vw, 6rem); align-items: center; }
.story__media { position: relative; }
.arch {
  border-radius: var(--arch);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  aspect-ratio: 3 / 4;
}
.arch img { width: 100%; height: 100%; object-fit: cover; }
.story__inset {
  position: absolute; right: -8%; bottom: 8%;
  width: 46%; aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 6px solid var(--bg-alt);
  box-shadow: var(--shadow-2);
}
.story__inset img { width: 100%; height: 100%; object-fit: cover; }
.story__body > p + p { margin-top: var(--s-4); color: var(--ink-2); }
/* Đoạn đầu vốn dùng .lead nên to hơn và giãn dòng khác (1.62 so với 1.65) —
   ép cả cỡ chữ lẫn giãn dòng về đúng 3 đoạn còn lại cho cả khối đồng nhất */
.story__body .lead { margin-top: var(--s-5); font-size: var(--t-base); line-height: inherit; }
/* Câu kết — độ đặc trưng cao hơn .story__body > p + p để giành được màu chữ */
.story__body .story__sign {
  margin-top: var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-style: italic;
  line-height: 1.35;
  color: var(--primary);
}
.stats { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-block: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.stats dt { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.stats dd { font-family: var(--f-display); font-size: 2rem; line-height: 1.1; margin-top: .25rem; font-variant-numeric: tabular-nums; }

/* ── 12. Rooms ────────────────────────────────────────────── */
/* 3 phòng: để auto-fit tự chia thì ở khổ 768–1024px ra 2 cột, thẻ thứ 3 nằm trơ một mình.
   Nên chốt 3 cột ở desktop, còn lại xếp dọc một cột và giới hạn bề ngang cho khỏi quá khổ. */
.rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, .8rem + 1.6vw, 2rem); }
.room {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out);
}
.room:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); border-color: color-mix(in srgb, var(--primary) 30%, var(--line-soft)); }
.room__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.room:hover .room__media img { transform: scale(1.05); }
.room__tag {
  position: absolute; top: var(--s-3); left: var(--s-3);
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--glass); backdrop-filter: blur(10px);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.room__tag--hot { background: var(--accent); color: #FFF; border-color: transparent; }
.room__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); gap: var(--s-3); }
.room__name { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 500; }
.room__desc { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }
.room__spec { display: flex; flex-wrap: wrap; gap: .35rem .875rem; font-size: var(--t-xs); color: var(--ink-3); }
.room__spec li { display: inline-flex; align-items: center; gap: .35rem; }
.room__spec .ic { color: var(--primary); }
.room__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.price { display: flex; align-items: baseline; gap: .25rem; }
.price b { font-family: var(--f-display); font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.price span { font-size: var(--t-xs); color: var(--ink-3); }
.rooms__note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: var(--s-6); font-size: var(--t-sm); color: var(--ink-3); text-align: center; }
.rooms__note .ic { color: var(--success); }

/* ── 13. Amenities ────────────────────────────────────────── */
/* 10 mục: chỉ 5 cột (desktop), 2 cột (tablet) hoặc 1 cột (điện thoại) mới lấp kín.
   Ở 4 hay 3 cột sẽ thừa 2 ô trống nên các mốc dưới đây chốt cứng, không dùng auto-fit. */
.amen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.amen__i { background: var(--bg-alt); padding: clamp(1.25rem, 1rem + 1vw, 2rem); transition: background var(--d-mid) var(--e-out); }
.amen__i:hover { background: var(--surface); }
.amen__i .ic { color: var(--accent); margin-bottom: var(--s-3); }
.amen__i h3 { font-size: var(--t-base); font-weight: 600; letter-spacing: -.005em; }
.amen__i p { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55; margin-top: .3rem; }

/* ── 14. Panorama ─────────────────────────────────────────── */
.pano { position: relative; isolation: isolate; overflow: hidden; }
.pano img { width: 100%; height: clamp(240px, 34vw, 420px); object-fit: cover; }
.pano::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,15,.35), rgba(10,20,15,.72)); }
.pano__quote {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center;
  padding: var(--gut); text-align: center;
}
.pano__quote p {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
  color: #FFF; max-width: 22ch; line-height: 1.3;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}

/* ── 15. Tours ────────────────────────────────────────────── */
/* 4 tour: 4 cột hoặc 2 cột thì kín, 3 cột sẽ thừa 2 ô */
.tours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .7rem + 1.4vw, 1.75rem); }
.tour {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-5);
  color: #FFF;
  box-shadow: var(--shadow-2);
  transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
.tour:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }
.tour img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.tour:hover img { transform: scale(1.07); }
.tour::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,20,15,.05) 0%, rgba(10,20,15,.35) 45%, rgba(10,20,15,.9) 100%);
}
.tour__meta { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-300); margin-bottom: .5rem; }
.tour__name { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 500; }
.tour__desc {
  font-size: var(--t-sm); color: rgba(255,255,255,.85); line-height: 1.55;
  margin-top: .4rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--d-slow) var(--e-out), opacity var(--d-mid) var(--e-out), margin-top var(--d-slow) var(--e-out);
}
.tour:hover .tour__desc, .tour:focus-within .tour__desc { max-height: 8rem; opacity: 1; }
/* Thiết bị cảm ứng không có hover — luôn hiện mô tả, không giấu sau tương tác */
@media (hover: none) { .tour__desc { max-height: 8rem; opacity: 1; } }
.tour__price { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.22); font-size: var(--t-sm); font-weight: 600; }
.tour__price b { font-variant-numeric: tabular-nums; }
.tour__link { position: absolute; inset: 0; z-index: 2; }
.tour__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── 16. Gallery ──────────────────────────────────────────── */
/* Mosaic bằng span hàng + cột trên lưới 6 cột: các ô luôn lấp kín, không hở khoảng trắng
   (aspect-ratio rời rạc trên từng ô sẽ để lại lỗ hổng khi các ô cùng hàng lệch chiều cao). */
.gal {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(64px, 6.4vw, 96px);
  gap: clamp(.5rem, .3rem + .8vw, 1rem);
  grid-auto-flow: dense;
}
.gal__i {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  cursor: zoom-in;
  background: var(--surface-2);
  transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
.gal__i img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out), filter var(--d-mid) var(--e-out); }
.gal__i:hover { box-shadow: var(--shadow-2); }
.gal__i:hover img { transform: scale(1.06); }
.gal__i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,20,15,.6));
  opacity: 0; transition: opacity var(--d-mid) var(--e-out);
}
.gal__i:hover::after, .gal__i:focus-visible::after { opacity: 1; }
.gal__cap {
  position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 1;
  color: #FFF; font-size: var(--t-sm); font-weight: 500;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.gal__i:hover .gal__cap, .gal__i:focus-visible .gal__cap { opacity: 1; transform: none; }
.gal__i--c2 { grid-column: span 2; }
.gal__i--c3 { grid-column: span 3; }
.gal__i--c6 { grid-column: span 6; }
.gal__i--r2 { grid-row: span 2; }
.gal__i--r3 { grid-row: span 3; }
.gal__i--r4 { grid-row: span 4; }

/* ── 18. Location ─────────────────────────────────────────── */
/* stretch để bản đồ cao bằng cột chữ — trước đây bản đồ cố định 4/3.4 nên ở khổ 1024px
   nó thấp hơn cột chữ tới 46%, nhìn rất chông chênh */
.loc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: stretch; }
.dist { display: grid; gap: .25rem; margin-block: var(--s-6); }
.dist li {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .25rem;
  border-bottom: 1px dashed var(--line);
  font-size: var(--t-sm);
}
.dist li:last-child { border-bottom: 0; }
.dist .ic { color: var(--accent); }
.dist b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--primary); }
.loc__act { display: flex; flex-wrap: wrap; gap: .75rem; }

.loc__map { position: relative; }
.loc__map iframe {
  width: 100%; height: 100%; min-height: 380px; border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  filter: saturate(.85);
}
:root[data-theme="dark"] .loc__map iframe { filter: saturate(.7) brightness(.82) contrast(1.05); }
.loc__card {
  position: absolute; left: var(--s-4); bottom: var(--s-4); right: var(--s-4);
  display: flex; gap: .75rem; align-items: flex-start;
  padding: var(--s-4);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.loc__card .ic { color: var(--accent); margin-top: 2px; }
.loc__card strong { display: block; font-size: var(--t-sm); }
.loc__card span { display: block; font-size: var(--t-xs); color: var(--ink-3); }

/* ── 19. Booking form ─────────────────────────────────────── */
/* stretch + ảnh co giãn: cột trái trước đây thấp hơn biểu mẫu ~35–45%, để lại mảng trống lớn */
.book { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: stretch; }
.book__intro { display: flex; flex-direction: column; }
.book__perks { display: grid; gap: .625rem; margin-block: var(--s-6); }
.book__perks li { display: flex; align-items: center; gap: .625rem; font-size: var(--t-sm); }
.book__perks .ic { color: var(--success); flex: none; }
/* max-height: ảnh co giãn theo chiều cao biểu mẫu, nhưng biểu mẫu dài thì ảnh ngang
   bị bóp thành dải dọc hẹp (mất gần hết bề ngang). Chặn lại ở 30rem cho ảnh còn đọc được. */
.book__img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); flex: 1 1 auto; min-height: 240px; max-height: 30rem; }
.book__img img { width: 100%; height: 100%; object-fit: cover; }

.form {
  position: relative;
  display: grid; gap: var(--s-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
/* Tên phòng dài hơn hẳn "2 khách" — chia đôi đều nhau thì bị cắt cụt ở khổ desktop */
.form__row--wide-first { grid-template-columns: 1.65fr 1fr; }
/* align-content: start — bắt buộc.
   Hai ô cạnh nhau bị kéo cao bằng nhau (ô "Số điện thoại" có thêm dòng ví dụ bên dưới).
   Mặc định grid sẽ giãn đều các hàng để lấp chỗ thừa, làm hàng nhãn nở ra và đẩy ô nhập
   xuống 24px so với ô bên cạnh. "start" giữ các hàng đúng chiều cao nội dung. */
.field { display: grid; gap: .375rem; min-width: 0; align-content: start; }
.field > label, .field > legend { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.req { color: var(--danger); }
.field input, .field select, .field textarea {
  width: 100%; max-width: 100%; min-width: 0;   /* max-width: iOS cho ô ngày rộng hơn ô chữ nếu không chặn */
  min-height: 48px; padding: .75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 16px;   /* dưới 16px là iOS tự phóng to trang mỗi khi chạm vào ô nhập */
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}

/* Safari iOS dựng input[type=date] bằng giao diện gốc riêng: nó căn giữa giá trị và
   dựng ô CAO HƠN HẲN các ô chữ thường (bỏ qua height mình đặt), vì phần hiển thị giá trị
   mang line-height và padding riêng. Bốn quy tắc dưới ép ô ngày về đúng khuôn ô còn lại. */
.field input[type="date"] { -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0; padding: 0;
  line-height: 1.2; min-height: 0;
}
input[type="date"]::-webkit-datetime-edit {
  text-align: left;
  margin: 0; padding: 0;
  line-height: 1.2;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }

/* Bỏ giao diện gốc của select (mỗi hệ điều hành một kiểu) và tự vẽ mũi tên */
.field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234B594F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px 18px;
}
:root[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23AFBCB2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Chốt cứng chiều cao: ô ngày do hệ điều hành vẽ nên tự cao hơn ô chữ vài pixel */
.field input:not([type="checkbox"]), .field select { height: 52px; }
.field textarea { min-height: 96px; height: auto; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  background: var(--surface);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: .8; }
.field--set { border: 0; padding: 0; }
.field--set legend { padding: 0; margin-bottom: .5rem; }
.hint { font-size: var(--t-xs); color: var(--ink-3); }
.err { font-size: var(--t-xs); color: var(--danger); font-weight: 500; display: none; }
.err::before { content: "⚠ "; }
.field.is-bad input, .field.is-bad select { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--bg)); }
.field.is-bad .err { display: block; }

/* 4 lựa chọn → luôn 2×2, tránh trường hợp 3 cột thừa một ô lẻ */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.check { display: flex; align-items: center; gap: .625rem; min-height: 44px; padding: .5rem .875rem; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--t-sm); cursor: pointer; transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out); }
.check:hover { border-color: var(--primary); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { width: 20px; height: 20px; flex: none; display: grid; place-content: center; border: 1.5px solid var(--line); border-radius: 5px; color: transparent; transition: all var(--d-fast) var(--e-out); }
.check input:checked ~ .check__box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.check:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.check input:focus-visible ~ .check__box { outline: 2.5px solid var(--primary); outline-offset: 2px; }

.summary { display: grid; gap: .5rem; padding: var(--s-4) var(--s-5); background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-md); }
.summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }
.summary__row b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.summary__row--total { padding-top: .5rem; margin-top: .25rem; border-top: 1px solid var(--line); }
.summary__row--total span { font-weight: 600; color: var(--ink); }
.summary__row--total b { font-family: var(--f-display); font-size: 1.5rem; color: var(--primary); }
.summary__note { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }
.form__foot { font-size: var(--t-xs); color: var(--ink-3); text-align: center; }

.spinner { display: none; width: 17px; height: 17px; border: 2px solid color-mix(in srgb, var(--on-primary) 35%, transparent); border-top-color: var(--on-primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.btn.is-loading .spinner { display: block; }
.btn.is-loading { pointer-events: none; }

.ok {
  position: absolute; inset: 0; z-index: 3;
  display: grid; align-content: center; justify-items: center; gap: var(--s-4);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-xl);
  animation: okIn var(--d-slow) var(--e-spring);
}
@keyframes okIn { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } }
.ok__mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center; background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
/* Gửi tự động thất bại — đổi dấu tick xanh sang màu cảnh báo cho khỏi hiểu nhầm là đã xong */
.ok--warn .ok__mark { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.ok__mark .ic { width: 30px; height: 30px; }
.ok h3 { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 500; }
.ok p { font-size: var(--t-sm); color: var(--ink-2); max-width: 40ch; }
.ok__act { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* ── 20. FAQ ──────────────────────────────────────────────── */
.faq { max-width: 60rem; }
.acc { border-top: 1px solid var(--line); }
.acc__i { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; padding: 1.25rem .25rem; min-height: 60px;
  text-align: left; font-size: var(--t-lg); font-weight: 500;
  font-family: var(--f-display);
  transition: color var(--d-fast) var(--e-out);
}
.acc__btn:hover { color: var(--primary); }
.acc__btn .ic { color: var(--accent); transition: transform var(--d-mid) var(--e-out); flex: none; }
.acc__btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.acc__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-slow) var(--e-out); }
.acc__i.is-open .acc__p { grid-template-rows: 1fr; }
.acc__p > div { overflow: hidden; }
.acc__p p { padding: 0 3rem 1.5rem .25rem; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7; }

/* ── 21. Footer ───────────────────────────────────────────── */
.ft { background: var(--moss-900); color: #CFDBD1; padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.ft a { transition: color var(--d-fast) var(--e-out); }
.ft a:hover { color: var(--gold-300); }
.ft__in { display: grid; grid-template-columns: 1.6fr 1fr 1.25fr 1.3fr; gap: clamp(2rem, 1rem + 3vw, 4rem); padding-bottom: var(--s-8); }
.ft__brand > p { margin-top: var(--s-4); font-size: var(--t-sm); line-height: 1.65; color: rgba(207,219,209,.78); max-width: 34ch; }
.ft__soc { display: flex; gap: .375rem; margin-top: var(--s-4); }
.ft__soc a { display: grid; place-content: center; width: 44px; height: 44px; border: 1px solid rgba(207,219,209,.22); border-radius: 50%; transition: all var(--d-fast) var(--e-out); }
.ft__soc a:hover { border-color: var(--gold-300); background: rgba(224,190,134,.12); }
.ft__col h3 { font-size: var(--t-sm); font-weight: 600; color: #FFF; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-4); }
.ft__col ul { display: grid; gap: .625rem; font-size: var(--t-sm); }
.ft__col > p { font-size: var(--t-sm); color: rgba(207,219,209,.78); line-height: 1.6; }
.ft__contact li { display: flex; gap: .625rem; align-items: flex-start; line-height: 1.5; }
.ft__contact .ic { color: var(--gold-300); flex: none; margin-top: 2px; }
.ft__form { display: flex; gap: .5rem; margin-top: var(--s-4); }
.ft__form input {
  flex: 1; min-width: 0; min-height: 44px; padding: .625rem 1rem;
  background: rgba(255,255,255,.06); color: #FFF;
  border: 1px solid rgba(207,219,209,.24); border-radius: var(--r-pill);
  font-size: var(--t-sm);
}
.ft__form input::placeholder { color: rgba(207,219,209,.5); }
.ft__form input:focus { outline: none; border-color: var(--gold-300); background: rgba(255,255,255,.1); }
.ft__form .btn--primary { --btn-bg: var(--gold-300); --btn-bd: var(--gold-300); --btn-fg: #17301F; min-width: 44px; padding: .5rem .875rem; }
.ft__msg { font-size: var(--t-xs); margin-top: .5rem; min-height: 1.1em; color: var(--gold-300); }
.ft__bot { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; padding-block: var(--s-5); border-top: 1px solid rgba(207,219,209,.14); font-size: var(--t-xs); color: rgba(207,219,209,.72); }

/* ── 22. Mobile sticky CTA ────────────────────────────────── */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: .75rem var(--gut) calc(.75rem + env(safe-area-inset-bottom));
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -6px 24px -12px rgba(22,33,28,.4);
  transform: translateY(110%);
  transition: transform var(--d-slow) var(--e-out);
}
.mcta.is-on { transform: none; }
.mcta__price span { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.mcta__price strong { font-family: var(--f-display); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.mcta__price small { font-size: var(--t-xs); font-family: var(--f-body); color: var(--ink-3); font-weight: 400; margin-left: .2rem; }

/* ── 23. Lightbox ─────────────────────────────────────────── */
.lb {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  padding: clamp(1rem, .5rem + 2vw, 3rem);
  background: rgba(8,14,11,.94);
  backdrop-filter: blur(8px);
  animation: fade var(--d-mid) var(--e-out);
}
.lb__fig { display: grid; place-items: center; gap: var(--s-4); min-width: 0; }
.lb__fig img { max-width: 100%; max-height: 78svh; width: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--shadow-3); animation: lbIn var(--d-slow) var(--e-spring); }
@keyframes lbIn { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }
.lb__fig figcaption { color: rgba(255,255,255,.8); font-size: var(--t-sm); text-align: center; max-width: 60ch; }
.lb__close { position: absolute; top: clamp(1rem, .5rem + 2vw, 2rem); right: clamp(1rem, .5rem + 2vw, 2rem); z-index: 2; }
.lb .iconbtn--round { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #FFF; }
.lb .iconbtn--round:hover { background: rgba(255,255,255,.2); border-color: #FFF; color: #FFF; }

/* ── 24. Room modal ───────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--gut);
  background: var(--scrim);
  backdrop-filter: blur(6px);
  animation: fade var(--d-mid) var(--e-out);
  overflow-y: auto;
}
.modal__panel {
  position: relative;
  width: min(880px, 100%);
  max-height: 92svh; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  animation: lbIn var(--d-slow) var(--e-spring);
}
.modal__close { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; }
.modal__media { overflow: hidden; border-radius: var(--r-xl) 0 0 var(--r-xl); }
.modal__media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.modal__body { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; align-content: start; gap: var(--s-3); }
.modal__body > p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.65; }
.modal__spec { display: flex; flex-wrap: wrap; gap: .5rem; }
.modal__spec li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; background: var(--surface-2); border-radius: var(--r-pill); font-size: var(--t-xs); color: var(--ink-2); }
.modal__spec .ic { color: var(--primary); }
.modal__list { display: grid; gap: .45rem; }
.modal__list li { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.modal__list li::before { content: ""; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--accent); flex: none; }
.modal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); flex-wrap: wrap; }

/* ── 25. Toast ────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: clamp(1.5rem, 1rem + 2vw, 3rem); z-index: var(--z-toast);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .625rem;
  padding: .875rem 1.375rem;
  background: var(--moss-900); color: #EAF1EA;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-3);
  font-size: var(--t-sm); font-weight: 500;
  animation: toastIn var(--d-slow) var(--e-spring);
  max-width: min(92vw, 34rem);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 16px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* ── 26. Scroll reveal ────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--e-out), transform 620ms var(--e-out);
  transition-delay: calc(var(--rv, 0) * 70ms);
}
.reveal[data-rv="1"] { --rv: 1 } .reveal[data-rv="2"] { --rv: 2 }
.reveal[data-rv="3"] { --rv: 3 } .reveal[data-rv="4"] { --rv: 4 }
.reveal[data-rv="5"] { --rv: 5 }

/* ── 27. Responsive ───────────────────────────────────────── */
@media (max-width: 1080px) {
  .ft__in { grid-template-columns: 1fr 1fr; }
  /* Dưới 1080px: lưới đều 2 cột, mọi ô cùng chiều cao. Dùng 2 thay vì 3 cột để
     số ảnh chẵn luôn lấp kín hàng — thư viện hiện chỉ có 2 ảnh. */
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal .gal__i { grid-column: span 1; grid-row: span 3; }
  .gal .gal__i--c6 { grid-column: span 2; }
  .amen  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ô tiện nghi rộng ~470px ở khổ tablet sẽ trống trải nếu icon nằm trên chữ —
   chuyển sang icon bên trái, chữ bên phải cho kín bề ngang. */
@media (max-width: 1080px) and (min-width: 561px) {
  .amen__i { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-content: start; }
  .amen__i .ic { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .amen__i h3, .amen__i p { grid-column: 2; }
}

@media (max-width: 960px) {
  html { scroll-padding-top: 92px; }
  /* Header thấp hơn trên mobile — margin-top của hero phải đổi theo cho khớp */
  .hdr__in { min-height: 72px; }
  .hero { margin-top: -72px; }
  .brand__logo { height: 46px; }
  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: var(--z-modal);
    width: min(86vw, 340px);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    padding: calc(var(--s-8) + env(safe-area-inset-top)) var(--s-6) var(--s-6);
    transform: translateX(100%);
    transition: transform var(--d-slow) var(--e-out);
    overflow-y: auto;
    margin-left: 0;
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .25rem; }
  .nav__list > li > a { padding: .875rem 1rem; font-size: var(--t-lg); border-radius: var(--r-sm); color: var(--ink); }
  .nav__list > li > a::after { display: none; }
  .nav__list > li > a:hover, .nav__list > li > a.is-active { background: var(--surface-2); color: var(--primary); }
  .hdr__act { margin-left: auto; }
  .burger { display: inline-flex; }
  .hdr__cta { display: none; }
  .hdr.is-over .nav__list > li > a { color: var(--ink); }

  .qbook { grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); padding: var(--s-4); gap: var(--s-4); }
  .qbook__sep { display: none; }
  .qbook__go { grid-column: 1 / -1; }

  .story { grid-template-columns: 1fr; gap: var(--s-8); }
  .story__media { max-width: 30rem; margin-inline: auto; width: 100%; }
  .arch { aspect-ratio: 4 / 5; }
  .loc, .book { grid-template-columns: 1fr; }
  /* Về một cột thì bỏ co giãn, trả lại tỉ lệ cố định cho ảnh và bản đồ */
  .book__img { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .loc__map iframe { height: auto; min-height: 0; aspect-ratio: 4 / 3.4; }
  /* 3 thẻ phòng xếp dọc, giới hạn bề ngang cho khỏi thành khối quá khổ trên tablet */
  .rooms { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
  .strip__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
  .modal__panel { grid-template-columns: 1fr; max-width: 32rem; }
  .modal__media { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 40svh; }
  .mcta { display: flex; }
  /* Chừa chỗ cho thanh đặt phòng cố định, nếu không nó che mất phần cuối footer.
     Đặt vào .ft chứ không phải body để nền xanh đậm chạy hết xuống dưới cùng. */
  .ft { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 700px) {
  .hero { min-height: 88svh; }
  .hero__title { max-width: 12ch; }
  /* Chữ trải hết bề ngang nên bỏ dải tối bên trái, tăng dải tối theo chiều dọc */
  .hero__veil {
    background: linear-gradient(180deg, rgba(8,16,12,.58) 0%, rgba(8,16,12,.30) 22%, rgba(8,16,12,.60) 58%, rgba(8,16,12,.88) 100%);
  }
  .hero__dots { margin-top: var(--s-5); }
  .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(58px, 13vw, 88px); }
  .gal .gal__i { grid-column: span 1; grid-row: span 3; }
  .gal .gal__i--c6 { grid-column: span 2; }
  .form__row { grid-template-columns: 1fr; }
  .ft__in { grid-template-columns: 1fr; }
  .ft__bot { justify-content: flex-start; }
  .stats { gap: var(--s-5); }
  .story__inset { right: -2%; width: 42%; }
  .lb { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lb__nav { position: static; }
  .lb__fig { grid-row: 1; }
  .lb__nav--prev { grid-column: 1; justify-self: center; }
  .lb__nav--next { grid-column: 1; justify-self: center; }
  .lb__nav { display: inline-flex; }
  .lb { place-items: center; }
}

@media (max-width: 560px) {
  .amen   { grid-template-columns: 1fr; }
  .tours  { grid-template-columns: 1fr; }
  .tour   { aspect-ratio: 4 / 5; }
  .checks { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .strip__grid { grid-template-columns: 1fr; }
  .qbook { grid-template-columns: 1fr; }
  .ok__act { flex-direction: column; align-items: stretch; }
}

/* ── 28. Motion & print preferences ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Cần !important và đủ độ đặc trưng để thắng .hero__slide.is-on img: nếu không,
     quy tắc animation-duration:.01ms!important ở trên sẽ chạy hết hiệu ứng phóng
     trong nháy mắt rồi "forwards" giữ nguyên trạng thái đã phóng to 1.09 lần. */
  .hero__slide img, .hero__slide.is-on img { animation: none !important; transform: none !important; }
  .hero__slide { transition: none; }
  .tour__desc { max-height: 8rem; opacity: 1; }
}

@media print {
  .hdr, .topbar, .mcta, .qbook, .loc__map, .ft__form { display: none !important; }
  body { background: #FFF; color: #000; }
  .reveal { opacity: 1; transform: none; }
  .sec { padding-block: 1.5rem; break-inside: avoid; }
}