/* =========================================================================
   Norton Park – Landing page tư vấn Norton Park
   Bảng màu dựa trên bộ nhận diện dự án (Dark Pine, Beige Sand, Hoa Dầu Brown,
   Champagne Bronze), font thay thế bằng Google Fonts có hỗ trợ tiếng Việt:
     Cormorant Garamond – tiêu đề  ·  Jost – nhãn, menu  ·  Be Vietnam Pro – nội dung
   ========================================================================= */

:root{
  --ivory:#F8F5EE;
  --ivory-2:#F1ECE1;
  --sand:#E6DECD;
  --sand-2:#DCD3C0;
  --pine:#3E4434;
  --pine-2:#5D614F;
  --brown:#4B3D36;
  --brown-2:#594A42;
  --bronze:#A78061;
  --bronze-deep:#8B6748;
  --bronze-soft:rgba(167,128,97,.16);

  --ink:#2F2925;
  --tx:#5E554B;
  --tx-2:#857A6D;
  --on-dark:#F4F0E7;
  --on-dark-2:#D5CEB8;
  --line:rgba(75,61,54,.16);
  --line-dark:rgba(244,240,231,.18);

  --f-display:"Cormorant Garamond", "Times New Roman", serif;
  --f-label:"Jost", "Be Vietnam Pro", system-ui, sans-serif;
  --f-body:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --h1:clamp(2.6rem, 6.4vw, 5.6rem);
  --h2:clamp(2.1rem, 4.4vw, 3.6rem);
  --h3:clamp(1.5rem, 2.2vw, 2rem);
  --lead:clamp(1rem, 1.15vw, 1.12rem);

  --wrap:min(1240px, calc(100% - 2 * var(--gut)));
  --gut:clamp(16px, 4vw, 48px);
  --bay:clamp(72px, 10vw, 136px);
  --hdr-h:72px;
  --r:14px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ font-feature-settings:"lnum" 1; scroll-behavior:smooth; scroll-padding-top:var(--hdr-h); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ivory); color:var(--tx);
  font:400 1rem/1.7 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
.wrap{ width:var(--wrap); margin-inline:auto; }
.skip{ position:absolute; left:-999px; top:8px; z-index:200; background:var(--pine); color:#fff; padding:8px 14px; border-radius:6px; }
.skip:focus{ left:8px; }
[hidden]{ display:none !important; }

/* ---------- Typography ---------- */
.h2,.h3,.hero__title{ font-family:var(--f-display); font-weight:500; color:var(--brown); letter-spacing:-.01em; margin:0; }
.h2{ font-size:var(--h2); line-height:1.05; }
.h3{ font-size:var(--h3); line-height:1.15; }
.h2 em,.hero__title em{ font-style:italic; color:var(--bronze); }
.lead{ font-size:var(--lead); line-height:1.75; margin:1.1rem 0 0; max-width:38rem; }
.eyebrow{
  font:500 .74rem/1 var(--f-label); text-transform:uppercase; letter-spacing:.28em;
  color:var(--pine-2); margin:0 0 1.2rem; display:flex; align-items:center; gap:.9rem;
}
.eyebrow .num{ font-family:var(--f-display); font-size:1.1rem; letter-spacing:0; color:var(--bronze); font-style:italic; }
.eyebrow .num::after{ content:""; display:inline-block; width:34px; height:1px; background:currentColor; vertical-align:middle; margin-left:.8rem; opacity:.6; }
.eyebrow--light{ color:var(--on-dark-2); }
.note{ font-size:.8rem; line-height:1.6; color:var(--tx-2); margin:1.6rem 0 0; max-width:62rem; }
.note--light{ color:rgba(244,240,231,.62); }
.link{ font:500 .8rem/1.4 var(--f-label); letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-deep); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; }
.link:hover{ color:var(--brown); }

/* ---------- Buttons ---------- */
.btn{
  --bg:transparent; --fg:var(--brown); --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.85rem 1.7rem; border-radius:999px; border:1px solid var(--bd);
  background:var(--bg); color:var(--fg); cursor:pointer; text-decoration:none;
  font:500 .78rem/1 var(--f-label); letter-spacing:.16em; text-transform:uppercase;
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn--solid{ --bg:var(--bronze); --fg:#fff; }
.btn--solid:hover{ --bg:var(--bronze-deep); }
.btn--outline{ --bd:var(--brown); }
.btn--outline:hover{ --bg:var(--brown); --fg:var(--ivory); }
.btn--ghost-light{ --bd:rgba(255,255,255,.55); --fg:#fff; backdrop-filter:blur(6px); }
.btn--ghost-light:hover{ --bg:rgba(255,255,255,.14); }
.btn--sm{ min-height:40px; padding:.6rem 1.2rem; font-size:.72rem; }
.btn--block{ width:100%; }
.circ{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--ivory); cursor:pointer; display:grid; place-items:center; transition:background .2s; }
.circ:hover{ background:var(--sand); }
.circ svg{ width:18px; height:18px; fill:none; stroke:var(--brown); stroke-width:1.6; }

/* ---------- Header ---------- */
.hdr{ position:fixed; inset:0 0 auto; z-index:50; transition:background .35s, box-shadow .35s, transform .35s var(--ease); }
.hdr__in{ height:var(--hdr-h); display:flex; align-items:center; gap:2rem; }
.hdr__logo{ position:relative; flex:none; width:clamp(150px, 15vw, 196px); }
.hdr__logo img{ width:100%; height:auto; transition:opacity .3s; }
.hdr__logo .logo--dark{ position:absolute; inset:0; opacity:0; }
.hdr__nav{ display:flex; gap:clamp(1rem, 2vw, 2.1rem); margin-inline:auto; }
.hdr__nav a{ font:500 .74rem/1 var(--f-label); letter-spacing:.18em; text-transform:uppercase; color:#fff; text-decoration:none; padding:.5rem 0; position:relative; white-space:nowrap; }
.hdr__nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .3s var(--ease); }
.hdr__nav a:hover::after,.hdr__nav a.is-on::after{ right:0; }
.hdr__act{ display:flex; align-items:center; gap:1rem; }
.hdr__act .btn{ white-space:nowrap; }
.hdr__tel{ display:flex; align-items:center; gap:.45rem; color:#fff; text-decoration:none; font:500 .86rem/1 var(--f-label); letter-spacing:.06em; white-space:nowrap; }
.hdr__tel svg{ width:16px; height:16px; fill:currentColor; }
.hdr__burger{ display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; position:relative; }
.hdr__burger span{ position:absolute; left:11px; right:11px; height:1.5px; background:#fff; transition:transform .3s, top .3s, background .3s; }
.hdr__burger span:first-child{ top:17px; } .hdr__burger span:last-child{ top:26px; }
.hdr__burger[aria-expanded="true"] span:first-child{ top:21px; transform:rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:last-child{ top:21px; transform:rotate(-45deg); }
.hdr.is-solid{ background:rgba(248,245,238,.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); }
.hdr.is-solid .logo--light{ opacity:0; } .hdr.is-solid .logo--dark{ opacity:1; }
.hdr.is-solid .hdr__nav a,.hdr.is-solid .hdr__tel{ color:var(--brown); }
.hdr.is-solid .hdr__burger span{ background:var(--brown); }
.hdr.is-hidden{ transform:translateY(-100%); }
.menu{ background:var(--ivory); border-top:1px solid var(--line); padding:1rem var(--gut) 1.6rem; max-height:calc(100dvh - var(--hdr-h)); overflow:auto; }
.menu__nav{ display:grid; margin-bottom:1.2rem; }
.menu__nav a{ font:500 1.6rem/1 var(--f-display); color:var(--brown); text-decoration:none; padding:.95rem 0; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:1rem; }
.menu__nav i{ font:italic 500 .95rem/1 var(--f-display); color:var(--bronze); width:1.6rem; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; overflow:hidden; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:60% 50%; transform:scale(1.08); animation:kb 18s var(--ease) forwards; }
@keyframes kb{ to{ transform:scale(1); } }
.hero__shade{ position:absolute; inset:0; z-index:-1; background:
  linear-gradient(180deg, rgba(30,26,22,.55) 0%, rgba(30,26,22,0) 22%),
  linear-gradient(0deg, rgba(36,32,26,.88) 0%, rgba(36,32,26,.35) 45%, rgba(36,32,26,0) 70%),
  linear-gradient(90deg, rgba(36,32,26,.62) 0%, rgba(36,32,26,.2) 45%, rgba(36,32,26,0) 65%); }
.hero__in{ padding-top:calc(var(--hdr-h) + 4rem); padding-bottom:2.2rem; }
.hero__title{ color:#fff; font-size:var(--h1); line-height:.98; max-width:19ch; text-wrap:balance; }
.hero__title em{ color:#E2C9A8; }
.hero__lead{ max-width:34rem; margin:1.4rem 0 0; font-size:var(--lead); line-height:1.75; color:rgba(255,255,255,.86); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero__bar{ padding-bottom:clamp(1.2rem, 3vw, 2.4rem); }
.hero__stats{ margin:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.25); }
.hero__stats div{ padding:1.2rem 1rem 0 0; }
.hero__stats div + div{ padding-left:1.4rem; border-left:1px solid rgba(255,255,255,.18); }
.hero__stats dt{ font:500 .68rem/1.3 var(--f-label); letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.hero__stats dd{ margin:.45rem 0 0; font:500 clamp(1.9rem, 3.4vw, 2.8rem)/1 var(--f-display); color:#fff; }
.hero__stats small{ font-size:.5em; margin-left:.15em; color:#E2C9A8; }

/* ---------- Sections ---------- */
.sec{ padding-block:var(--bay); position:relative; }
.sec--ivory{ background:var(--ivory); }
.sec--sand{ background:var(--sand); }
.sec--pine{ background:var(--pine); color:var(--on-dark-2); }
.sec--brown{ background:var(--brown); color:var(--on-dark-2); }
.sec--pine .h2,.sec--brown .h2,.sec--pine .h3,.sec--brown .h3{ color:var(--on-dark); }
.sec--pine .h2 em,.sec--brown .h2 em{ color:#D7B795; }
.sec__head{ margin-bottom:clamp(2.4rem, 5vw, 4rem); }
.sec__head--split{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem 4rem; align-items:end; }
.sec__head--split .lead{ margin:0; }

/* ---------- 01 Tổng quan ---------- */
.ov{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.4rem, 6vw, 6rem); align-items:center; }
.spec{ margin:2.2rem 0 0; border-top:1px solid var(--line); }
.spec div{ display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--line); }
.spec dt{ font:500 .72rem/1.6 var(--f-label); letter-spacing:.16em; text-transform:uppercase; color:var(--tx-2); }
.spec dd{ margin:0; color:var(--ink); font-size:.95rem; line-height:1.6; }
.ov__media{ margin:0; position:relative; }
.ov__media::before{ content:""; position:absolute; inset:-18px 18px 18px -18px; border:1px solid var(--bronze); border-radius:var(--r); opacity:.5; z-index:0; }
.ov__media img{ position:relative; border-radius:var(--r); aspect-ratio:4/5; object-fit:cover; width:100%; cursor:zoom-in; }
figcaption{ font-size:.76rem; color:var(--tx-2); margin-top:.7rem; letter-spacing:.02em; }
.facts{ list-style:none; padding:0; margin:clamp(3.5rem, 7vw, 6rem) 0 0; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); }
.facts li{ padding:1.8rem 1.2rem 0 0; }
.facts li + li{ padding-left:1.4rem; border-left:1px solid var(--line); }
.facts b{ font:500 clamp(2.6rem, 4.6vw, 4rem)/1 var(--f-display); color:var(--brown); }
.facts span{ font:italic 500 1.3rem/1 var(--f-display); color:var(--bronze); margin-left:.2rem; }
.facts p{ margin:.7rem 0 0; font:500 .7rem/1.5 var(--f-label); letter-spacing:.16em; text-transform:uppercase; color:var(--tx-2); }

/* ---------- Band ---------- */
.band{ position:relative; min-height:clamp(420px, 70vh, 640px); display:flex; align-items:center; color:#fff; isolation:isolate; overflow:hidden; }
.band picture,.band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.band::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(38,32,28,.78), rgba(38,32,28,.15) 70%); z-index:-1; }
.band blockquote{ margin:0; max-width:34ch; font:italic 500 clamp(1.6rem, 3.2vw, 2.6rem)/1.3 var(--f-display); }
.leaf{ width:60px; height:40px; fill:none; stroke:#D7B795; stroke-width:1.4; margin-bottom:1.4rem; }

/* ---------- 02 Vị trí ---------- */
.loc{ display:grid; grid-template-columns:1.45fr 1fr; gap:clamp(2rem, 4vw, 4rem); align-items:start; }
.loc__map{ margin:0; }
.loc__map img{ border-radius:var(--r); cursor:zoom-in; width:100%; }
.loc__map figcaption{ color:rgba(244,240,231,.55); }
.hl{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r); overflow:hidden; }
.hl li{ background:var(--pine); padding:1.2rem 1.1rem; font:500 1.18rem/1.25 var(--f-display); color:var(--on-dark); }
.hl span{ display:block; font:500 .66rem/1 var(--f-label); letter-spacing:.22em; text-transform:uppercase; color:#D7B795; margin-bottom:.55rem; }
.tt{ margin-top:2rem; }
.tt__label{ font:500 .7rem/1 var(--f-label); letter-spacing:.22em; text-transform:uppercase; margin:0 0 1rem; color:var(--on-dark-2); }
.tt__tabs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.tt__tabs button{ border:1px solid var(--line-dark); background:none; color:var(--on-dark); border-radius:999px; padding:.55rem 1rem; font:500 .9rem/1 var(--f-label); cursor:pointer; transition:background .2s, color .2s; }
.tt__tabs button[aria-selected="true"]{ background:var(--on-dark); color:var(--pine); border-color:var(--on-dark); }
.tt__panel{ list-style:none; margin:1.2rem 0 0; padding:0; }
.tt__panel li{ padding:.75rem 0; border-bottom:1px solid var(--line-dark); color:var(--on-dark); display:flex; gap:.8rem; align-items:center; animation:fade .4s var(--ease); }
.tt__panel li::before{ content:""; width:6px; height:6px; border-radius:50%; background:#D7B795; flex:none; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------- 03 Tiện ích ---------- */
.am__tabs{ display:flex; gap:clamp(1rem, 3vw, 3rem); border-bottom:1px solid var(--line); margin-bottom:2rem; overflow-x:auto; scrollbar-width:none; }
.am__tabs button{ background:none; border:0; padding:0 0 1rem; cursor:pointer; font:500 clamp(1.3rem, 2vw, 1.7rem)/1 var(--f-display); color:var(--tx-2); position:relative; white-space:nowrap; display:flex; gap:.6rem; align-items:baseline; }
.am__tabs i{ font:italic 500 .95rem/1 var(--f-display); color:var(--bronze); }
.am__tabs button::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px; background:var(--bronze); transition:right .35s var(--ease); }
.am__tabs button[aria-selected="true"]{ color:var(--brown); }
.am__tabs button[aria-selected="true"]::after{ right:0; }
.am__panel{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(1.6rem, 4vw, 3.6rem); align-items:center; animation:fade .5s var(--ease); }
.am__panel figure{ margin:0; }
.am__panel img{ border-radius:var(--r); aspect-ratio:16/10; object-fit:cover; width:100%; cursor:zoom-in; }
.am__txt p{ margin:.9rem 0 1.2rem; }
.ticks{ list-style:none; padding:0; margin:0; }
.ticks li{ padding:.7rem 0 .7rem 1.8rem; border-top:1px solid var(--line); position:relative; color:var(--ink); }
.ticks li::before{ content:""; position:absolute; left:2px; top:1.2rem; width:12px; height:7px; border-left:1.5px solid var(--bronze); border-bottom:1.5px solid var(--bronze); transform:rotate(-45deg); }
.gal{ margin-top:clamp(3rem, 6vw, 5rem); }
.gal__track{ display:flex; gap:clamp(12px, 1.6vw, 20px); overflow-x:auto; scroll-snap-type:x mandatory; padding:0 max(var(--gut), calc((100% - 1240px) / 2)); scroll-padding-inline:max(var(--gut), calc((100% - 1240px) / 2)); scrollbar-width:none; }
.gal__track::-webkit-scrollbar{ display:none; }
.gal__track figure{ margin:0; flex:0 0 clamp(260px, 34vw, 440px); scroll-snap-align:start; }
.gal__track img{ border-radius:var(--r); aspect-ratio:4/3; object-fit:cover; width:100%; cursor:zoom-in; transition:transform .6s var(--ease); }
.gal__track figure:hover img{ transform:scale(1.015); }
.gal__nav{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:1.4rem; }
.gal__nav .link{ margin-left:1.2rem; }

/* ---------- 04 Căn hộ ---------- */
.un__tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.un__tabs button{ border:1px solid var(--line); background:transparent; color:var(--brown); border-radius:999px; padding:.65rem 1.1rem; font:500 .84rem/1 var(--f-label); letter-spacing:.04em; cursor:pointer; transition:all .2s; }
.un__tabs button:hover{ border-color:var(--brown); }
.un__tabs button[aria-selected="true"]{ background:var(--pine); color:var(--on-dark); border-color:var(--pine); }
.un__body{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(2rem, 5vw, 5rem); align-items:center; background:var(--ivory-2); border-radius:calc(var(--r) * 1.4); padding:clamp(1.2rem, 3vw, 2.6rem); }
.un__plan{ margin:0; background:#fff; border-radius:var(--r); padding:clamp(.8rem, 2vw, 1.6rem); }
.un__plan img{ width:100%; aspect-ratio:1; object-fit:contain; cursor:zoom-in; }
.un__plan figcaption{ text-align:center; }
.un__coll{ font:500 .7rem/1 var(--f-label); letter-spacing:.22em; text-transform:uppercase; color:var(--bronze-deep); margin:0 0 .8rem; }
.un__name{ font:500 clamp(2rem, 3.6vw, 3rem)/1.05 var(--f-display); color:var(--brown); margin:0; }
.un__desc{ margin:1rem 0 1.4rem; }
.un__spec{ margin:0; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.un__spec div{ padding:.9rem 0; border-bottom:1px solid var(--line); }
.un__spec div:nth-child(odd){ padding-right:1rem; }
.un__spec dt{ font:500 .66rem/1.4 var(--f-label); letter-spacing:.18em; text-transform:uppercase; color:var(--tx-2); }
.un__spec dd{ margin:.3rem 0 0; color:var(--ink); font-weight:500; }
.un__price{ margin:1.6rem 0; display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.un__price span{ font:500 .7rem/1 var(--f-label); letter-spacing:.2em; text-transform:uppercase; color:var(--tx-2); }
.un__price b{ font:500 clamp(2rem, 3.4vw, 2.8rem)/1 var(--f-display); color:var(--bronze-deep); }
.un__price small{ font-size:.8rem; color:var(--tx-2); width:100%; }
.un.is-swap .un__body > *{ animation:fade .45s var(--ease); }
.mp{ margin-top:1rem; }
.fp{ margin:clamp(2rem, 5vw, 3.5rem) 0 0; background:#fff; border-radius:calc(var(--r) * 1.4); padding:clamp(1rem, 3vw, 2.4rem); border:1px solid var(--line); }
.fp__head{ display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.fp__title{ font:500 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--f-display); color:var(--brown); margin:0; }
.fp img{ width:100%; height:auto; cursor:zoom-in; border-radius:var(--r); }
.fp figcaption{ font-size:.8rem; color:var(--tx-2); margin-top:.9rem; }

/* ---------- 05 Chính sách ---------- */
.pp{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.pp div{ border:1px solid var(--line-dark); border-radius:var(--r); padding:1.3rem 1.2rem; }
.pp b{ display:block; font:500 3rem/1 var(--f-display); color:#E2C9A8; }
.pp span{ display:block; font-size:.84rem; line-height:1.5; margin-top:.5rem; }
.cf{ display:grid; grid-template-columns:minmax(260px, .85fr) 1.6fr; gap:clamp(1.6rem, 4vw, 3.6rem); background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:calc(var(--r) * 1.4); padding:clamp(1.2rem, 3vw, 2.6rem); }
.cf__opts{ display:grid; gap:.5rem; margin:1.2rem 0; }
.cf__opt{ text-align:left; border:1px solid var(--line-dark); border-radius:10px; background:none; color:var(--on-dark); padding:.85rem 1rem; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; align-items:center; transition:background .2s, border-color .2s; }
.cf__opt b{ font:500 .92rem/1.35 var(--f-body); }
.cf__opt small{ display:block; font-size:.74rem; color:var(--on-dark-2); opacity:.8; font-weight:400; }
.cf__opt em{ font:italic 500 1.4rem/1 var(--f-display); color:#E2C9A8; flex:none; }
.cf__opt[aria-checked="true"]{ background:rgba(226,201,168,.12); border-color:#D7B795; }
.cf__sum{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r); overflow:hidden; }
.cf__sum div{ background:var(--brown); padding:1rem 1.1rem; }
.cf__sum span{ display:block; font:500 .64rem/1.4 var(--f-label); letter-spacing:.18em; text-transform:uppercase; }
.cf__sum b{ display:block; margin-top:.4rem; font:500 clamp(1.4rem, 2.2vw, 1.9rem)/1.1 var(--f-display); color:var(--on-dark); }
.cf__sum div:last-child b{ color:#E2C9A8; }
.cf__bar{ display:flex; height:10px; border-radius:99px; overflow:hidden; margin:1.6rem 0 1rem; gap:2px; }
.cf__bar i{ display:block; background:#D7B795; opacity:.35; }
.cf__bar i.k{ opacity:1; } .cf__bar i.h{ background:var(--on-dark); opacity:.9; } .cf__bar i.n{ background:#8FA07A; opacity:.9; }
.cf__list{ list-style:none; margin:0; padding:0; max-height:330px; overflow:auto; scrollbar-width:thin; }
.cf__list li{ display:grid; grid-template-columns:2.6rem 1fr auto; gap:.8rem; align-items:baseline; padding:.62rem 0; border-bottom:1px solid var(--line-dark); font-size:.9rem; }
.cf__list .p{ font:500 1.05rem/1 var(--f-display); color:#E2C9A8; }
.cf__list .d{ color:var(--on-dark); } .cf__list .d small{ color:var(--on-dark-2); opacity:.75; margin-left:.4rem; }
.cf__list .v{ color:var(--on-dark); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; padding-right:.8rem; }
.cf__extra{ font-size:.84rem; margin:1rem 0 1.4rem; color:var(--on-dark-2); }
.fld--dark span{ color:var(--on-dark-2); }
.fld--dark select{ background:rgba(255,255,255,.06); border-color:var(--line-dark); color:var(--on-dark); }
.fld--dark select option{ color:var(--ink); }

/* ---------- 06 Chủ đầu tư ---------- */
.dev{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2.4rem, 6vw, 6rem); align-items:center; }
.dev__media{ margin:0; }
.dev__media img{ border-radius:var(--r); aspect-ratio:4/5; object-fit:cover; width:100%; cursor:zoom-in; }
.dev__nums{ list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.dev__nums li{ padding:1.2rem 1rem 0 0; }
.dev__nums li + li{ padding-left:1rem; border-left:1px solid var(--line); }
.dev__nums b{ font:500 2.2rem/1 var(--f-display); color:var(--brown); }
.dev__nums span{ display:block; font-size:.8rem; line-height:1.5; margin-top:.4rem; }
.dev__proj{ font:italic 500 1.2rem/1.5 var(--f-display); color:var(--pine-2); margin:2rem 0 0; }
.dev__logo{ width:auto; height:26px; margin:0 0 1.4rem; }
.team{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2rem; }
.team figure{ margin:0; background:#fff; padding:.9rem .8rem .8rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; }
.team span{ font:500 .6rem/1 var(--f-label); letter-spacing:.16em; text-transform:uppercase; color:var(--tx-2); }
.team img{ height:44px; width:auto; max-width:100%; object-fit:contain; flex:1 0 44px; }
.team figcaption{ margin:0; font-size:.74rem; color:var(--ink); font-weight:500; letter-spacing:0; }

/* ---------- 07 FAQ ---------- */
.faq{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem, 6vw, 6rem); align-items:start; }
.faq header .btn{ margin-top:1.8rem; }
.faq__list details{ border-bottom:1px solid var(--line); }
.faq__list details:first-child{ border-top:1px solid var(--line); }
.faq__list summary{ list-style:none; cursor:pointer; padding:1.35rem 2.6rem 1.35rem 0; position:relative; font:500 clamp(1.2rem, 1.8vw, 1.45rem)/1.3 var(--f-display); color:var(--brown); }
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary::after{ content:""; position:absolute; right:.4rem; top:50%; width:12px; height:12px; border-right:1.5px solid var(--bronze); border-bottom:1.5px solid var(--bronze); transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease); }
.faq__list details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__list p{ margin:0 0 1.4rem; max-width:44rem; }

/* ---------- Đăng ký ---------- */
.reg{ position:relative; padding-block:var(--bay); color:var(--on-dark); isolation:isolate; overflow:hidden; }
.reg__bg,.reg__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.reg::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(42,46,34,.9) 0%, rgba(42,46,34,.62) 55%, rgba(42,46,34,.35) 100%); }
.reg__in{ display:grid; grid-template-columns:1fr minmax(320px, 460px); gap:clamp(2rem, 6vw, 6rem); align-items:center; }
.reg .h2{ color:#fff; } .reg .h2 em{ color:#E2C9A8; }
.reg__list{ list-style:none; padding:0; margin:2rem 0 0; }
.reg__list li{ padding:.65rem 0 .65rem 1.9rem; border-top:1px solid rgba(255,255,255,.18); position:relative; }
.reg__list li::before{ content:""; position:absolute; left:2px; top:1.15rem; width:12px; height:7px; border-left:1.5px solid #E2C9A8; border-bottom:1.5px solid #E2C9A8; transform:rotate(-45deg); }
.card{ background:var(--ivory); color:var(--tx); border-radius:calc(var(--r) * 1.4); padding:clamp(1.4rem, 3vw, 2.2rem); box-shadow:0 30px 60px -30px rgba(0,0,0,.45); }

/* ---------- Form ---------- */
.lead-form{ display:grid; gap:.85rem; }
.fld{ display:grid; gap:.35rem; }
.fld label,.fld > span{ font:500 .66rem/1.2 var(--f-label); letter-spacing:.18em; text-transform:uppercase; color:var(--tx-2); }
.fld input,.fld select{ width:100%; min-height:48px; border:1px solid var(--line); border-radius:10px; background:#fff; padding:.7rem .9rem; font-size:1rem; color:var(--ink); transition:border-color .2s, box-shadow .2s; appearance:none; -webkit-appearance:none; }
.fld select{ background-image:linear-gradient(45deg, transparent 50%, var(--tx-2) 50%), linear-gradient(135deg, var(--tx-2) 50%, transparent 50%); background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:2.2rem; }
.fld input:focus,.fld select:focus{ outline:none; border-color:var(--bronze); box-shadow:0 0 0 3px var(--bronze-soft); }
.fld.is-err input{ border-color:#B4533F; }
.fld .err{ font:400 .78rem/1.4 var(--f-body); letter-spacing:0; text-transform:none; color:#B4533F; }
.chk{ display:flex; gap:.6rem; align-items:flex-start; font-size:.8rem; line-height:1.5; cursor:pointer; }
.chk input{ margin-top:.2rem; accent-color:var(--bronze); width:16px; height:16px; flex:none; }
.chk--dark{ color:var(--on-dark-2); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form__msg{ margin:0; font-size:.86rem; min-height:1.2em; }
.form__msg.ok{ color:#4E6B3A; } .form__msg.bad{ color:#B4533F; }
.form__safe{ margin:0; font-size:.74rem; color:var(--tx-2); text-align:center; }
.lead-form.is-done{ text-align:center; padding:1.6rem 0; }
.lead-form .done h3{ font:500 1.8rem/1.2 var(--f-display); color:var(--brown); margin:0 0 .5rem; }
.lead-form .done p{ margin:0; }

/* ---------- Footer ---------- */
.ftr{ background:#2B2723; color:rgba(244,240,231,.7); padding:clamp(3.5rem, 7vw, 5.5rem) 0 calc(1.6rem + env(safe-area-inset-bottom)); font-size:.9rem; }
.ftr__in{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.4rem; padding-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.12); }
.ftr__brand img{ width:150px; margin-bottom:1.2rem; }
.ftr h3{ font:500 .7rem/1 var(--f-label); letter-spacing:.22em; text-transform:uppercase; color:#E2C9A8; margin:0 0 1rem; }
.ftr p{ margin:0 0 .8rem; }
.ftr a{ text-decoration:none; } .ftr a:hover{ color:#fff; }
.ftr strong{ color:var(--on-dark); font-weight:500; }
.ftr__legal{ padding-top:1.6rem; font-size:.76rem; line-height:1.65; color:rgba(244,240,231,.5); }

/* ---------- Nút nổi ---------- */
.fab{ position:fixed; right:18px; bottom:22px; z-index:40; display:grid; gap:10px; }
.fab__btn{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; border:0; cursor:pointer; text-decoration:none; color:#fff; box-shadow:0 10px 24px -8px rgba(0,0,0,.4); transition:transform .25s var(--ease); position:relative; }
.fab__btn:hover{ transform:scale(1.06); }
.fab__btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
.fab__btn--call{ background:var(--bronze); }
.fab__btn--call svg{ fill:currentColor; stroke:none; }
.fab__btn--call::before{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--bronze); animation:ring 2.2s infinite; }
@keyframes ring{ from{ transform:scale(1); opacity:.7; } to{ transform:scale(1.6); opacity:0; } }
.fab__btn--zalo{ background:#0068FF; }
.fab__btn--zalo b{ font:700 .78rem/1 var(--f-body); }
.fab__btn--form{ background:var(--pine); }
.fab__btn span{ position:absolute; right:calc(100% + 10px); white-space:nowrap; background:var(--ink); color:#fff; font-size:.76rem; padding:.35rem .65rem; border-radius:6px; opacity:0; pointer-events:none; transform:translateX(6px); transition:all .2s; }
.fab__btn:hover span{ opacity:1; transform:none; }
.fab__btn--zalo span{ font-weight:400; }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; }
.modal__scrim{ position:absolute; inset:0; background:rgba(30,26,22,.62); backdrop-filter:blur(4px); animation:fadein .3s; }
@keyframes fadein{ from{ opacity:0; } }
.modal__box{ position:relative; width:min(1040px, 100%); max-height:calc(100dvh - 32px); overflow:auto; background:var(--ivory); border-radius:calc(var(--r) * 1.4); display:grid; grid-template-columns:1.25fr 1fr; animation:pop .4s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.98); } }
.modal__aside{ background:#fff; padding:clamp(1rem, 2.4vw, 1.8rem); display:flex; flex-direction:column; justify-content:center; gap:.7rem; border-right:1px solid var(--line); }
.modal__plan{ width:100%; height:auto; cursor:zoom-in; }
.modal__plan-cap{ font:500 .7rem/1.3 var(--f-label); letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-deep); margin:0; }
.modal__plan-hint{ font-size:.78rem; color:var(--tx-2); margin:0; }
.modal__price{ font:500 1.15rem/1.4 var(--f-display); color:var(--brown); margin:.4rem 0 0; }
.modal__price b{ color:var(--bronze-deep); font-weight:600; }
.modal__main{ padding:clamp(1.4rem, 3vw, 2.4rem); }
.modal__sub{ margin:.6rem 0 1.4rem; font-size:.9rem; }
.modal__x{ position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.85); cursor:pointer; display:grid; place-items:center; }
.modal__x svg{ width:18px; height:18px; stroke:var(--brown); stroke-width:1.8; fill:none; }
body.is-locked{ overflow:hidden; }

/* ---------- Lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:120; background:rgba(20,18,16,.94); display:grid; place-items:center; padding:clamp(12px, 4vw, 48px); animation:fadein .25s; cursor:zoom-out; }
.lb img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.lb__x{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:none; cursor:pointer; display:grid; place-items:center; }
.lb__x svg{ width:20px; height:20px; stroke:#fff; stroke-width:1.6; fill:none; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.no-js .reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
/* Safari hiển thị chữ rộng hơn Chrome: chừa dư chỗ để menu không bị xuống dòng */
@media (min-width:1281px){
  .hdr__tel span{ display:none; }
  .hdr__tel{ width:40px; height:40px; justify-content:center; border:1px solid rgba(255,255,255,.4); border-radius:50%; }
  .hdr.is-solid .hdr__tel{ border-color:var(--line); }
}
@media (max-width:1280px){
  .hdr__nav{ display:none; }
  .hdr__burger{ display:block; }
  .hdr__act{ margin-left:auto; }
}
@media (max-width:1080px){
  .facts{ grid-template-columns:repeat(3,1fr); row-gap:1.8rem; }
  .facts li:nth-child(4){ padding-left:0; border-left:0; }
}
@media (max-width:900px){
  :root{ --hdr-h:64px; }
  .sec__head--split,.ov,.loc,.am__panel,.un__body,.cf,.dev,.faq,.reg__in{ grid-template-columns:1fr; }
  .ov__media{ order:-1; margin:0 18px 0 0; }
  .ov__media img{ aspect-ratio:4/3; }
  .dev__media img{ aspect-ratio:16/10; }
  .modal__box{ grid-template-columns:1fr; }
  .modal__aside{ border-right:0; border-bottom:1px solid var(--line); padding:1rem 1rem .8rem; gap:.4rem; }
  .modal__price,.modal__plan-hint{ display:none; }
  .modal__plan{ max-height:170px; object-fit:contain; }
  .modal__plan-cap{ padding-right:44px; }
  .team{ grid-template-columns:repeat(6,1fr); }
  .team figure{ grid-column:span 2; }
  .team figure:nth-child(n+4){ grid-column:span 3; }
}
@media (max-width:760px){
  .hdr__tel span{ display:none; }
  .hdr__act .btn{ display:none; }
  .hdr__tel{ width:40px; height:40px; justify-content:center; border:1px solid rgba(255,255,255,.4); border-radius:50%; }
  .hdr.is-solid .hdr__tel{ border-color:var(--line); }
  .hero__title{ max-width:none; }
  .hero__stats{ grid-template-columns:1fr 1fr; }
  .hero__stats div:nth-child(3){ padding-left:0; border-left:0; }
  .hero__stats div{ padding-top:.9rem; }
  .hero__cta .btn{ flex:1 1 100%; }
  .facts{ grid-template-columns:1fr 1fr; }
  .facts li:nth-child(odd){ padding-left:0; border-left:0; }
  .facts li:nth-child(4){ padding-left:1.4rem; border-left:1px solid var(--line); }
  .facts li:last-child{ grid-column:1 / -1; }
  .eyebrow{ letter-spacing:.2em; }
  .hero__stats dt{ letter-spacing:.12em; font-size:.62rem; }
  .ov__media::before{ inset:-10px 10px 10px -10px; }
  .spec div{ grid-template-columns:1fr; gap:.2rem; }
  .hl{ grid-template-columns:1fr 1fr; }
  .hl li{ font-size:1.05rem; padding:1rem .9rem; }
  .pp{ grid-template-columns:1fr 1fr; }
  .cf__sum{ grid-template-columns:1fr; }
  .cf__sum div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
  .cf__sum b{ margin:0; white-space:nowrap; }
  .un__tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut); }
  .un__tabs button{ white-space:nowrap; flex:none; }
  .dev__nums{ grid-template-columns:1fr; }
  .dev__nums li + li{ padding-left:0; border-left:0; border-top:1px solid var(--line); margin-top:1rem; }
  .gal__nav .link{ margin-left:0; flex-basis:100%; }
  .gal__nav .link + .link{ margin-top:.2rem; }
  .ftr__in{ grid-template-columns:1fr; }
  /* Thanh liên hệ cố định dưới đáy trên điện thoại */
  .fab{ left:0; right:0; bottom:0; grid-template-columns:1fr 1fr 1.4fr; gap:0; background:var(--ivory); border-top:1px solid var(--line); padding:8px 8px calc(8px + env(safe-area-inset-bottom)); box-shadow:0 -10px 30px -18px rgba(0,0,0,.35); }
  .fab__btn{ width:auto; height:48px; border-radius:10px; box-shadow:none; margin:0 4px; display:flex; gap:.5rem; justify-content:center; align-items:center; }
  .fab__btn span{ position:static; opacity:1; transform:none; background:none; padding:0; font:500 .8rem/1 var(--f-label); letter-spacing:.06em; }
  .fab__btn--call::before{ display:none; }
  .fab__btn--zalo b{ display:none; }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
}