/* DYF — Hành trình từ cái vỏ đến khách sạn đón khách */

:root{
  --bg:#0b0a09; --bg-2:#14120f; --bg-3:#14120f;
  --ink:#efe3cd; --ink-2:rgba(239,227,205,.68); --ink-3:rgba(239,227,205,.44);
  --gold:#d6a054; --gold-lt:#d6a054; --gold-pale:#efe3cd;
  --line:rgba(239,227,205,.18);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Be Vietnam Pro",Arial,sans-serif;
  --ease:cubic-bezier(.19,.66,.22,1);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--gold-lt);text-decoration:none}
::selection{background:var(--gold);color:var(--bg)}
html{scroll-behavior:smooth}

.unified-header{position:sticky;top:0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:20px;height:60px;padding:0 clamp(22px,3.45vw,44px);background:linear-gradient(180deg,rgba(11,10,9,.96),rgba(11,10,9,.72));backdrop-filter:blur(10px);border-bottom:1px solid rgba(239,227,205,.1)}
.unified-wordmark{display:block;width:64px;height:30px}
.unified-wordmark img{width:auto;height:24px;margin-top:3px;filter:brightness(0) invert(1)}
.nav-main a{font-size:11.5px!important;font-weight:300!important;letter-spacing:.16em;text-transform:uppercase;transition:color .3s ease}
.nav-main a:hover{color:var(--gold)!important}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(22px,5vw,72px)}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font:600 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-pale)}
.eyebrow i{width:34px;height:1px;background:currentColor}
h2.big{font:300 clamp(2rem,4.4vw,3.6rem)/1.06 var(--serif);letter-spacing:-.02em;color:#ece0cb;margin:.4em 0}
.lead{color:var(--ink-2);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.72;max-width:62ch}

/* nhãn trung thực trên ảnh */
.tag-img{position:absolute;top:14px;right:14px;z-index:5;padding:5px 11px;
  background:rgba(10,8,5,.74);border:1px solid rgba(201,162,75,.4);
  font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.08);transition:transform 1.6s var(--ease);
  filter:brightness(1.1) saturate(1.06)}
/* Ảnh hero là phòng hoàn thiện — lớp phủ chỉ đủ để chữ đọc được,
   không được dìm mất đồ đạc. Tối bên trái (nơi có chữ), sáng dần sang phải. */
.hero .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(18,14,10,.86) 0%,rgba(18,14,10,.58) 34%,rgba(18,14,10,.14) 66%,rgba(18,14,10,0) 100%),
             linear-gradient(180deg,rgba(18,14,10,.34) 0%,rgba(18,14,10,0) 30%,rgba(18,14,10,.72) 100%)}
.hero .inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(46px,8vh,92px)}
.hero h1{font:300 clamp(2.5rem,6.4vw,5.8rem)/.96 var(--serif);letter-spacing:-.025em;color:#ece0cb;max-width:17ch;margin:.35em 0 0}
.hero h1 em{font-style:normal;color:var(--gold-pale)}

/* ---------- SCROLLYTELLING ---------- */
.story{position:relative;background:var(--bg)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.story-sticky{position:sticky;top:96px;aspect-ratio:1/1;max-height:min(74vh,620px);overflow:hidden;border:1px solid var(--line);background:#0d0a07}
.story-sticky .frame{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease),transform 1.4s var(--ease);transform:scale(1.06)}
.story-sticky .frame.on{opacity:1;transform:scale(1)}
.story-sticky .frame img{width:100%;height:100%;object-fit:cover}


.chapters{display:grid}
.chapter{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:6vh 0;border-bottom:1px solid rgba(243,236,219,.07)}
.chapter:last-child{border-bottom:none}
.ch-num{font:300 clamp(3rem,5vw,4.6rem)/1 var(--serif);color:rgba(201,162,75,.32)}
.chapter h3{font:400 clamp(1.6rem,2.6vw,2.3rem)/1.16 var(--serif);color:#ece0cb;margin:.1em 0 .5em}
.chapter p{color:var(--ink-2);margin:0 0 18px;max-width:52ch}

.facts{display:grid;gap:12px;margin-top:10px;padding-top:20px;border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline}
.fact b{font:600 10px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
.fact span{color:var(--ink-2);font-size:15px;line-height:1.6}
.fact .num{font:400 22px/1.2 var(--serif);color:#ece0cb;display:block}

/* ---------- MÁY TÍNH VỐN ---------- */
.calc{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(60px,9vh,110px) 0}
.calc-grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:44px}
.ctrl{display:grid;gap:26px}
.ctrl label{display:block}
.ctrl .lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.ctrl .lab span:first-child{font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ctrl .lab output{font:400 24px/1 var(--serif);color:var(--gold-pale)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;border-radius:3px;background:rgba(243,236,219,.16);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(150deg,#ecd396,#c9a24b 52%,#a8842f);cursor:pointer;border:2px solid var(--bg-2);
  box-shadow:0 2px 10px rgba(0,0,0,.4)}
.segs{display:flex;gap:8px}
.seg{flex:1;padding:12px 8px;border-radius:6px;border:1px solid var(--line);background:transparent;
  color:var(--ink-2);font:600 13px var(--sans);cursor:pointer;transition:all .3s var(--ease)}
.seg.on{border-color:var(--gold);background:rgba(201,162,75,.12);color:var(--gold-pale)}

.result{border:1px solid rgba(214,160,84,.28);padding:clamp(24px,3vw,38px);background:var(--bg)}
.result .total{font:300 clamp(2.4rem,5vw,4rem)/1 var(--serif);color:#ece0cb;letter-spacing:-.02em}
.result .total small{display:block;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:14px}
.result .perroom{margin-top:12px;color:var(--ink-2);font-size:15px}
.result .perroom b{color:var(--gold-pale);font-weight:600}

.bars{display:grid;gap:11px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;font-size:14px}
.bar-row .nm{color:var(--ink-2)}
.bar-row .vl{color:#ece0cb;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-track{display:block;grid-column:1/-1;height:5px;border-radius:4px;background:rgba(243,236,219,.09);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold-pale));width:0;transition:width .9s var(--ease)}

.disclaim{margin-top:26px;padding:16px 18px;border-radius:7px;background:rgba(243,236,219,.045);
  border-left:2px solid var(--gold);color:var(--ink-3);font-size:13.5px;line-height:1.6}

/* ---------- QUY LUẬT CHIA PHÒNG ---------- */
.law{padding:clamp(60px,9vh,110px) 0}
.law-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:44px}
.law-card{border:1px solid var(--line);padding:28px 24px;background:var(--bg-3);
  transition:transform .5s var(--ease),border-color .5s ease}
.law-card:hover{transform:translateY(-4px);border-color:rgba(201,162,75,.4)}
.law-card .rooms{font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
.law-card .big{font:300 clamp(2.2rem,3.4vw,3rem)/1 var(--serif);color:#ece0cb;margin:14px 0 6px}
.law-card .unit{color:var(--ink-3);font-size:13px}
.law-card .src{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12.5px;line-height:1.55}

/* ---------- BẬC THANG CTA ---------- */
.steps{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(60px,9vh,110px) 0}
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:44px}
.step{border:1px solid var(--line);padding:30px 26px;background:var(--bg-3);display:flex;flex-direction:column}
.step.hi{border-color:rgba(201,162,75,.5);background:linear-gradient(165deg,rgba(201,162,75,.09),var(--bg-3) 62%)}
.step .k{font:600 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt)}
.step h4{font:400 1.5rem/1.2 var(--serif);color:#ece0cb;margin:14px 0 10px}
.step p{color:var(--ink-2);font-size:14.5px;margin:0 0 22px;flex:1}
.step .price{font:400 1.7rem/1 var(--serif);color:var(--gold-pale);margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;border-radius:999px;border:none;
  font:500 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#0b0a09;background:var(--ink);cursor:pointer;
  box-shadow:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn.ghost{background:transparent;border:1px solid rgba(243,236,219,.26);color:#ece0cb;box-shadow:none}

/* reveal */
.r{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.r.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important;transition:none!important}
}


/* ══════════════ MÁY BẢNG (iPad dọc & ngang) ══════════════ */
@media (max-width: 1180px){
  .wrap{padding:0 clamp(20px,4vw,44px)}
  .story-grid{gap:32px}
  .story-sticky{top:80px;max-height:min(60vh,520px)}
  .chapter{min-height:78vh}
  /* máy tính vốn: xếp dọc, kết quả xuống dưới */
  .calc-grid{grid-template-columns:1fr;gap:34px}
  .ctrl{max-width:520px}
}

/* ══════════════ ĐIỆN THOẠI ══════════════ */
@media (max-width: 720px){
  body{font-size:16px}
  .wrap{padding:0 20px}

  /* Hero: chữ phải đọc được, ảnh không nuốt chữ */
  .hero{min-height:88vh}
  .hero h1{font-size:clamp(2.1rem,9vw,3.2rem);max-width:14ch}
  .eyebrow{font-size:10.5px;letter-spacing:.16em}
  .eyebrow i{width:22px}
  /* Trên điện thoại chữ nằm đè giữa ảnh → cần lớp phủ đậm hơn ở nửa dưới,
     nhưng vẫn để nửa trên sáng để thấy trần và đồ. */
  .hero .veil{background:linear-gradient(180deg,rgba(18,14,10,.3) 0%,rgba(18,14,10,.12) 26%,rgba(18,14,10,.8) 62%,rgba(18,14,10,.96) 100%)}
  .hero .inner{padding-bottom:44px}
  .hero .btn{width:100%;justify-content:center}
  .hero .btn + .btn{margin-top:0}

  /* Bóc lớp: ảnh dính TRÊN ĐẦU, chữ chạy dưới — vẫn giữ được hiệu ứng lớp */
  .story-grid{grid-template-columns:1fr;gap:0}
  /* Dính ngay dưới thanh đầu trang, rộng hết khổ.
     KHÔNG dùng aspect-ratio + max-height cùng lúc: chiều cao ép lại làm ảnh
     hẹp hơn khổ màn, chữ tràn ra bên cạnh. Ấn định chiều cao, để chiều rộng tự đầy.
     box-shadow trên lấp khe (chữ chương trước lọt qua); box-shadow dưới làm
     chữ tan dần vào nền thay vì bị cắt cụt ngang mép ảnh. */
  .story-sticky{position:sticky;top:54px;aspect-ratio:auto;height:40vh;width:auto;
    margin:0 -20px 10px;border-radius:0;border-left:none;border-right:none;z-index:5;
    box-shadow:0 -30px 0 0 var(--bg),
               0 7px 7px -2px rgba(20,16,12,.92),
               0 15px 12px -5px rgba(20,16,12,.7),
               0 26px 18px -10px rgba(20,16,12,.45)}
  .chapters{padding-top:14px}
  .chapter{min-height:auto;padding:34px 0;justify-content:flex-start}
  .chapter p{max-width:none}
  .ch-num{font-size:2.4rem}
  .chapter h3{font-size:1.6rem}
  .fact{grid-template-columns:1fr;gap:4px}
  .fact b{font-size:9.5px}

  /* Máy tính vốn */
  .result{padding:22px 20px}
  .result .total{font-size:2rem}
  .bar-row{grid-template-columns:1fr;gap:3px}
  .bar-row .vl{justify-self:start;font-size:13px}
  .segs{flex-wrap:wrap}
  .seg{min-width:calc(33% - 6px);padding:11px 6px;font-size:12.5px}

  /* Thẻ + bậc thang: một cột */
  .law-cards,.step-grid{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .steps .btn,.law .btn{width:100%}
}

/* Màn rất hẹp */
@media (max-width: 380px){
  .hero h1{font-size:1.95rem}
  .seg{min-width:calc(50% - 5px)}
}

/* Máy cảm ứng: bỏ hiệu ứng rê chuột (không có chuột để rê) */
@media (hover: none){
  .law-card:hover{transform:none}
  .btn:hover{transform:none}
}

@media(prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .r{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important;transition:none!important}
}

/* ══════════ THANH ĐẦU TRANG trên máy nhỏ ══════════
   Bốn mục + nút vàng sẽ tràn trên điện thoại → giấu mục, giữ lại logo và nút gọi hành động. */
@media (max-width: 720px){
  header nav a{display:none}
  header nav{gap:0}
  header nav .btn{padding:10px 16px!important;font-size:12px!important;width:auto}
  header{padding:12px 20px!important}
}
@media (min-width: 721px) and (max-width: 1180px){
  header nav{gap:16px}
  header nav a{font-size:12.5px}
}

/* ══════════════ CÔNG TRÌNH — bố cục tuyển tập ══════════════
   Ảnh dọc (Soleil, Dalali) giữ dọc; ảnh ngang giữ ngang.
   So le nhau để mắt có nhịp, thay vì năm ô đều tăm tắp. */
.works{padding:clamp(60px,9vh,110px) 0;border-top:1px solid var(--line)}
.works-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.5vw,22px)}

.work{position:relative;display:block;overflow:hidden;background:var(--bg-3);
  border:1px solid var(--line);transition:border-color .6s var(--ease),transform .6s var(--ease)}
.work img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s ease;
  filter:saturate(.92) brightness(.94)}
.work:hover img{transform:scale(1.05);filter:saturate(1.02) brightness(1)}
.work:hover{border-color:rgba(201,162,75,.45);transform:translateY(-3px)}
.work:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.work-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,14,10,0) 38%,rgba(18,14,10,.5) 66%,rgba(18,14,10,.92) 100%)}
.work-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;display:grid;gap:5px}
.work-cap b{font:400 clamp(1.15rem,1.5vw,1.45rem)/1.2 var(--serif);color:#f3ecdb;font-weight:400}
.work-cap i{font:500 12.5px/1.4 var(--sans);font-style:normal;color:rgba(243,236,219,.6);letter-spacing:.01em}

/* ── Đặt ô: một trục dọc cao chạy suốt bên phải (Soleil), các khối còn lại
   xếp bậc bên trái, kết bằng một dải ngang trải hết bề ngang (Resort).
   Dùng chiều cao cố định theo hàng + object-fit cover → không còn khoảng hở. ── */
.works-grid{grid-auto-rows:auto}

/* Cao Boutique — khối chủ, gần vuông, giữ được trần đèn mây */
.w1{grid-column:1/8;  grid-row:1;    height:clamp(300px,38vw,540px)}
/* Soleil — mặt tiền đêm, trục dọc cao chạy suốt hai hàng */
.w2{grid-column:8/13; grid-row:1/3;  height:100%}
/* Dalali — sảnh thông tầng */
.w3{grid-column:1/5;  grid-row:2;    height:clamp(220px,24vw,330px)}
/* French Colonial */
.w4{grid-column:5/8;  grid-row:2;    height:clamp(220px,24vw,330px)}
/* Resort — dải ngang khép lại phía dưới */
.w5{grid-column:1/13; grid-row:3;    height:clamp(200px,22vw,300px)}

.works-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.works-foot span{color:var(--ink-3);font-size:14px}
.works-foot .btn{flex:0 0 auto}

/* iPad */
@media (max-width:1180px){
  .w1{grid-column:1/8;  grid-row:1;   height:clamp(260px,36vw,420px)}
  .w2{grid-column:8/13; grid-row:1/3; height:100%}
  .w3{grid-column:1/5;  grid-row:2;   height:clamp(190px,24vw,280px)}
  .w4{grid-column:5/8;  grid-row:2;   height:clamp(190px,24vw,280px)}
  .w5{grid-column:1/13; grid-row:3;   height:clamp(180px,24vw,260px)}
}

/* Điện thoại — bỏ so le, xếp dọc, nhưng vẫn giữ tỉ lệ thật của từng ảnh */
@media (max-width:720px){
  .works-grid{grid-template-columns:1fr;gap:14px}
  .w1,.w2,.w3,.w4,.w5{grid-column:1/-1;grid-row:auto;height:auto;margin-top:0;align-self:auto}
  .w1{aspect-ratio:1/1}
  .w2{aspect-ratio:3/4}
  .w3{aspect-ratio:4/5}
  .w4{aspect-ratio:16/10}
  .w5{aspect-ratio:16/9}
  .work-cap{padding:18px}
  .works-foot{flex-direction:column;align-items:stretch;gap:16px}
  .works-foot .btn{width:100%}
}

/* ================== CHÂN TRANG ================== */
.ft{border-top:1px solid var(--line);background:
  radial-gradient(90% 120% at 12% 0%,rgba(74,52,28,.22),transparent 58%),var(--bg-2);
  padding:clamp(58px,7vw,96px) 0 clamp(26px,3vw,38px);margin-top:clamp(60px,8vw,110px)}

.ft-grid{display:grid;gap:clamp(38px,4.4vw,64px);
  grid-template-columns:1fr;align-items:start}
@media(min-width:700px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ft-grid{grid-template-columns:1.5fr 1fr 1fr .9fr}}

/* --- khối thương hiệu --- */
.ft-brand{max-width:34ch}
.ft-logo{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.ft-logo img{height:30px;width:auto;flex:none;filter:brightness(0) invert(1)}
.ft-brand p{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-3)}

/* --- các cột --- */
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-width:0}
.ft-col h4{margin:0 0 8px;font:600 10.5px/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.ft-col p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-3)}
.ft-col a{font-size:14.5px;line-height:1.6;color:var(--ink-2);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.ft-col a:hover{color:var(--gold-pale);border-bottom-color:rgba(201,162,75,.5)}

/* số điện thoại — thứ duy nhất được to */
.ft-big{font:400 clamp(1.45rem,2vw,1.75rem)/1.15 var(--serif)!important;
  letter-spacing:.01em;color:var(--ink)!important;
  font-variant-numeric:tabular-nums;margin-bottom:2px}
.ft-big:hover{color:var(--gold-pale)!important;border-bottom-color:transparent!important}

/* --- vạch cuối --- */
.ft-foot{margin-top:clamp(46px,5vw,72px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px}
.ft-foot span{font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.ft-foot span:last-child{max-width:56ch}