:root {
  /* Biến màu được inject từ includes/partials/brand-vars.php */
}

body { min-width: 320px; text-wrap: pretty; }

h1, h2, h3, .font-display { text-wrap: balance; }
p, li, .dining-card p, .room-card p, .blog-card p,
.experience-card p, .feature-pill, .filter-btn { text-wrap: pretty; }

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

header.scrolled {
  background: rgba(255, 251, 245, .94);
  border-bottom: 1px solid rgba(var(--color-gold-rgb), .18);
  backdrop-filter: blur(18px);
}
header.scrolled nav,
header.scrolled #menuBtn { color: var(--color-ink); }
.site-logo { transition: filter .3s ease; }
header.scrolled a[href="#booking"] {
  border-color: rgba(var(--color-gold-rgb), .4);
  color: var(--color-gold-dark);
}

.hero-slider { position:absolute; inset:0; }
.hero-overlay { pointer-events:none; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease-in-out; pointer-events:none; }
.hero-slide.active { opacity:1; pointer-events:auto; z-index:1; }
.hero-slide img { height:100%; width:100%; object-fit:cover; }

.hero-foreground { pointer-events:none; }
.hero-foreground a,
.hero-foreground button,
.hero-foreground input,
.hero-foreground select,
.hero-foreground form,
.hero-foreground .hero-nav-btn { pointer-events:auto; }

.hero-titles { position:relative; min-height:9rem; }
@media (min-width:768px) { .hero-titles { min-height:12rem; } }
.hero-slide-title {
  position:absolute; inset:0 auto auto 0;
  width:100%; margin:0;
  opacity:0; transform:translateY(1.25rem);
  transition:opacity .8s ease, transform .8s ease;
  text-shadow:0 8px 40px rgba(10, 10, 10, .55);
  pointer-events:none;
}
.hero-slide-title.active {
  opacity:1; transform:translateY(0);
  position:relative; pointer-events:auto;
}

/* Cuộn xuống – con trỏ chuột */
.hero-scroll-hint {
  display:flex; flex-direction:column; align-items:center; gap:.65rem;
  margin:0 auto 10rem; width:fit-content;
  color:#fff; text-decoration:none;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:auto;
}
.hero-scroll-hint:hover { opacity:.85; transform:translateY(3px); }
.hero-scroll-label {
  font-size:.72rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.hero-scroll-mouse {
  display:block; width:1.55rem; height:2.35rem;
  border:2px solid rgba(255,255,255,.85);
  border-radius:999px; position:relative;
}
.hero-scroll-wheel {
  position:absolute; top:.45rem; left:50%;
  width:3px; height:.55rem;
  margin-left:-1.5px;
  border-radius:999px;
  background:var(--color-gold);
  animation:hero-scroll-wheel 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-wheel {
  0% { opacity:1; transform:translateY(0); }
  70% { opacity:.2; transform:translateY(.55rem); }
  100% { opacity:0; transform:translateY(.55rem); }
}

/* Nav dọc bên phải */
.hero-nav-rail {
  position:absolute; right:1.25rem; top:50%;
  z-index:20; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  color:#fff; pointer-events:auto;
}
@media (min-width:1024px) { .hero-nav-rail { right:2rem; } }
.hero-nav-current,
.hero-nav-total {
  font-size:.95rem; font-weight:700;
  letter-spacing:.12em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.hero-nav-track {
  position:relative; width:2px; height:5.5rem;
  background:rgba(255,255,255,.22);
  border-radius:999px; overflow:hidden;
}
.hero-nav-progress {
  position:absolute; top:0; left:0; width:100%;
  background:#fff; border-radius:999px;
  height:20%; transition:height .6s ease;
}
.hero-nav-arrows { display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.hero-nav-btn {
  display:grid; place-items:center;
  width:2rem; height:2rem;
  border:0; background:transparent;
  color:rgba(255,255,255,.9); cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}
.hero-nav-btn:hover { color:var(--color-gold-light); }
.hero-nav-btn:active { transform:scale(.92); }

.hero-booking { pointer-events:none; }
.hero-booking form { pointer-events:auto; }

.eyebrow {
  display:inline-flex; margin-bottom:1rem;
  font-size:.75rem; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--color-gold);
}

.room-card {
  overflow:hidden; border-radius:2rem;
  background:var(--color-pearl);
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(var(--color-gold-rgb), .12);
}
.room-card img { height:290px; width:100%; object-fit:cover; transition:transform .7s ease; }
.room-card:hover img { transform:scale(1.06); }
.room-card div { padding:1.5rem; }
.room-card span {
  color:var(--color-primary);
  font-size:.8rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.14em;
}
.room-card h3 {
  margin-top:.6rem;
  font-family:'Cormorant Garamond',serif;
  font-size:2rem; line-height:1.08; font-weight:700;
  color:var(--color-ink); text-wrap:balance;
}
.room-card p { margin-top:.75rem; color:var(--text-muted); line-height:1.65; text-wrap:pretty; }
.room-card.featured {
  background:var(--color-primary);
  border-color:rgba(var(--color-gold-rgb), .4);
  color:var(--color-ink);
}
.room-card.featured span { color:var(--color-ink); opacity:.72; }
.room-card.featured h3 { color:var(--color-ink); }
.room-card.featured p { color:rgba(15, 13, 10, .75); }

.feature-pill {
  display:block; width:100%; cursor:pointer; text-align:left;
  border-radius:1.25rem;
  background:var(--color-pearl);
  border:1px solid rgba(var(--color-gold-rgb), .2);
  padding:1rem 1.1rem;
  font-size:.9rem; font-weight:800; line-height:1.45;
  color:var(--color-ink);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.feature-pill:hover { border-color:rgba(var(--color-gold-rgb), .45); }
.feature-pill.active,
.feature-pill.experience-tab.active {
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-ink);
}

.experience-display-image { transition:opacity .45s ease; }
.experience-display-image.is-fading { opacity:0; }

/* Parallax sections */
.section-parallax { isolation:isolate; }
.section-parallax-bg {
  position:absolute; inset:-15% 0;
  background-size:cover; background-position:center;
  will-change:transform;
}
.section-parallax-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,10,.55), rgba(10,10,10,.78));
  pointer-events:none;
}
.section-parallax-overlay--dining {
  background:linear-gradient(135deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.48) 50%, rgba(10,10,10,.72) 100%);
}

.contact-panel { min-height:22rem; }
.contact-panel-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.contact-panel-overlay {
  position:absolute; inset:0;
  background:rgba(10, 10, 10, .68);
  pointer-events:none;
}

.dining-card {
  border:1px solid rgba(255, 255, 255, .22);
  border-radius:1.5rem;
  background:rgba(255, 255, 255, .1);
  backdrop-filter:blur(10px);
  padding:1.35rem 1.25rem; min-height:190px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.dining-card h3 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.35rem, 2vw, 2rem);
  font-weight:700; line-height:1.15;
  color:#fff; text-wrap:balance;
}
.dining-card p {
  margin-top:.4rem;
  font-size:.92rem; line-height:1.45;
  color:rgba(255, 255, 255, .85);
  text-wrap:balance;
}

.experience-card {
  min-height:360px; border-radius:2rem; overflow:hidden;
  background-size:cover; background-position:center;
  padding:1.5rem; color:white;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; isolation:isolate;
}
.experience-card:before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10, 10, 10, .84), rgba(10, 10, 10, .15));
  z-index:-1;
}
.experience-card h3 {
  font-family:'Cormorant Garamond',serif;
  font-size:2.2rem; line-height:1.08; font-weight:700;
  color:var(--color-gold-light); text-wrap:balance;
}
.experience-card p { margin-top:.5rem; color:rgba(255, 255, 255, .8); text-wrap:pretty; line-height:1.5; }

.filter-btn {
  border-radius:999px;
  border:1px solid rgba(var(--color-gold-rgb), .35);
  padding:.8rem 1rem;
  font-size:.85rem; font-weight:800;
  color:var(--color-ink);
}
.filter-btn.active,
.filter-btn:hover {
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#0A0A0A;
}

.blog-card {
  border-radius:2rem; background:var(--color-pearl);
  border:1px solid rgba(var(--color-gold-rgb), .12);
  padding:1.5rem; min-height:280px;
  display:flex; flex-direction:column;
  box-shadow:0 16px 40px rgba(15, 13, 10, .08);
}
.blog-card span {
  color:var(--color-gold);
  font-size:.75rem; font-weight:900;
  letter-spacing:.15em; text-transform:uppercase;
}
.blog-card h3 {
  margin-top:.8rem;
  font-family:'Cormorant Garamond',serif;
  font-size:2rem; line-height:1.08; font-weight:700;
  color:var(--color-ink); text-wrap:balance;
}
.blog-card p { margin-top:.8rem; color:var(--text-muted); line-height:1.65; text-wrap:pretty; }
.blog-card a {
  margin-top:auto; padding-top:1.2rem;
  font-size:.9rem; font-weight:900;
  color:var(--color-primary);
}

.prose-like h2 {
  margin-top:2rem;
  font-family:'Cormorant Garamond',serif;
  font-size:2.4rem; line-height:1.1; font-weight:700;
  color:var(--color-ink);
}
.prose-like p { margin-top:1rem; font-size:1.08rem; line-height:1.9; color:var(--text-muted-light); }
.prose-like a { color:var(--color-primary); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.prose-like ul { margin-top:1rem; padding-left:1.25rem; list-style:disc; }
.prose-like li { margin-top:.5rem; font-size:1.08rem; line-height:1.9; color:var(--text-muted-light); }

.cost-list { margin-top:1rem; }
.cost-list dt { margin-top:1rem; font-weight:800; color:var(--color-ink); }
.cost-list dd { margin-top:.35rem; font-size:1.08rem; line-height:1.9; color:var(--text-muted-light); }

.faq-item {
  margin-top:1rem; border-radius:1.25rem;
  background:var(--color-sand);
  border:1px solid rgba(var(--color-gold-rgb), .14);
  padding:1rem 1.25rem;
}
.faq-item summary { cursor:pointer; font-size:1.05rem; line-height:1.6; color:var(--color-ink); }
.faq-item p { margin-top:.75rem; }

/* Blog listing hero */
.blog-hero { isolation:isolate; }
.blog-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.blog-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,10,.48), rgba(10,10,10,.72));
  pointer-events:none;
}
.blog-hero nav,
.blog-hero nav a { color:rgba(255,255,255,.72); }
.blog-hero nav a:hover { color:#fff; }

/* Blog detail watermark */
.blog-detail-page { position:relative; }
.blog-detail-page > header,
.blog-detail-page > article,
.blog-detail-page > footer { position:relative; z-index:1; }
.blog-detail-watermark {
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:min(520px, 78vw);
  height:min(320px, 45vh);
  background:center / contain no-repeat;
  opacity:.38;
  pointer-events:none;
  z-index:0;
}

/* Blog article CTA (outside .prose-like) */
.blog-cta h2 { margin-top:0; }
.blog-cta-btn {
  display:inline-block;
  border-radius:999px;
  padding:.75rem 1.75rem;
  text-align:center;
  font-size:.875rem;
  font-weight:700;
  text-decoration:none !important;
  transition:background .2s ease, border-color .2s ease;
}
.blog-cta-btn--primary {
  background:var(--color-primary);
  color:var(--color-ink);
}
.blog-cta-btn--primary:hover { background:var(--color-gold-light); }
.blog-cta-btn--outline {
  border:1px solid rgba(var(--color-gold-rgb), .45);
  color:var(--color-ink);
  background:#fff;
}
.blog-cta-btn--outline:hover {
  border-color:var(--color-primary);
  background:rgba(var(--color-gold-rgb), .08);
}

@media (max-width: 768px) {
  .hero-slide-title { font-size:4.4rem; }
  .hero-titles { min-height:7.5rem; }
  .hero-nav-rail { right:.75rem; gap:.65rem; }
  .hero-nav-track { height:4rem; }
  .room-card img { height:230px; }
}