/* ===== lj-section Key Destinations in Vietnam & Cambodia ===== */
@font-face{
  font-family:"Playfair Display";
  src:url("/fonts/PlayfairDisplay-Regular.woff2") format("woff2");
  font-display:swap;
}

@font-face{
  font-family:"Playfair Display";
  src:url("/fonts/PlayfairDisplay-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-display:swap;
}

/* ===== RESET ===== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;}

body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
  color:#4a4a4a;
  background:#f7f5f2;
  text-rendering:optimizeSpeed;}

/* ===== TYPOGRAPHY ===== */

h1,h2,h3,h4{
  margin:0;
  line-height:1.15;
  color:#1f1f1f;
  letter-spacing:-0.02em;
}

h1{
  font-size:clamp(2.5rem,7vw,4.8rem);
  font-weight:700;
}

h2{
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:650;
}

h3{
  font-size:1.4rem;
  font-weight:600;
}

p{
  margin:0;
}

/* ===== LAYOUT ===== */

.container{
  width:min(1180px,92%);
  margin-inline:auto;
}

.grid{
  display:grid;
  gap:2rem;
}

.tour-grid{
  grid-template-columns:1fr;
}

@media(min-width:768px){
  .tour-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(min-width:1200px){
  .tour-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

/* ===== CARD ===== */

.package-item{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  transition:transform .3s ease;
  contain:layout paint;
}

.package-item:hover{
  transform:translateY(-4px);
}

.package-item img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* ===== CONTENT ===== */

.card-body{
  padding:1.5rem;
}

.card-title{
  margin-bottom:.75rem;
}

.card-text{
  opacity:.85;
  font-size:.95rem;
}

/* ===== BUTTON ===== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.9rem 1.5rem;
  border-radius:999px;
  background:#1f1f1f;
  color:#fff;
  text-decoration:none;
  transition:opacity .25s ease;
}

.btn:hover{
  opacity:.88;
}

/* ===== IMAGE ===== */

img{
  max-width:100%;
  height:auto;
  vertical-align:middle;
}

/* ===== UTILITIES ===== */

.text-center{
  text-align:center;
}

.section{
  padding:5rem 0;
}



/* =========================
   section class="journey-collection"
========================= */

:root{
  --bg:#f5f1ea;
  --surface:#ffffff;
  --surface-soft:#faf7f2;

  --text-strong:#141210;
  --text-body:#2b2723;
  --text-muted:#6e645b;

  --gold:#b89357;
  --gold-soft:#d2b98b;

  --line:rgba(0,0,0,.06);
}

/* =========================
   RESET
========================= */

.journey-collection,
.journey-collection *{
  box-sizing:border-box;
}

.journey-collection img{
  display:block;
  max-width:100%;
  height:auto;
}

.journey-collection a{
  color:inherit;
  text-decoration:none;
}

/* =========================
   LAYOUT
========================= */

.journey-container{
  width:min(1180px,calc(100% - 48px));
  margin-inline:auto;
}

.journey-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr);
  gap:32px;
  align-items:start;
}

.journey-stack{
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* =========================
   SECTION
========================= */

.journey-collection{
  padding:110px 0;
  background:var(--bg);
  color:var(--text-body);
}

/* =========================
   INTRO — EDITORIAL CORE
========================= */

.section-intro{
  max-width:980px;
  margin:0 auto 72px;
  text-align:center;

    padding:48px 42px 52px;
  

  position:relative;
}

.section-intro::before{
  content:"";
  position:absolute;
  inset:0;
   
}

/* =========================
   EYEBROW
========================= */

.section-eyebrow{
  margin:0 0 20px;

  font-size:17px;
  line-height:1.7;
  letter-spacing:.06em;
  text-transform:uppercase;

  font-weight:600;
  color:#2c2824;

  display:inline-block;
  padding:8px 16px;
  }

/* =========================
   TITLE
========================= */

.section-title{
  max-width:860px;
  margin:0 auto 22px;

  font-size:clamp(2.6rem,4vw,3.9rem);
  line-height:1.2;
  letter-spacing:-.02em;

  font-weight:600;
  color:var(--text-strong);
}

/* =========================
   LEAD (MOST IMPORTANT)
========================= */

.section-lead{
  max-width:720px;
  margin:0 auto;

  font-size:21px;
  line-height:1.9;

  font-weight:500;
  color:var(--text-body);
  padding:20px 24px;
  }

/* =========================
   TRUST / ASSURANCE
========================= */

.journey-assurance{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px 22px;

  margin:28px auto 0;

  font-size:14.5px;
  line-height:1.7;

  letter-spacing:.03em;
  text-transform:none;

  color:#3a342e;
}

.journey-assurance span{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.journey-assurance span::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
}

.review-film{
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
  font-size:11.5px;
  line-height:1.4;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#1d1a16;
  transition:opacity .25s ease,color .25s ease;
}

.review-film .line{
  display:inline-block;
  width:20px;
  height:1px;
  background:var(--gold-soft);
  transition:width .3s ease;
}

.review-film::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0;
  height:1px;
  background:var(--gold);
  transition:width .3s ease;
}

/* =========================
   CARDS
========================= */

.journey-feature,
.journey-card{
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  transition:
    transform .45s ease,
    box-shadow .45s ease;
  box-shadow:
    0 6px 24px rgba(0,0,0,.04);
}

.journey-card{
  background:var(--surface-soft);
  border:1px solid var(--line);
}

/* =========================
   MEDIA
========================= */

.journey-media,
.journey-card-media{
  position:relative;
  overflow:hidden;
}

.journey-media{
  aspect-ratio:3/2;
}

.journey-card-media{
  aspect-ratio:10/7;
}

.journey-media img,
.journey-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s ease;
}

/* =========================
   KICKER
========================= */

.journey-kicker{
  position:absolute;
  left:18px;
  bottom:18px;

  padding:7px 12px;

  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:#fff;
  background:rgba(0,0,0,.6);

  border-radius:2px;
}

/* =========================
   CONTENT
========================= */

.journey-content{
  padding:40px;
}

.journey-card-content{
  padding:24px;
}

/* =========================
   TITLES
========================= */

.journey-title{
  font-size:clamp(2rem,2.5vw,2.8rem);
  line-height:1.2;
  font-weight:500;
  margin-bottom:16px;
}

.journey-card-title{
  font-size:1.45rem;
  line-height:1.3;
  font-weight:500;
  margin-bottom:14px;
}

/* =========================
   BODY TEXT
========================= */

.journey-description{
  font-size:16.5px;
  line-height:1.75;
  color:var(--text-muted);
  margin-bottom:22px;
}

/* =========================
   BULLETS
========================= */

.journey-bullets{
  list-style:none;
  margin:0 0 20px;
  padding:0;
}

.journey-bullets li{
  position:relative;
  padding-left:16px;
  margin-bottom:8px;

  font-size:15.5px;
  line-height:1.65;
}

.journey-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;

  width:6px;
  height:1px;
  background:var(--gold);
}

/* =========================
   META
========================= */

.journey-price{
  font-size:14.5px; font-weight: 500;
  margin-bottom:12px;
  color:#756c63;
}

.journey-meta{
  font-size:14px;
  line-height:1.7;
  color:#756c63; margin-top: 18px;
  margin-bottom:28px;
}

/* =========================
   CTA
========================= */

.tour-card__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;

  border-bottom:1px solid rgba(0,0,0,.35);
  padding-bottom:4px;

  transition:.3s;
}

.tour-card__cta:hover{
  color:var(--gold);
  border-color:var(--gold);
}

/* =========================
   HOVER
========================= */

@media (hover:hover){

  .journey-feature:hover,
  .journey-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,.08);
  }

  .journey-feature:hover img,
  .journey-card:hover img{
    transform:scale(1.04);
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:991px){

  .journey-layout{
    grid-template-columns:1fr;
  }

  .section-intro{
    padding:36px 24px;
  }

}

@media (max-width:767px){

  .section-title{
    font-size:2rem;
  }

  .section-lead{
    font-size:17px;
    line-height:1.7;
  }

}


.cta-film{display:inline-flex;align-items:center;margin-top:12px;margin-left: 20px; font-size:11px;letter-spacing:.18em;text-transform:none;text-decoration:none;color:var(--color-text);opacity: 0.9;position:relative;transition:opacity .3s ease,transform .3s ease}.cta-film::after{content:"";position:absolute;left:0;bottom:-4px;width:32%;height:1px;background:var(--color-gold);transition:width .4s cubic-bezier(.4,0,.2,1)}.cta-film:hover{opacity:1;transform:translateX(2px)}.cta-film:hover::after{width:100%}
 @media(max-width:768px){.journey-meta{display:flex;flex-direction:column;align-items:flex-start}.journey-proof{font-size:13px;line-height:1.6}.cta-film{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;font-size:11px;letter-spacing:.14em;opacity:.65;padding:6px 0;transition:opacity .25s ease}.cta-film::after{width:24%;bottom:-3px}.cta-film:hover{opacity:.9;transform:none}.cta-film:hover::after{width:60%}}@media(max-width:480px){.journey-proof{font-size:12px;line-height:1.55}.cta-film{font-size:10.5px;letter-spacing:.12em;opacity:.6;margin-top:6px}.cta-film::after{width:20%}.cta-film:hover::after{width:50%}}

/* Luxury tour list */
:root {
  --bg:#f3efe8;
  --surface:#fffdfa;
  --text:#181512;       /* màu chữ chính */
  --text-strong:#111;   /* thêm biến cho chữ đậm */
  --text-body:#222;     /* thêm biến cho body text */
  --muted:#6f665d;
  --muted-soft:rgba(24,21,18,.56);
  --gold:#b89357;
  --line:rgba(24,21,18,.08);

  --shadow:
    0 1px 3px rgba(0,0,0,.012),
    0 14px 32px rgba(0,0,0,.026);

  --shadow-hover:
    0 2px 8px rgba(0,0,0,.018),
    0 22px 44px rgba(0,0,0,.036);

  --radius:18px;
}

.luxury-tour-list,
.luxury-tour-list *{
  box-sizing:border-box;
}

.luxury-tour-list a{
  color:inherit;
  text-decoration:none;
}

.luxury-tour-list{
  position:relative;
  padding:104px 0;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}

.luxury-tour-list::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.30),
    rgba(255,255,255,0) 36%
  );
}

/* SECTION INTRO */
.section-intro{
  position:relative;
  z-index:2;

  max-width:820px;
  margin:0 auto 64px;
  padding:0 24px;

  text-align:center;
}

/* =========================
   EYEBROW
========================= */

.section-eyebrow{
  margin:0 0 20px;

  font-size:17px;
  line-height:1.7;
  letter-spacing:.06em;
  text-transform:uppercase;

  font-weight:600;
  color:#2c2824;

  display:inline-block;
  padding:8px 16px;
  }

/* =========================
   TITLE
========================= */

.section-title{
  max-width:860px;
  margin:0 auto 22px;

  font-size:clamp(2.6rem,4vw,3.9rem);
  line-height:1.2;
  letter-spacing:-.02em;

  font-weight:600;
  color:var(--text-strong);
}

/* =========================
   LEAD (MOST IMPORTANT)
========================= */

.section-lead{
  max-width:720px;
  margin:0 auto;

  font-size:21px;
  line-height:1.9;

  font-weight:500;
  color:var(--text-body);
  padding:20px 24px;
  }

/* GRID */
.tour-grid{
  position:relative;
  z-index:2;

  max-width:1500px;
  margin:0 auto;
  padding:0 clamp(24px,4vw,72px);

  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

/* CARD */
.tour-card{
  min-width:0;

  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);

  overflow:hidden;
  box-shadow:var(--shadow);

  transition:
    transform .45s ease,
    box-shadow .45s ease;
}

.tour-card__link{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* IMAGE */
.tour-card__media{
  position:relative;

  aspect-ratio:16/10;
  margin:0;

  overflow:hidden;
  background:#d9d0c3;
}

.tour-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  background:linear-gradient(
    to top,
    rgba(0,0,0,.52),
    rgba(0,0,0,.12) 55%,
    transparent 85%
  );

  pointer-events:none;
}

.tour-card__media img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .85s ease;
}

/* OVERLAY */
.tour-card__overlay{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  z-index:2;

  color:#fff;
}

.tour-card__duration{
  display:block;

  margin-bottom:5px;

  font-size:10.5px;
  line-height:1.4;
  letter-spacing:.18em;
  text-transform:uppercase;

  opacity:.9;
}

.tour-card__group{
  display:block;

  font-size:14px;
  line-height:1.4;
}

/* CONTENT */
.tour-card__content{
  display:flex;
  flex-direction:column;
  flex:1;

  padding:24px;
}

.tour-card__title{
  margin:0 0 10px;

  font-family:"Bodoni Moda", Georgia, serif;
  font-size:1.52rem;
  line-height:1.16;
  letter-spacing:-.018em;
  font-weight:400;
  color:#111; /* FIX CONTRAST */
  
}

.tour-card__summary{
  margin:0 0 14px;

  font-size:15.5px;
  line-height:1.62;

  color:#554d45;
}

/* HIGHLIGHTS */
.tour-card__highlights{
  list-style:none;

  padding:0;
  margin:0 0 16px;
}

.tour-card__highlights li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: #222; /* thêm màu đậm để dễ đọc */
}

.tour-card__highlights li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;

  width:6px;
  height:1px;
  background:var(--gold);
}

/* TRUST */
.tour-card__trust{
  margin:0 0 14px;
  padding:10px 0;

  border-top:1px solid rgba(24,21,18,.06);
  border-bottom:1px solid rgba(24,21,18,.06);

  font-size:12.4px;
  line-height:1.45;

  color:#746b63;
}

.tour-card__trust strong{
  display:block;

  color:#221d19;
  font-weight:600;
}

/* FOOTER */
.tour-card__footer{
  margin-top:auto;

  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}

.tour-card__price-label{
  margin-bottom:4px;
  font-size:10.5px;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: #111; /* đen rõ ràng thay vì muted-soft */
  font-weight: 600;
}

.tour-card__price{
  font-family:"Bodoni Moda", Georgia, serif;
  font-size:1.2rem;
  line-height:1.2;
  font-weight:400;
   color: #000; /* giá hiển thị rõ ràng */
}

.tour-card__price-note{
  margin-top:3px;

  font-size:12.4px;
  line-height:1.42;

  color:var(--muted);
}

/* CTA */
.tour-card__cta{
  position:relative;

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding-bottom:4px;

  font-size:11.5px;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;

  color:#1d1a16;
  white-space:nowrap;

  transition:color .25s ease;
}

.tour-card__cta::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:1px;

  background:rgba(24,21,18,.25);

  transition:background .25s ease;
}

.tour-card__cta span{
  transition:transform .25s ease;
}

/* HOVER */
@media (hover:hover) and (pointer:fine){
  .tour-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
  }

  .tour-card:hover .tour-card__media img{
    transform:scale(1.03);
  }

  .tour-card:hover .tour-card__cta{
    color:var(--gold);
  }

  .tour-card:hover .tour-card__cta::after{
    background:var(--gold);
  }

  .tour-card:hover .tour-card__cta span{
    transform:translateX(4px);
  }
}

/* TABLET */
@media (max-width:1024px){
  .luxury-tour-list{
    padding:90px 0;
  }

  .section-intro{
    margin-bottom:54px;
  }

  .section-title{
    font-size:clamp(2.1rem,5vw,3.1rem);
  }

  .tour-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
    padding:0 38px;
  }

  .tour-card__media{
    aspect-ratio:3/2;
  }
}

/* MOBILE */
@media (max-width:640px){
  .luxury-tour-list{
    padding:72px 0;
  }

  .section-intro{
    margin-bottom:42px;
    padding:0 20px;
  }

  .section-eyebrow{
    font-size:10px;
    letter-spacing:.16em;
  }

  .section-title{
    font-size:2rem;
    line-height:1.05;
  }

  .section-lead{
    font-size:15.8px;
    line-height:1.72;
  }

  .tour-grid{
    grid-template-columns:1fr;
    gap:28px;
    padding:0 20px;
  }

  .tour-card{
    border-radius:16px;
  }

  .tour-card__media{
    aspect-ratio:4/3;
  }

  .tour-card__content{
    padding:22px;
  }

  .tour-card__title{
    font-size:1.42rem;
    line-height:1.18;
  }

  .tour-card__summary{
    font-size:15px;
  }

  .tour-card__footer{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .tour-card__cta{
    font-size:13.5px;
    letter-spacing:.04em;
    text-transform:none;
  }
}


   /* =========================
   LUXURY PAGINATION
========================= */

.pagination-wrap{
  margin-top:72px;
  padding:0 20px;
}

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  gap:10px;

  margin:0;
  padding:0;

  list-style:none;
}

.pagination .page-item{
  margin:0;
}

.pagination .page-link{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:52px;
  height:52px;

  padding:0 18px;

  border:1px solid rgba(24,21,18,.08);
  border-radius:14px;

  background:#fffdf9;
  color:#181512;

  font-size:14px;
  font-weight:500;
  line-height:1;

  text-decoration:none;

  transition:
    background .28s ease,
    color .28s ease,
    border-color .28s ease,
    transform .28s ease,
    box-shadow .28s ease;
}

/* ACTIVE */
.pagination .page-item.active .page-link{
  background: var(--color-gold);
  color:#fff;
  border-color:#181512;

  box-shadow:
    0 8px 22px rgba(0,0,0,.08);
}

/* DISABLED */
.pagination .page-item.disabled .page-link{
  opacity:.38;
  pointer-events:none;
  cursor:default;
}

/* HOVER */
@media (hover:hover){

  .pagination .page-link:hover{
    transform:translateY(-2px);

    border-color:rgba(184,147,87,.45);

    box-shadow:
      0 10px 26px rgba(0,0,0,.06);

    color:#b89357;
  }

  .pagination .page-item.active .page-link:hover{
    color:#fff;
  }
}

/* MOBILE */
@media (max-width:767px){

  .pagination-wrap{
    margin-top:54px;
    padding:0 14px;
  }

  .pagination{
    gap:8px;
  }

  .pagination .page-link{
    min-width:44px;
    height:44px;

    padding:0 14px;

    border-radius:12px;

    font-size:13px;
  }
}

/* SMALL MOBILE */
@media (max-width:480px){

  .pagination{
    gap:6px;
  }

  .pagination .page-link{
    min-width:40px;
    height:40px;

    padding:0 12px;

    font-size:12.5px;
  }
}
  
 
/* =========================================
   ULTRA LUXURY EDITORIAL PROCESS
========================================= */

.bespoke-process {
  background: #f6f1ea;
  color: #171512;
  padding: 140px 8% 130px;
  overflow: hidden;
}

.process-header {
  max-width: 880px;
  margin-bottom: 96px;
}

.process-kicker {
  display: block;
  margin-bottom: 24px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.1em;
  color: #a87a4f;
}

.process-header h2 {
  margin: 0;
  max-width: 920px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 5.4vw, 5.6rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.process-header p {
  margin: 34px 0 0;
  max-width: 620px;
  font-family: "Inter", sans-serif;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(23, 21, 18, 0.68);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 72px;
  border-top: 1px solid rgba(168, 122, 79, 0.24);
  padding-top: 54px;
}

.process-step {
  position: relative;
  padding-right: 32px;
}

.step-index {
  margin-bottom: 30px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.45rem;
  font-style: italic;
  color: #a87a4f;
}

.step-rule {
  width: 42px;
  height: 1px;
  margin-bottom: 34px;
  background: rgba(168, 122, 79, 0.46);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-step h3 {
  margin: 0 0 22px;
  max-width: 360px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.75rem, 2.3vw, 2.35rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.process-step p {
  margin: 0;
  max-width: 360px;
  font-family: "Inter", sans-serif;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.95;
  color: rgba(23, 21, 18, 0.68);
}

.process-step:hover .step-rule {
  width: 76px;
}

@media (max-width: 1024px) {
  .bespoke-process {
    padding: 110px 7%;
  }

  .process-header {
    margin-bottom: 76px;
  }

  .process-steps {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .process-step {
    padding-right: 0;
  }

  .process-step h3,
  .process-step p {
    max-width: 680px;
  }
}

@media (max-width: 640px) {
  .bespoke-process {
    padding: 88px 24px;
  }

  .process-header h2 {
    font-size: 2.65rem;
    line-height: 1.06;
  }

  .process-header p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .process-steps {
    padding-top: 42px;
    gap: 56px;
  }

  .process-step h3 {
    font-size: 1.75rem;
  }
}

/* =========================
   PROCESS CTA
========================= */

.process-cta {
  margin-top: 86px;
  text-align: center;
}

.process-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: min(100%, 425px);
  min-height: 66px;
  padding: 0 42px;

  border-radius: 999px;
  background: #b98d45;
  color: #fff;

  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;

  box-shadow: 0 18px 42px rgba(185, 141, 69, 0.18);

  transition:
    background-color 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.process-cta-button:hover {
  background: #9f7435;
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(185, 141, 69, 0.24);
}

.process-cta-button:focus-visible {
  outline: 2px solid #171512;
  outline-offset: 5px;
}

.process-cta-note {
  margin: 28px 0 0;

  font-family: "Inter", sans-serif;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(23, 21, 18, 0.62);
}

.process-cta-note span {
  margin: 0 7px;
  color: rgba(168, 122, 79, 0.85);
}

@media (max-width: 640px) {
  .process-cta {
    margin-top: 68px;
  }

  .process-cta-button {
    width: 100%;
    min-width: 0;
    min-height: 62px;
    padding: 0 24px;

    font-size: 0.82rem;
    letter-spacing: 0.1em;
  }

  .process-cta-note {
    max-width: 280px;
    margin: 24px auto 0;
    font-size: 0.92rem;
  }
}


/* =========================================================
   Reviews Section
========================================================= */

:root {
  --bg: #fbf7f2;
  --surface: #fffdf9;
  --text: #1d1814;
  --muted: #746b62;
  --soft: #9a8f84;
  --gold: #b99149;
  --line: rgba(29, 24, 20, .08);
  --radius: 28px;
  --container: 1320px;
}

/* SECTION */

.traveler-reviews {
  position: relative;
  padding: 140px 24px;
  background: var(--bg);
  overflow: hidden;
}

.reviews-shell {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: auto;
}

.traveler-reviews::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, .018) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .14;
  pointer-events: none;
}

/* INTRO */

.reviews-intro {
  max-width: 790px;
  margin-bottom: 72px;
}

.reviews-eyebrow { font-weight: 600;
  display: inline-block;
  margin-bottom: 22px;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

.reviews-intro h2 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.04em;
  color:  #222;
}

.reviews-intro p {
  max-width: 660px;
  margin: 30px 0 0;
  font-size: 1.05rem;
  line-height: 1.95;
  color: #222;
}

/* VIDEO */
.reviews-media {
  margin-bottom: 48px;
}

.youtube-lite {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.2;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--radius);
  background: #000;
}

.youtube-lite:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

.youtube-lite img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition:
    transform 1.8s cubic-bezier(.16, 1, .3, 1),
    filter .8s ease;
}

.youtube-lite:hover img {
  transform: scale(1.04);
}

.video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, .42),
      rgba(0, 0, 0, .08) 45%,
      rgba(0, 0, 0, .14)
    );
}

/* PLAY BUTTON */

.play-button {
  position: absolute;
  right: 54px;
  bottom: 54px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform .45s ease,
    background .45s ease;
}

.youtube-lite:hover .play-button {
  transform: scale(1.05);
  background: rgba(255, 255, 255, .16);
}

.play-button span {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid #fff;
}

/* VIDEO META */

.video-meta {
  position: absolute;
  left: 48px;
  bottom: 42px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.video-meta span {
  font-family: "Playfair Display", serif;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #fff;
}

.video-meta small {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

/* TRUST SIGNALS */
.reviews-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-bottom: 72px;
  font-size: .74rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #222;
}

.reviews-trust span {
  position: relative;
}

.reviews-trust span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -16px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(185, 145, 73, .4);
  transform: translateY(-50%);
}

/* REVIEWS WITH EDITORIAL AVATARS */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}

.review-card {
  position: relative;
  padding: 42px 34px 0;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, .2),
      rgba(255, 255, 255, 0)
    );

  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.review-card:hover {
  transform: translateY(-3px);
}

.review-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 2;
  color: #222;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}

.review-avatar {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: #eee7dd;
  border: 1px solid rgba(185, 145, 73, .24);
  box-shadow: 0 10px 24px rgba(29, 24, 20, .06);
}

.review-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(.98);
}

.review-author-text strong {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  color: #222;
}

.review-author-text span {
  display: block;
  margin-top: 8px;
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #222;
}

/* CTA */

.reviews-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;

  margin-top: 78px;
  padding-top: 38px;

  border-top: 1px solid var(--line);
}

.reviews-cta p {
  max-width: 560px;
  margin: 0;

  font-family: "Playfair Display", serif;
  font-size: clamp(1.55rem, 2.4vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -.03em;

  color: var(--text);
}

.reviews-button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding-bottom: 8px;

  color: var(--text);
  text-decoration: none;
  white-space: nowrap;

  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.reviews-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: var(--text);
  transform-origin: left center;

  transition:
    transform .45s cubic-bezier(.16, 1, .3, 1),
    opacity .3s ease;
}

.reviews-button:hover::after {
  transform: scaleX(.55);
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .reviews-grid {
    grid-template-columns: 1fr 1fr;
  }

  .review-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 680px;
  }
}

@media (max-width: 980px) {
  .traveler-reviews {
    padding: 100px 22px;
  }

  .reviews-intro {
    margin-bottom: 52px;
  }

  .reviews-intro h2 {
    line-height: 1.02;
  }

  .youtube-lite {
    aspect-ratio: 16 / 11;
    border-radius: 22px;
  }

  .play-button {
    width: 74px;
    height: 74px;

    right: 24px;
    bottom: 24px;
  }

  .play-button span {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
  }

  .video-meta {
    left: 24px;
    right: 112px;
    bottom: 24px;
  }

  .video-meta span {
    font-size: 1.18rem;
  }

  .reviews-trust {
    margin-bottom: 56px;
    gap: 12px 22px;
  }

  .reviews-trust span:not(:last-child)::after {
    display: none;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .review-card,
  .review-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    padding: 34px 0 0;
  }

  .reviews-cta {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 58px;
  }
}

@media (max-width: 560px) {
  .traveler-reviews {
    padding: 82px 18px;
  }

  .reviews-intro p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .youtube-lite {
    aspect-ratio: 4 / 5;
  }

  .video-meta {
    right: 24px;
    bottom: 112px;
  }

  .play-button {
    left: 24px;
    right: auto;
    bottom: 24px;
  }

  .review-author {
    gap: 14px;
  }

  .review-avatar {
    width: 50px;
    height: 50px;
  }

  .review-card p {
    font-size: .98rem;
    line-height: 1.9;
  }

  .reviews-button {
    width: 100%;
    min-height: 52px;
    padding: 0 22px;

    border: 1px solid var(--text);
  }

  .reviews-button::after {
    display: none;
  }
}


/* =========================================================
   EXPERT SEASONAL GUIDANCE
========================================================= */

.season-guidance{
  padding:110px 0;
  background:#f8f4ee;
}

/* ===== INTRO ===== */

.season-intro{
  max-width:760px;
  margin:0 auto 64px;
  text-align:center;
}

.season-eyebrow{
  margin:0 0 18px;

  font-size:13px;
  line-height:1.5;
  letter-spacing:.08em;

  color:rgba(28,24,21,.68);
  font-weight:500;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.season-title{
  margin:0 0 20px;

  font-size:clamp(2rem,4vw,3.5rem);
  line-height:1.08;
  letter-spacing:-.03em;

  color:#1c1815;
  font-weight:500;
}

.season-lead{
  max-width:650px;
  margin:0 auto;

  font-size:18px;
  line-height:1.85;

  color:#5f564d;
}

/* ===== GRID ===== */

.season-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px;
  align-items:stretch;
}
/* ===== MAP ===== */

.season-map{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  height:100%;
  min-height:100%;

  padding:24px;

  border-radius:18px;

  background:#efe7dc;
  border:1px solid rgba(28,24,21,.06);
}

.season-map img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center;
}

/* ===== RIGHT CONTENT ===== */

.season-content{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.season-card{
  padding:35px;

  background:rgba(255,255,255,.72);

  border:1px solid rgba(28,24,21,.06);
  border-radius:16px;

  backdrop-filter:blur(4px);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.season-card:hover{
  transform:translateY(-2px);

  box-shadow:
    0 16px 34px rgba(28,24,21,.05);
}

.season-card-period{
  margin:0 0 12px;

  font-size:12px;
  letter-spacing:.08em;

  color:rgba(28,24,21,.56);
  font-weight:500;
}

.season-card-title{
  margin:0 0 14px;

  font-size:1.35rem;
  line-height:1.22;
  letter-spacing:-.01em;

  color:#1c1815;
  font-weight:500;
}

.season-card-text{
  margin:0;

  font-size:15px;
  line-height:1.8;

  color:#5f564d;
}

/* ===== EDITORIAL NOTE ===== */

.season-editorial{
  max-width:980px;
  margin:72px auto 0;

  text-align:center;
}

.season-note{
  max-width:760px;
  margin:0 auto 34px;
}

.season-note p{
  margin:0;

  font-size:17px;
  line-height:1.9;

  color:#5f564d;
}

/* ===== CTA ===== */

.season-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding-bottom:6px;

  border-bottom:1px solid rgba(157,112,64,.55);

  color:#1c1815;
  text-decoration:none;

  font-size:15px;
  font-weight:500;

  transition:
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.season-cta:hover{
  color:#9d7040;
  border-color:rgba(157,112,64,.95);

  transform:translateX(2px);
}

/* ===== MOBILE ===== */

@media (max-width:991px){

  .season-guidance{
    padding:84px 0;
  }

  .season-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .season-map{
    border-radius:16px;
  }

}

@media (max-width:768px){

  .season-guidance{
    padding:72px 0;
  }

  .season-intro{
    margin-bottom:48px;
  }

  .season-title{
    line-height:1.12;
  }

  .season-lead{
    font-size:16px;
    line-height:1.8;
  }

  .season-card{
    padding:24px;
  }

  .season-card-title{
    font-size:1.22rem;
  }

  .season-note p{
    font-size:16px;
    line-height:1.85;
  }

}

@media (max-width:575px){

  .season-map{
    border-radius:14px;
  }

  .season-card{
    border-radius:14px;
  }

}


/* FAQS Section */
.faq-luxury{position:relative;z-index:2;padding:120px 20px;background:transparent;}
.faq-luxury .faq-head{max-width:800px;margin:0 auto 56px;text-align:center;}
.faq-luxury .faq-kicker{margin-bottom:14px;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-muted);}
.faq-luxury h2{margin:0 0 16px;font-family:"Playfair Display",serif;font-size:clamp(32px,4vw,48px);line-height:1.12;letter-spacing:-0.02em;color:var(--color-text);}
.faq-luxury .faq-intro{margin:0 auto;max-width:62ch;font-size:17px;line-height:1.8;color:rgba(28,24,21,0.68);}
.faq-luxury .faq-wrap{max-width:860px;margin:0 auto;}

.faq-card {
  border: 1px solid rgba(28,24,21,0.07);
  border-radius: 18px;
  background: rgba(255,250,244,0.72);
  box-shadow: 0 14px 34px rgba(28,24,21,0.04);
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-card summary {
  cursor: pointer;
  padding: 24px 28px;
  font-size: 18px;
  font-weight: 600;
  color: #1d1814;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.faq-card[open] summary {
  color: #b99149;
}

.faq-icon {
  width: 20px;
  height: 20px;
  stroke: #b99149;
  transition: transform 0.3s ease;
}

.faq-card[open] .faq-icon {
  transform: rotate(180deg);
}

/* Smooth transition cho nội dung */
.faq-card .card-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 28px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(28,24,21,0.78);
  transition: max-height 0.5s ease, padding 0.3s ease, opacity 0.5s ease;
}

.faq-card[open] .card-body {
  max-height: 600px; /* đủ lớn để chứa nội dung */
  opacity: 1;
  padding: 0 28px 28px;
}



.faq-label {
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8a8178;
  margin-top: 60px;
}

.faq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* LINKS */
.faq-links .nav-link {
  position: relative;
  display: inline-block;

  font-family: "Playfair Display", serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.4px;

  color: #1d1814;
  text-decoration: none;

  padding-bottom: 6px;

  transition: color 0.25s ease;
}

/* STATIC HAIRLINE (always visible) */
.faq-links .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: rgba(185,145,73,0.35);

  transition: background 0.25s ease, transform 0.25s ease;
  transform: scaleX(0.6);
  transform-origin: left;
}

/* HOVER = refinement, not animation gimmick */
.faq-links .nav-link:hover {
  color: #b99149;
}

.faq-links .nav-link:hover::after {
  background: #b99149;
  transform: scaleX(1);
}




/* From Speak to a travel expert */
:root{
  --bg:#ece8e1;
  --text:#171410;
  --muted:#5f584f;

  --gold:#b99249;
  --gold-deep:#9f7934;

  --line:rgba(31,28,24,.08);

  --container:1280px;
}

/* =========================
   GLOBAL
========================= */
.designer  {font-size:clamp(2.0rem,4vw,2.06rem);}
.luxury-contact,
.luxury-trust{
  position:relative;
  overflow:hidden;

  /* nền sáng nhẹ để merge với footer */
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.10),
      rgba(255,255,255,.03)
    ) !important;
}

/* overlay rất nhẹ kiểu editorial */

.luxury-contact::before,
.luxury-trust::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top left,
      rgba(255,255,255,.20),
      transparent 42%
    );

  pointer-events:none;
}

/* =========================
   SPACING
========================= */

.luxury-contact{
  padding:100px 0 58px;
}

.luxury-trust{
  padding:58px 0 88px;

  border-top:1px solid var(--line);
}

/* =========================
   CONTAINER
========================= */

.luxury-wrap{
  width:min(100% - 56px,var(--container));
  margin:auto;
  position:relative;
  z-index:3;
}

/* =========================
   GRID
========================= */

.luxury-contact-grid{
  display:grid;
  grid-template-columns:430px 1fr;

  gap:88px;
  align-items:center;
}

/* =========================
   LEFT COPY
========================= */

.luxury-contact-copy{
  position:relative;
  z-index:5;
}

.luxury-contact-copy h2{
  margin:0 0 26px;

  /* màu đậm hơn để nổi trên viewport sáng */
  color:#14110f;

  font-size:clamp(2.8rem,4vw,4.9rem);
  line-height:.94;

  font-weight:300;
  letter-spacing:-.055em;

  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.luxury-contact-copy p{
  margin:0;

  max-width:470px;

  /* tăng contrast */
  color:#5c544b;

  font-size:17px;
  line-height:1.9;

  font-weight:400;

  opacity:1;
}

/* =========================
   PHONE
========================= */

.luxury-phone{
  display:inline-flex;
  align-items:center;
  gap:12px;

  margin-top:34px;

  color:var(--gold);

  font-size:1.08rem;
  font-weight:400;

  transition:opacity .25s ease;
}

.luxury-phone svg{
  width:18px;
  height:18px;
}

.luxury-phone:hover{
  opacity:.72;
}

/* =========================
   BUTTON
========================= */

.luxury-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:36px;

  min-width:290px;
  height:66px;

  padding:0 38px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #cda45d,
      #b38336
    );

  color:#17140f;

  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;

  box-shadow:
    0 12px 32px rgba(176,133,55,.16);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.luxury-btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 18px 42px rgba(176,133,55,.22);
}

/* =========================
   EXPERTS
========================= */

.luxury-experts{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:42px;

  position:relative;
  z-index:4;
}

.expert-card{
  text-align:center;
}

.expert-image{
  width:170px;
  aspect-ratio:1/1;

  margin:0 auto 24px;

  border-radius:50%;
  overflow:hidden;

  background:#d8d2ca;
}

.expert-image img{
  width:100%;
  height:100%;

  object-fit:cover;
  display:block;
}

.expert-name{
  margin:0 0 10px;

  color:#171410;

  font-size:1.8rem;
  line-height:1.08;

  font-weight:400;
  letter-spacing:-.03em;
}

.expert-role{
  margin:0;

  color:#72695f;

  font-size:13px;
  line-height:1.8;

  font-weight:500;

  letter-spacing:.12em;
  text-transform:uppercase;
}

/* =========================
   TRUST
========================= */

.luxury-trust-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);

  gap:28px;

  position:relative;
  z-index:4;
}

.trust-card{
  text-align:center;
}

.trust-title{
  margin:0 0 18px;
  color:#181511;
  font-size:1.9rem;
  line-height:1.08;
  font-weight:400;
  letter-spacing:-.04em;
  text-rendering:optimizeLegibility;
}

.trust-logo {
  height: 54px;
  object-fit: contain;
  margin: 0 auto 12px; /* căn giữa theo chiều ngang */
  display: block;      /* cần thiết để margin auto hoạt động */
  opacity: .94;
}
.trust-stars{
  margin-bottom:14px;

  color:#15120f;

  font-size:14px;
  letter-spacing:.34em;

  opacity:.95;
}

.trust-link{
  display:inline-block;
  position:relative;

  padding-bottom:10px;

  color:#201c18;

  font-size:12px;
  font-weight:500;

  letter-spacing:.28em;
  text-transform:uppercase;

  opacity:.98;
}

.trust-link::after{
  content:"";

  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:1px;

  background:rgba(185,146,73,.75);
}

.trust-link:hover{
  color:var(--gold-deep);
}

/* =========================
   MOBILE
========================= */

@media (max-width:991px){

  .luxury-contact{
    padding:82px 0 46px;
  }

  .luxury-trust{
    padding:46px 0 74px;
  }

  .luxury-contact-grid{
    grid-template-columns:1fr;

    gap:66px;
  }

  .luxury-contact-copy{
    text-align:center;
  }

  .luxury-contact-copy p{
    margin:auto;
  }

  .luxury-experts{
    gap:30px;
  }

  .luxury-trust-grid{
    grid-template-columns:repeat(2,1fr);

    row-gap:48px;
  }
}

@media (max-width:767px){

  .luxury-wrap{
    width:min(100% - 32px,var(--container));
  }

  .luxury-contact{
    padding:68px 0 38px;
  }

  .luxury-trust{
    padding:38px 0 64px;
  }

  .luxury-contact-copy h2{
    font-size:2.45rem;
  }

  .luxury-contact-copy p{
    font-size:15.5px;
    line-height:1.82;
  }

  .luxury-btn{
    width:100%;
    min-width:0;

    height:60px;
  }

  .luxury-experts{
    grid-template-columns:1fr;

    gap:42px;
  }

  .expert-image{
    width:150px;
  }

  .expert-name{
    font-size:1.65rem;
  }

  .luxury-trust-grid{
    grid-template-columns:1fr;
  }

  .trust-title{
    font-size:1.7rem;
  }
}




.floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px; /* khoảng cách giữa các nút */
  z-index: 9999;
}

.floating-buttons a {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

#whatsapp{position:fixed;bottom:120px;right:10px;color:#fff;border-radius:50%;width:45px;height:45px;display:flex;align-items:center;justify-content:center;text-decoration:none;z-index:9998;box-shadow:0 6px 18px rgba(185,145,73,0.32);transition:all 0.3s ease;}
#whatsapp i{font-size:28px;color:#fff;}
#whatsapp:hover{transform:scale(1.08);box-shadow:0 8px 22px rgba(185,145,73,0.42);}
#whatsapp::after{content:"Chat on WhatsApp";position:absolute;top:50%;right:70px;transform:translateY(-50%);background:rgba(0,0,0,0.8);color:#fff;padding:6px 10px;border-radius:4px;font-size:13px;opacity:0;pointer-events:none;transition:opacity 0.3s ease;white-space:nowrap;}
#whatsapp:hover::after{opacity:1;}

#emailbox {
  position: fixed;
  bottom: 10px;
  left: 20px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-gold);
  color: #fff;
  z-index: 9998;
  box-shadow: 0 6px 18px rgba(185,145,73,0.32);
  transition: all 0.3s ease;
}

#emailbox svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

#emailbox::after {
  content: "Send us an Email";
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

#emailbox:hover::after {
  opacity: 1;
}




/* Footer */
:root{
  --footer-bg:#161616;
  --footer-surface:#1b1b1b;

  --text:#f3efe8;
  --muted:rgba(255,255,255,.58);
  --muted-soft:rgba(255,255,255,.38);

  --gold:#c59a4d;
  --gold-soft:#d8b57a;

  --line:rgba(255,255,255,.08);

  --container:1320px;

  --transition:
    280ms cubic-bezier(.4,0,.2,1);
}



/* =========================
   RESET
========================= */

.lux-footer,
.lux-footer *{
  box-sizing:border-box;
}

.lux-footer a{
  text-decoration:none;
  color:inherit;
}


.luxury-footer {
  display: flex;              /* use flexbox */
  justify-content: center;    /* center horizontally */
  align-items: center;        /* align vertically */
  flex-wrap: wrap;            /* allow wrapping on small screens */
  gap: 40px;                  /* spacing between logos */
  padding: 40px 24px 0px 24px;
  text-align: center;
}

.luxury-item {
  flex: 0 0 auto;             /* prevent stretching */
  display: flex;
  justify-content: center;
  align-items: center;
}

.luxury-item img {
  width: 72px;
  height: auto;
  object-fit: contain;
  margin: 0;                  /* remove bottom margin so they align neatly */
}

/* =========================
   FOOTER
========================= */

.lux-footer{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      circle at top right,
      rgba(197,154,77,.06),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #1a1a1a,
      #141414
    );

  color:var(--text);

  margin-top:120px;
}

.lux-footer::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.015),
      transparent
    );

  pointer-events:none;
}

/* =========================
   CONTAINER
========================= */

.lux-footer-wrap{
  width:min(100% - 48px,var(--container));
  margin:auto;
}

/* =========================
   GRID
========================= */

.lux-footer-grid{
  display:grid;
  grid-template-columns:
    1.1fr
    1fr
    1fr
    1.1fr;

  gap:72px;

  padding:
    110px
    0
    90px;

  border-bottom:
    1px solid var(--line);
}

/* =========================
   BRAND
========================= */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

img.responsive-logo {
  width: 100%;       /* co giãn theo container */
  height: auto;
}

@media (min-width: 768px) {
  img.responsive-logo {
    max-width: 520px; /* giữ kích thước gốc trên desktop */
    margin: 0 auto;   /* căn giữa trên desktop */
  }
}

@media (max-width: 767px) {
  img.responsive-logo {
    max-width: 480px; /* giới hạn tối đa 480px trên mobile */
    width: 100%;      /* chiếm toàn bộ chiều rộng container */
    margin: 0 auto;   /* căn giữa trên mobile */
  }
}


.lux-brand-copy{
  max-width:320px;
  margin:20px 0 38px;

  font-size:17px;
  line-height:1.8;

  color:var(--muted);
}

/* =========================
   TITLES
========================= */

.lux-footer-title{
  margin:0 0 34px;

  font-size:14px;
  line-height:1.4;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;

  color:#fff;
}

/* =========================
   SOCIAL
========================= */

.lux-social{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.lux-social a{
  display:flex;
  align-items:center;
  justify-content:center;

  width:50px;
  height:50px;

  border-radius:50%;

  background:
    rgba(197,154,77,.12);

  border:
    1px solid rgba(197,154,77,.18);

  color:var(--gold);

  transition:
    transform var(--transition),
    background var(--transition),
    border-color var(--transition);
}

.lux-social a:hover{
  transform:translateY(-3px);

  background:
    rgba(197,154,77,.2);

  border-color:
    rgba(197,154,77,.35);
}

.lux-social svg{
  width:18px;
  height:18px;
}

/* =========================
   NAV LINKS
========================= */

.lux-links{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.lux-links a{
  position:relative;

  width:max-content;
  max-width:100%;

  font-size:17px;
  line-height:1.6;

  color:var(--muted);

  transition:
    color var(--transition),
    transform var(--transition);
}

.lux-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;

  width:0;
  height:1px;

  background:var(--gold);

  transition:width var(--transition);
}

.lux-links a:hover{
  color:#fff;
  transform:translateX(3px);
}

.lux-links a:hover::after{
  width:100%;
}

/* =========================
   CONTACT
========================= */

.lux-contact{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.lux-contact-item{
  display:flex;
  align-items:flex-start;
  gap:14px;

  font-size:17px;
  line-height:1.8;

  color:var(--muted);
}

.lux-contact-item svg{
  flex:0 0 auto;

  width:18px;
  height:18px;

  margin-top:6px;

  color:var(--gold);
}

.lux-contact-item a:hover{
  color:#fff;
}

/* =========================
   QR
========================= */

.lux-qr{
  margin-top:10px;
}

.lux-qr-label{
  margin:0 0 18px;

  font-size:12px;
  line-height:1.6;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--muted-soft);
}

.lux-qr img{
  width:138px;
  height:138px;

  border-radius:14px;

  display:block;

  background:#fff;
  padding:8px;
}

/* =========================
   BOTTOM
========================= */

.lux-footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;

  padding:
    30px
    0
    36px;
}

.lux-footer-bottom p{
  margin:0;

  font-size:15px;
  line-height:1.7;

  color:var(--muted-soft);
}

.lux-footer-bottom a{
  color:#fff;
}

.lux-footer-bottom a:hover{
  color:var(--gold);
}

/* =========================
   FLOATING BUTTONS
========================= */


/* =========================
   TABLET
========================= */

@media (max-width:1100px){

  .lux-footer-grid{
    grid-template-columns:
      1fr
      1fr;

    gap:64px 48px;
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width:767px){

  .lux-footer{
    margin-top:84px;
  }

  .lux-footer-wrap{
    width:min(100% - 32px,var(--container));
  }

  .lux-footer-grid{
    grid-template-columns:1fr;

    gap:56px;

    padding:
      74px
      0
      64px;
  }

  .lux-brand-logo img{
    width:220px;
  }

  .lux-brand-copy{
    max-width:100%;

    font-size:16px;
    line-height:1.75;
  }

  .lux-links{
    gap:16px;
  }

  .lux-links a{
    font-size:16px;
  }

  .lux-contact-item{
    font-size:16px;
    line-height:1.75;
  }

  .lux-footer-bottom{
    flex-direction:column;
    align-items:flex-start;

    padding:
      26px
      0
      34px;
  }

  .lux-floating{
    right:18px;
    bottom:18px;
  }

  .lux-float-btn{
    width:54px;
    height:54px;
  }
}