html {
  scroll-behavior: smooth;
} 
#story,
#rooms,
#destinations {
  scroll-margin-top: 120px;
}
@media (max-width: 992px) {
  section {
    scroll-margin-top: 90px;
  }
}
@media (min-width: 993px) {
  section {
    scroll-margin-top: 120px;
  }
}
*{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%;display:block;height:auto}

    /* KHÓA CUỘN NỀN KHI MENU MỞ */
    body.menu-open{overflow:hidden; touch-action:none;}

    /* ===== FIX: Font Awesome ===== */
    .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}
    .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;width:100%;top:0;left:0;display:flex;justify-content:space-between;align-items:center;padding:1rem 5%;color:#f2e6cf;background:linear-gradient(to bottom,rgba(72,55,50,.95)0%,rgba(72,55,50,.6)40%,rgba(72,55,50,0)100%);z-index:100;transition:background .4s ease,padding .3s ease,box-shadow .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;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}

   /* ===== HERO (slow breathing motion) ===== */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

/* Ảnh nền có hiệu ứng “thở” nhẹ nhàng */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('images/banner.jpg?v=2') 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;
}

/* Lớp phủ tối nhẹ để làm dịu ảnh */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

/* Tiêu đề chính */
.hero h1 {
  position: relative;
  z-index: 1;
  font-size: 26px;
  font-weight: 300;
  color: #f5e4b2;
  letter-spacing: 6px;
  text-transform: uppercase;
  line-height: 1.4;
  animation: fadeIn 2s ease;
}

/* Cho phép xuống dòng “thuần Việt” trên mobile */
.hero h1 .break-mobile {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 1.3rem;
    letter-spacing: 3px;
    line-height: 1.5;
  }
  .hero h1 .break-mobile {
    display: block;
    white-space: normal;
  }
}

/* Keyframes: hiệu ứng thở nhẹ (zoom in/out chậm) */
@keyframes slowBreathe {
  0% {
    transform: scale(1.08);
    filter: brightness(80%) contrast(110%);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(85%) contrast(108%);
  }
  100% {
    transform: scale(1.05);
    filter: brightness(90%) contrast(104%);
  }
}

/* Fade-in cho chữ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


    section{padding:5rem 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 (2x2) ===== */
    .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;transition:transform .4s ease}
    .room:hover img{transform:scale(1.05)}
    .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á tinh gọn */
    .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 */
    .details strong{display:inline-block;margin:.2rem 0 .5rem;text-transform:uppercase;letter-spacing:2px}
    .amenities{
      list-style:none;margin:.6rem 0 1rem 0;padding:0;
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.2rem;row-gap:.5rem;
    }
    .amenities li{display:flex;gap:.6rem;align-items:flex-start}
    .amenities i{color:var(--gold-soft);font-size:.95rem;margin-top:.15rem}

    /* ===== ROOM CTA BUTTON — style giống .dest-btn ===== */
    .room button{
      background:transparent;
      color:#483732;
      border:1px solid #483732;
      padding:.75rem 1.6rem;
      font-size:.9rem;
      letter-spacing:1px;
      text-transform:uppercase;
      border-radius:0;
      cursor:pointer;
      align-self:center;
      margin:1rem auto 1.6rem;
      transition:all .3s ease;
    }
    .room button: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 (desktop pill) ===== */
    .lang-switch{
      position:fixed; top:10px; right:12px; z-index:140;
      display:flex; align-items:center; gap:8px;
      background:rgba(72,55,50,.75); color:#f2e6cf;
      border:1px solid rgba(214,181,124,.3);
      padding:6px 10px; border-radius:999px;
      backdrop-filter: blur(8px);
      font-size:12px; letter-spacing:1px;
    }
    .lang-switch i{font-size:13px; opacity:.9}
    .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}

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

    /* ===== RESPONSIVE ===== */
    /* Ẩn logo trong nav mặc định (desktop) */
    .nav-logo{display:none;}

    @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}

      /* ✅ Logo ở chính giữa menu mobile */
      .nav-logo{
        display:flex;
        align-items:center;
        justify-content:center;
        margin:-18px 0 14px; /* cân với padding của nav */
      }
      .nav-logo img{
        height:84px;
        width:auto;
        opacity:0.98;
      }

      /* ✅ Giảm khoảng cách dòng + khoảng cách giữa các mục menu */
      nav a{
        display:block;
        font-size:1.2rem;     /* nhỏ hơn 1.3rem một chút */
        margin:0.4rem 0;      /* trước đây 1rem -> gọn hơn */
        line-height:1.3;      /* giảm line-height để menu gọn */
        letter-spacing:1.5px; /* dễ đọc hơn trên mobile */
        color:#f2e6cf;
      }

      .nav-lang{display:flex;margin-top:28px}
      .nav-lang .badge{
        display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);
        padding:6px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.12);font-size:.85rem;
      }
      .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}
      .amenities{grid-template-columns:1fr}
    }

    @media(max-width:600px){
      .hero h1{font-size:1.3rem;letter-spacing:3px}
      .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;
      }
    }

    @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

    /* ===== CORE VALUES (mobile-first) ===== */
    #core-values{
      background:#483732; color:#f2e6cf;
      padding:0; /* tách khỏi padding chung của section */
    }
    #core-values .cv-wrap{
      display:flex; flex-direction:column; align-items:stretch;
    }

    /* MEDIA: dùng <picture> + <img> để chắc chắn hiển thị */
    #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;
    }

    /* CONTENT */
    #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-top:12px; margin-bottom: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 0.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 (Luxury Split Layout) ===== */
    #destinations {
      position: relative;
      width: 100%;
      height: 80vh;
      min-height: 520px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      overflow: hidden;
      background: #000;
    }

    /* Ảnh nền */
    .dest-bg {
      position: absolute;
      inset: 0;
      background: url('images/hoi-an-destination.jpg') center right/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;
    }

    /* Lớp chứa text block */
    .dest-inner {
      position: relative;
      z-index: 2;
      width: 50%;
      height: 100%;
      background: #faf9f6; /* tông beige sang trọng */
      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: 0.8rem;
      letter-spacing: 2px;
      color: #5a4b42;
      margin-bottom: 1.2rem;
    }

    .dest-heading {
      font-size: 3rem;
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: 1px;
      color: #483732;
      margin-bottom: 1.5rem;
    }

    .dest-desc {
      font-size: 16px;
      line-height: 1.8;
      color: #4a3e38;
      letter-spacing: 1px;
      max-width: 400px;
    }

    .dest-btn {
      display: inline-block;
      text-decoration: none;
      color: #483732;
      border: 1px solid #483732;
      padding: 0.75rem 1.6rem;
      font-size: 0.9rem;
      letter-spacing: 1px;
      transition: all 0.3s ease;
    }

    .dest-btn:hover {
      background: #483732;
      color: #f8f4ef;
    }

    /* Hiệu ứng fade và zoom */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes zoomInDest {
      from { transform: scale(1.12); filter: brightness(70%) contrast(110%); }
      to { transform: scale(1.05); filter: brightness(80%) contrast(105%); }
    }

    /* Responsive */
    @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: 2.2rem;
      }
    }
.nowrap {
  white-space: nowrap !important;
}