:root{
  --cream:#FBF3E7;
  --peach:#F3C6A6;
  --terra:#B85A3E;
  --night:#0B1220;
  --olive:#6E7A5A;
  --gold:#C8A46A;
  --ink:#101318;
  --muted:#6b7280;
  --card: rgba(255,255,255,.88);
  --glass: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --shadow: 0 18px 50px rgba(0,0,0,.18);
  --shadowSoft: 0 12px 30px rgba(0,0,0,.10);
  --radius: 18px;
  --radiusLg: 26px;
  --max: 1120px;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
button, input, textarea{ font: inherit; }

.container{ width: min(var(--max), 92vw); margin: 0 auto; }
.section{ padding: 80px 0; }
.section.compact{ padding: 56px 0; }

.bg-sunrise{
  background:
    radial-gradient(1200px circle at 20% 10%, rgba(243,198,166,.82), transparent 56%),
    linear-gradient(135deg, var(--cream), rgba(184,90,62,.25));
}
.bg-night{
  color: #f5f1e8;
  background:
    radial-gradient(900px circle at 18% 16%, rgba(200,164,106,.20), transparent 55%),
    radial-gradient(850px circle at 82% 30%, rgba(243,198,166,.14), transparent 52%),
    linear-gradient(180deg, #070B14, var(--night));
}
.bg-olive{
  color: #f5f1e8;
  background:
    radial-gradient(900px circle at 22% 10%, rgba(170,180,141,.35), transparent 60%),
    linear-gradient(135deg, rgba(110,122,90,.96), rgba(110,122,90,.74));
}

.topbar{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.bg-night .topbar, .bg-olive .topbar{
  background: rgba(11,18,32,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{
  display:flex; align-items:center; gap: 12px;
}
.brand img{ width: 160px; height:auto; }
.navlinks{
  display:flex; gap: 18px; align-items:center;
}
.navlinks a{
  font-size: 14px;
  opacity: .9;
}
.navlinks a:hover{ opacity: 1; }
.navcta{ display:flex; gap: 10px; align-items:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  font-weight: 600;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.10); }
.btn:active{ transform: translateY(0px); }
.btn.primary{
  border: 1px solid rgba(200,164,106,.55);
  background: linear-gradient(180deg, rgba(200,164,106,1), rgba(233,214,179,1));
  color: #1b1b1b;
}
.btn.ghost{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  box-shadow: none;
}
.badgeRow{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.badge{
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(17,24,39,.10);
}

.hero{
  padding: 56px 0 10px;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items: stretch;
}
.hTitle{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: .2px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  margin: 0 0 14px;
}
.hSub{
  font-size: 16.5px;
  color: rgba(16,19,24,.78);
  max-width: 56ch;
}
.heroCard{
  background: var(--card);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: var(--radiusLg);
  overflow: hidden;
  box-shadow: var(--shadowSoft);
}
.heroMedia{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow:hidden;
}
.heroMedia img{
  width:100%; height:100%;
  object-fit: cover;
}
.heroMedia::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,18,32,.00), rgba(11,18,32,.52));
}
.heroMeta{
  padding: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.metaItem{
  padding: 12px 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 14px;
}
.metaItem .v{ font-weight: 800; font-size: 18px; }
.metaItem .l{ font-size: 12.5px; color: rgba(16,19,24,.62); margin-top: 2px; }

.grid4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.card{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.bg-night .card, .bg-olive .card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
}
.kicker{
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(16,19,24,.62);
}
.bg-night .kicker, .bg-olive .kicker{
  color: rgba(245,241,232,.70);
}
.h2{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  margin: 10px 0 10px;
}
.p{
  margin: 0;
  color: rgba(16,19,24,.72);
}
.bg-night .p, .bg-olive .p{
  color: rgba(245,241,232,.78);
}

.iconTitle{
  display:flex; align-items:flex-start; gap: 12px;
}
.icon{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(200,164,106,.16);
  border: 1px solid rgba(200,164,106,.32);
  color: rgba(200,164,106,1);
  flex: 0 0 auto;
}
.bg-night .icon, .bg-olive .icon{ background: rgba(200,164,106,.14); }

.list{
  display:grid; gap: 10px;
  margin: 0; padding: 0;
  list-style: none;
}
.li{
  display:flex; justify-content:space-between; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.70);
}
.bg-night .li, .bg-olive .li{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.li span:last-child{ opacity: .85; }

.table{
  width: 100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 16px;
}
.table th, .table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(17,24,39,.08);
  text-align:left;
}
.bg-night .table th, .bg-night .table td,
.bg-olive .table th, .bg-olive .table td{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.table th{ font-size: 13px; text-transform: uppercase; letter-spacing:.12em; opacity: .75; }
.table tr:last-child td{ border-bottom: none; }

.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.gItem{
  grid-column: span 6;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
  cursor: zoom-in;
}
.gItem img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 16/10; }
.gItem.small{ grid-column: span 4; }
.bg-night .gItem, .bg-olive .gItem{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.modal{
  position: fixed; inset: 0;
  display:none;
  place-items: center;
  background: rgba(0,0,0,.72);
  z-index: 100;
  padding: 24px;
}
.modal.open{ display:grid; }
.modalInner{
  width: min(1100px, 92vw);
  background: #0b1220;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.modalInner img{ width:100%; height:auto; display:block; }
.modalBar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 12px;
  color: rgba(245,241,232,.88);
}
.modalBar button{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(245,241,232,.92);
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
}

.form{
  display:grid; gap: 12px;
}
.field{
  display:grid; gap: 6px;
}
label{ font-size: 13px; opacity: .82; }
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.86);
  outline: none;
}
.bg-night input, .bg-night textarea,
.bg-olive input, .bg-olive textarea{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(245,241,232,.92);
}
textarea{ min-height: 120px; resize: vertical; }

.footer{
  padding: 28px 0;
  border-top: 1px solid rgba(17,24,39,.08);
  background: #fff;
}
.footerGrid{
  display:flex; justify-content:space-between; gap: 14px; flex-wrap: wrap;
}
.small{ font-size: 13px; color: rgba(16,19,24,.62); }

.fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display:grid;
  gap: 10px;
  z-index: 60;
}
.fab a{
  width: 52px; height: 52px;
  border-radius: 999px;
  display:grid; place-items:center;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 30px rgba(0,0,0,.14);
}
.fab a span{ font-size: 20px; }

@media (max-width: 920px){
  .heroGrid{ grid-template-columns: 1fr; }
  .grid4{ grid-template-columns: repeat(2, 1fr); }
  .grid3{ grid-template-columns: repeat(2, 1fr); }
  .grid2{ grid-template-columns: 1fr; }
  .gItem{ grid-column: span 12; }
  .gItem.small{ grid-column: span 6; }
  .navlinks{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}


/* ---- Stacked slider (images behind) ---- */
.stackSlider{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 22px;
  overflow: hidden;
}
.stackSlider.big{ min-height: 440px; }
.stackSlide{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transform:
    translateX(calc(var(--offset) * 34px))
    translateY(calc(var(--abs) * 6px))
    scale(calc(1 - var(--abs) * 0.06));
  opacity: calc(1 - var(--abs) * 0.18);
  filter: blur(calc(var(--abs) * 0.35px));
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
.stackSlide img{
  width:100%; height:100%; object-fit: cover;
}
.stackSlide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.30));
}
.stackSlide .cap{
  position:absolute; left: 14px; right: 14px; bottom: 12px;
  color: rgba(245,241,232,.92);
  font-size: 13px;
  opacity: .95;
}
.stackNav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(11,18,32,.42);
  color: rgba(245,241,232,.92);
  display:grid; place-items:center;
  cursor:pointer;
  z-index: 30;
}
.stackNav:hover{ background: rgba(11,18,32,.60); }
.stackNav.prev{ left: 10px; }
.stackNav.next{ right: 10px; }
.stackHint{
  position:absolute;
  left: 12px; bottom: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(11,18,32,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(245,241,232,.86);
  font-size: 12.5px;
  z-index: 30;
}
.stackCaption{
  position:absolute;
  left: 14px; right: 14px; bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(11,18,32,.52);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(245,241,232,.92);
  font-size: 13px;
  z-index: 30;
}

.renderGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}
@media (max-width: 920px){
  .renderGrid{ grid-template-columns: 1fr; }
}

/* Soft neutral section background (keeps page consistent, less “rối”) */
.bg-soft{
  background:
    radial-gradient(1100px circle at 18% 10%, rgba(243,198,166,.38), transparent 58%),
    linear-gradient(180deg, #FFFFFF, rgba(251,243,231,.55));
}


/* =====================
   V4: Cleaner background
   ===================== */
body{
  background: #fff;
}

.heroBg{
  position: relative;
  overflow: hidden;
  background: #0B1220;
  color: #f5f1e8;
}
.heroBg::before{
  content:"";
  position:absolute; inset:-40px;
  background-image: url("assets/img/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(14px);
  transform: scale(1.05);
  opacity: .55;
}
.heroBg::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px circle at 22% 18%, rgba(200,164,106,.32), transparent 58%),
              linear-gradient(180deg, rgba(11,18,32,.85), rgba(11,18,32,.55));
}
.heroBg > *{ position: relative; z-index: 1; }

.topbar{
  background: rgba(11,18,32,.45) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.navlinks a{ color: rgba(245,241,232,.88); }
.navlinks a:hover{ color: rgba(245,241,232,1); }
.brand img{ width: 170px; }

.btn{
  border: 1px solid rgba(255,255,255,.16);
}
.navmini{
  padding: 10px 12px;
  background: rgba(255,255,255,.10);
  color: rgba(245,241,232,.92);
  box-shadow: none;
}
.navmini:hover{ background: rgba(255,255,255,.14); }

.hero .hSub{ color: rgba(245,241,232,.78) !important; }
.hero .badge{ background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); color: rgba(245,241,232,.92); }

.heroCard{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.30) !important;
}
.heroStatic{
  width:100%; height:100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  display:block;
}
.heroMeta .metaItem{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(245,241,232,.92);
}
.heroMeta .metaItem .l{ color: rgba(245,241,232,.70) !important; }

.section{ background: #fff; }
.bg-night, .bg-sunrise, .bg-soft, .bg-olive{
  background: #fff !important;
  color: var(--ink) !important;
}
.bg-night .card, .bg-olive .card{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.07) !important;
}
.bg-night .p, .bg-olive .p, .bg-night .kicker, .bg-olive .kicker{
  color: rgba(16,19,24,.72) !important;
}

/* infographic grid */
.infographicGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.infographicGrid a{ grid-column: span 4; }
@media (max-width: 920px){
  .infographicGrid a{ grid-column: span 12; }
}
.infographicGrid img{
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
}

/* Hide some nav buttons on small screens */
.hideSm{ display:inline-flex; }
@media (max-width: 920px){
  .hideSm{ display:none; }
}

/* =====================
   Coverflow slider (renders)
   ===================== */
.cfSlider{
  position: relative;
  width:100%;
  min-height: 460px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(11,18,32,.22);
  border: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 920px){
  .cfSlider{ min-height: 360px; }
}
.cfSlide{
  position:absolute;
  top: 50%;
  left: 50%;
  width: min(760px, 86%);
  aspect-ratio: 16 / 10;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--x) * 210px))
    scale(calc(1 - var(--abs) * 0.12))
    rotateY(calc(var(--x) * -10deg));
  transform-style: preserve-3d;
  opacity: calc(1 - var(--abs) * 0.35);
  filter: blur(calc(var(--abs) * 1.4px));
  transition: transform .22s ease, opacity .22s ease, filter .22s ease;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  cursor: pointer;
}
@media (max-width: 920px){
  .cfSlide{
    width: 92%;
    transform:
      translate(-50%, -50%)
      translateX(calc(var(--x) * 120px))
      scale(calc(1 - var(--abs) * 0.14));
  }
}
.cfSlide.active{
  opacity: 1;
  filter: none;
}
.cfSlide img{ width:100%; height:100%; object-fit: cover; display:block; }
.cfSlide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.22));
}
.cfSlide .cap{
  position:absolute; left: 14px; right: 14px; bottom: 12px;
  color: rgba(245,241,232,.92);
  font-size: 13px;
}

.stackNav{
  background: rgba(11,18,32,.55) !important;
}
.stackCaption{
  background: rgba(11,18,32,.55) !important;
}

/* FAB tweaks for mobile */
.fab a{
  width: 48px; height:48px;
}
.fab a span{
  font-weight: 800;
  font-size: 16px;
}
@media (max-width: 420px){
  .fab{ right: 10px; bottom: 10px; }
  .fab a{ width: 44px; height: 44px; }
}


/* =====================
   V5: Luxury black-red theme (consistent)
   ===================== */
:root{
  --lux0:#07060A;
  --lux1:#1A0409;
  --lux2:#2B0610;
  --lux3:#4A0A14;
  --gold:#C8A46A;
  --text:#F5F1E8;
  --muted: rgba(245,241,232,.72);
  --glass: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
}

body{
  background:
    radial-gradient(1200px circle at 18% 12%, rgba(74,10,20,.55), transparent 60%),
    radial-gradient(1000px circle at 82% 20%, rgba(200,164,106,.18), transparent 55%),
    linear-gradient(180deg, var(--lux0), var(--lux1) 35%, var(--lux2));
  color: var(--text);
}

.section{
  background: transparent !important;
}
.kicker, .p, .small{ color: var(--muted) !important; }
.h2, .hTitle{ color: var(--text) !important; }

.card{
  background: var(--glass) !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.28) !important;
}
.li{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(245,241,232,.90) !important;
}
.table th, .table td{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(245,241,232,.90) !important;
}
.table th{ opacity: .78; }

.topbar{
  background: rgba(11,18,32,.45) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.btn{
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(245,241,232,.92) !important;
  box-shadow: none !important;
}
.btn:hover{ background: rgba(255,255,255,.12) !important; }
.btn.primary{
  border: 1px solid rgba(200,164,106,.55) !important;
  background: linear-gradient(180deg, rgba(200,164,106,1), rgba(233,214,179,1)) !important;
  color: #1b1b1b !important;
}

.badge{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(245,241,232,.92) !important;
}

/* Hero background (keep) */
.heroBg::before{ opacity: .40 !important; filter: blur(16px) !important; }
.heroBg::after{
  background:
    radial-gradient(900px circle at 22% 18%, rgba(200,164,106,.26), transparent 58%),
    radial-gradient(1000px circle at 70% 20%, rgba(138,26,44,.30), transparent 55%),
    linear-gradient(180deg, rgba(7,6,10,.92), rgba(26,4,9,.70)) !important;
}

/* Footer */
.footer{
  background: rgba(0,0,0,.12) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
.footer .small{ color: rgba(245,241,232,.70) !important; }

/* Gallery items */
.gItem{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
}

/* =====================
   Deck slider (like sample) — center big, sides faded
   ===================== */
.deckSlider{
  position: relative;
  width:100%;
  min-height: 520px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  perspective: 1200px;
}
@media (max-width: 920px){
  .deckSlider{ min-height: 420px; }
}
.deckSlide{
  position:absolute;
  top: 50%;
  left: 50%;
  width: min(760px, 88%);
  aspect-ratio: 9 / 16; /* poster-like */
  max-height: 520px;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--x) * 220px))
    rotateZ(calc(var(--x) * -3deg))
    rotateY(calc(var(--x) * -10deg))
    scale(calc(1 - var(--abs) * .10));
  opacity: calc(1 - var(--abs) * .42);
  filter: blur(calc(var(--abs) * 1.6px));
  transition: transform .24s ease, opacity .24s ease, filter .24s ease;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 34px 90px rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.12);
  cursor:pointer;
  background: rgba(0,0,0,.25);
}
@media (max-width: 920px){
  .deckSlide{
    width: 92%;
    transform:
      translate(-50%, -50%)
      translateX(calc(var(--x) * 130px))
      rotateZ(calc(var(--x) * -2deg))
      scale(calc(1 - var(--abs) * .12));
  }
}
.deckSlide.active{
  opacity: 1;
  filter: none;
}
.deckSlide img{ width:100%; height:100%; object-fit: cover; display:block; }
.deckSlide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.28));
}
.deckSlide .cap{
  position:absolute; left: 14px; right: 14px; bottom: 12px;
  color: rgba(245,241,232,.92);
  font-size: 13px;
}

.deckDots{
  position:absolute;
  left: 0; right: 0; bottom: 14px;
  display:flex;
  justify-content:center;
  gap: 8px;
  z-index: 40;
}
.deckDot{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  cursor:pointer;
}
.deckDot.active{
  background: rgba(200,164,106,.85);
  border-color: rgba(200,164,106,1);
}

/* Make nav buttons match theme */
.stackNav{
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.stackCaption{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* =====================
   V6 tweaks: readability + horizontal deck
   ===================== */

/* Force light text in dark theme (fix accidental black text) */
body, .card, .card * { color: inherit; }
.card b, .card strong { color: rgba(245,241,232,.95) !important; }
.card .p { color: rgba(245,241,232,.72) !important; }
.card .kicker { color: rgba(245,241,232,.62) !important; }

.deckSlider{
  min-height: 440px !important;
}
.deckSlide{
  aspect-ratio: 16 / 9 !important;
  width: min(860px, 90%) !important;
  max-height: 460px !important;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--x) * 240px))
    rotateZ(calc(var(--x) * -2deg))
    rotateY(calc(var(--x) * -8deg))
    scale(calc(1 - var(--abs) * .10)) !important;
}
@media (max-width: 920px){
  .deckSlider{ min-height: 320px !important; }
  .deckSlide{
    width: 92% !important;
    max-height: 320px !important;
    transform:
      translate(-50%, -50%)
      translateX(calc(var(--x) * 140px))
      rotateZ(calc(var(--x) * -1.5deg))
      scale(calc(1 - var(--abs) * .12)) !important;
  }
}

/* Location list readability */
#location .li{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
#location .li span{ color: rgba(245,241,232,.92) !important; }
#location .btn.ghost{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Make headings inside cards pop a bit */
.card > div[style*="font-weight:900"], .card > div[style*="font-weight:800"]{
  color: rgba(245,241,232,.96) !important;
}


/* =====================
   V7: Luxury polish (spacing, typography, glass, consistency)
   ===================== */
:root{
  --radius: 22px;
  --radius2: 18px;
  --pad: 18px;
  --pad2: 14px;
  --shadow: 0 26px 80px rgba(0,0,0,.38);
  --shadow2: 0 18px 56px rgba(0,0,0,.28);
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.14);
  --goldSoft: rgba(200,164,106,.32);
}

/* Global typography */
body{
  letter-spacing: .1px;
}
.h2{
  font-size: clamp(24px, 2.2vw, 38px) !important;
  line-height: 1.12 !important;
}
.hTitle{
  font-size: clamp(30px, 3.1vw, 50px) !important;
  line-height: 1.05 !important;
}
.p{
  line-height: 1.65 !important;
}
.kicker{
  letter-spacing: .18em !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  position: relative;
}
.kicker::after{
  content:"";
  display:block;
  width: 54px;
  height: 2px;
  margin-top: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(200,164,106,1), rgba(138,26,44,.65));
  opacity: .85;
}

/* Section rhythm */
.section{
  padding: 72px 0 !important;
}
@media (max-width: 920px){
  .section{ padding: 54px 0 !important; }
}
.container{
  max-width: 1160px !important;
}

/* Glass cards */
.card{
  border-radius: var(--radius) !important;
  padding: var(--pad) !important;
  box-shadow: var(--shadow2) !important;
  backdrop-filter: blur(10px);
}
.card:hover{
  border-color: rgba(200,164,106,.22) !important;
}

/* Lists */
.list .li{
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
.list .li span{
  line-height: 1.45 !important;
}

/* Buttons */
.btn{
  border-radius: 999px !important;
  padding: 12px 14px !important;
  gap: 10px !important;
}
.btn.primary{
  box-shadow: 0 14px 36px rgba(200,164,106,.20) !important;
}
.btn.ghost{
  background: rgba(255,255,255,.06) !important;
}
.btn.ghost:hover{
  background: rgba(255,255,255,.10) !important;
}

/* Navbar polish */
.topbar{
  backdrop-filter: blur(12px);
}
.brand{
  gap: 12px !important;
}
.brand img{
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}

/* Hero */
.heroCard{
  border-radius: 26px !important;
  padding: 18px !important;
  box-shadow: var(--shadow) !important;
}
.heroStatic{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10);
}
.heroMeta{
  gap: 10px !important;
}
.heroMeta .metaItem{
  border-radius: 16px !important;
}

/* Subtle dividers between big blocks */
.section .container{
  position: relative;
}
.section .container::before{
  content:"";
  position:absolute;
  left: 0; right: 0; top: -24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  opacity: .8;
}
.heroBg .container::before{ display:none; }

/* Deck slider polish */
.deckSlider{
  border-radius: 26px !important;
  box-shadow: 0 26px 90px rgba(0,0,0,.38);
  background: rgba(255,255,255,.03) !important;
}
.deckSlide{
  border-radius: 20px !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.52) !important;
}
.deckDots{
  bottom: 16px !important;
}
.deckDot{
  width: 9px !important; height: 9px !important;
  opacity: .9;
}

/* Images (gallery/floorplans) */
.gItem img{
  border-radius: 18px !important;
}
.gItem{
  border-radius: 18px !important;
}

/* Location block readability */
#location .card{
  background: rgba(255,255,255,.05) !important;
}
#location .li{
  background: rgba(0,0,0,.30) !important;
}

/* Modal polish */
.modalContent{
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 30px 120px rgba(0,0,0,.65) !important;
}

/* Footer */
.footer{
  padding: 26px 0 !important;
}


/* =====================
   V8: Compact spacing + modal navigation + readability
   ===================== */
.section{ padding: 56px 0 !important; }
@media (max-width: 920px){ .section{ padding: 44px 0 !important; } }

.grid4, .grid3, .grid2{ gap: 10px !important; }
.heroGrid{ gap: 18px !important; }

.card{ padding: 16px !important; }
@media (max-width: 920px){ .card{ padding: 14px !important; } }

/* Make headings/captions more prominent */
.h2{ text-shadow: 0 12px 30px rgba(0,0,0,.35); }
.stackCaption, .modalCaption{
  color: rgba(245,241,232,.94) !important;
  font-weight: 800 !important;
}
.stackCaption{
  font-size: 13px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.deckSlide .cap{
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}

/* Slider controls easier on laptop */
.stackNav{
  width: 54px !important; height: 54px !important;
  font-size: 30px !important;
  z-index: 80 !important;
  border-radius: 999px !important;
}
.deckSlider{ cursor: grab; }
.deckSlider:active{ cursor: grabbing; }

/* Modal with close + prev/next always visible */
.modalInner{
  position: relative;
  padding: 16px !important;
}
.modalBtn{
  position: absolute;
  top: 12px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.42);
  color: rgba(245,241,232,.95);
  font-size: 22px;
  cursor: pointer;
  z-index: 200;
}
.modalBtn:hover{ background: rgba(0,0,0,.55); }
.modalClose{ right: 12px; }
.modalPrev{ left: 12px; top: 50%; transform: translateY(-50%); }
.modalNext{ right: 12px; top: 50%; transform: translateY(-50%); }

.modalCaption{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}

/* Improve location list contrast */
#location .li{
  background: rgba(0,0,0,.36) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
#location .li span{ color: rgba(245,241,232,.95) !important; }

/* Ensure no accidental black headers */
h1,h2,h3,h4,.h2,.hTitle,.kicker{ color: rgba(245,241,232,.96) !important; }


/* =====================
   V9: Contrast fixes + unified theme
   ===================== */
/* Neutralize legacy section theme overrides */
.bg-night, .bg-soft, .bg-olive, .bg-sunrise{
  background: transparent !important;
  color: var(--text) !important;
}
.bg-night .card, .bg-soft .card, .bg-olive .card, .bg-sunrise .card{
  background: var(--glass) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
}
.bg-night .p, .bg-soft .p, .bg-olive .p, .bg-sunrise .p,
.bg-night .kicker, .bg-soft .kicker, .bg-olive .kicker, .bg-sunrise .kicker{
  color: var(--muted) !important;
}

/* Highlights text */
#highlights .card{
  color: rgba(245,241,232,.95) !important;
}
#highlights .card .p{
  color: rgba(245,241,232,.78) !important;
}
#highlights .iconTitle > div > div:first-child{
  color: rgba(245,241,232,.98) !important;
}

/* Renders intro paragraph more visible */
#renders .p{
  color: rgba(245,241,232,.82) !important;
}

/* Make "Điểm nhấn" card readable */
#renders .card > div[style*="font-weight:900"]{
  color: rgba(245,241,232,.98) !important;
}
#renders .card .kicker{
  color: rgba(245,241,232,.65) !important;
}

/* Deck slider background slightly darker so ảnh nổi */
.deckSlider{
  background: rgba(0,0,0,.18) !important;
}

/* Buttons in light-looking cards (if any) */
.btn.ghost{
  color: rgba(245,241,232,.92) !important;
}

/* Amenities heading */
#amenitiesSection .h2, #amenities .h2{
  color: rgba(245,241,232,.96) !important;
}

.req{color: rgba(200,164,106,.95); font-weight:900;}

#highlights{gap:10px !important;}


/* =====================
   V11: Restore V9 feel + fix real issues
   ===================== */

/* NAV: hotline one line */
[data-hotline]{ white-space: nowrap; }
.navcta{ flex-wrap: nowrap; }
@media (max-width: 1100px){
  .navcta{ flex-wrap: wrap; }
}

/* Renders: align two panels, keep equal height */
.renderGrid{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 920px){
  .renderGrid{ grid-template-columns: 1fr; }
}
.renderGrid > .card{ height: 100%; }

/* Deck slider: enforce height (fix blank on some browsers) */
.deckSlider{ min-height: 360px; }
.deckSlide{
  height: min(440px, 45vw);
  aspect-ratio: 16 / 9 !important;
}
@media (max-width: 920px){
  .deckSlider{ min-height: 240px; }
  .deckSlide{ height: min(320px, 58vw); }
}

/* Caption: hide empty bar, show only when has text */
.stackCaption:empty{ display:none; }

/* Highlights text to white */
#highlights .card, #highlights .card *{ color: rgba(245,241,232,.92) !important; }
#highlights .p{ color: rgba(245,241,232,.76) !important; }

/* Fix amenities grid duplicate-id bug side effects */
#amenitiesGrid{ width:100%; }

/* Contact form like ref */
.contactPanel{
  background:
    radial-gradient(1200px circle at 20% 10%, rgba(12,34,66,.55), transparent 60%),
    linear-gradient(180deg, rgba(6,12,24,.92), rgba(10,16,34,.92));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 90px rgba(0,0,0,.40);
}
.form2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 920px){
  .form2{ grid-template-columns: 1fr; }
}
.field input, .field textarea{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(245,241,232,.92) !important;
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(245,241,232,.45) !important; }
.contactSubmit{
  background: linear-gradient(180deg, rgba(255,122,0,1), rgba(255,162,77,1)) !important;
  color: #111 !important;
  border: none !important;
  box-shadow: 0 18px 44px rgba(255,122,0,.22) !important;
}

/* Remove any accidental black headers */
h1,h2,h3,h4,.h2,.hTitle,.kicker{ color: rgba(245,241,232,.96) !important; }


/* =====================
   V12: Signup section like reference
   ===================== */
.signupGrid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 920px){
  .signupGrid{ grid-template-columns: 1fr; }
}
.signupLeft{
  padding: 6px 2px;
}
.signupLeft .hTitle{
  font-size: clamp(36px, 3.2vw, 58px);
  line-height: 1.02;
  letter-spacing: .2px;
}
.hotlineCard{
  display:flex;
  gap: 14px;
  align-items:center;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px circle at 10% 20%, rgba(12,34,66,.55), transparent 55%),
    linear-gradient(180deg, rgba(6,12,24,.82), rgba(10,16,34,.82));
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}
.hotlineIcon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.hotlineNumber{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .6px;
  color: rgba(245,241,232,.98);
}
.signupBullets{
  margin: 0;
  padding-left: 18px;
  display:grid;
  gap: 10px;
  color: rgba(245,241,232,.86);
}
.signupBullets li{
  line-height: 1.5;
}
.signupCard{
  background:
    radial-gradient(1200px circle at 20% 10%, rgba(12,34,66,.55), transparent 60%),
    linear-gradient(180deg, rgba(6,12,24,.92), rgba(10,16,34,.92)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 26px 90px rgba(0,0,0,.40) !important;
}
.formRow2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 920px){
  .formRow2{ grid-template-columns: 1fr; }
}


/* =====================
   V13: Signup colors match site + fix slider images
   ===================== */
.hotlineCard{
  background:
    radial-gradient(900px circle at 18% 18%, rgba(138,26,44,.35), transparent 58%),
    radial-gradient(900px circle at 78% 28%, rgba(200,164,106,.10), transparent 55%),
    linear-gradient(180deg, rgba(7,6,10,.70), rgba(26,4,9,.72)) !important;
}
.signupCard{
  background:
    radial-gradient(1200px circle at 20% 10%, rgba(138,26,44,.28), transparent 60%),
    radial-gradient(1100px circle at 82% 18%, rgba(200,164,106,.12), transparent 55%),
    linear-gradient(180deg, rgba(7,6,10,.72), rgba(26,4,9,.78)) !important;
}

/* V14: single zalo */
.navcta{gap:12px !important;}


/* =====================
   V16: Payment + rollout updates + compact 3 panels
   ===================== */
#overview .grid3{ gap: 10px !important; }
#overview .card{ padding: 14px !important; }
#overview .list .li{ padding: 10px 12px !important; }
#overview .card .p{ margin-top: 10px !important; }
#overview .card{ min-height: unset !important; }


/* =====================
   V17: Form label readability + footer accent
   ===================== */
.field label{
  color: rgba(245,241,232,.78) !important;
}
.footer [data-project]{
  color: rgba(200,164,106,.96) !important;
  letter-spacing: .08em;
}