/* Layout: editorial stacked serif titles with indented second lines, full-bleed photo bands, 24px page gutter, 1440px design width */
:root {
  --cream: #f8f0e1;      /* nền trang */
  --navy: #1b224b;       /* palette/navy (trang ANFORA) */
  --panna: #f4e7cd;      /* palette/panna */
  --rosso: #6a0f26;      /* palette/rosso */
  --vino: #5a0406;       /* chữ thân nâu đỏ */
  --vino-2: #5c0203;
  --ink: #242424;
  --mute: #bfbfbf;
  --shade: rgba(16, 1, 5, 0.6);
  --placeholder: #3a2a26;

  --f-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --f-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --f-button: "Montserrat", "DM Sans", Arial, sans-serif;
  --f-serif2: "EB Garamond", "Cormorant Garamond", Georgia, serif;

  --gutter: 24px;
  --fs-display: clamp(44px, 5.56vw, 80px);   /* Display/4XL 80 */
  --fs-pillar: clamp(38px, 4.45vw, 64px);
  --fs-heading: clamp(24px, 2.23vw, 32px);   /* Heading/2XL 32 */
  --indent: clamp(32px, 6.1vw, 88px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--vino);
  font-family: var(--f-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p, h1, h2, h3 { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--panna); outline-offset: 3px; }
.on-light :focus-visible, .booking :focus-visible { outline-color: var(--rosso); }

/* ---------- Image holders (placeholder khi ảnh chưa có) ---------- */
.ph { position: relative; overflow: hidden; background: var(--placeholder); }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.noimg::after {
  content: attr(data-label);
  position: absolute; left: 12px; bottom: 10px;
  font: 600 10px/1.4 var(--f-body); letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(244, 231, 205, 0.55);
}
.shade::before { content: ""; position: absolute; inset: 0; background: var(--shade); z-index: 1; pointer-events: none; }

/* ---------- Shared type ---------- */
.display {
  font-family: var(--f-display); font-weight: 500; font-size: var(--fs-display);
  line-height: 1; letter-spacing: -0.01em; color: var(--rosso);
}
.display.tight { letter-spacing: -0.04em; }
.display em, em.display { font-style: italic; }
.stack { display: flex; flex-direction: column; }
.stack > * { white-space: nowrap; }
.indent { padding-left: var(--indent); }
.lead {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: var(--fs-heading); line-height: 1; letter-spacing: -0.01em; color: var(--vino-2);
}
.body { font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; color: var(--vino-2); }
.more {
  display: inline-block; font-size: 16px; line-height: 24px; letter-spacing: -0.01em;
  text-decoration: underline; text-underline-offset: 3px; color: var(--vino);
}
.more:hover { text-decoration-thickness: 2px; }
.eyebrow {
  font-family: var(--f-body); font-weight: 600; font-size: 12px; line-height: 1.5;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.btn-label {
  font-family: var(--f-button); font-weight: 600; font-size: 12px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- 01 Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gutter) 16px;
  background: linear-gradient(to bottom, rgba(36,28,26,.78), rgba(36,28,26,.4) 60%, rgba(36,28,26,0));
  color: var(--panna);
  transition: background-color .3s ease, padding .3s ease;
}
.site-header.solid { background: var(--rosso); padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
.hdr-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 0;
  background: none; border: 0; color: inherit; cursor: pointer; text-decoration: none;
}
.hdr-btn:last-child { justify-self: end; }
.hdr-btn svg { width: 28px; height: 8px; }
.hdr-btn svg.icon-close { width: 16px; height: 16px; } /* dấu X vuông, không bị kéo giãn */
.logo { position: relative; width: 81px; height: 80px; display: grid; place-items: center; text-decoration: none; transition: height .3s ease, width .3s ease; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease, transform .35s ease; }
/* Khi cuộn xuống (header nền đỏ): đổi logo đầy đủ sang monogram chữ L, không có tên */
.site-header.solid .logo { width: 40px; height: 44px; }
.logo .logo-mark { opacity: 0; transform: scale(.85); }
.site-header.solid .logo .logo-full { opacity: 0; transform: scale(1.1); }
.site-header.solid .logo .logo-mark { opacity: 1; transform: none; }
.site-header.solid .logo-text { font-size: 18px; letter-spacing: 0; }
.logo-text { font: 600 22px/1 var(--f-display); letter-spacing: 0.08em; color: var(--panna); }
.logo:not(.noimg) .logo-text { visibility: hidden; }

/* Menu overlay */
.menu-panel {
  position: fixed; inset: 0; z-index: 60; background: var(--rosso); color: var(--panna);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  /* 50/50: menu bên trái, ảnh phòng tràn kín nửa phải (cao hết màn hình);
     thông tin liên hệ nằm ở đáy cột trái, mỗi mục một dòng nên không bị ngắt giữa chừng */
  /* Đóng: nền nằm phía trên màn hình. Mở: nền trượt từ trên xuống phủ kín trang */
  transform: translateY(-100%); visibility: hidden;
  transition: transform .7s cubic-bezier(.76,0,.24,1), visibility 0s linear .7s;
}
.menu-panel.open { transform: none; visibility: visible; transition: transform .7s cubic-bezier(.76,0,.24,1), visibility 0s; }
/* Các mục menu hiện lần lượt sau khi nền đã xuống */
.menu-panel nav a, .menu-panel .menu-foot, .menu-panel .hdr-btn {
  opacity: 0; transform: translateY(-24px);
  transition: opacity .3s ease, transform .3s ease;
}
.menu-panel.open nav a, .menu-panel.open .menu-foot, .menu-panel.open .hdr-btn {
  opacity: 1; transform: none;
  transition: opacity .6s ease calc(.35s + var(--i, 0) * .07s), transform .6s cubic-bezier(.22,.8,.2,1) calc(.35s + var(--i, 0) * .07s);
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-panel.open, .menu-panel nav a, .menu-panel .menu-foot, .menu-panel .hdr-btn { transition: none; }
}
.menu-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: calc(28px + env(safe-area-inset-top, 0px)) var(--gutter) 24px; overflow-y: auto; }
.menu-panel .hdr-btn { align-self: flex-start; }
.menu-photo { position: relative; overflow: hidden; grid-column: 2; grid-row: 1 / -1; }
.menu-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  transform: scale(1.08); transition: transform 1.2s cubic-bezier(.22,.8,.2,1); }
.menu-panel.open .menu-photo img { transform: none; }
@media (max-width: 900px) {
  .menu-panel { grid-template-columns: 1fr; }
  .menu-photo { display: none; }
  .menu-panel .menu-foot span { white-space: normal; }
}
.menu-panel nav { margin-top: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } /* 4px cũ + 16px */
.menu-panel nav a {
  display: inline-flex; align-items: center; gap: .3em;
  font: 500 56px/1.05 var(--f-display); letter-spacing: -0.02em;
  text-decoration: none; color: var(--panna);
}
/* Mũi tên ẩn bên phải, hiện ra và trượt vào khi hover / focus */
.menu-panel nav .arrow {
  font-style: normal; font-size: .6em; opacity: 0; transform: translateX(-.4em);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,.8,.2,1);
}
.menu-panel nav a:hover, .menu-panel nav a:focus-visible { color: #fff; }
.menu-panel nav a:hover .arrow, .menu-panel nav a:focus-visible .arrow { opacity: 1; transform: none; }
.menu-panel .menu-foot { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 6px; padding: 24px var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); font-size: 14px; line-height: 1.5; }
.menu-panel .menu-foot span { white-space: nowrap; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 880px; height: 100svh; max-height: 1000px;
  display: flex; flex-direction: column; color: var(--cream);
}
.hero > .ph { position: absolute; inset: 0; }
.hero > .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(36,28,26,0) 30%, rgba(36,28,26,.25) 55%, rgba(36,28,26,.72) 100%); }
.hero-meta, .hero-title { position: relative; z-index: 2; }
.hero-spacer { flex: 1; }
.hero-meta {
  display: flex; justify-content: space-between; padding: 0 var(--gutter);
  font-size: 20px; line-height: normal;
}
.hero-meta p:last-child { text-align: right; }
.hero-meta, .hero-title h1 { text-shadow: 0 1px 14px rgba(36,28,26,.45); }
.hero-title { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--gutter) 24px; }
.hero-title h1 {
  font: 500 var(--fs-display)/1.25 var(--f-display); letter-spacing: -0.04em; text-align: center;
  text-wrap: balance;
}

/* ---------- Intro ---------- */
.intro {
  /* Lưới 12 cột: ảnh chiếm cột 1–4, toàn bộ chữ chiếm cột 7–12 (6 cột), cột 5–6 để trống */
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding: 80px var(--gutter) 80px;
}
.intro-img { grid-column: 1 / span 4; align-self: end; aspect-ratio: 449 / 561; width: 100%; } /* đáy ảnh thẳng hàng với link "Xem chi tiết" */
.intro-copy { grid-column: 7 / span 6; min-width: 0; display: flex; flex-direction: column; gap: 104px; }
.intro-copy .stack { gap: 8px; }
.intro-text { padding-left: calc((100% - 5 * var(--gutter)) / 6 * 2 + 2 * var(--gutter)); /* đoạn văn bắt đầu từ cột thứ 3 trong 6 cột chữ */ display: flex; flex-direction: column; gap: 40px; }
.intro-text .body { color: var(--vino); line-height: 24px; max-width: 448px; display: flex; flex-direction: column; }

/* ---------- Wide image ---------- */
.wide { padding: 0 var(--gutter); }
.wide .ph { aspect-ratio: 1392 / 783; width: 100%; }

/* ---------- Pillars ---------- */
.values-head { padding: 120px 30px; display: flex; justify-content: center; }
.values-inner { width: min(846px, 100%); display: flex; flex-direction: column; align-items: flex-end; }
.values-inner .stack { align-self: stretch; margin-bottom: -56px; }
.values-inner .stack .indent { padding-left: 96px; }
.side-copy { width: min(438px, 100%); display: flex; flex-direction: column; gap: 12px; }

/* Pillars: mỗi tấm ảnh cao 110vh cuộn bình thường; khối chữ được ghim giữa màn hình
   (sticky) và bị cắt theo khung ảnh của chính nó, nên khi hai ảnh nối nhau chữ cũ
   trượt đi cùng mép ảnh và chữ mới lộ dần ra như qua một ô cửa. */
.pillar {
  position: relative; height: 110vh; height: 110svh; min-height: 720px;
  color: var(--cream); text-align: center;
  clip-path: inset(0);            /* cắt chữ theo khung ảnh, không làm hỏng sticky */
  overflow: clip;                 /* không để phần track thừa kéo dài trang sau footer */
}
.pillar > .ph { position: absolute; inset: 0; }
.pillar-track {
  position: absolute; left: 0; right: 0; z-index: 2;
  top: -100vh; top: -100svh; bottom: -100vh; bottom: -100svh;
}
.pillar-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  padding: 136px var(--gutter) 96px;
}
.pillar h3 { font: 500 var(--fs-pillar)/normal var(--f-display); letter-spacing: -0.04em; text-wrap: balance; }
.pillar .rule { flex: 1; width: 1px; min-height: 80px; background: currentColor; opacity: .9; }
.pillar .pillar-copy { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pillar .pillar-copy p { width: min(448px, 100%); font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; }
.pillar .more { color: var(--cream); font-size: 16px; line-height: 1.5; }


/* Hiện dần tiêu đề khi cuộn tới (chỉ khi có JS và người dùng không tắt chuyển động) */
.reveal-on [data-reveal]:not(.in) { opacity: 0; transform: translateY(30px); }
.reveal-on [data-reveal] { transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s); }
@media (prefers-reduced-motion: reduce) { .reveal-on [data-reveal]:not(.in) { opacity: 1; transform: none; } }

/* Đường kẻ dọc trong mỗi pillar được vẽ dần từ trên xuống khi tiêu đề lộ ra */
.pillar .rule { transform-origin: top center; }
.reveal-on .pillar .rule { transition: transform .3s cubic-bezier(.4,0,.2,1); } /* vẽ xong trong 300ms */
.reveal-on .pillar:not(.in) .rule { transform: scaleY(0); }

/* ---------- The Love Archive ---------- */
.archive { display: flex; justify-content: center; align-items: stretch; gap: 24px; padding: 160px var(--gutter); }
.archive-title { width: 320px; display: flex; flex-direction: column; }
.archive-title .r { align-self: flex-end; }
.archive-img { width: 330px; height: 440px; flex: none; }
.archive-side { width: 320px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.archive-side .lead { color: var(--vino); }
.archive-side .body { color: var(--vino); }

/* ---------- Rooms ---------- */
/* Rooms: 5 cột co giãn bằng flex. Khi hover một phòng, flex-basis của nó tăng thêm 80px (cộng 48px padding);
   phần còn lại chia đều cho 5 cột nên phòng đó rộng thêm đúng 64px (80 × 4/5), 4 cột kia mỗi cột hẹp lại 16px. */
.rooms { display: flex; height: calc(100vh - 60px); height: calc(100svh - 60px); /* cao bằng màn hình trừ 60px header cố định */ scroll-margin-top: 60px; background: var(--panna); }
.rooms > .room { flex: 1 1 0; min-width: 0; transition: flex-basis .6s cubic-bezier(.22,.8,.2,1); }
.room {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px; color: var(--panna); text-decoration: none; overflow: hidden;
}
.room > .ph { position: absolute; inset: 0; }
.room > .ph img { transition: transform .8s ease; }
.room:hover > .ph img { transform: scale(1.04); }
.room > .ph img.flip { transform: scaleX(-1); }
.room:hover > .ph img.flip { transform: scaleX(-1.04) scaleY(1.04); }
.room > .ph::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(16,1,5,.35), rgba(16,1,5,0) 18%, rgba(16,1,5,0) 62%, rgba(16,1,5,.7)); }
.room.dim > .ph::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.2); z-index: 1; }
.room > :not(.ph) { position: relative; z-index: 2; }
.room-text { display: flex; flex-direction: column; gap: 7px; }
.room-text h3 { font: 500 32px/1.05 var(--f-display); white-space: nowrap; }
.room.all { background: var(--rosso); padding: 30px 20px; }
/* Nút "Xem phòng" / "Xem tất cả": nằm ngay dưới dòng phụ, cùng khối với tên phòng.
   Lúc nghỉ cả khối chữ bị đẩy xuống đúng bằng chiều cao nút (7px gap + 16px + 18px = 41px)
   nên nút nằm khuất dưới đáy card; khi hover cả khối trượt lên cùng lúc, nút đi liền với chữ. */
.room { --cta-shift: 41px; }
.room-text { transform: translateY(var(--cta-shift)); transition: transform .55s cubic-bezier(.22,.8,.2,1); }
.room-cta { height: 18px; margin-top: 16px; }
.room-cta-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 18px; padding: 0;
  border: 0; background: transparent; color: var(--panna); font-size: 14px; line-height: 18px;
  white-space: nowrap; opacity: 0; transition: opacity .45s ease;
}
/* Nút dạng chữ, không viền, không padding; khi rê chuột lên thì gạch chân và mũi tên nhích sang phải */
.room-cta-btn > span:last-child { transition: transform .25s ease; }
.room-cta-btn:hover .btn-label { text-decoration: underline; text-underline-offset: 4px; }
.room-cta-btn:hover > span:last-child { transform: translateX(4px); }
@media (hover: hover) and (min-width: 1201px) {
  .rooms > .room:hover, .rooms > .room:focus-visible { flex-basis: calc(80px + 48px); } /* 48px = padding ngang của card */
  .rooms > .room.all:hover, .rooms > .room.all:focus-visible { flex-basis: calc(80px + 40px); } /* card đỏ có padding ngang 40px */
}
.room:hover .room-text, .room:focus-visible .room-text { transform: none; }
.room:hover .room-cta-btn, .room:focus-visible .room-cta-btn { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rooms > .room, .room-text, .room-cta-btn { transition: none; }
}

.room.all h3 { font-size: 30px; }

/* ---------- Anfora ---------- */
.anfora { padding: 160px var(--gutter) 80px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.anfora-head { width: min(677px, 100%); display: flex; flex-direction: column; align-items: flex-end; gap: 40px; }
.anfora-head .stack { align-self: stretch; gap: 8px; }
.anfora-head .display { font-weight: 600; }
.anfora-head .stack .indent { width: 374px; padding-left: 64px; text-align: right; }
.anfora-gallery { width: 100%; display: grid; grid-template-columns: 329fr 329.5fr 329.5fr 329fr; gap: 25px; }
.anfora-gallery .ph { height: 390px; }

/* ---------- Testimonials ---------- */
.reviews { position: relative; min-height: 100vh; min-height: 100svh; /* cao đúng một màn hình, nội dung căn giữa theo chiều dọc */ padding: 80px var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 80px; color: var(--cream); }
.reviews > .ph { position: absolute; inset: 0; }
.reviews > :not(.ph) { position: relative; z-index: 2; }
.reviews-head { width: min(1357px, 100%); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.reviews-head .display { color: var(--cream); }
.score { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.score p:last-child { font-size: clamp(18px, 1.67vw, 24px); line-height: 1.25; letter-spacing: -0.01em; color: var(--mute); }
.cards { width: min(1387px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.card { min-height: 296px; padding: 24px; display: flex; flex-direction: column; gap: 24px; background: var(--cream); color: var(--ink); margin: 0; }
.card blockquote { margin: 0; flex: 1; display: flex; flex-direction: column; gap: 40px; }
.card .q { font: italic 500 var(--fs-heading)/1 var(--f-display); letter-spacing: -0.01em; color: var(--rosso); }
.card p { font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; }
.card figcaption { font-size: 16px; line-height: 1.25; }
.card.dark { background: var(--rosso); color: var(--cream); }
.card.dark .q { color: var(--cream); }

/* Hiệu ứng như phần review của Rumaya: khi section lọt vào màn hình, ảnh nền thu từ 110% về 100%,
   tiêu đề và các thẻ đánh giá lần lượt hiện lên. Chạy một lần. */
.reveal-on .reviews > .ph img { transform: scale(1.1); transition: transform 1.8s cubic-bezier(.22,.8,.2,1); }
.reveal-on .reviews.in > .ph img { transform: none; }
.reveal-on .reviews .reviews-head, .reveal-on .reviews .card {
  opacity: 0; transform: translateY(40px);
  transition: opacity .9s ease var(--d, 0s), transform .9s cubic-bezier(.22,.8,.2,1) var(--d, 0s);
}
.reveal-on .reviews.in .reviews-head, .reveal-on .reviews.in .card { opacity: 1; transform: none; }
.reviews .card:nth-child(1) { --d: .25s; }
.reviews .card:nth-child(2) { --d: .37s; }
.reviews .card:nth-child(3) { --d: .49s; }

/* ---------- Booking ---------- */
.booking { padding: 120px var(--gutter); display: flex; flex-direction: column; gap: 40px; }
.booking-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.booking-row .indent { padding-left: 88px; }
.booking-side { width: min(479px, 100%); display: flex; flex-direction: column; gap: 12px; }
.booking-side h3 { font: 500 var(--fs-heading)/1.2 var(--f-display); color: var(--rosso); }
.booking-form { border-top: 1px solid #000; padding-top: 40px; display: flex; align-items: flex-end; gap: 32px; }
.field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.field label { color: #000; white-space: nowrap; }
.control { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #000; }
.control input, .control select {
  flex: 1; min-width: 0; padding: 16px 0; border: 0; background: transparent; color: var(--ink);
  font: 400 16px/1.25 var(--f-body); letter-spacing: -0.01em; appearance: none; -webkit-appearance: none; border-radius: 0;
}
.control input:focus, .control select:focus { outline: none; }
.control:focus-within { border-bottom-width: 2px; margin-bottom: -1px; }
.control svg { width: 18px; height: 18px; flex: none; pointer-events: none; }
.control input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 24px; height: 24px; cursor: pointer; }
.control { position: relative; }
.btn {
  height: 56px; padding: 0 30px; border: 1px solid #000; border-radius: 999px; flex: none;
  background: var(--rosso); color: var(--cream); cursor: pointer;
  transition: background-color .2s ease;
}
.btn:hover { background: #50091c; }
.form-note { min-height: 24px; font-size: 16px; line-height: 1.5; color: var(--rosso); }
.form-note.error { color: #9b1c1c; }

/* ---------- Footer ---------- */
.footer { background: var(--rosso); color: var(--panna); padding: 80px var(--gutter) 24px; display: flex; flex-direction: column; align-items: center; gap: 60px; overflow: hidden; }
.foot-cols { width: 100%; display: flex; gap: 24px; }
.foot-col { display: flex; flex-direction: column; gap: 24px; }
.foot-col.contact { flex: 1; min-width: 0; }
.foot-col h4 { margin: 0; font: 600 16px/1.5 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.foot-col.contact ul { gap: 7px; }
.foot-col li, .foot-col li a { font: 500 16px/1.5 var(--f-body); color: var(--panna); text-decoration: none; overflow-wrap: anywhere; }
.foot-col li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-right { width: 566px; display: flex; gap: 30px; }
.foot-right .foot-col:first-child { width: 260px; }
.wordmark { width: 100%; text-align: center; font: 500 27.5vw/1 var(--f-display); letter-spacing: -0.01em; color: var(--panna); }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .intro { min-height: 0; }
  .intro-text { padding: 0; }
  .intro-copy .stack > * { white-space: normal; }
  .rooms { display: grid; grid-template-columns: repeat(5, 260px); overflow-x: auto; scroll-snap-type: x mandatory; height: calc(100vh - 60px); height: calc(100svh - 60px); }
  .room { scroll-snap-align: start; }
  .anfora-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anfora-gallery .ph { height: auto; aspect-ratio: 329 / 390; }
  .foot-right { width: auto; }
  .foot-right .foot-col:first-child { width: auto; }
}
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .intro { grid-template-columns: 1fr; row-gap: 56px; padding-top: 64px; }
  .intro-img, .intro-copy { grid-column: 1; }
  .intro-img { order: 2; max-width: 449px; }
  .intro-copy { gap: 40px; }
  .archive { flex-wrap: wrap; padding-block: 96px; }
  .archive-title, .archive-side { width: min(330px, 100%); }
  .archive-title { justify-content: flex-start; }
  .archive-img { width: min(330px, 100%); height: auto; aspect-ratio: 330 / 440; }
  .reviews-head { flex-direction: column; align-items: flex-start; }
  .score { align-items: flex-start; }
  .cards { grid-template-columns: 1fr; }
  .booking-row { flex-direction: column; align-items: flex-start; }
  .booking-form { flex-wrap: wrap; }
  .field { flex: 1 1 calc(50% - 16px); }
  .btn { width: 100%; }
  .foot-cols { flex-direction: column; gap: 48px; }
  .pillar { min-height: 600px; }
  .pillar-pin { padding: 112px var(--gutter) 72px; gap: 28px; }
}
@media (max-width: 560px) {
  .hero { min-height: 640px; }
  .hero-meta { font-size: 15px; }
  .values-head { padding: 80px var(--gutter); }
  .values-inner .stack { margin-bottom: 32px; }
  .values-inner .stack .indent { padding-left: var(--indent); }
  .stack > * { white-space: normal; }
  .anfora { padding-top: 96px; gap: 48px; }
  .anfora-head .stack .indent { width: auto; padding-left: var(--indent); text-align: left; }
  .booking { padding-block: 80px; }
  .booking-row .indent { padding-left: var(--indent); }
  .field { flex-basis: 100%; }
  .foot-right { flex-wrap: wrap; gap: 40px; }
  .hdr-btn .btn-label.opt { display: none; }
}

/* =====================================================================
   CÁC TRANG CON: Về LIMONI · Phòng nghỉ · ANFORA · Liên hệ
   ===================================================================== */

/* ---------- Page hero ---------- */
.phero {
  position: relative; min-height: 640px; height: 100vh; height: 100svh; max-height: 1000px;
  display: flex; flex-direction: column; color: var(--cream);
}
.phero > .ph { position: absolute; inset: 0; }
.phero > .ph::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,0) 50%), linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(13,10,8,.85) 100%); }
.phero.dim > .ph::after { background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(13,10,8,.85) 100%); }
.phero.side > .ph::after { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.32) 50%, rgba(0,0,0,0) 100%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 45%, rgba(13,10,8,.85) 100%); }
.phero-inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding: 120px clamp(var(--gutter), 5.6vw, 80px) 24px; }
.phero h1 { font: 500 var(--fs-display)/1 var(--f-display); letter-spacing: -0.01em; text-wrap: balance; text-shadow: 0 1px 14px rgba(36,28,26,.35); }
.phero h1 em { font-style: italic; }
.phero p.lede { width: min(560px, 100%); font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: #f1f1f1; }
/* Về LIMONI: tiêu đề trái, đoạn mô tả góc phải dưới */
.phero.bottom-split .phero-inner { justify-content: flex-end; gap: 10px; }
.phero.bottom-split p.lede { align-self: flex-end; }
/* Phòng nghỉ: căn giữa phía dưới */
.phero.bottom-center .phero-inner { justify-content: flex-end; align-items: center; text-align: center; gap: 10px; }
/* ANFORA: tiêu đề giữa màn hình, mô tả dưới cùng */
.phero.middle .phero-inner { justify-content: flex-end; align-items: center; text-align: center; }
.phero.middle h1 { margin-block: auto; }
/* Liên hệ: tiêu đề trái, giữa chiều cao */
.phero.left-middle .phero-inner { justify-content: center; gap: 24px; }
.phero.left-middle h1 { line-height: 1.25; }
.hero-links { display: flex; flex-wrap: wrap; gap: 12px 40px; padding-left: clamp(0px, 5.6vw, 80px); font-size: 16px; line-height: 24px; }
.hero-links a { color: #f1f1f1; text-underline-offset: 3px; }

/* ---------- Khối chữ + lưới 12 cột dùng chung ---------- */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 80px var(--gutter); }
.copy-6 { grid-column: 7 / span 6; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.copy-6 .text { width: min(560px, 100%); display: flex; flex-direction: column; gap: 24px; }
.copy-6 .text .lead { color: var(--vino-2); }
.copy-6 .text .body { color: var(--vino); line-height: 24px; display: flex; flex-direction: column; }

/* ---------- Ảnh ngang lớn ---------- */
.wide-img { padding: 0 var(--gutter); }
.wide-img .ph { width: 100%; aspect-ratio: 1392 / 783; }
.full-img .ph { width: 100%; aspect-ratio: 2368 / 1328; }

/* ---------- Về LIMONI: khối "Không gian kể chuyện tình" ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 40px clamp(var(--gutter), 5.6vw, 80px); }
.story .ph.big { aspect-ratio: 449 / 561; }
.story-side { display: flex; gap: 16px; align-items: stretch; min-width: 0; }
.story-text { display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; min-width: 0; flex: 1 1 55%; }
.story-text h2 { font: 600 clamp(40px, 3.9vw, 56px)/1 var(--f-display); letter-spacing: -0.01em; color: var(--rosso); }
.story-text .body { color: var(--vino); display: flex; flex-direction: column; gap: 12px; }
.story-side .ph.small { flex: 1 1 45%; align-self: flex-start; aspect-ratio: 192 / 240; }

/* ---------- Pillar đơn (CTA cuối trang) ---------- */
.pillar.solo .pillar-title { font: 500 var(--fs-pillar)/1.1 var(--f-display); letter-spacing: -0.04em; text-wrap: balance; }
.pillar.solo.shade-50 > .ph::before { background: rgba(0,0,0,.5); }

/* ---------- The Love Archive (trang phòng) ---------- */
.archive .lead { color: var(--vino); }

/* ---------- Phòng nghỉ: danh sách tầng + thẻ phòng ---------- */
.floors {
  background: var(--rosso); color: var(--cream);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 11vw, 160px);
  height: calc(100vh - 60px); height: calc(100svh - 60px); min-height: 640px; max-height: 900px;
  padding: var(--gutter); scroll-margin-top: 60px;
}
.floors-left { display: flex; flex-direction: column; justify-content: flex-end; gap: 40px; min-width: 0; }
.floors-left h2 { display: flex; flex-direction: column; width: 320px; max-width: 100%; }
.floors-left h2 span, .floors-left h2 em { font: 500 64px/1 var(--f-display); letter-spacing: -0.01em; }
.floors-left h2 em { font-style: italic; align-self: flex-end; }
.acc-item { border-top: 1px solid currentColor; }
.acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; background: none; border: 0; color: inherit; cursor: pointer; text-align: left;
  font: 400 16px/1.25 var(--f-body); letter-spacing: -0.01em;
}
.acc-icon { position: relative; width: 16px; height: 16px; flex: none; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s ease; }
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-item.open .acc-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.acc-item.open .acc-icon::after { transform: translate(-50%, -50%) rotate(135deg); }
.floors .acc-icon { width: 22px; height: 22px; }
.floors .acc-icon::before, .floors .acc-icon::after { width: 22px; }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.22,.8,.2,1); }
.acc-body > div { overflow: hidden; }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.floor-detail { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 16px; }
.floor-detail p { width: 240px; font-size: 14px; line-height: 1.25; letter-spacing: -0.01em; }
.floor-plan { width: 290px; max-width: 55%; height: auto; flex: none; color: var(--cream); }
.floors-right { display: flex; justify-content: flex-end; min-height: 0; }
.floor-rooms {
  width: min(400px, 100%); height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 32px;
}
.floor-rooms::-webkit-scrollbar { display: none; }
.floor-rooms.swap { animation: floorSwap .5s ease; }
@keyframes floorSwap { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.room-card {
  position: relative; flex: none; height: 461px; padding: 24px; overflow: hidden; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--panna); text-decoration: none;
}
.room-card > .ph { position: absolute; inset: 0; }
.room-card > .ph::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.05) 25%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.6)); }
.room-card > .ph img { transition: transform .8s ease; }
.room-card:hover > .ph img { transform: scale(1.04); }
.room-card > :not(.ph) { position: relative; z-index: 2; }
.room-card h3 { font: 500 32px/1.05 var(--f-display); }
.room-card .room-text { transform: none; }
.scroll-hint { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }

/* ---------- Câu hỏi thường gặp ---------- */
.faq { padding: 80px var(--gutter); display: flex; flex-direction: column; gap: 56px; color: var(--rosso); }
.faq-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.faq-head h2 { grid-column: 2; display: flex; flex-direction: column; font: 500 var(--fs-display)/1 var(--f-display); letter-spacing: -0.01em; }
.faq-head h2 em { font-style: italic; }
.faq-body { border-top: 1px solid var(--rosso); padding-top: 24px; display: grid; grid-template-columns: 1fr minmax(0, 676px); gap: 40px; }
.faq-body > p { font-size: 14px; line-height: 1.25; letter-spacing: -0.01em; max-width: 220px; }
.faq-list .acc-item { border-top: 1px solid var(--rosso); }
.faq-list .acc-item:first-child { border-top: 0; }
.faq-list .acc-item:last-child { border-bottom: 1px solid var(--rosso); }
.faq-list .acc-head { padding: 24px 0; }
.faq-list .acc-item:first-child .acc-head { padding-top: 0; }
.faq-list .acc-body p { max-width: 480px; padding-bottom: 24px; font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; }

/* ---------- ANFORA ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: center; padding: var(--gutter); }
.split .copy { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.split .copy .body { padding: 0 clamp(0px, 8.2vw, 118px) 0 clamp(0px, 6.1vw, 88px); color: var(--vino); line-height: 24px; display: flex; flex-direction: column; gap: 24px; }
.split .ph.tall { height: min(785px, 90vh); }
.rosso-band { background: var(--rosso); color: var(--cream); padding: 120px 30px 24px; display: flex; flex-direction: column; gap: 80px; overflow: hidden; }
.rosso-band .band-head { padding: 0 clamp(0px, 5.6vw, 80px); display: flex; flex-direction: column; align-items: flex-end; }
.rosso-band .band-head .stack { align-self: stretch; margin-bottom: -56px; }
.rosso-band .band-head .display { color: var(--cream); }
.rosso-band .band-head .stack .indent { padding-left: 96px; }
.rosso-band .band-head .body { width: min(438px, 100%); color: var(--cream); display: flex; flex-direction: column; gap: 16px; }
.strip { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -30px; padding: 0 30px; cursor: grab; }
.strip::-webkit-scrollbar { display: none; }
.strip .ph { flex: none; height: 320px; scroll-snap-align: start; }
.strip .w-wide { aspect-ratio: 569 / 320; }
.strip .w-narrow { aspect-ratio: 257 / 320; }
.strip .w-square { aspect-ratio: 1740 / 1688; }
.strip-hint { align-self: flex-end; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin-top: -56px; }

.philosophy {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 11vw, 160px);
  height: calc(100vh - 60px); height: calc(100svh - 60px); min-height: 640px; max-height: 900px; padding: var(--gutter);
}
.philosophy .left { display: flex; flex-direction: column; justify-content: flex-end; gap: 40px; min-width: 0; }
.philosophy .left .indent { padding-left: 80px; }
.philosophy .rule-text { display: flex; gap: 16px; align-items: flex-start; }
.philosophy .rule-text::before { content: ""; flex: 1; height: 1px; margin-top: 10px; background: var(--rosso); }
.philosophy .rule-text p { flex: 1; color: var(--rosso); font-size: 16px; line-height: 1.25; }
.menu-list { justify-self: end; width: min(616px, 100%); height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rosso) transparent; display: flex; flex-direction: column; gap: 40px; }
.menu-box { border: 1px solid var(--rosso); color: var(--rosso); flex: none; }
.menu-box h3 { padding: 16px 24px; border-bottom: 1px solid var(--rosso); font: 400 24px/1.25 var(--f-body); letter-spacing: -0.01em; }
.menu-box ul { list-style: none; margin: 0; padding: 24px; display: flex; flex-direction: column; }
.menu-box li { display: flex; flex-direction: column; gap: 10px; padding-block: 24px; border-top: 1px solid rgba(106,15,38,.35); }
.menu-box li:first-child { padding-top: 0; border-top: 0; }
.menu-box li:last-child { padding-bottom: 0; }
.menu-box .dish { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
.menu-box .desc { font-size: 16px; line-height: 1.25; }

/* ---------- Liên hệ ---------- */
.contact-book { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 640px); justify-content: space-between; gap: 64px; min-height: 800px; padding: 120px clamp(var(--gutter), 7vw, 100px); }
.contact-book .left { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; color: var(--rosso); }
.contact-book h2 { font: 500 var(--fs-display)/1 var(--f-display); letter-spacing: -0.01em; }
.contact-book h2 em { font-style: italic; }
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-info .divider { width: 120px; height: 1px; background: var(--rosso); opacity: .3; }
.contact-info dl { margin: 0; display: flex; flex-direction: column; gap: 24px; }
.contact-info dt { font: 600 12px/1.4 var(--f-body); letter-spacing: .1em; }
.contact-info dd { margin: 4px 0 0; font: 400 18px/1.35 var(--f-serif2); }
.cform { display: flex; flex-direction: column; gap: 40px; }
.cform .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.cform .full { grid-column: 1 / -1; }
.cfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cfield label { font: 600 12px/1.5 var(--f-button); letter-spacing: .2em; text-transform: uppercase; color: var(--rosso); opacity: .8; }
.cfield input, .cfield select, .cfield textarea {
  width: 100%; padding: 14px 16px; border: 1px solid rgba(106,15,38,.13); border-radius: 0; background: rgba(255,255,255,.35);
  color: var(--ink); font: 400 14px/1.4 var(--f-body); appearance: none; -webkit-appearance: none;
}
.cfield textarea { height: 140px; resize: vertical; }
.cfield input::placeholder, .cfield textarea::placeholder { color: rgba(27,34,75,.5); }
.cfield input:focus, .cfield select:focus, .cfield textarea:focus { outline: none; border-color: var(--rosso); box-shadow: 0 0 0 1px var(--rosso); }
.cfield select { background-image: linear-gradient(45deg, transparent 50%, var(--rosso) 50%), linear-gradient(135deg, var(--rosso) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.link-submit { align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; color: var(--rosso); font: 500 32px/1.05 var(--f-display); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.link-submit:hover { text-decoration-thickness: 2px; }
.cform .form-note { margin-top: -24px; }

/* ---------- Responsive cho các trang con ---------- */
@media (max-width: 1200px) {
  .copy-6 { grid-column: 5 / span 8; }
  .story { gap: 40px; }
  .floors, .philosophy { column-gap: 40px; }
  .contact-book { grid-template-columns: 1fr 1fr; padding-inline: var(--gutter); }
}
@media (max-width: 900px) {
  .grid12 { grid-template-columns: 1fr; padding-block: 64px; }
  .copy-6 { grid-column: 1; }
  .story { grid-template-columns: 1fr; }
  .floors, .philosophy { grid-template-columns: 1fr; height: auto; max-height: none; row-gap: 40px; padding-block: 64px; }
  .floor-rooms { width: 100%; height: auto; max-height: 80vh; }
  .floors-right { order: 2; }
  .menu-list { justify-self: stretch; width: 100%; height: auto; max-height: 80vh; }
  .faq-head, .faq-body { grid-template-columns: 1fr; }
  .faq-head h2 { grid-column: 1; }
  .split { grid-template-columns: 1fr; }
  .split .copy .body { padding: 0; }
  .split .ph.tall { height: 70vh; }
  .rosso-band { padding-top: 80px; gap: 56px; }
  .rosso-band .band-head .stack { margin-bottom: 32px; }
  .strip-hint { margin-top: -32px; }
  .contact-book { grid-template-columns: 1fr; padding-block: 64px; min-height: 0; }
}
@media (max-width: 560px) {
  .phero-inner { padding-inline: var(--gutter); }
  .floors-left h2 span, .floors-left h2 em { font-size: 48px; }
  .floor-detail { flex-direction: column; }
  .floor-plan { max-width: 100%; }
  .room-card { height: 400px; }
  .cform .fields { grid-template-columns: 1fr; }
  .strip .ph { height: 240px; }
  .rosso-band .band-head .stack .indent, .philosophy .left .indent { padding-left: var(--indent); }
}
.menu-panel nav a[aria-current="page"] .arrow { opacity: .55; transform: none; }
@media (min-width: 901px) { .contact-book h2 { white-space: nowrap; } .contact-book { grid-template-columns: minmax(0, 560px) minmax(0, 640px); } }
@media (max-width: 900px) {
  .menu-panel { grid-template-columns: minmax(0, 1fr); }
  .menu-panel .menu-foot span { white-space: normal; }
  .floors, .philosophy { grid-template-columns: minmax(0, 1fr); }
}
/* ANFORA — 3 trụ cột ẩm thực */
.menu-list { justify-content: flex-end; }
.pillar-box .box-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.pillar-box .desc { font-size: 16px; line-height: 1.4; }
.pillar-box .example { font-size: 14px; line-height: 1.4; opacity: .8; font-style: italic; }
.veg-note { color: var(--rosso); font-size: 14px; line-height: 1.4; }

/* =====================================================================
   CẬP NHẬT THEO FIGMA (06/10): hệ chữ mới + nội dung mới
   Header/Regular 80 · lh 1.1 · ls -5%   |  Header/Italic 80 · lh 1.1 · ls -4%
   Header/L 64 · lh 1.25 · ls -4%        |  SubHeader italic 32 · lh 1 · ls -5%
   Body/16 · 16/24 · ls -1%              |  Body/24 · 24/1.25 · ls -1%
   ===================================================================== */
.display, .display.tight { line-height: 1.1; letter-spacing: -0.05em; }
em.display, .display em { letter-spacing: -0.04em; }
.lead { letter-spacing: -0.05em; }
.body { line-height: 24px; }
.pillar h3, .pillar.solo .pillar-title { line-height: 1.25; letter-spacing: -0.04em; }
.phero h1, .hero-title h1 { line-height: 1.1; letter-spacing: -0.05em; }
.hero-title h1 { line-height: 1.25; }
.faq-head h2, .contact-book h2 { line-height: 1.1; letter-spacing: -0.05em; }
.faq-head h2 em, .contact-book h2 em { letter-spacing: -0.04em; }
.story-text h2 { letter-spacing: -0.05em; }

/* Link "Xem chi tiết →": chữ thường, gạch chân khi rê chuột (ANFORA giữ gạch chân sẵn) */
.more { text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.more.ul { text-decoration: underline; }

/* Hero trang chủ: lớp phủ tông nâu ấm */
.hero > .ph::after { background: linear-gradient(180deg, rgba(41,21,2,.24) 0%, rgba(41,21,2,0) 50%), linear-gradient(180deg, rgba(41,21,2,0) 45%, rgba(41,21,2,.6) 100%); }

/* Thanh đặt phòng: nhãn DM Sans 16 màu đỏ Rosso, gạch chân đỏ */
.booking-side h3, .booking-side .body { color: var(--rosso); }
.booking-form { border-top-color: var(--rosso); }
.field label { font: 400 16px/24px var(--f-body); letter-spacing: -0.01em; text-transform: none; color: var(--rosso); }
.control { border-bottom-color: var(--rosso); }
.control input, .control select { color: var(--rosso); line-height: 24px; }
.control svg { stroke: var(--rosso); }
.btn { border-color: var(--rosso); color: var(--cream); }

/* Footer: toàn bộ chữ DM Sans 16/24, tiêu đề cột cũng 16 thường; chữ LIMONI sát đáy */
.footer { padding-bottom: 0; }
.foot-col h4 { font: 400 16px/24px var(--f-body); letter-spacing: -0.01em; text-transform: none; }
.foot-col li, .foot-col li a { font: 400 16px/24px var(--f-body); letter-spacing: -0.01em; }
.wordmark { margin-bottom: -0.12em; }

/* ---------- Về LIMONI ---------- */
.copy-6 .stack .h-l { font: 500 var(--fs-pillar)/1.25 var(--f-display); letter-spacing: -0.04em; color: var(--rosso); }
.story { gap: 40px; padding: 40px var(--gutter); }
.story-side { gap: 24px; }

/* ---------- Phòng nghỉ ---------- */
.floor-rooms { width: 100%; padding-left: clamp(0px, 5.6vw, 80px); }
.room-card { height: auto; aspect-ratio: 315 / 362.8; }

/* ---------- Câu hỏi thường gặp (dùng chung) ---------- */
.faq { padding-block: 56px; }
.faq-body { padding-top: 16px; }
.faq-body > p { font-size: 16px; line-height: 24px; max-width: 260px; }
.faq-list .acc-head { padding: 24px 0 16px; line-height: 24px; }
.faq-list .acc-item:first-child .acc-head { padding-top: 0; }
.faq-list .acc-body p { font-size: 16px; line-height: 24px; padding-bottom: 16px; }

/* ---------- ANFORA: tông xanh navy ---------- */
.page-anfora .split .display, .page-anfora .philosophy .display { color: var(--navy); }
.page-anfora .split .copy .stack { padding-left: 40px; }
.page-anfora .split .copy .body { color: var(--navy); padding: 0 88px; }
.navy-band { background: var(--navy); }
.navy-band .band-head .body { line-height: 24px; }
.strip { gap: 32px; }
.page-anfora .philosophy .rule-text::before { background: var(--navy); }
.page-anfora .philosophy .rule-text .rt { flex: 1; display: flex; flex-direction: column; gap: 16px; color: var(--navy); font-size: 16px; line-height: 24px; }
.page-anfora .philosophy .rule-text .rt a { color: var(--navy); text-decoration: none; }
.page-anfora .philosophy .rule-text .rt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-anfora .menu-list { overflow: visible; height: auto; align-self: end; }
.num-box { border: 1px solid var(--navy); color: var(--navy); flex: none; }
.num-box .num { padding: 16px 24px; border-bottom: 1px solid var(--navy); font: 400 24px/1.25 var(--f-body); letter-spacing: -0.01em; }
.num-box .nb-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.num-box h3 { font: 400 24px/1.25 var(--f-body); letter-spacing: -0.01em; }
.num-box p { font-size: 16px; line-height: 24px; letter-spacing: -0.01em; }
.rooftop { background: var(--navy); color: var(--cream); padding: var(--gutter); display: flex; flex-direction: column; gap: var(--gutter); }
.rooftop-top { display: flex; align-items: flex-end; gap: var(--gutter); }
.rooftop-top .copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.rooftop-top .display { color: var(--cream); }
.rooftop-top .indent { padding-left: 96px; }
.rooftop-top .body { width: min(438px, 100%); color: var(--cream); display: flex; flex-direction: column; gap: 24px; }
.rooftop-top .ph { width: min(566px, 45%); aspect-ratio: 566 / 318; flex: none; }
.rooftop > .ph { width: 100%; aspect-ratio: 2400 / 1349; }
.page-anfora .faq { color: var(--navy); }
.page-anfora .faq-body, .page-anfora .faq-list .acc-item { border-color: var(--navy); }

/* ---------- Liên hệ ---------- */
.contact-book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; padding: 120px clamp(var(--gutter), 5.6vw, 80px); }
.contact-book .cform { justify-content: space-between; }
.contact-book h2 { white-space: normal; }

@media (max-width: 900px) {
  .contact-book { grid-template-columns: 1fr; gap: 56px; padding-block: 64px; }
  .floor-rooms { padding-left: 0; }
  .rooftop-top { flex-direction: column; align-items: stretch; }
  .rooftop-top .ph { width: 100%; }
  .page-anfora .split .copy .stack { padding-left: 0; }
  .page-anfora .split .copy .body { padding: 0; }
}
@media (max-width: 560px) {
  .rooftop-top .indent { padding-left: var(--indent); }
}

/* Section đầu tiên của mọi trang cao đúng bằng màn hình (không cố định 880px, không giới hạn trần) */
.hero, .phero { height: 100vh; height: 100svh; min-height: 560px; max-height: none; }
@media (max-width: 560px) { .hero, .phero { min-height: 520px; } }
/* Hero trang Phòng nghỉ / Về LIMONI: khoảng cách giữa tiêu đề và đoạn mô tả 24px */
.phero.bottom-center .phero-inner, .phero.bottom-split .phero-inner { gap: 24px; }

/* Pillar: tiêu đề, đường kẻ, mô tả và link nằm chung một khối, cao tối đa 640px, căn giữa màn hình */
.pillar-pin { justify-content: center; padding: 84px var(--gutter) 24px; }
.pillar-content {
  width: 100%; height: 100%; max-height: 640px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.pillar-content .rule { flex: 1; min-height: 60px; }
@media (max-width: 900px) { .pillar-content { gap: 28px; } }

/* Booking: giới hạn khung 1440px, căn giữa (comment 06/10) */
.booking { width: 100%; max-width: 1440px; margin-inline: auto; box-sizing: border-box; }

/* ANFORA: đoạn văn Triết lý ẩm thực dùng màu navy như các chữ khác (comment 06/10) */
.page-anfora .philosophy .rule-text p { color: var(--navy); line-height: 24px; }

/* Intro (#about): giới hạn khung 1440px, căn giữa (comment 06/10) */
.intro { width: 100%; max-width: 1440px; margin-inline: auto; box-sizing: border-box; }

/* Ảnh ngang dưới phần giới thiệu: giới hạn khung 1440px, căn giữa (comment 06/10) */
.wide { width: 100%; max-width: 1440px; margin-inline: auto; box-sizing: border-box; }

/* ANFORA: footer dùng nền xanh navy (comment 06/10) */
main.page-anfora ~ .footer { background: var(--navy); }

/* ---------- Footer "curtain reveal" (kiểu Rumaya) ----------
   Footer dính ở đáy màn hình, nằm dưới <main>; khi cuộn hết nội dung, section cuối trượt lên như tấm rèm để lộ footer.
   Chỉ bật khi footer thấp hơn màn hình (script.js gắn class .footer-reveal lên <html>). */
html.footer-reveal main { position: relative; z-index: 1; background: var(--cream); }
html.footer-reveal .footer { position: sticky; bottom: 0; z-index: 0; }

/* Footer cao 80% màn hình: cột thông tin ở trên, chữ LIMONI dồn xuống đáy (06/10) */
.footer { min-height: 80vh; min-height: 80svh; justify-content: space-between; box-sizing: border-box; }

/* Menu: nền vẫn phủ kín màn hình, nhưng khung nội dung (chữ + ảnh) tối đa 1440px, căn giữa;
   ảnh bên phải nằm trong box cách mép 24px (comment 06/10) */
.menu-panel { padding-inline: max(0px, calc((100% - 1440px) / 2)); }
.menu-photo { clip-path: inset(24px); }
.menu-photo img { inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
.contact-info dd a { color: inherit; text-decoration: none; }
.contact-info dd a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Liên hệ: tiêu đề 3 dòng "Bắt Đầu / Kỳ Nghỉ của Bạn Tại / LIMONI" — giữ dòng giữa không ngắt trên desktop;
   nút "Bắt Đầu Kỳ Nghỉ" cách ô lời nhắn 24px, bằng khoảng cách giữa các hàng ô nhập (comment 06/10) */
@media (min-width: 901px) { .contact-book h2, .contact-book h2 em { white-space: nowrap; } }
.cform { gap: 24px; }
.cform .form-note { margin-top: -8px; }

/* Footer: nền vẫn tràn kín chiều ngang, nội dung (cột thông tin + chữ LIMONI) tối đa 1440px, căn giữa (comment 06/10) */
.footer { padding-inline: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); }
.wordmark { font-size: min(27.5vw, 396px); }

/* Hero trang chủ: ảnh mặt tiền mới sáng hơn — phủ thêm lớp tối nhẹ để chữ kem dễ đọc (06/10) */
.hero > .ph::after { background:
  linear-gradient(to bottom, rgba(36,28,26,.45) 0%, rgba(36,28,26,0) 18%),
  linear-gradient(to bottom, rgba(36,28,26,.18) 0%, rgba(36,28,26,.28) 40%, rgba(36,28,26,.5) 65%, rgba(36,28,26,.78) 100%); }

/* Intro trang chủ: đoạn văn chỉ thụt vào 40px (thay vì lùi về cột thứ 3) (comment 06/10) */
@media (min-width: 1201px) { .intro-text { padding-left: 40px; } }

/* Section phòng — Mini/Full không giật (06/10, bản 2)
   Ảnh Mini (290×810) là đúng một phần cắt ra từ ảnh Full (390×810), lệch --off px từ mép trái (0–100).
   Cả hai ảnh đặt chung trong một khung có tỉ lệ ảnh Full, cao bằng card; ảnh Mini nằm đúng vị trí của nó bên trong ảnh Full,
   nên khi đổi Mini → Full chỉ là phần ảnh hai bên hiện thêm, không lệch hình.
   Khung được đặt sao cho: card ở độ rộng mặc định → thấy đúng vùng Mini; card mở rộng → lộ dần phần còn lại của Full. */
.room > .ph { container-type: size; }
.room-img { position: absolute; top: 0; bottom: 0; height: 100%; aspect-ratio: 390 / 810; min-width: 100%;
  left: calc(var(--off) / 100 * (100cqw - 100cqh * 390 / 810)); }
.room-img img { position: absolute; top: 0; height: 100%; object-fit: cover; transform: none !important; transition: none; }
.room-img .img-full { left: 0; width: 100%; opacity: 1; }
.room-img .img-mini { left: calc(var(--off) / 390 * 100%); width: calc(290 / 390 * 100%); opacity: 1; transition: opacity .45s ease; }
.room:hover .room-img .img-mini, .room:focus-visible .room-img .img-mini { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .room-img .img-mini { transition: none; } }

/* Phòng nghỉ — "The Love Archive" (#floors): cao đúng 100% màn hình trên desktop (comment 06/10).
   Header cố định 60px đè lên mép trên nên chừa thêm 60px padding-top để nội dung không bị che. */
@media (min-width: 901px) {
  .floors { height: 100vh; height: 100svh; max-height: none; padding-top: calc(60px + var(--gutter)); scroll-margin-top: 0; }
}

/* Phòng nghỉ — cột phòng cuộn liền mạch qua các tầng (comment 06/10):
   cột phải là một vùng cuộn duy nhất chứa phòng tầng 2 → 5; mỗi nhóm tầng không còn tự cuộn riêng. */
.floors-right { display: block; position: relative; height: 100%; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior-y: auto; }
.floors-right::-webkit-scrollbar { display: none; }
.floor-rooms, .floor-rooms[hidden] { display: flex; height: auto; max-height: none; overflow: visible; scroll-snap-type: none; margin-left: auto; }
.floor-rooms + .floor-rooms { margin-top: 32px; }
@media (max-width: 900px) {
  .floors-right { height: auto; max-height: 80vh; }
  .floor-rooms { max-height: none; }
}

/* Phòng nghỉ — accordion tầng (comment 06/10): tiêu đề tầng có padding 16px cả 4 phía
   (trước là 16px trên/dưới, 0 hai bên); phần mô tả + sơ đồ thụt theo 16px cho thẳng hàng; icon +/× 20px. */
.floors .acc-head { padding: 16px; }
.floors .acc-body > div > * { padding-inline: 16px; }
.floors .acc-icon { width: 20px; height: 20px; }
.floors .acc-icon::before, .floors .acc-icon::after { width: 20px; }

/* Phòng nghỉ — thẻ phòng trong cột phải rộng tối đa 560px, căn phải (comment 06/10) */
.floor-rooms { max-width: 560px; margin-left: auto; padding-left: 0; }
@media (max-width: 900px) { .floor-rooms { margin-inline: auto; } }

/* Phòng nghỉ — cuộn cột phòng mượt, tự do (comment 06/10): bỏ scroll-snap (trước đây hút về từng phòng nên bị giật) */
.floors-right, .floor-rooms { scroll-snap-type: none; }
.floors-right .room-card { scroll-snap-align: none; }

/* =====================================================================
   POPUP THÔNG TIN PHÒNG (Love Archive) — mở khi bấm vào một phòng
   Nội dung lấy từ rooms-data.js: câu chuyện, mặt bằng, ảnh theo góc nhìn, artwork, gợi ý phòng khác.
   ===================================================================== */
html.room-open { overflow: hidden; }
.rm { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; }
.rm.open { visibility: visible; pointer-events: auto; }
.rm-backdrop { position: absolute; inset: 0; background: rgba(16, 1, 5, .55); opacity: 0; transition: opacity .45s ease; }
.rm.open .rm-backdrop { opacity: 1; }
.rm-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(1120px, 100%);
  background: var(--cream); color: var(--rosso); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .6s cubic-bezier(.22,.8,.2,1); box-shadow: -24px 0 60px rgba(16,1,5,.25);
}
.rm.open .rm-sheet { transform: none; }
.rm-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rm-close {
  position: absolute; top: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 0; border-radius: 999px; background: rgba(248,240,225,.92); color: var(--rosso); cursor: pointer;
  font: 600 12px/1 var(--f-button); letter-spacing: .2em; text-transform: uppercase;
}
.rm-close svg { width: 14px; height: 14px; }
.rm-close:hover { background: var(--cream); }

/* Hero */
.rm-hero { position: relative; height: min(62vh, 620px); min-height: 380px; color: var(--cream); display: flex; align-items: flex-end; }
.rm-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,1,5,.35), rgba(16,1,5,0) 30%, rgba(16,1,5,.15) 55%, rgba(16,1,5,.75)); }
.rm-hero-text { position: relative; z-index: 1; padding: 40px; display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.rm-hero h2 { font: 500 clamp(44px, 5.56vw, 80px)/1 var(--f-display); letter-spacing: -0.03em; }
.rm-hero .rm-couple { font: italic 500 clamp(22px, 2.2vw, 32px)/1.1 var(--f-display); letter-spacing: -0.02em; }

/* Khối nội dung chung */
.rm-sec { padding: 72px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px 64px; }
.rm-sec + .rm-sec { padding-top: 0; }
.rm-label { display: flex; flex-direction: column; gap: 12px; }
.rm-label h3 { font: 500 clamp(32px, 3.3vw, 48px)/1.05 var(--f-display); letter-spacing: -0.03em; }
.rm-label h3 em { font-style: italic; }
.rm-label .eyebrow { opacity: .75; }
.rm-tagline { font: italic 500 clamp(22px, 2vw, 28px)/1.25 var(--f-display); letter-spacing: -0.02em; }
.rm-story { display: flex; flex-direction: column; gap: 32px; }
.rm-story p { font: 400 18px/28px var(--f-body); color: var(--vino); }
.rm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid currentColor; }
.rm-facts div { padding: 16px 16px 0 0; display: flex; flex-direction: column; gap: 6px; }
.rm-facts dt { font: 600 11px/1.5 var(--f-body); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.rm-facts dd { margin: 0; font: 500 22px/1.2 var(--f-display); }

/* Mặt bằng */
.rm-plan { background: var(--panna); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.rm-plan img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.rm-plan figcaption { font: 400 14px/1.4 var(--f-body); display: flex; align-items: center; gap: 10px; }
.rm-plan figcaption::before { content: ""; width: 14px; height: 14px; background: #d98b8f; flex: none; }

/* Ảnh theo góc nhìn: dải cuộn ngang */
.rm-views-wrap { padding: 0 0 72px; }
.rm-views-head { padding: 0 40px 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.rm-views-head p { font: 400 14px/1.4 var(--f-body); max-width: 360px; color: var(--vino); }
.rm-views { display: flex; gap: 16px; overflow-x: auto; padding: 0 40px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--rosso) transparent; }
.rm-views figure { flex: none; width: min(560px, 78%); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.rm-views img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--panna); }
.rm-views figcaption { display: flex; gap: 12px; font: 400 14px/1.4 var(--f-body); }
.rm-views figcaption span { font-weight: 600; letter-spacing: .15em; }

/* Artwork: lưới so le */
.rm-art { columns: 3 220px; column-gap: 16px; }
.rm-art img { width: 100%; height: auto; display: block; margin-bottom: 16px; break-inside: avoid; background: var(--panna); }

/* Gợi ý phòng khác */
.rm-more { background: var(--rosso); color: var(--cream); padding: 72px 40px 96px; display: flex; flex-direction: column; gap: 32px; }
.rm-more-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.rm-more-head h3 { font: 500 clamp(32px, 3.3vw, 48px)/1.05 var(--f-display); letter-spacing: -0.03em; }
.rm-more-head h3 em { font-style: italic; }
.rm-more-head a { color: inherit; font: 600 12px/1.5 var(--f-body); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.rm-more-head a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rm-more-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rm-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 0; padding: 20px; cursor: pointer; text-align: left; color: var(--cream);
  display: flex; flex-direction: column; justify-content: space-between; background: var(--placeholder); font: inherit; }
.rm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.rm-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,1,5,.4), rgba(16,1,5,0) 30%, rgba(16,1,5,.1) 55%, rgba(16,1,5,.75)); }
.rm-card > :not(img) { position: relative; z-index: 1; }
.rm-card:hover img, .rm-card:focus-visible img { transform: scale(1.04); }
.rm-card h4 { font: 500 28px/1.05 var(--f-display); letter-spacing: -0.02em; }
.rm-card .rm-card-text { display: flex; flex-direction: column; gap: 6px; }

/* Footer cố định của popup */
.rm-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 40px;
  background: var(--cream); border-top: 1px solid rgba(106,15,38,.25); }
.rm-foot-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm-foot-info strong { font: 500 24px/1.1 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-foot-info span { font: 400 13px/1.4 var(--f-body); color: var(--vino); }
.rm-book { flex: none; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 32px; border-radius: 999px; background: var(--rosso); color: var(--cream);
  text-decoration: none; font: 600 12px/1 var(--f-button); letter-spacing: .2em; text-transform: uppercase; transition: background .2s ease; }
.rm-book:hover { background: #50091c; }
.rm-book span:last-child { transition: transform .25s ease; }
.rm-book:hover span:last-child { transform: translateX(4px); }

/* Chuyển nội dung khi đổi phòng */
.rm-scroll.swap { animation: rmSwap .45s ease; }
@keyframes rmSwap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .rm-sec { grid-template-columns: minmax(0, 1fr); padding: 56px 20px; }
  .rm-views-head { padding: 0 20px 20px; flex-direction: column; align-items: flex-start; }
  .rm-views { padding: 0 20px 8px; }
  .rm-views figure { width: 82%; }
  .rm-more { padding: 56px 20px 72px; }
  .rm-more-list { grid-template-columns: minmax(0, 1fr); }
  .rm-card { aspect-ratio: 16 / 10; }
  .rm-hero-text { padding: 24px 20px; }
  .rm-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .rm-foot-info strong { font-size: 20px; }
  .rm-book { height: 48px; padding: 0 22px; }
  .rm-facts dd { font-size: 18px; }
  .rm-art { columns: 2 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-sheet, .rm-backdrop, .rm-card img { transition: none; }
  .rm-scroll.swap { animation: none; }
}
.rm figure { margin: 0; }
.rm-views { scroll-padding-inline: 40px; }
@media (max-width: 900px) { .rm-views { scroll-padding-inline: 20px; } }

/* Popup phòng — artwork xếp chồng (comment 06/10): thay lưới 6 ảnh bằng một chồng ảnh xoè nhẹ, gọn diện tích.
   Bấm vào chồng ảnh để đưa ảnh trên cùng xuống cuối; rê chuột thì chồng ảnh xoè rộng ra. */
.rm-art-wrap { display: flex; flex-direction: column; gap: 20px; }
.rm-stack { position: relative; height: 380px; cursor: pointer; outline-offset: 8px; --step: 44px; --w: 250px; }
.rm-stack img {
  position: absolute; left: 0; top: 50%; width: var(--w); height: auto; max-height: 340px; object-fit: cover; margin: 0;
  border: 6px solid var(--cream); box-shadow: 0 10px 30px rgba(16,1,5,.22);
  z-index: calc(20 - var(--k));
  transform: translate(calc(var(--k) * var(--step)), -50%) rotate(calc(var(--k) * 3deg - 2deg));
  transition: transform .55s cubic-bezier(.22,.8,.2,1), opacity .4s ease;
}
.rm-stack img[style*="--k:5"], .rm-stack img[style*="--k: 5"] { opacity: .85; }
@media (hover: hover) {
  .rm-stack:hover { --step: 72px; }
  .rm-stack:hover img { transform: translate(calc(var(--k) * var(--step)), -50%) rotate(calc(var(--k) * 2deg - 4deg)); }
}
.rm-stack-hint { display: flex; gap: 12px; align-items: baseline; font: 400 14px/1.4 var(--f-body); color: var(--vino); }
.rm-stack-count { font-weight: 600; letter-spacing: .15em; }
@media (max-width: 900px) {
  .rm-stack { height: 300px; --w: 180px; --step: 26px; }
  .rm-stack img { max-height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .rm-stack img { transition: none; } }
@media (max-width: 1200px) { .rm-stack:hover { --step: 44px; } }
@media (max-width: 900px) { .rm-stack:hover { --step: 26px; } }

/* Popup phòng — "Góc nhìn trong phòng" mở rộng thành lưới, không cuộn ngang (comment 06/10).
   Ảnh đầu tiên lớn chiếm trọn hàng, các ảnh còn lại xếp 2 cột; nếu số ảnh còn lại lẻ thì ảnh cuối cũng chiếm trọn hàng. */
.rm-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; overflow: visible; scroll-snap-type: none; padding: 0 40px; }
.rm-views figure { width: auto; scroll-snap-align: none; }
.rm-views figure:first-child { grid-column: 1 / -1; }
.rm-views figure:first-child img { aspect-ratio: 16 / 9; }
.rm-views[data-count="2"] figure:last-child, .rm-views[data-count="4"] figure:last-child, .rm-views[data-count="6"] figure:last-child, .rm-views[data-count="8"] figure:last-child { grid-column: 1 / -1; }
.rm-views[data-count="2"] figure:last-child img, .rm-views[data-count="4"] figure:last-child img, .rm-views[data-count="6"] figure:last-child img, .rm-views[data-count="8"] figure:last-child img { aspect-ratio: 16 / 9; }
@media (max-width: 900px) {
  .rm-views { grid-template-columns: minmax(0, 1fr); padding: 0 20px; gap: 20px; }
  .rm-views figure { width: auto; }
  .rm-views figure img { aspect-ratio: 4 / 3; }
}

/* FAQ: tiêu đề câu hỏi có padding trên/dưới bằng nhau (20px), comment 06/10.
   Câu đầu tiên vẫn không có padding trên vì không có đường kẻ phía trên, để thẳng hàng với tiêu đề section. */
.faq-list .acc-head { padding: 20px 0; }
.faq-list .acc-item:first-child .acc-head { padding-top: 0; }

/* Footer trang ANFORA: chữ lớn đổi thành "ANFORA" (comment 07/10). Chữ này rộng hơn "LIMONI" nên cỡ chữ tính theo
   bề ngang khung (tối đa 1440px trừ lề) để luôn vừa một dòng. */
main.page-anfora ~ .footer .wordmark { font-size: calc((min(100vw, 1440px) - 2 * var(--gutter)) / 4.12); white-space: nowrap; }

/* Hero ANFORA (kiểu "middle"): tiêu đề và đoạn mô tả đứng sát nhau, cùng căn giữa màn hình (comment 07/10) */
.phero.middle .phero-inner { justify-content: center; gap: 24px; }
.phero.middle h1 { margin-block: 0; }

/* Phòng nghỉ — sơ đồ tầng tương tác (comment 07/10): rê chuột vào thẻ phòng bên phải thì ô phòng tương ứng
   trên sơ đồ sáng lên; rê/bấm vào ô trên sơ đồ cũng sáng lên và mở popup phòng đó. */
.fp-room { fill: var(--cream); fill-opacity: 0; cursor: pointer; transition: fill-opacity .3s ease; }
.fp-room:hover, .fp-room.on { fill-opacity: .28; }
.fp-room.on { fill-opacity: .32; }
.floor-plan text { pointer-events: none; transition: fill .3s ease; }
.room-card.fp-on { outline: 1px solid var(--cream); outline-offset: -1px; }

/* ANFORA — Triết lý ẩm thực: khối tiêu đề + mô tả + "Chi tiết Menu" đưa lên phía trên cột trái (07/10);
   cột 2 thẻ bên phải giữ nguyên vị trí dưới. */
.page-anfora .philosophy .left { justify-content: flex-start; }

/* ANFORA — Triết lý ẩm thực: padding trên/dưới 80px, chiều cao theo nội dung (comment 07/10) */
@media (min-width: 901px) { .page-anfora .philosophy { padding-block: 80px; height: auto; min-height: 0; max-height: none; } }

/* ANFORA — Triết lý ẩm thực: lưới 12 cột; cột phải (2 thẻ) chiếm 5 cột cuối (8–12), cột trái chiếm 1–6 (comment 07/10) */
@media (min-width: 901px) {
  .page-anfora .philosophy { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .page-anfora .philosophy .left { grid-column: 1 / span 6; }
  .page-anfora .philosophy .menu-list { grid-column: 8 / span 5; width: 100%; justify-self: stretch; }
}

/* ANFORA — Triết lý ẩm thực: khối thông tin (mô tả + "Chi tiết Menu") chiếm 3 cột của lưới 12 cột (cột 4–6),
   đường kẻ chiếm cột 1–3 (comment 07/10) */
@media (min-width: 901px) {
  .page-anfora .philosophy .rule-text { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter); }
  .page-anfora .philosophy .rule-text::before { grid-column: 1 / span 3; align-self: start; }
  .page-anfora .philosophy .rule-text .rt { grid-column: 4 / span 3; }
}

/* ANFORA — Không gian riêng tư: đoạn văn thụt vào đúng bằng dòng "riêng tư" của tiêu đề (comment 07/10) */
.rooftop-top .body { margin-left: 96px; width: min(438px, calc(100% - 96px)); }
@media (max-width: 560px) { .rooftop-top .body { margin-left: var(--indent); width: calc(100% - var(--indent)); } }

/* FAQ: cụm tiêu đề luôn thẳng hàng với danh sách câu hỏi — cả hai dùng chung một lưới cột (comment 07/10) */
@media (min-width: 901px) {
  .faq-head, .faq-body { grid-template-columns: minmax(0, 1fr) minmax(0, 676px); column-gap: 40px; }
}

/* ANFORA — Không gian riêng tư: padding trên 80px (comment 07/10) */
.rooftop { padding-top: 80px; }

/* [Mobile ≤ 560px] Intro trang chủ (#about): khoảng cách giữa các khối giảm còn 24px (comment 15/10) */
@media (max-width: 560px) {
  .intro { row-gap: 24px; }
  .intro-copy, .intro-text { gap: 24px; }
}

/* [Mobile ≤ 560px] The Love Archive (trang chủ): đoạn mô tả nằm ngay dưới tiêu đề, ảnh xuống cuối (comment 15/10) */
@media (max-width: 560px) {
  .archive-title { order: 0; }
  .archive-side { order: 1; }
  .archive-img { order: 2; }
}

/* [Mobile ≤ 560px] Section phòng trang chủ: xếp thành chồng dọc thay vì cuộn ngang (comment 15/10).
   Mỗi thẻ rộng hết màn hình, tỉ lệ 4:5; dùng ảnh Full phủ kín thẻ; thẻ "Xem tất cả phòng" thấp hơn. */
@media (max-width: 560px) {
  .rooms { display: flex; flex-direction: column; height: auto; overflow: visible; scroll-snap-type: none; gap: 0; }
  .rooms > .room { flex: none; width: 100%; aspect-ratio: 4 / 5; scroll-snap-align: none; }
  .rooms > .room.all { aspect-ratio: auto; min-height: 220px; }
  .room-img { left: 0 !important; width: 100%; min-width: 0; aspect-ratio: auto; }
  .room-img .img-mini { display: none; }
  .room-img .img-full { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .room .room-text { transform: none; }
  .room .room-cta-btn { opacity: 1; }
}

/* [Mobile ≤ 560px] Nhà hàng ANFORA (trang chủ): 4 ảnh xếp chồng 1 cột, cách nhau 16px (comment 15/10) */
@media (max-width: 560px) {
  .anfora-gallery { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* [Mobile ≤ 560px] Lề mặc định của toàn site là 16px (comment 15/10) */
@media (max-width: 560px) { :root { --gutter: 16px; } }

/* [Mobile ≤ 560px] chỉnh theo comment 15/10 */
@media (max-width: 560px) {
  /* Trang chủ — Khách hàng nói gì?: khối điểm 4.9/5 căn phải theo lề trang */
  .score { align-self: stretch; align-items: flex-end; text-align: right; }
  /* Trang chủ — The Love Archive: tiêu đề, mô tả, ảnh rộng hết khung, cách mép 16px */
  .archive-title, .archive-side, .archive-img { width: 100%; }
  /* Trang chủ — Booking: padding dưới 40px */
  .booking { padding-bottom: 40px; }
  /* Về LIMONI — Không gian kể chuyện tình: ảnh nhỏ nằm trên đoạn chữ */
  .story-side { flex-direction: column; }
  .story-side .ph.small { order: -1; align-self: stretch; flex: none; width: 100%; }
}

/* [Mobile ≤ 560px] Footer: khoảng cách giữa tiêu đề cột (Liên hệ / Khám phá / Social) và nội dung là 8px (comment 15/10) */
@media (max-width: 560px) { .foot-col { gap: 8px; } }

/* [Mobile ≤ 560px] Footer: chữ LIMONI/ANFORA nằm gần các cột thông tin hơn — bỏ chiều cao tối thiểu 80%, cách 40px (comment 15/10) */
@media (max-width: 560px) { .footer { min-height: 0; gap: 40px; justify-content: flex-start; } }
@media (max-width: 560px) { .wordmark { font-size: calc((100vw - 2 * var(--gutter)) / 3.6); white-space: nowrap; } }

/* [Mobile ≤ 560px] Menu: cỡ chữ các mục điều hướng 40px (comment 15/10) */
@media (max-width: 560px) { .menu-panel nav a { font-size: 40px; } }

/* [Mobile ≤ 560px] Booking: nút "Đặt phòng" cách đáy section đúng 40px — dòng thông báo trống không chiếm chỗ (comment 15/10) */
@media (max-width: 560px) { .booking .form-note:empty { display: none; } }

/* [Mobile ≤ 560px] Phòng nghỉ: phòng nằm trong accordion của từng tầng, các thẻ cách nhau 16px (comment 15/10) */
@media (max-width: 560px) {
  html.rooms-in-floors .floors-right { display: none; }
  .floors .acc-body .floor-rooms { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: none; margin: 0; padding: 8px 0 24px; overflow: visible; height: auto; max-height: none; }
  .floors .acc-body .floor-rooms + .floor-rooms { margin-top: 0; }
  .floors .acc-body .room-card { width: 100%; }
}

/* [Mobile ≤ 560px] Phòng nghỉ: tiêu đề tầng (accordion) không có padding hai bên; mô tả + sơ đồ thẳng lề theo (comment 15/10) */
@media (max-width: 560px) {
  .floors .acc-head { padding-inline: 0; }
  .floors .acc-body > div > * { padding-inline: 0; }
}

/* [Mobile ≤ 560px] Phòng nghỉ: ẩn đoạn mô tả và sơ đồ tầng trong accordion — chỉ còn danh sách phòng (comment 15/10) */
@media (max-width: 560px) { .floors .floor-detail { display: none; } }

/* [Mobile ≤ 560px] Trang ANFORA — chỉnh theo comment 15/10 */
@media (max-width: 560px) {
  /* Anfora · Chum rượu cổ: khoảng cách giữa các đoạn văn 8px */
  .page-anfora .split .copy .body { gap: 8px; }
  /* Hương vị của Cảm xúc: ảnh xếp chồng dọc thay vì cuộn ngang */
  .navy-band .strip { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 16px; cursor: auto; scroll-snap-type: none; }
  .navy-band .strip .ph { width: 100%; height: auto; }
  .navy-band .strip-hint { display: none; }
  /* Triết lý ẩm thực: tiêu đề ↔ mô tả cách 8px; 2 thẻ món cách nhau 16px */
  .page-anfora .philosophy .left { gap: 8px; }
  .page-anfora .philosophy .menu-list { gap: 16px; }
}
@media (max-width: 560px) { .navy-band { padding-inline: var(--gutter); } }

/* [Mobile ≤ 560px] Trang chủ: ảnh toà nhà (cuối phần giới thiệu) và ảnh sảnh ngay dưới cách nhau 16px (comment 15/10) */
@media (max-width: 560px) { .intro { padding-bottom: 16px; } }

/* [Mobile ≤ 560px] ANFORA — Chum rượu cổ: tiêu đề ↔ đoạn văn cách 8px (comment 15/10) */
@media (max-width: 560px) { .page-anfora .split .copy { gap: 8px; } }

/* Trang ANFORA — Triết lý ẩm thực (≤ 900px): cột 2 thẻ món hiển thị đầy đủ, không giới hạn chiều cao/cuộn riêng.
   Trước đây khung bị giới hạn 80vh + căn đáy nên thẻ đầu bị đẩy lên đè vào chữ phía trên (comment 15/10). */
@media (max-width: 900px) {
  .page-anfora .philosophy .menu-list { max-height: none; height: auto; overflow: visible; justify-content: flex-start; align-self: start; }
}

/* [Mobile ≤ 560px] ANFORA — Triết lý ẩm thực: bỏ đường kẻ trước đoạn mô tả, đoạn mô tả rộng hết khung (comment 15/10) */
@media (max-width: 560px) {
  .page-anfora .philosophy .rule-text::before { display: none; }
  .page-anfora .philosophy .rule-text .rt { flex: 1 1 100%; }
}

/* [Mobile ≤ 560px] FAQ: câu "Tất cả những điều bạn cần biết…" đưa lên ngay dưới tiêu đề, đường kẻ chuyển xuống trên danh sách câu hỏi (comment 15/10) */
@media (max-width: 560px) {
  .faq { gap: 16px; }
  .faq-body { border-top: 0; padding-top: 0; row-gap: 32px; }
  .faq-list { border-top: 1px solid currentColor; }
  .faq-list .acc-item:first-child .acc-head { padding-top: 20px; }
}

/* Trang Ưu đãi (offer.html, 18/10): nút "Đặt phòng ngay" ở khối kêu gọi cuối trang lớn hơn, cách đoạn văn 48px */
#offer-cta .cta-btn { margin-top: 48px; }
#offer-cta .cta-btn .btn { height: 72px; padding: 0 56px; }
#offer-cta .cta-btn .btn-label { font-size: 16px; letter-spacing: 0.16em; }
@media (max-width: 560px) {
  #offer-cta .cta-btn { margin-top: 32px; }
  #offer-cta .cta-btn .btn { height: 56px; padding: 0 32px; width: 100%; justify-content: center; }
}

/* =====================================================================
   TRANG ƯU ĐÃI — carousel 3 ưu đãi chạy vòng lặp (Figma 251:211, 18/10)
   Ảnh vuông 440px, ưu đãi đang chọn ở giữa kèm nội dung; hai ưu đãi kề bên ló ra ở mép trái/phải,
   hạ xuống để căn giữa theo chiều cao khối giữa. Bấm/vuốt/phím mũi tên để chuyển.
   ===================================================================== */
.offers { --img: min(440px, 30.56vw); --gap: min(320px, 22.2vw); --tw: 440px; --dur: .7s;
  position: relative; overflow: hidden; background: var(--cream); color: var(--rosso); padding-block: 160px; }
.offers-list { display: flex; flex-direction: column; align-items: center; gap: 80px; }   /* khi chưa có JS: xếp dọc */
.offers-track { position: relative; left: 50%; display: flex; align-items: flex-start; gap: var(--gap); width: max-content;
  transform: translateX(calc(-50% + var(--shift, 0px))); transition: transform var(--dur) cubic-bezier(.65,.05,.25,1); touch-action: pan-y; }
.offers-track.no-anim, .offers-track.no-anim * { transition: none !important; }
.offer-item { flex: none; width: var(--img); display: flex; flex-direction: column; align-items: center; gap: 24px; }
.offer-item img { display: block; width: var(--img); height: var(--img); object-fit: cover; background: var(--panna);
  transition: transform var(--dur) cubic-bezier(.65,.05,.25,1), filter .3s ease; }
.offer-text { flex: none; width: var(--tw); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  transition: opacity .45s ease; }
.offer-text .eyebrow { font: 600 12px/1.5 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--rosso); }
.offer-text h2 { font: 500 56px/1 var(--f-display); letter-spacing: -0.01em; color: var(--rosso); margin: 0; }
.offer-body { display: flex; flex-direction: column; gap: 20px; }
.offer-body p, .offer-link { font: 400 16px/1.25 var(--f-body); letter-spacing: -0.01em; color: var(--vino); margin: 0; }
.offer-link { line-height: 24px; text-decoration: none; }
.offer-link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ưu đãi hai bên: chỉ hiện ảnh, hạ xuống giữa; bấm để chuyển tới */
.js-offers .offer-item:not(.is-center) img { transform: translateY(var(--drop, 0px)); cursor: pointer; }
.js-offers .offer-item:not(.is-center) .offer-text { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.js-offers .offer-item:not(.is-center):hover img { filter: brightness(1.08); }
.offer-item:focus-visible { outline: none; }
.offer-item:focus-visible img { outline: 2px solid var(--rosso); outline-offset: 6px; }
@media (max-width: 900px) {
  .offers { --img: 50vw; --gap: 40px; --tw: min(440px, calc(100vw - 2 * var(--gutter))); padding-block: 96px; }
  .offer-text h2 { font-size: 44px; }
}
@media (max-width: 560px) {
  .offers { --img: calc(100vw - 112px); --gap: 16px; padding-block: 64px; }
  .offer-text h2 { font-size: 36px; line-height: 1.05; }
}
@media (prefers-reduced-motion: reduce) { .offers { --dur: 0s; } }
/* overflow: clip — không cho trình duyệt tự cuộn ngang khối khi focus/bấm vào ưu đãi ở mép; tiêu đề desktop giữ 1 dòng như thiết kế */
.offers { overflow: clip; }
@media (min-width: 901px) { .offer-text h2 { white-space: nowrap; } }
@media (max-width: 560px) { .js-offers .offer-item:not(.is-center) img { transform: none; } }   /* mobile: ảnh hai bên thẳng hàng ảnh giữa, không đè lên chữ */

/* Trang Ưu đãi — carousel ưu đãi: đảo màu, nền đỏ rosso + chữ kem (comment 18/10) */
.offers { background: var(--rosso); color: var(--cream); }
.offer-text .eyebrow, .offer-text h2, .offer-body p, .offer-link { color: var(--cream); }
.offer-item img { background: rgba(248,240,225,.12); }
.offer-item:focus-visible img { outline-color: var(--cream); }

/* Trang Ưu đãi — carousel ưu đãi cao đúng 100% màn hình, nội dung căn giữa theo chiều dọc (comment 18/10).
   Header cố định 60px nên chừa padding-top; trên màn thấp ảnh tự thu nhỏ (tối thiểu 280px) để vừa khung. */
.offers { min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(60px + 24px) 40px; }
@media (min-width: 901px) {
  .offers { --img: max(280px, min(440px, 30.56vw, calc(100svh - 470px))); height: 100vh; height: 100svh; }
}

/* Trang Ưu đãi — khối chữ của thẻ ưu đãi rộng hơn ảnh: 560px trên desktop (trước 440px), đoạn mô tả ít dòng hơn (comment 18/10) */
@media (min-width: 901px) { .offers { --tw: 560px; } }

/* Trang Ưu đãi — bỏ ảnh ở cả 3 ưu đãi (comment 18/10): carousel chỉ còn chữ.
   Ưu đãi giữa rõ nét; hai ưu đãi kề bên hiện mờ ở mép trái/phải để thấy còn ưu đãi khác, bấm vào để chuyển. */
.offers { --tw: min(560px, calc(100vw - 2 * var(--gutter))); --gap: min(240px, 16vw); }
.offers-track { align-items: center; }
.offer-item { width: var(--tw); }
.js-offers .offer-item:not(.is-center) .offer-text { visibility: visible; opacity: .3; cursor: pointer; transition: opacity .45s ease; }
.js-offers .offer-item:not(.is-center):hover .offer-text { opacity: .55; }
.offer-item:focus-visible .offer-text { outline: 1px solid var(--cream); outline-offset: 12px; }
@media (max-width: 900px) { .offers { --gap: 48px; } }
@media (max-width: 560px) { .offers { --tw: calc(100vw - 96px); --gap: 24px; } }

/* =====================================================================
   PHÒNG NGHỈ — Các hạng phòng (Figma 251:253, 18/10)
   Trái: ảnh hạng phòng (tỉ lệ 449/561). Phải: nền rosso, 4 nút tab ở trên, nội dung hạng phòng căn giữa theo chiều dọc.
   Bấm tab để đổi ảnh + nội dung (mờ dần).
   ===================================================================== */
.room-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--rosso); color: var(--panna); }
.rt-media { position: relative; aspect-ratio: 449 / 561; overflow: hidden; background: #3a0815; }
.rt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.rt-img.on { opacity: 1; }
.rt-side { display: flex; flex-direction: column; padding: 40px; min-width: 0; }
.rt-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-tab { padding: 12px 16px; border: 1px solid var(--panna); border-radius: 999px; background: transparent; color: var(--cream);
  font: 600 12px/1 var(--f-button); text-transform: uppercase; cursor: pointer; transition: background .25s ease, color .25s ease; }
.rt-tab:hover { background: rgba(250,240,221,.12); }
.rt-tab[aria-selected="true"] { background: var(--panna); color: var(--rosso); }
.rt-tab:focus-visible { outline: 2px solid var(--panna); outline-offset: 3px; }
.rt-panels { flex: 1; display: grid; align-items: center; }
.rt-panel { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; animation: rtIn .5s ease; }
.rt-panel[hidden] { display: none; }
.rt-panel .eyebrow { font: 600 12px/1.5 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--panna); }
.rt-panel h2 { font: 600 80px/1 var(--f-display); letter-spacing: -0.05em; color: var(--panna); margin: 0; }
.rt-body, .rt-link { font: 400 16px/24px var(--f-body); letter-spacing: -0.01em; color: var(--panna); margin: 0; max-width: 640px; }
.rt-body + .rt-body { margin-top: -12px; }
.rt-link { text-decoration: none; }
.rt-link:hover { text-decoration: underline; text-underline-offset: 4px; }
@keyframes rtIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1200px) { .rt-panel h2 { font-size: 64px; } }
@media (max-width: 900px) {
  .room-types { grid-template-columns: minmax(0, 1fr); }
  .rt-media { aspect-ratio: 4 / 3; }
  .rt-side { padding: 32px var(--gutter) 48px; gap: 32px; }
  .rt-panel h2 { font-size: 56px; }
}
@media (max-width: 560px) {
  .rt-media { aspect-ratio: 4 / 5; }
  .rt-side { gap: 24px; }
  .rt-tab { padding: 10px 12px; font-size: 11px; }
  .rt-panel { gap: 16px; }
  .rt-panel h2 { font-size: 44px; }
  .rt-body + .rt-body { margin-top: -4px; }
}
@media (prefers-reduced-motion: reduce) { .rt-img { transition: none; } .rt-panel { animation: none; } }

/* Phòng nghỉ — Các hạng phòng: cao đúng màn hình trừ header 60px (comment 18/10); ảnh bên trái phủ kín chiều cao */
@media (min-width: 901px) {
  .room-types { height: calc(100vh - 60px); height: calc(100svh - 60px); min-height: 520px; scroll-margin-top: 60px; }
  .rt-media { aspect-ratio: auto; height: 100%; }
  .rt-side { min-height: 0; overflow: hidden; }
}

/* Menu: công tắc ngôn ngữ VN / ENG cạnh nút Đóng (comment 18/10) */
.menu-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lang-switch { display: inline-flex; padding: 3px; border: 1px solid rgba(248,240,225,.55); border-radius: 999px; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--cream); cursor: pointer; text-decoration: none;
  font: 600 12px/1 var(--f-button); letter-spacing: .16em; transition: background .25s ease, color .25s ease; }
.lang-switch a[aria-current="true"] { background: var(--cream); color: var(--rosso); pointer-events: none; }
.lang-switch a:not([aria-current="true"]):hover { background: rgba(248,240,225,.12); }
.lang-switch a:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* =====================================================================
   TRANG ƯU ĐÃI — mỗi ưu đãi là một tấm vé (theo ảnh tham khảo, 18/10)
   Vé màu kem trên nền rosso: phần chính (nhãn, mức ưu đãi lớn góc phải, tiêu đề 2 dòng so le chồng nhau,
   mô tả nhỏ góc phải dưới) + đường đục lỗ nét đứt + cuống vé (chữ dọc, mã vạch, "Đặt phòng →").
   Các khuyết tròn ở 4 góc và 2 đầu đường đục lỗ là các chấm cùng màu nền section.
   ===================================================================== */
.offers { --tw: min(920px, 72vw); --gap: 56px; --stub: 150px; --cut: 14px; }
.offer-item { width: var(--tw); }
.ticket { position: relative; display: flex; width: 100%; min-height: 360px; background: var(--panna); color: var(--rosso);
  text-align: left; align-items: stretch; gap: 0; }
.tk-cut { position: absolute; width: calc(var(--cut) * 2); height: calc(var(--cut) * 2); border-radius: 50%; background: var(--rosso); z-index: 2; pointer-events: none; }
.tk-cut.c1 { left: calc(var(--cut) * -1); top: calc(var(--cut) * -1); }
.tk-cut.c2 { right: calc(var(--cut) * -1); top: calc(var(--cut) * -1); }
.tk-cut.c3 { left: calc(var(--cut) * -1); bottom: calc(var(--cut) * -1); }
.tk-cut.c4 { right: calc(var(--cut) * -1); bottom: calc(var(--cut) * -1); }
.tk-cut.n1, .tk-cut.n2 { right: calc(var(--stub) - var(--cut)); }
.tk-cut.n1 { top: calc(var(--cut) * -1); }
.tk-cut.n2 { bottom: calc(var(--cut) * -1); }

.tk-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 16px 32px;
  padding: 32px 36px 28px; }
.tk-tag { grid-column: 1; grid-row: 1; font: 600 11px/1.5 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--rosso); margin: 0; }
.tk-value { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; text-align: right; margin: 0; }
.tk-value span:first-child { font: 500 52px/1 var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; }
.tk-value span:last-child { font: 500 24px/1.15 var(--f-display); margin-top: 6px; }
.tk-title { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; align-items: flex-start; margin: 0;
  font: 500 76px/.82 var(--f-display); letter-spacing: -0.02em; color: var(--rosso); white-space: nowrap; }
.tk-title span:first-child { padding-left: .9em; }
.tk-body { grid-column: 2; grid-row: 3; align-self: end; max-width: 290px; margin: 0; text-align: right;
  font: 400 12px/1.45 var(--f-body); color: var(--vino); }

.tk-stub { position: relative; flex: none; width: var(--stub); display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr auto; gap: 12px 14px;
  padding: 32px 22px 24px; border-left: 2px dashed rgba(106,15,38,.55); color: var(--rosso); text-decoration: none; }
.tk-stub-a, .tk-stub-b { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 20px/1 var(--f-display); white-space: nowrap; }
.tk-stub-a { grid-column: 1; grid-row: 2; align-self: end; }
.tk-stub-b { grid-column: 1; grid-row: 1; align-self: start; font-size: 16px; opacity: .8; }
.tk-code { grid-column: 2; grid-row: 1 / span 2; justify-self: end; width: 34px;
  background: repeating-linear-gradient(to bottom, var(--rosso) 0 2px, transparent 2px 4px, var(--rosso) 4px 5px, transparent 5px 8px, var(--rosso) 8px 11px, transparent 11px 13px, var(--rosso) 13px 14px, transparent 14px 17px); }
.tk-book { grid-column: 1 / -1; grid-row: 3; font: 600 11px/1 var(--f-button); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; text-align: center; }
.tk-stub:hover .tk-book { text-decoration: underline; text-underline-offset: 4px; }
.tk-stub:focus-visible { outline: 2px solid var(--rosso); outline-offset: -8px; }

/* vé hai bên: mờ, bấm để chuyển */
.js-offers .offer-item:not(.is-center) .offer-text { visibility: visible; opacity: .35; cursor: pointer; }
.js-offers .offer-item:not(.is-center) .ticket * { pointer-events: none; }
.js-offers .offer-item:not(.is-center):hover .offer-text { opacity: .55; }
.offer-item:focus-visible .offer-text { outline: 2px solid var(--cream); outline-offset: 6px; }

@media (max-width: 1200px) {
  .tk-title { font-size: 60px; }
  .tk-value span:first-child { font-size: 44px; }
}
@media (max-width: 900px) {
  .offers { --tw: min(640px, calc(100vw - 2 * var(--gutter) - 48px)); --gap: 24px; --stub: 120px; }
  .tk-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; padding: 28px 24px 24px; }
  .tk-tag { grid-row: 1; }
  .tk-value { grid-column: 1; grid-row: 2; align-items: flex-start; text-align: left; }
  .tk-title { grid-row: 3; font-size: 52px; white-space: normal; }
  .tk-body { grid-column: 1; grid-row: 4; text-align: left; max-width: none; }
}
/* mobile: cuống vé nằm dưới, đường đục lỗ nằm ngang */
@media (max-width: 560px) {
  .offers { --tw: calc(100vw - 64px); --gap: 16px; --cut: 12px; }
  .ticket { flex-direction: column; min-height: 0; }
  .tk-main { padding: 26px 20px 22px; gap: 14px; }
  .tk-value span:first-child { font-size: 40px; }
  .tk-value span:last-child { font-size: 20px; }
  .tk-title { font-size: 42px; }
  .tk-title span:first-child { padding-left: .6em; }
  .tk-body { font-size: 13px; }
  .tk-cut.n1, .tk-cut.n2 { top: auto; right: auto; bottom: calc(var(--stub-h, 112px) - var(--cut)); }
  .tk-cut.n1 { left: calc(var(--cut) * -1); }
  .tk-cut.n2 { right: calc(var(--cut) * -1); }
  .tk-stub { width: auto; height: var(--stub-h, 112px); box-sizing: border-box; border-left: 0; border-top: 2px dashed rgba(106,15,38,.55);
    grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; gap: 6px 16px; padding: 18px 20px; }
  .tk-stub-a, .tk-stub-b { writing-mode: horizontal-tb; transform: none; }
  .tk-stub-a { grid-row: 1; align-self: start; }
  .tk-stub-b { grid-row: 2; }
  .tk-code { grid-column: 2; grid-row: 1 / span 3; width: 100%; height: 100%; justify-self: stretch;
    background: repeating-linear-gradient(to right, var(--rosso) 0 2px, transparent 2px 4px, var(--rosso) 4px 5px, transparent 5px 8px, var(--rosso) 8px 11px, transparent 11px 13px, var(--rosso) 13px 14px, transparent 14px 17px); }
  .tk-book { grid-column: 1; grid-row: 3; align-self: end; text-align: left; }
}
/* vé: ghi đè các quy tắc cũ của .offer-text (cột giữa, chữ kem) */
.offers .ticket { flex-direction: row; align-items: stretch; text-align: left; gap: 0; }
.offers .ticket .tk-title, .offers .ticket .tk-value, .offers .ticket .tk-tag { color: var(--rosso); }
.offers .ticket .tk-body { color: var(--vino); }
@media (max-width: 560px) {
  .offers { --tw: calc(100vw - 80px); }
  .offers .ticket { flex-direction: column; }
}
/* vé desktop: mô tả nằm dưới mức ưu đãi (góc phải), tiêu đề 2 dòng trải hết bề ngang phía dưới để không đè chữ mô tả */
@media (min-width: 901px) {
  .offers .ticket .tk-main { grid-template-rows: auto auto 1fr auto; }
  .offers .ticket .tk-value { grid-row: 1; }
  .offers .ticket .tk-body { grid-column: 2; grid-row: 2; align-self: start; margin-top: 8px; }
  .offers .ticket .tk-title { grid-column: 1 / -1; grid-row: 4; }
}

/* Trang Ưu đãi — tiêu đề + đoạn dẫn phía trên các tấm vé (comment 18/10) */
.offers { gap: 48px; }
.offers-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-inline: var(--gutter); }
.offers-title { font: 500 clamp(40px, 4.4vw, 64px)/1 var(--f-display); letter-spacing: -0.03em; color: var(--cream); margin: 0; }
.offers-title em { font-style: italic; }
.offers-sub { max-width: 520px; font: 400 16px/24px var(--f-body); color: var(--cream); opacity: .85; margin: 0; }
@media (max-width: 560px) { .offers { gap: 32px; } .offers-sub { font-size: 15px; line-height: 22px; } }
.offers-sub { max-width: 600px; text-wrap: pretty; }
@media (max-width: 560px) { .offers-title em { display: block; } }

/* Trang Ưu đãi — khoảng cách 80px: giữa cụm tiêu đề và dải vé, và giữa các tấm vé với nhau (comment 18/10, desktop) */
@media (min-width: 901px) { .offers { gap: 80px; --gap: 80px; } }

/* Trang Ưu đãi — mô tả trên vé 14px (comment 18/10), cả desktop và mobile */
.offers .ticket .tk-body { font-size: 14px; line-height: 1.45; max-width: 320px; }
@media (max-width: 900px) { .offers .ticket .tk-body { max-width: none; } }

/* Trang Ưu đãi — cuống vé xé (comment 18/10):
   rê chuột vào cuống → cuống bị xé hé một nửa (nghiêng ra từ chân đường đục lỗ, lộ khe nền đỏ);
   bấm "Đặt phòng" → cuống bị xé rời hẳn, rơi xuống rồi chuyển tới trang đặt phòng. */
.offers .tk-stub { background: var(--panna); transform-origin: 0 100%; transition: transform .45s cubic-bezier(.3,1.4,.5,1), box-shadow .45s ease; z-index: 1; will-change: transform; }
.offers .tk-stub::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 6px;
  background: radial-gradient(circle at 0 50%, var(--rosso) 2px, transparent 2.5px) 0 0 / 6px 8px repeat-y; opacity: 0; transition: opacity .3s ease; }
@media (hover: hover) {
  .offers .is-center .tk-stub:hover, .offers .is-center .tk-stub:focus-visible { transform: rotate(7deg) translateX(6px); box-shadow: -6px 10px 24px rgba(16,1,5,.28); }
  .offers .is-center .tk-stub:hover::before, .offers .is-center .tk-stub:focus-visible::before { opacity: 1; }
}
.offers .tk-stub.torn { animation: tkTear .75s cubic-bezier(.5,0,.75,0) forwards; pointer-events: none; }
@keyframes tkTear {
  0%   { transform: rotate(7deg) translateX(6px); }
  30%  { transform: rotate(16deg) translate(18px, -6px); opacity: 1; }
  100% { transform: rotate(34deg) translate(90px, 260px); opacity: 0; }
}
@media (max-width: 560px) {
  .offers .tk-stub { transform-origin: 0 0; }
  @keyframes tkTearM { 0% { transform: none; } 30% { transform: rotate(-6deg) translateY(10px); opacity: 1; } 100% { transform: rotate(-18deg) translate(-30px, 220px); opacity: 0; } }
  .offers .tk-stub.torn { animation-name: tkTearM; }
}
@media (prefers-reduced-motion: reduce) { .offers .tk-stub { transition: none; } .offers .tk-stub.torn { animation: none; } }
/* nền vé tách cho thân và cuống, để khi cuống nghiêng ra lộ khe nền đỏ; 2 khuyết góc phải đi theo cuống */
.offers .ticket { background: transparent; }
.offers .tk-main { background: var(--panna); }
@media (hover: hover) {
  .offers .is-center .tk-stub:hover, .offers .is-center .tk-stub:focus-visible { transform: rotate(5deg) translateX(4px); }
}
@media (max-width: 560px) { .offers .tk-stub .tk-cut.c4 { bottom: calc(var(--cut) * -1); } }

/* Trang Ưu đãi — vé đang mở nổi khối: đổ bóng sâu + nhấc nhẹ lên; vé hai bên phẳng (comment 18/10) */
.offers .tk-main, .offers .tk-stub { transition: box-shadow .5s ease, transform .45s cubic-bezier(.3,1.4,.5,1); }
.offers .offer-item .ticket { transition: transform .5s ease, opacity .45s ease; }
.offers .is-center .ticket { transform: translateY(-6px); }
.offers .is-center .tk-main, .offers .is-center .tk-stub {
  box-shadow: 0 34px 60px -24px rgba(16,1,5,.7), 0 14px 28px -14px rgba(16,1,5,.5); }
@media (hover: hover) {
  .offers .is-center .tk-stub:hover, .offers .is-center .tk-stub:focus-visible {
    box-shadow: -8px 18px 32px -10px rgba(16,1,5,.6), 0 34px 60px -24px rgba(16,1,5,.7); }
}
/* khuyết tròn thật (mask) thay cho chấm phủ màu nền, để bóng đổ ôm đúng dáng vé */
.offers .tk-cut { display: none; }
.offers .tk-main, .offers .tk-stub {
  -webkit-mask-image: radial-gradient(circle var(--cut) at 0 0, transparent 98%, #000 100%), radial-gradient(circle var(--cut) at 100% 0, transparent 98%, #000 100%),
                      radial-gradient(circle var(--cut) at 0 100%, transparent 98%, #000 100%), radial-gradient(circle var(--cut) at 100% 100%, transparent 98%, #000 100%);
          mask-image: radial-gradient(circle var(--cut) at 0 0, transparent 98%, #000 100%), radial-gradient(circle var(--cut) at 100% 0, transparent 98%, #000 100%),
                      radial-gradient(circle var(--cut) at 0 100%, transparent 98%, #000 100%), radial-gradient(circle var(--cut) at 100% 100%, transparent 98%, #000 100%);
  -webkit-mask-size: 51% 51%; mask-size: 51% 51%;
  -webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%; mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.offers .is-center .tk-main, .offers .is-center .tk-stub, .offers .is-center .tk-stub:hover, .offers .is-center .tk-stub:focus-visible { box-shadow: none; }
.offers .offer-item .ticket { transition: transform .5s ease, opacity .45s ease, filter .5s ease; }
.offers .is-center .ticket { filter: drop-shadow(0 26px 26px rgba(16,1,5,.5)) drop-shadow(0 8px 10px rgba(16,1,5,.35)); }
.offers .tk-stub::before { display: none; }

/* =====================================================================
   VỀ LIMONI — PHIÊN BẢN 2 (about-v2.html, Figma 257:615, 18/10)
   Chỉ áp dụng trong main.page-about-v2, không ảnh hưởng trang about.html cũ.
   ===================================================================== */
.page-about-v2 { --ink: #5a0406; --deep: #500216; }
.page-about-v2 h1, .page-about-v2 h2 { margin: 0; }
.page-about-v2 .av2-text { display: flex; flex-direction: column; gap: 12px; }
.page-about-v2 .av2-text p { font: 400 16px/24px var(--f-body); letter-spacing: -0.01em; margin: 0; }

/* Hero */
.av2-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: #f7f1e6; overflow: hidden; }
.av2-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av2-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,0) 50%), linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(13,10,8,.85) 100%); }
.av2-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin-inline: auto; padding: 0 80px 24px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.av2-hero h1 { align-self: stretch; font: 500 80px/1.1 var(--f-display); letter-spacing: -0.05em; color: #f7f1e6; }
.av2-hero p { width: min(560px, 100%); font: 400 16px/24px var(--f-body); letter-spacing: -0.01em; }

/* Phú Quốc — 3 cột: tiêu đề | bản đồ 330×440 | đoạn văn canh đáy */
.av2-island { background: #f7f1e6; color: var(--ink); display: flex; gap: 24px; align-items: stretch; padding: 160px max(80px, calc((100% - 1280px) / 2)); }
.av2-island h2 { flex: 1 1 0; min-width: 0; font: 500 80px/1 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.av2-map { flex: none; width: 330px; height: 440px; margin: 0; }
.av2-map-ph { width: 100%; height: 100%; display: grid; place-items: center; border: 1px dashed rgba(90,4,6,.35); background: rgba(90,4,6,.04); }
.av2-map-ph span { font: 600 11px/1.4 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: rgba(90,4,6,.5); }
.av2-island-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.av2-island-text p { font: 400 16px/24px var(--f-body); letter-spacing: -0.01em; margin: 0; }

/* Vùng đất của tình yêu — nền rosso, căn giữa */
.av2-land { background: var(--rosso); color: #f7f1e6; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 80px; }
.av2-land h2 { font: 500 64px/1.25 var(--f-display); letter-spacing: -0.04em; text-align: center; color: #f7f1e6; }
.av2-land-img { width: 402px; max-width: 100%; aspect-ratio: 402 / 400; overflow: hidden; }
.av2-land-img img { width: 100%; height: 100%; object-fit: cover; }
.av2-land .av2-text { width: min(560px, 100%); }

/* Eclectic Maximalism — tiêu đề lớn, đoạn văn giữa, 5 ảnh nhỏ 150px rải hai bên */
.av2-eclectic { background: #f7f1e6; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 80px; min-height: 810px; box-sizing: border-box; }
.av2-eclectic h2 { width: 100%; text-align: center; font: 600 120px/1 var(--f-display); letter-spacing: -0.05em; color: var(--deep); text-shadow: 0 0 16px rgba(0,0,0,.16); }
.av2-ec-stage { position: relative; width: min(1280px, 100%); flex: 1; min-height: 586px; display: flex; justify-content: center; }
.av2-ec-stage .av2-text { width: min(560px, 100%); position: relative; z-index: 1; }
.av2-th { position: absolute; width: 150px; height: 150px; object-fit: cover; transition: transform .5s ease; }
.av2-th:hover { transform: scale(1.06); }
.av2-th.t1 { left: 0; top: 63px; }
.av2-th.t2 { left: 124px; top: 317px; }
.av2-th.t3 { left: calc(50% - 75px); top: 392px; }
.av2-th.t4 { right: 124px; top: 317px; }
.av2-th.t5 { right: 0; top: 63px; }

/* The Love Post Office — ảnh rộng, thẻ kem đè lên, chữ lớn chìm phía dưới */
.av2-post { position: relative; background: var(--rosso); display: flex; flex-direction: column; align-items: center; padding-bottom: 120px; overflow: hidden; }
.av2-post-img { width: 100%; height: 730px; margin-bottom: -160px; }
.av2-post-img img { width: 100%; height: 100%; object-fit: cover; }
.av2-post-card { position: relative; z-index: 2; width: min(616px, calc(100% - 2 * var(--gutter))); box-sizing: border-box; background: #f7f1e6; color: var(--ink);
  padding: 32px 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.av2-post-card h2 { font: 600 56px/1 var(--f-display); letter-spacing: -0.05em; color: var(--rosso); text-align: center; }
.av2-post-word { position: absolute; left: 0; bottom: 0; z-index: 1; margin: 0; white-space: nowrap; pointer-events: none;
  font: 600 min(195px, 13.5vw)/1 var(--f-display); letter-spacing: -0.05em; color: var(--deep); opacity: .56; text-shadow: 0 0 16px rgba(0,0,0,.16); }

/* CTA */
.av2-cta { position: relative; min-height: 810px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 104px var(--gutter); color: #f7f1e6; overflow: hidden; }
.av2-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.av2-cta::before { content: ""; position: absolute; inset: 0; background: rgba(6,6,6,.6); z-index: 0; }
.av2-cta > :not(img) { position: relative; z-index: 1; }
.av2-cta h2 { font: 500 64px/1.25 var(--f-display); letter-spacing: -0.04em; text-align: center; color: #f7f1e6; }
.av2-cta-line { flex: 1; width: 1px; min-height: 80px; background: rgba(247,241,230,.7); }
.av2-cta-body { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.av2-cta-body p { width: min(448px, 100%); font: 400 16px/24px var(--f-body); letter-spacing: -0.01em; margin: 0; }
.av2-cta-body a { font: 400 16px/24px var(--f-body); color: #f7f1e6; text-decoration: none; }
.av2-cta-body a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Màn trung bình */
@media (max-width: 1200px) {
  .av2-hero h1, .av2-island h2 { font-size: 64px; }
  .av2-eclectic h2 { font-size: 96px; }
  .av2-island { padding: 120px 40px; }
  .av2-map { width: 260px; height: 347px; }
  .av2-th { width: 120px; height: 120px; }
  .av2-th.t2 { left: 40px; } .av2-th.t4 { right: 40px; }
}
@media (max-width: 900px) {
  .av2-hero-inner { padding: 0 var(--gutter) 32px; align-items: flex-start; gap: 16px; }
  .av2-hero h1 { font-size: 52px; }
  .av2-island { flex-direction: column; padding: 80px var(--gutter); gap: 32px; }
  .av2-island h2 { font-size: 52px; }
  .av2-map { width: min(330px, 100%); height: auto; aspect-ratio: 330 / 440; align-self: center; }
  .av2-land { padding: 80px var(--gutter); }
  .av2-land h2, .av2-cta h2 { font-size: 44px; }
  .av2-eclectic { padding: 64px var(--gutter); min-height: 0; gap: 32px; }
  .av2-eclectic h2 { font-size: 64px; }
  .av2-ec-stage { min-height: 0; flex-direction: column; align-items: center; gap: 32px; }
  .av2-ec-stage .av2-text { order: 0; }
  .av2-th { position: static; width: 100%; height: auto; aspect-ratio: 1; }
  .av2-ec-stage::after { content: none; }
  .av2-ec-grid { display: contents; }
  .av2-post-img { height: 480px; }
  .av2-post-card { padding: 28px 24px; }
  .av2-post-card h2 { font-size: 40px; }
  .av2-cta { min-height: 640px; padding: 80px var(--gutter); }
}
@media (max-width: 900px) {
  .av2-ec-stage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; justify-items: stretch; }
  .av2-ec-stage .av2-text { grid-column: 1 / -1; width: 100%; margin-bottom: 20px; }
}
@media (max-width: 560px) {
  .av2-hero h1 { font-size: 40px; }
  .av2-island h2 { font-size: 40px; }
  .av2-land h2, .av2-cta h2 { font-size: 34px; }
  .av2-eclectic h2 { font-size: 44px; }
  .av2-ec-stage { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .av2-th { grid-column: span 2; }
  .av2-th.t4 { grid-column: 2 / span 2; }
  .av2-th.t5 { grid-column: 4 / span 2; }
  .av2-post-img { height: 360px; margin-bottom: -96px; }
  .av2-post-card h2 { font-size: 32px; }
  .av2-post { padding-bottom: 72px; }
}
@media (min-width: 901px) { .av2-post-card h2 { white-space: nowrap; } }
@media (max-width: 900px) { .av2-post-word { font-size: 11vw; } }
@media (max-width: 560px) { .av2-cta h2 br, .av2-land h2 br { display: none; } }

/* about-v2 — Eclectic Maximalism (review 18/10): section cao đúng 100% màn hình trên desktop;
   5 ảnh khác nhau về kích thước, tỉ lệ và vị trí (theo % khung) để tạo cảm giác rải ngẫu nhiên */
@media (min-width: 901px) {
  .av2-eclectic { min-height: 100vh; min-height: 100svh; padding-top: calc(60px + 24px); }
  .av2-ec-stage { min-height: 0; }
  .av2-th { object-fit: cover; height: auto; }
  .av2-th.t1 { left: 1%;  top: 4%;   right: auto; width: 190px; aspect-ratio: 4 / 5; }
  .av2-th.t2 { left: 15%; top: 56%;  right: auto; width: 120px; aspect-ratio: 1; }
  .av2-th.t3 { left: 43%; top: auto; bottom: 0;   width: 168px; aspect-ratio: 4 / 3; }
  .av2-th.t4 { right: 12%; top: 46%; left: auto;  width: 230px; aspect-ratio: 3 / 2; }
  .av2-th.t5 { right: 1%; top: 2%;   left: auto;  width: 132px; aspect-ratio: 3 / 4; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .av2-th.t1 { width: 150px; } .av2-th.t2 { width: 100px; left: 8%; } .av2-th.t3 { width: 140px; }
  .av2-th.t4 { width: 180px; right: 6%; } .av2-th.t5 { width: 110px; }
}
/* giữ ảnh ngoài cột chữ (560px giữa) và co theo chiều cao màn, để không đè chữ trên màn thấp */
@media (min-width: 901px) {
  .av2-th.t1 { left: 0; width: min(190px, 14vw, 24svh); }
  .av2-th.t2 { left: auto; right: calc(50% + 310px); top: 60%; width: min(120px, 9vw, 18svh); }
  .av2-th.t3 { left: calc(50% - 40px); width: min(168px, 12vw, 22svh); }
  .av2-th.t4 { right: auto; left: calc(50% + 310px); top: 48%; width: min(230px, 15vw, 30svh); }
  .av2-th.t5 { right: 0; width: min(132px, 10vw, 20svh); }
}
@media (min-width: 901px) { .av2-ec-stage .av2-text { align-self: flex-start; } }
@media (min-width: 901px) { .av2-ec-stage { padding-bottom: calc(min(168px, 12vw, 22svh) * 0.75 + 24px); box-sizing: border-box; } }

/* =====================================================================
   about-v2 — Eclectic Maximalism LÀM LẠI theo Figma 257:679 (18/10, thay cho bản rải ngẫu nhiên trước)
   Khung 1440×810: tiêu đề 120px, đoạn văn 560px ở giữa; 5 ảnh vuông xếp chồng lên nhau theo cặp:
   trái 266 + 210 (chồng góc), giữa 200, phải 345 + 200 (chồng góc). Vị trí/kích thước co theo bề ngang (tối đa 1440).
   ===================================================================== */
@media (min-width: 1200px) {
  .page-about-v2 .av2-eclectic { --s: calc(min(100vw, 1440px) / 1440); position: relative; min-height: calc(810 * var(--s)); height: auto;
    padding: 80px 80px calc(80 * var(--s)); gap: 24px; justify-content: flex-start; }
  .page-about-v2 .av2-eclectic h2 { font-size: 120px; }
  .page-about-v2 .av2-ec-stage { position: static; display: flex; justify-content: center; min-height: 0; padding: 0; flex: none; width: 100%; }
  .page-about-v2 .av2-ec-stage .av2-text { width: 560px; align-self: flex-start; }
  .page-about-v2 .av2-eclectic .av2-th { position: absolute; right: auto; bottom: auto; aspect-ratio: 1; height: auto; object-fit: cover; z-index: 1;
    box-shadow: 0 10px 30px rgba(16,1,5,.18); transition: transform .5s ease, z-index 0s; }
  .page-about-v2 .av2-eclectic .av2-th:hover { transform: scale(1.04); z-index: 3; }
  .page-about-v2 .av2-eclectic .av2-th.t1 { left: calc(50% + (47 - 720) * var(--s));   top: calc(381 * var(--s)); width: calc(266 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t2 { left: calc(50% + (199 - 720) * var(--s));  top: calc(570 * var(--s)); width: calc(210 * var(--s)); z-index: 2; }
  .page-about-v2 .av2-eclectic .av2-th.t3 { left: calc(50% + (620 - 720) * var(--s));  top: calc(566 * var(--s)); width: calc(200 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t4 { left: calc(50% + (1071 - 720) * var(--s)); top: calc(362 * var(--s)); width: calc(345 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t5 { left: calc(50% + (961 - 720) * var(--s));  top: calc(570 * var(--s)); width: calc(200 * var(--s)); z-index: 2; }
}
/* dưới 1200px: chữ trên, 5 ảnh xếp lưới chồng nhẹ */
@media (min-width: 901px) and (max-width: 1199px) {
  .page-about-v2 .av2-eclectic { min-height: 0; padding: 80px 40px; }
  .page-about-v2 .av2-ec-stage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 0; min-height: 0; }
  .page-about-v2 .av2-ec-stage .av2-text { grid-column: 1 / -1; justify-self: center; width: 560px; margin-bottom: 24px; }
  .page-about-v2 .av2-eclectic .av2-th { position: static; width: 100%; height: auto; aspect-ratio: 1; }
}
/* about-v2 — bản đồ Phú Quốc (ảnh thật, 18/10): nền trắng của ảnh hoà vào nền kem */
.av2-map img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.av2-map img { mix-blend-mode: normal; }   /* ảnh PNG nền trong suốt */

/* about-v2 — "Vùng đất của tình yêu" làm lại theo Figma 263:786 (18/10):
   ảnh Cầu Hôn lúc hoàng hôn phủ kín nền, lớp tối 60%; tiêu đề 64px + đoạn văn 560px căn giữa. */
.av2-land-bg { position: relative; overflow: hidden; background: #1a0d08; min-height: 810px; box-sizing: border-box; justify-content: center; padding: 80px var(--gutter); }
.av2-land-bg .av2-land-bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; z-index: 0; }
.av2-land-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); z-index: 0; }
.av2-land-bg > :not(.av2-land-bgimg) { position: relative; z-index: 1; }
@media (max-width: 900px) { .av2-land-bg { min-height: 640px; } }
@media (max-width: 560px) { .av2-land-bg { min-height: 0; padding: 96px var(--gutter); } }
.av2-land-bg::before { z-index: 1; }
.av2-land-bg > :not(.av2-land-bgimg) { z-index: 2; }
@media (max-width: 560px) { .av2-land h2 br { display: inline; } .av2-land h2 { font-size: 30px; } }

/* about-v2 — chữ chìm "The Love Post Office" luôn dài đúng bằng bề ngang màn hình; cỡ chữ (và chiều cao) do script.js tính theo tỉ lệ (review 18/10) */
.av2-post-word { left: 0; right: 0; width: 100%; text-align: center; letter-spacing: -0.05em; }
@media (max-width: 900px) { .av2-post-word { font-size: 11vw; } }

/* about-v2 — Trạm Bưu Điện Hoài Niệm (review 18/10, desktop):
   section cao đúng 1 màn hình; thẻ chữ rộng theo tỉ lệ màn (≈44vw), tối đa 640px;
   ảnh sảnh tự dài/ngắn để bù phần còn lại của màn hình (thẻ vẫn đè lên ảnh 160px). */
@media (min-width: 901px) {
  .av2-post { min-height: 100vh; min-height: 100svh; box-sizing: border-box; }
  .av2-post-img { flex: 1 1 auto; height: auto; min-height: 280px; position: relative; }
  .av2-post-img img { position: absolute; inset: 0; }
  .av2-post-card { width: min(640px, 44.5vw); flex: none; }
  .av2-post-card h2 { white-space: normal; font-size: min(56px, 3.9vw); }
}
@media (min-width: 1200px) { .av2-post-card h2 { white-space: nowrap; } }

/* about-v2 — các section cao bằng màn hình (review 18/10) */
.av2-land-bg { min-height: 100vh; min-height: 100svh; }
.av2-cta { min-height: 100vh; min-height: 100svh; }
/* Eclectic (≥1200px): giữ bố cục Figma 1440×810 (co theo bề ngang), cả khối căn giữa theo chiều dọc trong 1 màn hình;
   nếu màn thấp hơn khung thì section cao theo khung để ảnh không đè chữ */
@media (min-width: 1200px) {
  .page-about-v2 .av2-eclectic { --oy: max(0px, (100svh - 810 * var(--s)) / 2); min-height: max(100svh, calc(810 * var(--s)));
    padding-top: calc(80px + var(--oy)); }
  .page-about-v2 .av2-eclectic .av2-th.t1 { top: calc(var(--oy) + 381 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t2 { top: calc(var(--oy) + 570 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t3 { top: calc(var(--oy) + 566 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t4 { top: calc(var(--oy) + 362 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t5 { top: calc(var(--oy) + 570 * var(--s)); }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .page-about-v2 .av2-eclectic { min-height: 100vh; min-height: 100svh; justify-content: center; }
}

/* about-v2 — Eclectic (review 18/10): giãn chữ và ảnh để tạo khoảng trống (negative space).
   Chữ neo phía trên, khoảng cách tiêu đề → đoạn văn 40px; ảnh dồn xuống đáy section và tách ra hai mép màn hình
   (nhóm trái neo mép trái, nhóm phải neo mép phải, ảnh giữa ở chính giữa), kích thước ảnh giữ theo Figma. */
@media (min-width: 1200px) {
  .page-about-v2 .av2-eclectic { --oy: 0px; --edge: max(24px, 3vw); --base: 56px;
    padding-top: 112px; gap: 40px;
    min-height: max(100svh, calc(112px + 120px + 40px + 330px + 64px + 260 * var(--s) + var(--base))); }
  .page-about-v2 .av2-eclectic .av2-th { top: auto; }
  .page-about-v2 .av2-eclectic .av2-th.t1 { left: var(--edge); bottom: calc(var(--base) + 163 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t2 { left: calc(var(--edge) + 152 * var(--s)); bottom: calc(var(--base) + 30 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t3 { left: calc(50% - 100 * var(--s)); bottom: calc(var(--base) + 44 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t4 { left: auto; right: var(--edge); bottom: calc(var(--base) + 103 * var(--s)); }
  .page-about-v2 .av2-eclectic .av2-th.t5 { left: auto; right: calc(var(--edge) + 255 * var(--s)); bottom: calc(var(--base) + 30 * var(--s)); }
}
@media (min-width: 1200px) {
  .page-about-v2 .av2-eclectic { --base: 32px; padding-top: 96px; gap: 32px;
    min-height: max(100svh, calc(96px + 120px + 32px + 340px + 32px + 244 * var(--s) + var(--base))); }
  /* nhóm ảnh hai bên không lấn vào cột chữ 560px ở giữa */
  .page-about-v2 .av2-eclectic .av2-th.t2 { left: min(calc(var(--edge) + 152 * var(--s)), calc(50% - 300px - 210 * var(--s))); }
  .page-about-v2 .av2-eclectic .av2-th.t1 { left: min(var(--edge), calc(50% - 300px - 210 * var(--s) - 152 * var(--s))); }
  .page-about-v2 .av2-eclectic .av2-th.t5 { right: min(calc(var(--edge) + 255 * var(--s)), calc(50% - 300px - 200 * var(--s))); }
}
/* about-v2 — CTA cuối trang: lớp phủ tối trên ảnh nền 40% (review 18/10; trước 60%) */
.av2-cta::before { background: rgba(6,6,6,.4); }
/* Eclectic ≥1200: chiều cao theo nội dung thật (không ước lượng): dưới đoạn văn chừa chỗ cho ảnh giữa + 32px */
@media (min-width: 1200px) {
  .page-about-v2 .av2-eclectic { min-height: 100vh; min-height: 100svh; padding-bottom: var(--base); }
  .page-about-v2 .av2-ec-stage { padding-bottom: calc(244 * var(--s) + 32px); box-sizing: content-box; }
}
@media (min-width: 1200px) { .page-about-v2 .av2-eclectic .av2-th.t1, .page-about-v2 .av2-eclectic .av2-th.t2, .page-about-v2 .av2-eclectic .av2-th.t3, .page-about-v2 .av2-eclectic .av2-th.t4, .page-about-v2 .av2-eclectic .av2-th.t5 { top: auto; } }
@media (min-width: 1200px) { .page-about-v2 .av2-ec-stage { padding-bottom: calc(244 * var(--s) + 64px); } }

/* about-v2 — Eclectic (review 18/10): khối chữ ôm nội dung (hug), padding dưới 40px;
   tiêu đề + đoạn văn căn giữa theo chiều dọc trong phần phía trên dải ảnh */
@media (min-width: 1200px) {
  .page-about-v2 .av2-ec-stage { padding-bottom: 40px; flex: none; height: auto; }
  .page-about-v2 .av2-eclectic { justify-content: center; padding-top: 72px; padding-bottom: calc(244 * var(--s) + var(--base) + 24px); }
}
/* about-v2 — CTA cuối trang: thêm một lớp phủ đen 40% nữa (chồng lên lớp 40% cũ) để ảnh tối hơn (review 18/10) */
.av2-cta::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 0; pointer-events: none; }
/* about-v2 — CTA: lớp phủ trả về một lớp duy nhất 60% (theo yêu cầu 18/10, 21:43) */
.av2-cta::before { background: rgba(6,6,6,.6); }
.av2-cta::after { content: none; }
/* about-v2 — CTA: sửa lỗi lớp phủ bị ảnh nền che mất (ảnh nằm sau ::before trong DOM nên vẽ đè lên lớp phủ).
   Thứ tự đúng: ảnh (0) → lớp phủ 60% (1) → chữ (2) */
.av2-cta > img { z-index: 0; }
.av2-cta::before { z-index: 1; }
.av2-cta > :not(img) { z-index: 2; }

/* about-v2 — "Phú Quốc, Đảo ngọc của những kỷ lục": cao 80% màn hình trên desktop (review 18/10);
   nội dung (cao 440px theo khung bản đồ) căn giữa theo chiều dọc bằng padding trên/dưới bằng nhau */
@media (min-width: 901px) {
  .av2-island { box-sizing: border-box; min-height: 80vh; min-height: 80svh;
    padding-block: max(40px, calc((80svh - 440px) / 2)); }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .av2-island { padding-block: max(40px, calc((80svh - 347px) / 2)); }
}

/* Đồng bộ (comment 18/10): mọi section dạng "pillar" (ảnh nền + tiêu đề + đường kẻ dọc + mô tả + link) dùng đúng thông số
   của 3 trụ cột trang chủ: cao 110% màn hình (tối thiểu 720px), lớp phủ --shade 60%, tiêu đề --fs-pillar / 1.25,
   khối nội dung cao tối đa 640px căn giữa, gap 40px, mô tả 448px 16/1.5, link 16/1.5.
   Áp dụng cho: CTA cuối trang Về LIMONI (trước là .av2-cta), CTA trang ANFORA và trang Phòng nghỉ (bỏ lớp phủ 50% riêng). */
.pillar.solo .pillar-title { font: 500 var(--fs-pillar)/1.25 var(--f-display); letter-spacing: -0.04em; color: var(--cream); }
.pillar.solo .more { text-decoration: none; }
.pillar.solo .more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* =====================================================================
   HIỆU ỨNG CHUYỂN TRANG (18/10, theo video tham khảo)
   Bấm link sang trang khác: màn đỏ LIMONI trượt vào từ phải phủ kín màn hình → tải trang mới →
   màn đỏ tiếp tục trượt ra sang trái, để lộ trang mới từ phải qua trái (trang mới hơi tối rồi sáng dần).
   ===================================================================== */
.pt-curtain { position: fixed; inset: 0; z-index: 2147483001; background: var(--rosso); pointer-events: none;
  transform: translateX(100%); will-change: transform; }
.pt-curtain.cover { transform: translateX(0); transition: transform .65s cubic-bezier(.76,0,.24,1); pointer-events: auto; }
.pt-curtain.at-cover { transform: translateX(0); transition: none; pointer-events: auto; }
.pt-curtain.leave { transform: translateX(-100%); transition: transform .7s cubic-bezier(.76,0,.24,1); }
.pt-shade { position: fixed; inset: 0; z-index: 2147483000; background: #1a0308; opacity: .55; pointer-events: none; transition: opacity .9s ease .15s; }
.pt-shade.off { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pt-curtain, .pt-shade { display: none; } }

/* Phòng nghỉ — Các hạng phòng: mũi tên chuyển hạng phòng trước/sau + số thứ tự (comment 18/10); chạy vòng */
.rt-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.rt-count { font: 500 20px/1 var(--f-display); color: var(--panna); letter-spacing: .02em; opacity: .8; }
.rt-count b { font-weight: 600; opacity: 1; }
.rt-arrows { display: flex; gap: 8px; }
.rt-arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--panna); border-radius: 50%;
  background: transparent; color: var(--panna); cursor: pointer; transition: background .25s ease, color .25s ease; }
.rt-arrow svg { width: 20px; height: 20px; }
.rt-arrow:hover { background: var(--panna); color: var(--rosso); }
.rt-arrow:focus-visible { outline: 2px solid var(--panna); outline-offset: 3px; }
@media (max-width: 560px) { .rt-arrow { width: 44px; height: 44px; } }
/* Dải ảnh ngang: con trỏ "nắm" khi kéo, không bôi chọn chữ/ảnh (comment 18/10) */
.strip { cursor: grab; user-select: none; -webkit-user-select: none; }
.strip.dragging { cursor: grabbing; }
.strip img { -webkit-user-drag: none; pointer-events: none; }

/* ANFORA — nút "Đặt bàn" màu xanh navy của ANFORA (comment 19/10) */
.table-booking .btn { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.table-booking .btn:hover { background: #121838; border-color: #121838; }
.table-booking .btn:focus-visible { outline-color: var(--navy); }
/* ANFORA — section Đặt bàn dùng tông xanh navy thay cho đỏ (comment 19/10): đổi biến màu rosso trong phạm vi section */
.table-booking { --rosso: var(--navy); --vino: var(--navy); }
.table-booking { color: var(--navy); }

/* Trang Ưu đãi — tiêu đề trên vé căn trái, bỏ thụt dòng so le (comment 19/10) */
.offers .ticket .tk-title { align-items: flex-start; text-align: left; }
.offers .ticket .tk-title span:first-child { padding-left: 0; }

/* Phòng nghỉ — The Love Archive (#floors): cột thẻ phòng cuộn bên phải bỏ khoảng đệm trên/dưới,
   chạy sát mép trên và mép dưới của section (comment 19/10, desktop). Cột trái giữ nguyên. */
@media (min-width: 901px) {
  .floors .floors-right { margin-top: calc(-60px - var(--gutter)); margin-bottom: calc(-1 * var(--gutter)); height: auto; align-self: stretch; }
}

/* Về LIMONI — section bản đồ "Tìm đường đến LIMONI" (comment 19/10).
   Bản đồ Google Maps nhúng; nếu trình duyệt chặn khung nhúng thì phía dưới vẫn có bản đồ minh hoạ + link chỉ đường. */
.av2-map-sec { background: #f7f1e6; color: var(--ink, #5a0406); padding: 120px max(var(--gutter), calc((100% - 1392px) / 2)); display: flex; flex-direction: column; gap: 48px; }
.av2-map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.av2-map-head h2 { font: 500 var(--fs-pillar)/1.1 var(--f-display); letter-spacing: -0.04em; color: var(--rosso); margin: 0; }
.av2-map-side { width: min(440px, 100%); display: flex; flex-direction: column; gap: 16px; }
.av2-map-side p { font: 400 16px/24px var(--f-body); letter-spacing: -0.01em; margin: 0; color: #5a0406; }
.av2-map-link { font: 400 16px/24px var(--f-body); color: var(--rosso); text-decoration: underline; text-underline-offset: 4px; }
.av2-map-frame { position: relative; width: 100%; aspect-ratio: 1392 / 620; min-height: 360px; overflow: hidden;
  background: #efe5d2 url("assets/phuquoc-map.png") center / contain no-repeat; border: 1px solid rgba(106,15,38,.25); }
.av2-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25) sepia(.12); }
@media (max-width: 900px) {
  .av2-map-sec { padding: 80px var(--gutter); gap: 32px; }
  .av2-map-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .av2-map-frame { aspect-ratio: 4 / 5; min-height: 0; }
}
/* nút mở Google Maps nổi ở góc bản đồ (luôn dùng được, kể cả khi khung nhúng bị chặn) */
.av2-map-open { position: absolute; z-index: 2; top: 16px; right: 16px; padding: 12px 18px; border-radius: 999px; background: var(--rosso); color: var(--cream);
  font: 600 12px/1 var(--f-button); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 18px rgba(16,1,5,.25); }
.av2-map-open:hover { background: #50091c; }

/* ANFORA — đoạn văn "Anfora · Chum rượu cổ": rộng tối đa 600px (comment 19/10) */
.page-anfora .split .copy > .body { max-width: 600px; }

/* ANFORA (comment 19/10):
   • "Hương vị của Cảm xúc": khoảng cách giữa tiêu đề và đoạn văn 64px
   • Triết lý ẩm thực: cột 2 thẻ bên phải rộng tối đa 600px
   • Triết lý ẩm thực, Không gian riêng tư (tầng thượng), FAQ: nội dung tối đa 1440px, căn giữa (nền vẫn tràn kín màn hình) */
@media (min-width: 901px) { .page-anfora .band-head { gap: 64px; } .page-anfora .band-head .stack { margin-bottom: 0; } }
.page-anfora .philosophy .menu-list { max-width: 600px; }
.page-anfora #menu-list, .page-anfora .rooftop, .page-anfora #faq {
  padding-left: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); }

/* Liên hệ — section đặt phòng (#dat-phong): nội dung tối đa 1440px, căn giữa; nền vẫn tràn kín (comment 19/10) */
#dat-phong { padding-left: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); }

/* Liên hệ — section FAQ (#faq): nội dung tối đa 1440px, căn giữa; nền vẫn tràn kín (comment 19/10) */
.page-contact #faq { padding-left: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); }

/* ANFORA — "Hương vị của Cảm xúc" (band-head): nội dung tối đa 1440px, căn giữa (comment 19/10) */
.page-anfora .navy-band > .band-head { max-width: 1440px; margin-inline: auto; width: 100%; box-sizing: border-box; }

/* Chuyển trang — phối lại thời gian (19/10): phủ 0,5s → chuyển trang ngay (trang mới đã tải trước) → rút 0,6s, không còn khoảng dừng */
.pt-curtain.cover { transition-duration: .5s; }
.pt-curtain.leave { transition-duration: .6s; }
.pt-shade { transition: opacity .7s ease .1s; }

/* FAQ (#faq) trên mọi trang (VN + EN): nội dung tối đa 1440px, căn giữa; nền vẫn tràn kín (comment 19/10) */
#faq { padding-left: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); }

/* Ưu đãi — mobile (comment 19/10): vuốt ngang để chuyển ưu đãi + mũi tên trái/phải và số thứ tự ở dưới */
.offers-track { touch-action: pan-y; }
.offers-nav { display: none; }
@media (max-width: 560px) {
  .offers-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: var(--tw); margin: -8px auto 0; }
}
@media (hover: none) { .offers-nav .rt-arrow:hover { background: transparent; color: var(--panna); } }
/* Ưu đãi — mobile (comment 19/10): bỏ số thứ tự, hai mũi tên căn giữa */
.offers-nav .rt-count { display: none; }
@media (max-width: 560px) { .offers-nav { justify-content: center; } }

/* Trang chủ — "Khách hàng nói gì?" trên mobile (comment 19/10): 3 review thành dải vuốt ngang, mỗi lần một thẻ, hé thẻ kế tiếp */
.cards-dots { display: none; }
@media (max-width: 560px) {
  .reviews .cards { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .reviews .cards::-webkit-scrollbar { display: none; }
  .reviews .card { flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always; }
  .cards-dots { display: flex; justify-content: center; gap: 8px; margin-top: -8px; }
  .cards-dots button { width: 8px; height: 8px; padding: 0; border: 1px solid var(--cream); border-radius: 50%; background: transparent; cursor: pointer; transition: background .25s ease; }
  .cards-dots button[aria-current="true"] { background: var(--cream); }
}

/* (22/10: đã hoàn tác thay đổi khối chữ "Ba điều LIMONI giữ gìn" về bản gốc 438px) */

/* Trang chủ — Nhà hàng ANFORA: khối chữ rộng thêm 100px (438 → 538px) (comment 20/10) */
#anfora .side-copy { width: min(538px, 100%); }

/* Trang chủ — intro "Một dinh thự Ý thu nhỏ": đoạn văn rộng thêm 24px (448 → 472px) (comment 20/10) */
.intro-text .body { max-width: 472px; }

/* Phòng nghỉ — chỉ báo ảnh trong carousel hạng phòng (comment 20/10): vạch mảnh ở đáy ảnh, vạch đang xem chạy đầy trong 2s */
.rt-ind { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; gap: 6px; }
.rt-ind[hidden] { display: none; }
.rt-ind::before { content: ""; position: absolute; inset: -40px -16px -16px; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(16,1,5,.45), transparent); }
.rt-ind button { flex: 1; height: 16px; padding: 7px 0; border: 0; background: none; cursor: pointer; }
.rt-ind button span { display: block; height: 2px; background: rgba(248,240,225,.35); position: relative; overflow: hidden; }
.rt-ind button span::after { content: ""; position: absolute; inset: 0; background: var(--cream); transform: scaleX(0); transform-origin: 0 50%; }
.rt-ind button.done span::after { transform: scaleX(1); }
.rt-ind button.on span::after { transform: scaleX(1); }
.rt-ind.running button.on span::after { transform: scaleX(0); animation: rtInd 2s linear forwards; }
@keyframes rtInd { to { transform: scaleX(1); } }
.rt-ind button:focus-visible { outline: 1px solid var(--cream); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rt-ind.running button.on span::after { animation: none; transform: scaleX(1); } }

/* ANFORA (comment 20/10): thanh header khi cuộn và lớp overlay ảnh hero dùng màu xanh navy của ANFORA thay cho đỏ/đen */
.site-header.hdr-anfora.solid { background: var(--navy); }
.page-anfora .phero.dim > .ph::after { background: linear-gradient(rgba(27,34,75,.45), rgba(27,34,75,.45)), linear-gradient(180deg, rgba(27,34,75,0) 45%, rgba(15,19,45,.9) 100%); }

/* Liên hệ — hero: bỏ lớp overlay tối ở đáy ảnh, giữ lớp tối bên trái (cho chữ) và dải mờ trên cùng (cho header) (comment 20/10) */
.page-contact .phero.side > .ph::after { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.32) 50%, rgba(0,0,0,0) 100%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%); }
/* Liên hệ — hero: overlay còn 60% độ đậm (comment 20/10) */
.page-contact .phero.side > .ph::after { opacity: .6; }

/* Menu — số điện thoại & email là link bấm được (gọi / gửi mail) (comment 20/10) */
.menu-panel .menu-foot a { color: inherit; text-decoration: underline; text-decoration-color: rgba(248,240,225,.4); text-underline-offset: 4px; white-space: nowrap; width: fit-content; transition: text-decoration-color .25s ease, opacity .25s ease; }
.menu-panel .menu-foot a:hover, .menu-panel .menu-foot a:focus-visible { text-decoration-color: currentColor; }
.menu-panel .menu-foot a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* ANFORA — hero: overlay đen phẳng, opacity 50% (comment 20/10, thay lớp navy trước đó) */
.page-anfora .phero.dim > .ph::after { background: rgba(0,0,0,.5); }
/* ANFORA — CTA "Một không gian ẩm thực, một khoảnh khắc bình yên": overlay xanh navy, opacity 40% (comment 20/10) */
.page-anfora .pillar.solo > .ph::before { background: rgba(27,34,75,.4); }
#dat-ban { scroll-margin-top: 60px; }

/* ANFORA — header có 2 nút bên phải: "Thực đơn" + "Đặt bàn" (comment 23/10) */
.hdr-right { justify-self: end; display: flex; align-items: center; gap: 32px; }
#menu-list { scroll-margin-top: 60px; }
@media (max-width: 560px) {
  .hdr-right { gap: 14px; }
  .hdr-anfora .hdr-right .btn-label { letter-spacing: .08em; }
}
.hdr-right .btn-label { white-space: nowrap; }
@media (max-width: 560px) {
  /* trang ANFORA trên mobile: nút Menu chỉ còn biểu tượng để đủ chỗ cho 2 nút bên phải */
  .site-header.hdr-anfora { grid-template-columns: auto 1fr auto; }
  .hdr-anfora > .logo { justify-self: center; }
  .hdr-anfora > #menuOpen .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ANFORA — section "Không gian riêng tư": khoảng đệm dưới ảnh tầng thượng 40px (comment 23/10) */
.rooftop { padding-bottom: 40px; }

/* Trang chủ — The Love Archive: hai cột chữ hai bên (tiêu đề trái, đoạn chữ phải) rộng thêm 40px (320 → 360px) (comment 23/10) */
@media (min-width: 901px) { #archive .archive-title, #archive .archive-side { width: 360px; } }
/* Trang chủ — The Love Archive: rộng thêm 24px nữa (360 → 384px) (comment 23/10) */
@media (min-width: 901px) { #archive .archive-title, #archive .archive-side { width: 384px; } }
/* Trang chủ — The Love Archive: cột chữ phải tự nới vừa để dòng "nơi hội tụ hai mươi câu chuyện tình yêu" nằm trọn 1 dòng (comment 23/10).
   Đoạn văn bên dưới không làm cột rộng thêm (width:0 + min-width:100%), chỉ ăn theo bề rộng của câu dẫn (tối thiểu 384px). */
@media (min-width: 1101px) {
  #archive .archive-side { width: max-content; min-width: 384px; }
  #archive .archive-side .lead { white-space: nowrap; }
  #archive .archive-side .body { width: 0; min-width: 100%; }
}