/* ========= GLOBAL SCROLL ========= */
html{ scroll-behavior:smooth; }
/* Tránh header che khi nhảy đến anchor */
section{ scroll-margin-top:120px; }
@media (max-width:992px){ section{ scroll-margin-top:90px; } }

/* ========= RESET & THEME ========= */
*{ margin:0; padding:0; box-sizing:border-box; }
:root{
  --brown:#483732; --gold:#a8864b; --gold-soft:#d6b57c;
  --paper:#faf9f6; --ink:#3c2f2f;
}
body{
  font-family:'Raleway',sans-serif; background:var(--paper); color:var(--ink);
  line-height:1.7; font-size:16px; letter-spacing:1px; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
body.menu-open{ overflow:hidden; touch-action:none; }

/* ========= ICON FIX ========= */
.fa,.fa-solid,.fa-regular,.fa-brands{
  letter-spacing:0!important; line-height:1!important;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.fa-solid{font-family:"Font Awesome 6 Free"; font-weight:900;}
.fa-regular{font-family:"Font Awesome 6 Free"; font-weight:400;}
.fa-brands{font-family:"Font Awesome 6 Brands"; font-weight:400;}
/* Đổi .amenities i -> ul.amenities i để không đè banner */
ul.amenities i,.fe-socials i,.nav-lang i,.lang-switch i{
  display:inline-block; width:1.25em; min-width:1.25em; text-align:center;
}

/* ========= HEADER ========= */
header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  color: #f2e6cf;
  background: linear-gradient(
    to bottom,
    rgba(72, 55, 50, 0.98) 0%,
    rgba(72, 55, 50, 0.85) 35%,
    rgba(72, 55, 50, 0.6) 65%,
    rgba(72, 55, 50, 0.3) 85%,
    rgba(72, 55, 50, 0) 100%
  );
  z-index: 100;
  transition: background 0.4s ease, padding 0.3s ease, box-shadow 0.4s ease;
}
header.scrolled{
  background:var(--brown); box-shadow:0 2px 10px rgba(0,0,0,.2); padding:.7rem 5%;
}
header img{ height:110px; transition:height .3s ease, opacity .4s ease; }
header.scrolled img{ height:95px; opacity:.95; }

nav{ display:flex; align-items:center; gap:2rem; }
nav a{
  color:#f2e6cf; text-decoration:none; font-weight:100; text-transform:uppercase;
  font-size:13px; letter-spacing:2px; transition:color .25s ease;
}
nav a:hover{ color:var(--gold-soft); }

/* Menu toggle (nút tròn) */
.menu-toggle{
  display:none; position:fixed; right:16px; top:calc(env(safe-area-inset-top,0px) + 12px);
  z-index:300; width:48px; height:48px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(72,55,50,.92); border:1px solid rgba(214,181,124,.3);
  box-shadow:0 6px 18px rgba(0,0,0,.25); backdrop-filter:blur(8px);
  transition:transform .2s ease, background .25s ease;
}
.menu-toggle:hover{ transform:translateY(-2px); }
.menu-toggle i{ font-size:20px; color:#f2e6cf; line-height:1; }
.menu-toggle.active{ background:#6a524a; }
.menu-toggle span{ display:none; }

/* ========= FULLSCREEN SECTIONS (tách riêng từng class) ========= */
/* Base chung cho từng section full-screen */
.hero{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.diemden{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.dining{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.offers{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.our-story{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.wellness{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.roo{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
section.amenities{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}

/* ::before nền */
.hero::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.diemden::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.offers::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.dining::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.our-story::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.wellness::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.roo::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
section.amenities::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}

/* ::after overlay */
.hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.diemden::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.offers::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.dining::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.our-story::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.wellness::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.roo::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
section.amenities::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }

/* H1 (giữ nguyên style & animation) */
.hero h1,
.diemden h1,
.dining h1,
.offers h1,
.our-story h1,
.wellness h1,
.roo h1,
section.amenities h1{
  position:relative; z-index:1;
  font-family:'Raleway',serif;
  font-size:30px; font-weight:100; color:#f5e4b2;
  letter-spacing:6px; text-transform:uppercase; line-height:1.3;
  opacity:0; animation:fadeDown 2.2s ease-out both;
  text-shadow:0 1px 6px rgba(0,0,0,.25);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

/* Ảnh nền từng section (biến --bg) */
.hero{       --bg:url('images/bn.jpg?v=2'); }
.diemden{    --bg:url('images/hoi-an-destination.jpg?v=2'); }
.dining{     --bg:url('images/bannerdini.jpg?v=2'); }
.offers{     --bg:url('images/banner-offers.jpg?v=2'); }
.our-story{  --bg:url('images/bannerstory.jpg?v=2'); }
.wellness{   --bg:url('images/bannerspa.jpg?v=2'); }
.roo{        --bg:url('images/bannerroo.jpg?v=2'); }
section.amenities{ --bg:url('images/amenitie-banner.jpg?v=2'); } /* đổi đường dẫn nếu cần */

/* Cho phép xuống dòng “thuần Việt” trên mobile */
.hero h1 .break-mobile{ white-space:nowrap; }
.diemden h1 .break-mobile{ white-space:nowrap; }
.offers h1 .break-mobile{ white-space:nowrap; }
.dining h1 .break-mobile{ white-space:nowrap; }
.our-story h1 .break-mobile{ white-space:nowrap; }
.wellness h1 .break-mobile{ white-space:nowrap; }
.roo h1 .break-mobile{ white-space:nowrap; }
section.amenities h1 .break-mobile{ white-space:nowrap; }

/* ========= KEYFRAMES ========= */
@keyframes slowBreathe{
  0%{   transform:scale(1.08); filter:brightness(80%) contrast(110%); }
  50%{  transform:scale(1.10); filter:brightness(85%) contrast(108%); }
  100%{ transform:scale(1.05); filter:brightness(90%) contrast(104%); }
}
/* fade-in từ trên xuống, mượt & tinh tế */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  60% { opacity: 1; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========= SECTIONS / ANIM-IN ========= */
section{ padding:50px 10%; }
.section-title{
  text-align:center; text-transform:uppercase; color:var(--gold);
  font-weight:400; font-size:1.4rem; letter-spacing:2px; margin-bottom:2.5rem;
}
.fade-element{ opacity:0; transform:translateY(40px); transition:all 1s ease; }
.show{ opacity:1; transform:translateY(0); }

/* ========= STORY ========= */
.story{
  max-width:820px; margin:0 auto; text-align:center; color:#4b3f2f;
  font-weight:400; line-height:1.9; font-size:15px; letter-spacing:1px;
}
.story p{ margin:0 auto 15px; text-align:center; max-width:750px; }

/* ========= ROOMS ========= */
.rooms{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; align-items:stretch;
}
.room{
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column; justify-content:space-between;
}
.room:hover{ transform:translateY(-5px); box-shadow:0 15px 25px rgba(0,0,0,.15); }
.room img{ height:320px; object-fit:cover; }
.room:hover img{ transform:none !important; }
.room .info{ padding:1.5rem; text-align:left; }
.room .info h3{
  font-size:1.15rem; color:var(--gold); margin-bottom:.5rem;
  letter-spacing:1px; font-weight:500; text-transform:uppercase;
}
.room .info p{ font-size:.95rem; margin-bottom:.8rem; }
.room .details{ font-size:.85rem; color:#665c4d; line-height:1.6; }

/* Bảng giá */
.price-table{
  width:100%; border-collapse:collapse; margin:.35rem 0 1rem;
  font-size:.95rem; color:#4b3f2f;
}
.price-table th{
  background:#483732; color:#fff; text-align:left;
  padding:6px 10px; font-weight:600; letter-spacing:1px;
}
.price-table td{ padding:6px 10px; border-bottom:1px solid #e6dccb; }

/* ========= TIỆN ÍCH (UL) – tách riêng khỏi banner ========= */
.details strong{
  display:inline-block; margin:.2rem 0 .5rem;
  text-transform:uppercase; letter-spacing:2px;
}
ul.amenities{
  list-style:none; margin:.6rem 0 1rem; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:1.2rem; row-gap:.5rem;
}
ul.amenities li{ display:flex; gap:.6rem; align-items:flex-start; }
ul.amenities i{ color:var(--gold-soft); font-size:.95rem; margin-top:.15rem; }

/* CTA (dùng chung với .btn-detail) */
.room button,.btn-detail{
  background:transparent; color:#483732; border:1px solid #483732;
  padding:12px 28px; letter-spacing: 4px;font-family:'Raleway',sans-serif; font-weight:500; font-size:14px;
  text-transform:uppercase; border-radius:0; cursor:pointer;
  align-self:center; margin:1rem auto 1.6rem; transition:all .3s ease; text-decoration:none;
}
.room button:hover,.btn-detail:hover{
  background:#483732; color:#f8f4ef;
  transform:translateY(-3px); box-shadow:0 6px 15px rgba(0,0,0,.15);
}

/* ========= FOOTER ========= */
.footer-elegant{
  background:#483732; color:#f2e6cf;
  padding:64px 6vw 56px; text-align:center; letter-spacing:2px;
}
.footer-elegant a{ color:#f2e6cf; text-decoration:none; transition:color .25s ease; }
.footer-elegant a:hover{ color:#d6b57c; }
.fe-socials{
  list-style:none; display:flex; justify-content:center; gap:28px;
  margin:0 0 30px; padding:0;
}
.fe-socials a{ font-size:26px; color:#e2d8c5; }
.fe-socials a:hover{ color:#d6b57c; }
.fe-collection{ font-size:1rem; letter-spacing:4px; margin:24px 0 22px; }
.fe-policy{ font-size:.75rem; line-height:2; opacity:.9; letter-spacing:2px; }
.fe-top{
  position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:50%;
  border:none; background:#5a463f; color:#f7efe0; display:grid; place-items:center;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .25s ease, background .25s ease; opacity:.95; z-index:120;
}
.fe-top:hover{ background:#6a524a; transform:translateY(-3px); }
.fe-contact .nowrap{ white-space:nowrap; }

/* ========= LANGUAGE SWITCH ========= */
.lang-switch{
  position:fixed; top:10px; right:10px; z-index:140;
  display:flex; align-items:center; gap:8px;
  background:rgba(72,55,50,.75); color:#f2e6cf;
  padding: 6px 10px; border-radius:999px; backdrop-filter:blur(8px);
  font-size:12px; letter-spacing:1px;
}

/* icon */
.lang-switch i{ font-size:13px; opacity:.9; }

/* link cũ (nếu còn dùng) */
.lang-switch a{
  text-decoration:none;
  color:#f2e6cf;
  opacity:.9;
  font-weight:600;
  text-transform:uppercase;
}
.lang-switch a:hover{ color:var(--gold-soft); opacity:1; }
.lang-switch .sep{ opacity:.5; }
.lang-switch a.active{ color:var(--gold); opacity:1; }

.mobile-book-now{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(214,181,124,.4);
  background:linear-gradient(135deg, #a46f32, #c89b5a);
  color:#fff;
}

.mobile-book-now:hover{
  background:#3b302c;
}
/* ===== NEW: BOOK NOW BUTTON ===== */
.lang-switch .btn-book-now{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:6px 12px;
  border-radius:999px;

  border:1px solid rgba(214,181,124,.5);
  background:linear-gradient(135deg, #a46f32, #c89b5a);
  color:#fff;

  font-family:'Raleway',sans-serif;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;

  cursor:pointer;
  transition:all .25s ease;

  box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

/* icon trong button */
.lang-switch .btn-book-now i{
  font-size:12px;
}

/* hover */
.lang-switch .btn-book-now:hover{
  background:linear-gradient(135deg, #8f5f2d, #b88b4c);
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
  transform:translateY(-1px);
}

/* click */
.lang-switch .btn-book-now:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

/* mobile tinh chỉnh */
@media (max-width:768px){
  .lang-switch{
    top:8px; right:10px;
    padding:5px 8px;
  }

  .lang-switch .btn-book-now{
    padding:5px 10px;
    font-size:10px;
    letter-spacing:1.5px;
  }
}

/* Nav language (mobile) */
.nav-lang{ display:none; gap:10px; align-items:center; margin-top:24px; }
.nav-lang a{ font-weight:700; }
.nav-lang .sep{ opacity:.6; }

/* ========= CORE VALUES ========= */
#core-values{ background:#483732; color:#f2e6cf; padding:0; }
#core-values .cv-wrap{ display:flex; flex-direction:column; align-items:stretch; }
#core-values .cv-media{ position:relative; min-height:360px; background:#3f312d; }
#core-values .cv-media picture,
#core-values .cv-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
#core-values .cv-content{ padding:28px 22px 36px; line-height:1.85; letter-spacing:.3px; }
#core-values .cv-heading{
  text-transform:uppercase; color:#d6b57c; letter-spacing:2px;
  font-weight:500; font-size:1.15rem; margin-bottom:14px;
}
#core-values .cv-subheading{
  margin:12px 0 8px; color:#d6b57c;
  letter-spacing:2px; font-weight:100; font-size:1rem; text-transform:uppercase;
}
#core-values .cv-content p{ margin-bottom:12px; font-size:15px; font-weight:100; letter-spacing:1px; }
#core-values .cv-principles{ font-weight:100; }

/* Tablet */
@media (min-width:600px){
  #core-values .cv-media{ min-height:420px; }
  #core-values .cv-content{ padding:36px 6% 42px; }
  #core-values .cv-heading{ font-size:1.25rem; }
}
/* Desktop 50/50 */
@media (min-width:992px){
  #core-values .cv-wrap{ flex-direction:row; }
  #core-values .cv-media{ flex:1 1 50%; min-height:520px; }
  #core-values .cv-content{ flex:1 1 50%; padding:4rem 6%; }
  #core-values .cv-heading{ font-size:18px; font-weight:100; letter-spacing:3px; }
  #core-values .cv-subheading{ font-size:18px; letter-spacing:3px; }
}
/* Hiệu ứng xuất hiện */
#core-values.fade-element{ opacity:0; transform:translateY(60px); transition:all .9s ease-out; }
#core-values.fade-element.show{ opacity:1; transform:translateY(0); }
#core-values .fade-element{ opacity:0; transform:translateY(40px); transition:all 1s ease-out; }
#core-values .fade-element.show{ opacity:1; transform:translateY(0); }

/* ========= DESTINATIONS ========= */
#destinations{
  position:relative; width:100%; height:80vh; min-height:520px;
  display:flex; align-items:center; justify-content:flex-start;
  overflow:hidden; background:#000;
}
.dest-bg {
  position: absolute;
  inset: 0;
  background: url('images/bannerdd.jpg?v=2') center/cover no-repeat;
  filter: brightness(80%) contrast(105%);
  transform: scale(1.05);
  animation: slowBreathe 8s ease-in-out infinite alternate;
  will-change: transform, filter;
  z-index: 0;
}
.dest-inner{
  position:relative; z-index:2; width:50%; height:100%;
  background:#faf9f6; display:flex; align-items:center; justify-content:center;
  padding:4rem 6%;
}
.dest-textbox{ max-width:480px; color:#3a2e29; animation:fadeUp 1.2s ease-out forwards; }
.dest-sub{
  text-transform:uppercase; font-size:.8rem; letter-spacing:2px;
  color:#5a4b42; margin-bottom:1.2rem;
}
.dest-heading{
  font-size:28px; font-weight:400; line-height:1.1; text-transform:uppercase;
  letter-spacing:2px; color:#483732; margin-bottom:1.5rem;
}
.dest-desc{
  font-size:16px; line-height:1.8; color:#4a3e38; letter-spacing:1px; max-width:400px;margin-bottom: 20px;
}
.dest-btn{
  display:inline-block; text-decoration:none; color:#483732;
  border:1px solid #483732; padding:.75rem 1.6rem; font-size:.9rem; letter-spacing:1px;
  transition:all .3s ease;
}
.dest-btn:hover{ background:#483732; color:#f8f4ef; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:992px){
  #destinations{ flex-direction:column; height:auto; min-height:640px; }
  .dest-inner{ width:100%; height:auto; padding:3rem 10%; }
  .dest-heading{ font-size:25px; letter-spacing:2px; }
}

/* ========= Utility ========= */
.nowrap{ white-space:nowrap!important; }

/* Swap-in mượt (không chớp trắng) */
.page-wrap.swap-in{ opacity:0; transition:opacity .25s ease; }
.page-wrap.swap-in.swap-in-active{ opacity:1; }

/* ==== Lantern Button ==== */
.lantern-btn{
  z-index:9999; --size:50px; width:var(--size); height:var(--size);
  border-radius:50%;
  background:radial-gradient(60% 60% at 50% 45%, #5a453a 0 60%, #4b3a31 61% 100%);
  border:none; position:relative; display:flex; justify-content:center; align-items:center;
  cursor:pointer; transform-origin:50% -20px; animation:swing 3s ease-in-out infinite;
  box-shadow:0 0 0 2px #7a5f4f inset, 0 6px 16px #00000055, 0 0 24px 0 rgba(233,211,160,.3);
}
.lantern-btn::before{
  content:""; position:absolute; top:-20px; left:50%; width:2px; height:20px;
  background:linear-gradient(to bottom, #d9caa2, #e9d3a0); transform:translateX(-50%);
}
.lantern-btn::after{
  content:""; position:absolute; bottom:-16px; left:50%; width:10px; height:18px; transform:translateX(-50%);
  background:linear-gradient(#f3dcae, #d8c189); border-radius:0 0 6px 6px;
  clip-path:polygon(0 0, 100% 0, 100% 85%, 70% 85%, 50% 100%, 30% 85%, 0 85%);
}
.bars{ width:26px; height:18px; display:grid; gap:5px; }
.bar{ height:3px; border-radius:2px; background:linear-gradient(to right, #bfa877, #e9d3a0); transition:transform .3s ease, opacity .3s ease; }
.lantern-halo{ position:absolute; inset:-10px; border-radius:50%; box-shadow:0 0 40px 5px rgba(233,211,160,.2); pointer-events:none; }
@keyframes swing{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(3deg); } }
.nav-open .bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-open .bar:nth-child(2){ opacity:0; }
.nav-open .bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
@media (min-width:992px){ .lantern-btn{ display:none!important; } }
@media (max-width:991px){ .lantern-btn{ display:flex; } }

/* ========= RESPONSIVE ========= */
.nav-logo{ display:none; } /* Ẩn logo trong nav desktop */
@media (max-width:992px){
  .menu-toggle{ display:flex; }
  .lang-switch{ display:none; }

  nav{
    position:fixed; top:0; right:-100%; height:100dvh; width:100%;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    background:rgba(72,55,50,.98); transition:right .4s ease;
    padding:90px 8% 100px; text-align:center;
    overflow-y:auto; overscroll-behavior:contain;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  nav::-webkit-scrollbar{ display:none; }
  nav.active{ right:0; }

  .nav-logo{ display:flex; align-items:center; justify-content:center; margin:-18px 0 14px; }
  .nav-logo img{ height:84px; width:auto; opacity:.98; }

  nav a{
    display:block; font-size:13px; margin:0; line-height:1.3;
    letter-spacing:2px; color:#f2e6cf;font-weight: 100;
  }

  .nav-lang{ display:flex; margin-top:28px; }
  .nav-lang .badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; border-radius:16px;
  }
  .nav-lang i{ font-size:12px; }

  .rooms{ grid-template-columns:1fr; gap:2rem; }
  .room img{ height:280px; }
  .story{ max-width:90vw; }
  .story p{ max-width:36em; }
  /* Đổi .amenities -> ul.amenities để không ảnh hưởng banner */
  ul.amenities{ grid-template-columns:1fr; }
}

/* ========= MOBILE: đồng bộ H1 cho tất cả section ========= */
@media (max-width:600px){
  .hero h1,.offers h1,.diemden h1,.dining h1,.our-story h1,.wellness h1,.roo h1,section.amenities h1{
    font-size:1.3rem; letter-spacing:3px; line-height:1.5;
  }
  .hero h1 .break-mobile,.diemden h1 .break-mobile,.dining h1 .break-mobile,.offers h1 .break-mobile,
  .our-story h1 .break-mobile,.wellness h1 .break-mobile,.roo h1 .break-mobile,section.amenities h1 .break-mobile{
    display:block; white-space:normal;
  }
  .section-title{ font-size:1.2rem; }
  header img{ height:76px; }
  .footer-elegant{ padding:56px 5vw 64px; }
  .fe-socials{ gap:22px; }
  .fe-socials a{ font-size:24px; }
  .fe-collection{ font-size:.95rem; letter-spacing:3px; }
  .fe-policy{ font-size:.72rem; }
  section#rooms{ padding-left:10px!important; padding-right:10px!important; }
}

/* ========= NAV LANGUAGE (giữ cuối để ưu tiên) ========= */
.nav-lang{ display:none; }
@media (max-width:992px){ .nav-lang{ display:flex; } }

/* Video nền cho hero */
.hero-video{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(82%) contrast(108%);
  z-index:0;
  animation:slowBreathe 8s ease-in-out infinite alternate;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.35); z-index:1;
}
.hero h1{
  position:relative; z-index:2;
}

/*--slider--*/
.slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 400px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.slider img.active { opacity: 1; }

@media (max-width: 768px) {
  .slider { width: 100%; height: 260px; }
}
@media (max-width: 480px) {
  .slider { height: 220px; }
}

/* slider full-width mobile */
.slider{ display:block; margin:0; }

/* disable zoom on room images */
.room img{ transform:none !important; }

/* ===== Image-based arrows (static, no background, no motion) ===== */
.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:none !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;
  cursor:pointer; z-index:40; padding:0; transition:none;
}
.arrow.prev{
  left:10px;
  background-image:url('images/arrow-left.svg');
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.arrow.next{
  right:10px;
  background-image:url('images/arrow-right.svg');
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.arrow:hover,
.arrow:focus,
.arrow:active,
.arrow:focus-visible{
  transform:translateY(-50%);
  outline:none; filter:none; box-shadow:none; border:none;
}
.arrow::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; pointer-events:none;
}
@media (max-width:768px){
  .arrow{ width:36px; height:36px; }
  .arrow.prev{ left:6px; background-size:16px 16px; }
  .arrow.next{ right:6px; background-size:16px 16px; }
}

/* ==== REVERSED LAYOUT cho section mới ==== */
#our-philosophy {
  background: #faf9f6;
  color: #3a2e29;
}
#our-philosophy .cv-heading { color: var(--gold); }
#our-philosophy .cv-wrap.reverse { flex-direction: column-reverse; }
/* Desktop: hình bên phải, nội dung trái */
@media (min-width: 992px) {
  #our-philosophy .cv-wrap.reverse { flex-direction: row-reverse; }
  #our-philosophy .cv-media { flex: 1 1 50%; min-height: 520px; }
  #our-philosophy .cv-content { flex: 1 1 50%; padding: 4rem 6%; }
}

/*--moi--*/
/* Layout đảo: mobile = image -> text ; desktop = image right, text left */
#spirit .cv-wrap.reverse { flex-direction: column-reverse; }
@media (min-width: 992px) {
  #spirit .cv-wrap.reverse { flex-direction: row-reverse; }
}

/* ===== Footer (revamped) ===== */
.footer-elegant{
  background:#483732; color:#f2e6cf; text-align:center;
  padding:56px 5vw 48px; letter-spacing:2px;
}
.footer-elegant a{ color:#f2e6cf; text-decoration:none; }
.footer-elegant a:hover{ color:#d6b57c; }

.fe-mini{
  font-size:14px; text-transform:uppercase; opacity:.95;
  letter-spacing:3px; margin-bottom:14px;
}

/* socials */
.fe-socials{
  list-style:none; display:flex; justify-content:center; align-items:center;
  gap:28px; margin:8px 0 18px; padding:0;
}
.fe-socials a{ font-size:24px; line-height:1; }
.fe-policy{
  font-size:.78rem; line-height:2; opacity:.92; letter-spacing:2px;
}

/* contact block */
.fe-contact{
  font-size:.85rem; opacity:.9; margin:20px auto 26px; line-height:1.9;
  max-width:950px;
}
.fe-contact a{ text-underline-offset:2px; }

/* divider + crest */
.fe-divider{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:18px; margin:26px auto 18px; max-width:1100px;
}
.fe-line{
  height:1px; background:linear-gradient(to right, transparent, #d6b57c66, transparent);
  display:block;
}
.fe-crest{ display:grid; justify-items:center; gap:10px; }
.fe-crest img{ width:100px; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.fe-legend{
  font-size:.72rem; letter-spacing:2px; text-transform:uppercase; opacity:.9;
  white-space:normal; text-align:center;
}

/* brands strip */
.fe-brands{
  list-style:none; display:grid; grid-template-columns:repeat(8,1fr);
  align-items:center; gap:22px; padding:14px 0 10px; margin:0 auto 18px; max-width:1200px;
}
.fe-brands li{ display:flex; justify-content:center; align-items:center; }
.fe-brands img{
  height:62px; width:auto; opacity:.95; transition:opacity .2s ease, transform .2s ease;
}
.fe-brands img:hover{ opacity:1; transform:translateY(-2px); }

/* legal */
.fe-legal{
  display:grid; gap:6px; justify-items:center; margin-top:8px; opacity:.95;
}
.fe-legal-links{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
  font-size:.78rem; letter-spacing:1.5px;
}
.fe-legal p{ font-size:.78rem; }

/* back-to-top (reuse existing styles if present) */
.fe-top{
  position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:50%;
  border:none; background:#5a463f; color:#f7efe0; display:grid; place-items:center;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:120;
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .fe-brands{ grid-template-columns:repeat(6,1fr); }
}
@media (max-width: 820px){
  .fe-divider{ grid-template-columns:1fr; gap:10px; }
  .fe-legend{ max-width:560px; }
  .fe-brands{ grid-template-columns:repeat(4,1fr); gap:18px; }
  .fe-brands img{ height:50px; }
}
@media (max-width: 560px){
  .fe-socials{ gap:22px; }
  .fe-policy{ font-size:.72rem; }
  .fe-contact{ font-size:.82rem; padding:0 6px; }
  .fe-brands{ grid-template-columns:repeat(3,1fr); gap:14px; }
  .fe-brands img{ height:50px; }
  .fe-legal-links{ font-size:.72rem; }
}
@media (max-width: 380px){
  .fe-brands{ grid-template-columns:repeat(2,1fr); }
}
address, .fe-contact { font-style: normal; }
.fe-legal {
  border-top: 1px solid rgba(214, 181, 124, 0.3);
  margin-top: 24px;
  padding-top: 12px;
}
@media (max-width: 560px) {
  .fe-brands {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
    justify-items: center;
    align-items: center;
    max-width: 360px;
    margin: 0 auto;
  }
  .fe-brands li { display: flex; justify-content: center; align-items: center; }
  .fe-brands img { height: 50px; width: auto; }
}

/* ===== Legal pages ===== */
.legal-hero{
  background:#483732;
  color:#f2e6cf;
  text-align:center;
  padding:56px 5vw 44px;
  letter-spacing:2px;
}
.legal-hero h1{
  font-size:28px;
  text-transform:uppercase;
  margin:0 0 10px;
  letter-spacing:3px;
}
.legal-hero p{
  margin:0; opacity:.9; font-size:.9rem;
}
.legal-wrapper{
  max-width:920px;
  margin:40px auto 56px;
  padding:0 5vw;
  color:#2a211e;
}
.legal-nav{
  display:flex; flex-wrap:wrap; gap:10px 18px;
  justify-content:center; margin:18px 0 4px;
}
.legal-nav a{ color:#f2e6cf; text-decoration:none; }
.legal-nav a:hover{ color:#d6b57c; }
.legal-section{ margin:28px 0; }
.legal-section h2{
  color:#6a544b; letter-spacing:1px; margin:0 0 10px; font-size:20px;
}
.legal-section h3{
  color:#8a6f63; margin:18px 0 8px; font-size:16px;
}
.legal-section p, .legal-section li{
  line-height:1.8; font-size:15px; color:#3b302c;
}
.legal-section ul{ padding-left:18px; }
.legal-updated{ font-size:.85rem; color:#7a6459; margin-top:-4px; }

/* thin divider above footer on legal pages */
.legal-footer-gap{
  border-top:1px solid rgba(214,181,124,.3);
  margin-top:28px; padding-top:10px;
}

/* mobile */
@media (max-width:560px){
  .legal-hero{ padding:44px 6vw 36px; }
  .legal-hero h1{ font-size:22px; }
  .legal-wrapper{ margin:28px auto 48px; }
}