/* Hệ kích thước co giãn liên tục theo bề rộng màn hình (clamp + vw).
   Breakpoint chỉ đổi số cột bố cục; chữ, khoảng cách, lề tự nội suy từ điện thoại 360px đến màn 4K. */
:root{
  --espresso:#4E5442;
  --olive-deep:#383D2F;
  --bronze:#8F6647;
  --bronze-dk:#7A5639;
  --champagne:#CFA984;
  --cream:#DCD4C2;
  --paper:#F4F2EA;
  --stone:#E4E0D2;
  --ink:#23261D;
  --muted:#5E6152;
  --line:rgba(35,38,29,.14);
  --line-dk:rgba(245,242,236,.18);
  --serif:'Noto Serif Display',Georgia,serif;
  --sans:'Be Vietnam Pro',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* thang chữ */
  --fs-xs:clamp(11px,.62rem + .18vw,14px);
  --fs-sm:clamp(13px,.74rem + .22vw,17px);
  --fs-body:clamp(16px,.9rem + .24vw,20px);
  --fs-lede:clamp(17px,.95rem + .42vw,24px);
  --fs-h3:clamp(22px,1rem + 1.05vw,40px);
  --fs-h2:clamp(36px,1.35rem + 3.9vw,116px);
  --fs-statement:clamp(29px,1.2rem + 2.6vw,90px);
  --fs-num:clamp(46px,1.9rem + 4.6vw,140px);
  --fs-wm:clamp(50px,1rem + 11.2vw,300px);

  /* thang khoảng cách */
  --gut:clamp(20px,5vw,120px);
  --wrap:min(100%, 2000px);
  --sp-1:clamp(8px,.4rem + .3vw,14px);
  --sp-2:clamp(14px,.7rem + .6vw,26px);
  --sp-3:clamp(22px,1rem + 1.2vw,48px);
  --sp-4:clamp(36px,1.4rem + 2.6vw,96px);
  --sp-section:clamp(76px,3rem + 6vw,240px);
  --bar-h:clamp(62px,3.4rem + .9vw,92px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--bar-h)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.06;margin:0;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:300}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.kicker{font-size:var(--fs-sm);color:var(--bronze);margin:0 0 var(--sp-2);display:flex;align-items:center;gap:.8em}
.kicker::before{content:"";width:2em;height:1px;background:currentColor}
.dark{background:var(--espresso);color:var(--paper)}
.dark .kicker{color:var(--champagne)}
.lede{font-size:var(--fs-lede);line-height:1.65;color:var(--muted);max-width:58ch}
.dark .lede{color:rgba(245,242,236,.7)}
.section{padding:var(--sp-section) 0}
.section__head{margin-bottom:var(--sp-4)}
.section__head h2{margin-bottom:var(--sp-2)}

/* topbar: trong suốt trên hero, đặc lại khi cuộn */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;color:#fff;transition:background .35s var(--ease),box-shadow .35s}
.topbar.solid{background:rgba(56,61,47,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line-dk)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--bar-h);gap:var(--sp-2)}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--serif);font-weight:300;font-size:clamp(16px,.8rem + .6vw,28px);letter-spacing:.2em;white-space:nowrap}
.brand small{font-size:var(--fs-xs);letter-spacing:.14em;margin-top:.5em;opacity:.75}
.topnav{display:none}
.topbar__cta{display:flex;align-items:center;gap:.5em;font-size:var(--fs-sm);font-weight:500;text-decoration:none;padding:.6em 1.1em;border:1px solid rgba(255,255,255,.4);border-radius:999px;white-space:nowrap}
.topbar__cta svg{width:1em;height:1em;fill:currentColor}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;background:#2A2E22;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img,.hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__bg video{opacity:0;transition:opacity .8s}
.hero__bg video.on{opacity:1}
/* chỉ tối dần ở đáy và mép trên cho chữ đọc được — không phủ mờ cả ảnh */
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,33,24,.5) 0%,rgba(30,33,24,0) 18%,rgba(30,33,24,0) 40%,rgba(30,33,24,.85) 100%)}
.hero__inner{position:relative;width:100%;padding-top:calc(var(--bar-h) + var(--sp-4));padding-bottom:var(--sp-4)}
.hero__tag{font-size:var(--fs-xs);letter-spacing:.24em;margin:0 0 var(--sp-2);opacity:.85}
.hero h1 .wm{display:block;font-size:var(--fs-wm);line-height:.92;letter-spacing:.06em;text-transform:uppercase;font-weight:200}
.hero h1 .sub{display:block;font-family:var(--sans);font-weight:300;font-size:clamp(17px,.9rem + .9vw,34px);letter-spacing:0;margin-top:var(--sp-2);opacity:.92}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:var(--sp-3) 0}
.hero__meta span{font-size:var(--fs-sm);padding:.45em 1em;border:1px solid rgba(255,255,255,.32);border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.hero__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1)}
.hero__ctrl{position:absolute;right:var(--gut);top:calc(var(--bar-h) + var(--sp-2));width:2.4em;height:2.4em;font-size:var(--fs-sm);border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.hero__ctrl svg{width:.8em;height:.8em;fill:currentColor}
.hero__credit{position:absolute;right:var(--gut);bottom:var(--sp-1);font-size:var(--fs-xs);opacity:.5;margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65em;font:500 var(--fs-body) var(--sans);font-size:clamp(15px,.85rem + .2vw,19px);letter-spacing:.01em;padding:1.1em 1.7em;border-radius:2px;border:1px solid var(--bronze);background:var(--bronze);color:#fff;text-decoration:none;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.hero__actions .btn{padding:1.05em .8em;white-space:nowrap}
.btn:hover{background:var(--bronze-dk);border-color:var(--bronze-dk)}
.btn:disabled{opacity:.6;cursor:wait}
.btn--line{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--line:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--dark{background:var(--ink);border-color:var(--ink)}
.btn--dark:hover{background:#000;border-color:#000}
.btn svg{width:.9em;height:.9em;fill:currentColor}

/* đăng ký ngay dưới hero */
.reg{background:var(--espresso);color:var(--paper)}
.reg .wrap{display:grid;gap:var(--sp-3);padding-top:var(--sp-3);padding-bottom:var(--sp-4)}
.reg__event{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2);align-items:center}
.reg__date{font-family:var(--serif);font-weight:200;font-size:clamp(52px,2rem + 3vw,112px);line-height:.9;color:var(--champagne)}
.reg__date small{display:block;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.18em;color:rgba(245,242,236,.55);margin-top:.7em}
.reg__event p{margin:0;font-size:var(--fs-sm);color:rgba(245,242,236,.75)}
.reg__event b{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-h3);color:var(--paper);margin-bottom:.15em}

.lead{display:grid;gap:var(--sp-1)}
.lead label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lead input{width:100%;font:400 var(--fs-body) var(--sans);padding:1em 2px;border:0;border-bottom:1px solid var(--line-dk);background:transparent;color:var(--paper);border-radius:0}
.lead input:focus{outline:0;border-bottom-color:var(--champagne)}
.lead input::placeholder{color:rgba(245,242,236,.5)}
.lead input.invalid{border-bottom-color:#E59B80}
.lead .btn{margin-top:var(--sp-2)}
.lead__note{font-size:var(--fs-xs);color:rgba(245,242,236,.55);margin:var(--sp-1) 0 0}
.lead__msg{font-size:var(--fs-sm);padding:.5em 0 0}
.lead__msg.err{color:#F0B7A2}
.lead__msg.ok b{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-h3);margin-bottom:.25em}
.lead__msg a{font-weight:500;color:var(--champagne)}

/* tổng quan */
.intro__statement{font-family:var(--serif);font-weight:200;font-size:var(--fs-statement);line-height:1.16;letter-spacing:-.01em;max-width:20ch;margin:0 0 var(--sp-4)}
.intro__statement em{font-style:italic;color:var(--bronze)}
.facts{display:grid;grid-template-columns:1fr 1fr;margin:0}
.facts div{display:flex;flex-direction:column;padding:var(--sp-3) var(--sp-2) var(--sp-3) 0;border-top:1px solid var(--line)}
.facts dd{order:-1;margin:0;font-family:var(--serif);font-weight:200;font-size:var(--fs-num);line-height:.95;letter-spacing:-.02em}
.facts dd small{font-size:.34em;margin-left:.2em;letter-spacing:0;color:var(--bronze)}
.facts dt{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1);max-width:26ch}
.source{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-3) 0 0}

/* ảnh tràn viền */
.band{position:relative;margin:0}
.band img{width:100%;height:clamp(300px,58vw,100vh);object-fit:cover}
.band figcaption{position:absolute;right:var(--gut);bottom:var(--sp-2);font-size:var(--fs-xs);color:#fff;opacity:.85;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* 4 tiêu chí */
.pillars{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:var(--sp-2);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 8px;margin:0 calc(var(--gut)*-1);scroll-padding:0 var(--gut);scrollbar-width:none}
.pillars::-webkit-scrollbar{display:none}
.pillar{scroll-snap-align:start;margin:0}
.pillar img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pillar h3{margin:var(--sp-2) 0 var(--sp-1)}
.pillar p{color:var(--muted);margin:0;font-size:var(--fs-sm)}
.pillar b{display:block;color:var(--ink);font-weight:500;margin-bottom:.3em}
.swipe-hint{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-2) 0 0}

/* vị trí: dải QL13 — kích thước tính theo em nên co giãn cùng chữ */
.loc{display:grid;gap:var(--sp-4)}
.route{--x:3.9em;position:relative;margin:0;padding:0;list-style:none;font-size:var(--fs-body)}
.route::before{content:"";position:absolute;left:var(--x);top:.9em;bottom:.9em;width:2px;background:linear-gradient(rgba(207,169,132,.2),var(--champagne) 40%,var(--champagne) 60%,rgba(207,169,132,.2))}
.route li{position:relative;display:grid;grid-template-columns:2.75em 1fr auto;align-items:center;gap:0 2.5em;padding:.7em 0;min-height:3.1em}
.route li::before{content:"";position:absolute;left:calc(var(--x) - .31em);top:50%;width:.75em;height:.75em;margin-top:-.375em;border-radius:50%;background:var(--espresso);border:2px solid var(--champagne)}
.route .st{font-size:.7em;font-weight:500;letter-spacing:.06em;color:rgba(245,242,236,.45);text-align:right}
.route .nm{color:rgba(245,242,236,.85);line-height:1.35}
.route .nm small{display:block;font-size:.82em;color:rgba(245,242,236,.48)}
.route .t{font-family:var(--serif);font-weight:200;font-size:1.9em;line-height:1;color:var(--paper);white-space:nowrap}
.route .t small{font-family:var(--sans);font-size:.4em;color:rgba(245,242,236,.5);margin-left:.2em}
.route .here{margin:.9em 0;padding:1.25em 0}
.route .here::before{width:2.1em;height:2.1em;left:calc(var(--x) - 1em);margin-top:-1.05em;background:var(--bronze);border:3px solid var(--paper);box-shadow:0 0 0 .6em rgba(176,136,104,.22),0 0 0 1.35em rgba(176,136,104,.08)}
.route .here .nm{font-family:var(--serif);font-weight:300;font-size:1.9em;color:#fff}
.route .here .nm small{font-family:var(--sans);font-size:.43em}
.route .here .st{color:var(--champagne)}
.route .end .nm{color:var(--champagne)}
.route__legend{font-size:var(--fs-xs);color:rgba(245,242,236,.5);margin:var(--sp-3) 0 0;max-width:46ch}
.loc__side{display:grid;gap:var(--sp-3);align-content:start}
.loc__side figure{margin:0}
.loc__side img{cursor:zoom-in}
.loc__side figcaption{font-size:var(--fs-xs);color:rgba(245,242,236,.5);margin-top:var(--sp-1)}
.loc__side h3{margin-bottom:var(--sp-1)}
.loc__side p{color:rgba(245,242,236,.7);margin:0}
.loc__notes{display:grid;gap:var(--sp-3);border-top:1px solid var(--line-dk);padding-top:var(--sp-3)}

/* quy hoạch */
.plan figure{margin:0 0 var(--sp-4)}
.plan img{width:100%;cursor:zoom-in}
.plan figcaption{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
.plan__legend{display:grid;margin:0;padding:0;list-style:none}
.plan__legend li{padding:var(--sp-2) 0;border-top:1px solid var(--line)}
.plan__legend b{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-h3);margin-bottom:.3em}
.plan__legend span{color:var(--muted)}

/* loại căn: tab */
.tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:0 0 var(--sp-3)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;border:0;background:none;padding:.9em 0;margin-right:1.7em;font:500 var(--fs-body) var(--sans);color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--bronze)}
.panel{display:grid;gap:var(--sp-3)}
.panel[hidden]{display:none}
.panel img{width:100%;aspect-ratio:16/10;object-fit:cover}
.panel h3{margin-bottom:var(--sp-1)}
.panel p{color:var(--muted)}
.types{display:grid;grid-template-columns:1fr 1fr;margin:var(--sp-2) 0 var(--sp-3);border-top:1px solid var(--line)}
.types span{padding:.6em .5em .6em 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:300;font-size:clamp(20px,.9rem + .8vw,34px)}

/* tiện ích: băng chuyền */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:var(--sp-2);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 6px;margin:0 calc(var(--gut)*-1);scroll-padding:0 var(--gut);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail figure{margin:0;scroll-snap-align:start}
.rail img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.rail figcaption{display:flex;justify-content:space-between;gap:1em;padding:var(--sp-1) 0 0;font-size:var(--fs-sm)}
.rail figcaption span{color:var(--muted)}
.rail__nav{display:none}
.amen{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-3);margin-top:var(--sp-4);border-top:1px solid var(--line)}
.amen div{padding:var(--sp-2) 0;border-bottom:1px solid var(--line)}
.amen b{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-h3);margin-bottom:.2em}
.amen span{color:var(--muted);font-size:var(--fs-sm)}

/* phim */
.film{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.film video,.film img{width:100%;height:100%;object-fit:cover}
.film button{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;border:0;background:rgba(30,33,24,.38);color:#fff;font:400 var(--fs-body) var(--sans);letter-spacing:.04em;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.film button span{display:flex;width:clamp(72px,3rem + 3vw,140px);aspect-ratio:1;border-radius:50%;background:rgba(245,242,236,.94);align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.film button:hover span{transform:scale(1.06)}
.film button svg{width:28%;height:28%;margin-left:6%;fill:var(--espresso)}

/* tiến độ */
.progress{display:grid;gap:var(--sp-2)}
.progress figure{margin:0}
.progress img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}

/* chủ đầu tư */
.dev{display:grid;gap:var(--sp-4)}
.dev__list{margin:0;padding:0;list-style:none}
.dev__list li{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.65em 0;border-top:1px solid var(--line);font-family:var(--serif);font-weight:300;font-size:var(--fs-h3)}
.dev__list li:last-child{border-bottom:1px solid var(--line)}
.dev__list span{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);text-align:right}
.dev__list .me{color:var(--bronze)}

/* sự kiện */
.event{display:grid;gap:var(--sp-4);align-items:center}
.event img{width:100%;max-width:clamp(280px,32vw,720px)}
.event dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);margin:var(--sp-3) 0;padding:var(--sp-3) 0;border-top:1px solid var(--line-dk);border-bottom:1px solid var(--line-dk)}
.event dt{color:rgba(245,242,236,.5);font-size:var(--fs-sm)}
.event dd{margin:0}

/* hỏi đáp */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1em;padding:var(--sp-3) 0;font-family:var(--serif);font-weight:300;font-size:clamp(21px,.9rem + 1vw,40px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.5em;height:.5em;background:linear-gradient(var(--bronze),var(--bronze)) center/100% 1.5px no-repeat,linear-gradient(var(--bronze),var(--bronze)) center/1.5px 100% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--sp-3);margin:0;color:var(--muted);max-width:68ch}

/* đăng ký cuối + chân trang */
.final{position:relative;color:#fff;overflow:hidden;background:var(--espresso)}
.final__bg{position:absolute;inset:0}
.final__bg img{width:100%;height:100%;object-fit:cover}
.final__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,33,24,.55),rgba(30,33,24,.92))}
.final .wrap{position:relative;display:grid;gap:var(--sp-4);padding-top:var(--sp-section);padding-bottom:var(--sp-section)}
.final h2{max-width:14ch}
.final .lede{color:rgba(255,255,255,.78)}
.final .lead-card{background:rgba(56,61,47,.92);padding:var(--sp-3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line-dk)}
.footer{background:#2F3329;color:rgba(245,242,236,.6);font-size:var(--fs-sm);padding:var(--sp-4) 0 calc(var(--sp-4) + 64px)}
.footer .brand{color:var(--paper);margin-bottom:var(--sp-3)}
.footer strong{color:var(--paper);font-weight:500}
.footer p{margin:0 0 .5em}
.footer__legal{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--line-dk);font-size:var(--fs-xs);line-height:1.7;max-width:90ch}

/* thanh dính đáy — id là hợp đồng với GTM-WGHXKXP9 */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr 1.5fr;background:rgba(56,61,47,.97);border-top:1px solid var(--line-dk);padding-bottom:env(safe-area-inset-bottom);transform:translateY(110%);transition:transform .4s var(--ease)}
.stickybar.show{transform:none}
.stickybar a,.stickybar button{display:flex;align-items:center;justify-content:center;gap:.5em;height:58px;font:500 15px var(--sans);color:var(--paper);text-decoration:none;background:none;border:0;cursor:pointer}
.stickybar #banggia{background:var(--bronze)}
.stickybar svg{width:17px;height:17px;fill:currentColor}

dialog.lb{padding:0;border:0;background:transparent;max-width:96vw;max-height:92vh}
dialog.lb::backdrop{background:rgba(24,27,20,.94)}
dialog.lb img{max-height:88vh;width:auto}
dialog.lb button{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:none;color:#fff;font-size:22px;cursor:pointer}

/* chuyển động duy nhất: chữ hero hiện lên lúc tải */
@media (prefers-reduced-motion:no-preference){
  .hero__inner>*{animation:rise 1s var(--ease) both}
  .hero__inner>*:nth-child(2){animation-delay:.12s}
  .hero__inner>*:nth-child(3){animation-delay:.24s}
  .hero__inner>*:nth-child(4){animation-delay:.36s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* Breakpoint chỉ đổi SỐ CỘT — mọi kích thước ở trên tự co giãn */
@media (min-width:720px){
  .facts{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-auto-columns:44%}
  .rail{grid-auto-columns:58%}
  .progress{grid-template-columns:1fr 1fr}
  .types{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
  .topnav{display:flex;gap:2.2em;font-size:var(--fs-sm)}
  .topnav a{text-decoration:none;opacity:.8}
  .topnav a:hover{opacity:1}
  .hero__inner{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:var(--sp-3)}
  .hero__inner>*{grid-column:1}
  .hero__inner>.hero__actions{grid-column:2;grid-row:3;align-self:end;display:flex}
  .hero__actions .btn{padding:1.1em 1.7em}
  .hero__ctrl{top:auto;bottom:var(--sp-3)}
  .hero__credit{right:auto;left:var(--gut)}
  .reg .wrap{grid-template-columns:4fr 7fr;align-items:center;gap:var(--sp-4)}
  .reg .lead{grid-template-columns:1fr 1fr auto;align-items:end;column-gap:var(--sp-3)}
  .reg .lead .btn{margin:0}
  .reg .lead__note{grid-column:1/-1}
  .section__head{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-4);align-items:end}
  .section__head h2{margin-bottom:0}
  .section__head .lede{margin:0}
  .pillars{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0;gap:var(--sp-3)}
  .swipe-hint{display:none}
  .loc{grid-template-columns:5fr 6fr}
  .plan__legend{grid-template-columns:repeat(4,1fr);gap:0 var(--sp-3)}
  .panel{grid-template-columns:7fr 5fr;gap:var(--sp-4);align-items:center}
  .rail{grid-auto-columns:40%;gap:var(--sp-3)}
  .rail__nav{display:flex;gap:.6em;margin-top:var(--sp-3)}
  .rail__nav button{width:3em;height:3em;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font-size:var(--fs-body);color:var(--ink)}
  .rail__nav button:hover{border-color:var(--ink)}
  .amen{grid-template-columns:repeat(4,1fr)}
  .dev{grid-template-columns:1fr 1fr}
  .event{grid-template-columns:auto 1fr}
  .final__bg::after{background:linear-gradient(90deg,rgba(30,33,24,.92),rgba(30,33,24,.7) 55%,rgba(30,33,24,.3))}
  .final .wrap{grid-template-columns:1fr minmax(360px,30vw);align-items:center}
  .stickybar{display:none}
  .footer{padding-bottom:var(--sp-4)}
}

/* liên kết chữ và điều hướng chân trang */
.textlink{color:var(--bronze);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.dark .textlink{color:var(--champagne)}
.footer__nav{display:flex;flex-wrap:wrap;gap:.6em 1.6em;margin:var(--sp-2) 0 0}
.footer__nav a{color:var(--paper);text-decoration:none;opacity:.8}
.footer__nav a:hover{opacity:1;text-decoration:underline}

/* ============ trang con ============ */
.plain main{padding-top:var(--bar-h)}
.page-hero{position:relative;min-height:clamp(420px,62svh,1100px);display:flex;align-items:flex-end;color:#fff;background:#2A2E22;overflow:hidden}
.page-hero__bg{position:absolute;inset:0}
.page-hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,33,24,.55) 0%,rgba(30,33,24,.05) 30%,rgba(30,33,24,.1) 45%,rgba(30,33,24,.86) 100%)}
.page-hero__inner{position:relative;width:100%;padding-top:calc(var(--bar-h) + var(--sp-4));padding-bottom:var(--sp-4)}
.page-hero h1{font-size:var(--fs-h2);font-weight:200;max-width:16ch}
.page-hero__sub{font-size:var(--fs-lede);font-weight:300;margin:var(--sp-2) 0 0;max-width:52ch;opacity:.9}
.crumbs{display:flex;gap:.6em;font-size:var(--fs-sm);margin:0 0 var(--sp-2);opacity:.85}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs--light{color:var(--muted)}
.prose>*{max-width:72ch}
.prose>h2,.prose>h1{max-width:22ch}
.prose h2{margin:0 0 var(--sp-2)}
.prose h3{margin:var(--sp-3) 0 var(--sp-1)}
.prose p{max-width:68ch}
.prose--doc h1{font-size:var(--fs-h2);font-weight:200;margin:0 0 var(--sp-2)}
.prose--doc h2{font-size:var(--fs-h3);margin:var(--sp-4) 0 var(--sp-1)}
.split{display:grid;gap:var(--sp-4);align-items:start}
.split figure{margin:0}
.fig img{width:100%;cursor:zoom-in}
.fig figcaption{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
.section__head--solo{display:block}
.amen--wide{margin-top:0}
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line-dk);max-width:64ch}
.timeline li{position:relative;padding:0 0 var(--sp-3) var(--sp-3)}
.timeline li::before{content:"";position:absolute;left:-.45em;top:.35em;width:.75em;height:.75em;border-radius:50%;background:var(--espresso);border:2px solid rgba(245,242,236,.4)}
.timeline li.done::before{background:var(--champagne);border-color:var(--champagne)}
.timeline li.next::before{background:var(--bronze);border-color:var(--paper);box-shadow:0 0 0 .4em rgba(176,136,104,.25)}
.timeline b{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-h3);margin-bottom:.2em}
.timeline span{color:rgba(245,242,236,.7)}
.notfound{min-height:70svh;display:flex;align-items:center}
.notfound__links{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-3)}
@media (min-width:1024px){
  .split{grid-template-columns:6fr 5fr}
  .amen--wide{grid-template-columns:repeat(3,1fr)}
}

/* ============ tin tức ============ */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.article__meta{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-3)}
.article h2{font-size:var(--fs-h3);margin:var(--sp-4) 0 var(--sp-1)}
.article h3{font-size:clamp(19px,.9rem + .5vw,26px);margin:var(--sp-3) 0 var(--sp-1)}
.article p,.article li{line-height:1.8}
.article ul,.article ol{padding-left:1.2em;max-width:68ch}
.article li{margin-bottom:.4em}
.article figure{margin:var(--sp-3) 0}
.article figure img{width:100%;cursor:zoom-in}
.article figcaption{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
.article table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:var(--sp-2) 0}
.article th,.article td{text-align:left;padding:.7em .8em .7em 0;border-bottom:1px solid var(--line);vertical-align:top}
.article th{font-weight:500;color:var(--muted)}
.article .tablewrap{overflow-x:auto}
.article .note{border-left:2px solid var(--bronze);padding-left:1em;color:var(--muted)}
.article__cta{margin:var(--sp-4) 0;padding:var(--sp-3);background:var(--espresso);color:var(--paper)}
.article__cta h2{margin-top:0;color:var(--paper)}
.article__cta p{color:rgba(245,242,236,.78)}
.article__cta .kicker{color:var(--champagne)}
.article__cta .btn{margin:.4em .4em 0 0}
.article__sources{font-size:var(--fs-sm);color:var(--muted)}
.article__sources a{color:inherit;word-break:break-word}
.cards{display:grid;gap:var(--sp-3)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card__date{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-1) 0 .3em}
.card h3{font-size:var(--fs-h3);margin:0 0 .4em}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card p{color:var(--muted);font-size:var(--fs-sm)}
@media (min-width:720px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.cards--list{grid-template-columns:repeat(3,1fr)}}
/* tiêu đề bài viết dài: nhỏ hơn tiêu đề trang, rộng hơn, nền tối hơn để đọc được trên ảnh sáng */
.page-hero--article h1{font-size:var(--fs-statement);max-width:26ch;line-height:1.12}
.page-hero--article .page-hero__bg::after{background:linear-gradient(180deg,rgba(30,33,24,.6) 0%,rgba(30,33,24,.35) 35%,rgba(30,33,24,.9) 100%)}
.article table{min-width:560px}

/* ============ CRO 29/09 ============ */
/* form bật lên: bottom sheet trên điện thoại, hộp giữa màn trên máy tính */
dialog.leadmodal{border:0;padding:var(--sp-3) var(--gut) calc(var(--sp-3) + env(safe-area-inset-bottom));background:var(--espresso);color:var(--paper);width:100%;max-width:100%;margin:auto 0 0;max-height:92svh;overflow:auto}
dialog.leadmodal::backdrop{background:rgba(24,27,20,.72)}
dialog.leadmodal h2{font-size:var(--fs-h3);margin:0 0 .4em}
.leadmodal__sub{font-size:var(--fs-sm);color:rgba(245,242,236,.72);margin:0 0 var(--sp-1)}
.leadmodal__close{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(245,242,236,.1);color:var(--paper);font-size:24px;cursor:pointer}
.leadmodal .kicker{color:var(--champagne)}
@media (prefers-reduced-motion:no-preference){
  dialog.leadmodal[open]{animation:sheet .35s var(--ease)}
  @keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}
@media (min-width:720px){dialog.leadmodal{width:min(560px,92vw);margin:auto;padding:var(--sp-4) var(--sp-4) var(--sp-3)}}
.modal-open .stickybar{transform:translateY(110%)}
.countdown{display:block;margin-top:.4em;color:var(--champagne);font-weight:500}
/* điện thoại: hạ hero để đầu khối đăng ký lộ ra ở màn đầu */
@media (max-width:719px){.hero{min-height:86svh}}
/* khách từ quảng cáo (gclid/fbclid/ttclid): ẩn menu, giữ hotline — bớt lối rẽ trước khi để lại số */
.paid .topnav{display:none!important}
/* vùng bấm tối thiểu 44px */
.footer__nav a{display:inline-flex;align-items:center;min-height:44px}
.textlink{display:inline-block;padding:.55em 0}
.hero__ctrl{width:44px;height:44px}
.topbar__cta{min-height:44px}
/* màn hẹp: 2 nút hero xếp 2 hàng, nút chính trên */
@media (max-width:479px){.hero__actions{grid-template-columns:1fr}}
/* khối tin cậy cạnh form: logo BAM LAND + quan hệ phân phối với Gamuda Land */
.trust{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--line-dk)}
.trust img{width:clamp(96px,5rem + 3vw,150px);height:auto;flex:none;opacity:.92}
.trust p{margin:0;font-size:var(--fs-xs);line-height:1.55;color:rgba(245,242,236,.7)}
.trust a{color:var(--champagne)}

/* ============ nhận diện Norton Park (fanpage NortonParkbyGLVN): xanh rêu #4E5442, kem #DCD4C2, đồng #B08868 ============ */
.topbar.solid,.stickybar{background:rgba(56,61,47,.97)}
.brand{flex-direction:row;align-items:center;gap:.8em}
.brand img{height:clamp(26px,1.2rem + .6vw,40px);width:auto;display:block}
.brand small{margin:0;padding-left:.8em;border-left:1px solid rgba(220,212,194,.35);line-height:1.3;max-width:9em;font-size:clamp(9px,.5rem + .15vw,12px)}
.hero h1 .wm-logo{display:block;width:clamp(240px,18rem + 22vw,760px);height:auto;filter:drop-shadow(0 2px 18px rgba(0,0,0,.35))}
.hero__tag{display:none}
.footer{background:#2F3329;position:relative}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(40px,4vw,72px);background:url(/assets/img/hoa-tiet-la.webp) repeat-x top/auto 100%;opacity:.55}
.footer .wrap{position:relative;padding-top:clamp(40px,4vw,72px)}
.footer .brand img{height:clamp(40px,2rem + 1vw,56px)}
.leadmodal,.reg{background:var(--espresso)}
dialog.leadmodal{background:var(--olive-deep)}
.btn:not(.btn--line):not(.btn--dark){box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.kicker{color:var(--bronze)}
/* logo kem trên video sáng: làm tối mềm vùng sau khối chữ (không phủ cả ảnh) */
.hero__bg::after{background:
  radial-gradient(ellipse 75% 55% at 22% 62%, rgba(30,33,24,.62), rgba(30,33,24,0) 72%),
  linear-gradient(180deg,rgba(30,33,24,.5) 0%,rgba(30,33,24,0) 18%,rgba(30,33,24,0) 40%,rgba(30,33,24,.85) 100%)}
@media (max-width:719px){.hero__bg::after{background:
  radial-gradient(ellipse 120% 50% at 50% 60%, rgba(30,33,24,.6), rgba(30,33,24,0) 75%),
  linear-gradient(180deg,rgba(30,33,24,.5) 0%,rgba(30,33,24,0) 18%,rgba(30,33,24,.1) 40%,rgba(30,33,24,.88) 100%)}}
.hero h1 .wm-logo{filter:drop-shadow(0 2px 24px rgba(20,22,16,.55))}
.hero h1 .sub{margin-top:var(--sp-3)}

/* trang bài viết: một cột chữ thống nhất; tiêu đề không bị ép 22ch (bẻ câu hỏi dài thành 3 dòng ngắn) */
.article .prose>*{max-width:min(100%,46rem)}
.article .prose>h2,.article .prose>h3{max-width:min(100%,46rem);text-wrap:pretty}
.article .lede{max-width:min(100%,46rem)}
.article p,.article li,.article ul,.article ol{max-width:none}
.article .prose>h2{line-height:1.18;margin-bottom:var(--sp-2)}
.article .prose>h3{line-height:1.25}

/* ============ trang bài viết: đầu trang nền đặc + ảnh bìa + mục lục ============ */
.page-hero--plain{min-height:0;background:var(--espresso)}
.page-hero--plain .page-hero__inner{padding-top:calc(var(--bar-h) + var(--sp-4));padding-bottom:var(--sp-4)}
.page-hero--plain h1{font-size:var(--fs-statement);max-width:24ch;line-height:1.12}
.article.section{padding-top:var(--sp-3)}
.article__cover{margin:0 0 var(--sp-3)}
.article__cover img{width:100%;aspect-ratio:16/9;object-fit:cover;cursor:zoom-in}
.article__cover figcaption{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
/* mỗi mục có đường kẻ trên để tách rõ */
.article .prose>h2{padding-top:var(--sp-3);border-top:1px solid var(--line)}
.article .prose>h2:first-of-type{border-top:0;padding-top:0}
.article__main>.article__cta h2,.article__sources h2{border-top:0;padding-top:0}

.toc ol{list-style:none;margin:0;padding:0}
.toc li a{display:block;padding:.6em .6em .6em 1em;border-left:2px solid var(--line);color:var(--muted);text-decoration:none;font-size:var(--fs-sm);line-height:1.45;transition:color .2s,border-color .2s,background .2s}
.toc li a:hover{color:var(--ink);border-left-color:var(--champagne)}
/* mục đang đọc */
.toc li a.is-active{color:var(--ink);font-weight:500;border-left-color:var(--bronze);background:linear-gradient(90deg,rgba(168,122,82,.12),rgba(168,122,82,0))}
.toc--inline{border:1px solid var(--line);background:rgba(255,255,255,.45);padding:0 1em;margin:0 0 var(--sp-3)}
.toc--inline summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;font-weight:500}
.toc--inline summary::-webkit-details-marker{display:none}
.toc--inline summary::after{content:"+";font-size:1.4em;line-height:1;color:var(--bronze)}
.toc--inline[open] summary::after{content:"−"}
.toc--inline ol{padding-bottom:.8em}
.toc--side{display:none}
.toc__title{font-family:var(--serif);font-weight:300;font-size:var(--fs-h3);margin:0 0 .6em}
@media (min-width:1024px){
  .article__grid{display:grid;grid-template-columns:minmax(0,46rem) minmax(220px,300px);justify-content:space-between;column-gap:var(--sp-4);align-items:start}
  .toc--inline{display:none}
  .toc--side{display:block;position:sticky;top:calc(var(--bar-h) + var(--sp-2));max-height:calc(100vh - var(--bar-h) - var(--sp-4));overflow:auto;padding-top:calc(var(--fs-sm) * 1.7 + var(--sp-3))}
}
@media (min-width:1024px){.article__grid{justify-content:start;column-gap:clamp(48px,5vw,112px)}}

/* bài viết màn rộng: canh giữa cả cụm (bài + mục lục); mục lục gọn, không có thanh cuộn riêng */
@media (min-width:1024px){
  .article__grid{grid-template-columns:minmax(0,46rem) minmax(200px,17rem);justify-content:center;column-gap:clamp(40px,4vw,80px)}
  .toc--side{padding-top:0;max-height:none;overflow:visible;top:calc(var(--bar-h) + var(--sp-3))}
  .toc__title{font-family:var(--sans);font-weight:500;font-size:var(--fs-sm);color:var(--ink);margin:0 0 .6em;padding-bottom:.6em;border-bottom:1px solid var(--line)}
  .toc--side li a{padding:.38em .4em .38em .9em;font-size:clamp(13px,.72rem + .15vw,15px);line-height:1.4}
}
/* màn thấp (laptop): thu thêm để cả mục lục nằm gọn trong màn */
@media (min-width:1024px) and (max-height:820px){
  .toc--side li a{padding-top:.28em;padding-bottom:.28em;font-size:13px}
}
/* đầu trang bài viết thẳng hàng với cụm bài + mục lục đã canh giữa */
@media (min-width:1024px){
  .page-hero--plain .page-hero__inner{max-width:calc(46rem + 17rem + clamp(40px,4vw,80px) + 2 * var(--gut))}
}

/* Thông tin chính + thanh toán (30/09) */
.keyfacts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-3);margin:var(--sp-3) 0 0;padding:0;border-top:1px solid var(--line)}
.keyfacts li{display:flex;flex-direction:column;padding:var(--sp-2) 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:300;font-size:var(--fs-h3);line-height:1.25}
.keyfacts b{font:500 var(--fs-xs)/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bronze);margin-bottom:.35em}
.paybox{display:grid;gap:var(--sp-3);margin-top:var(--sp-5,var(--sp-4));padding:var(--sp-4) var(--gut);background:var(--ink);color:var(--paper)}
.paybox h3{font-family:var(--serif);font-weight:300;font-size:clamp(28px,1rem + 2vw,60px);line-height:1.15;margin:0}
.paybox .kicker{color:#C9A987}
.paybox ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-dk)}
.paybox li{padding:var(--sp-2) 0;border-bottom:1px solid var(--line-dk)}
.paybox li b{display:block;font-weight:500}
.paybox li span{color:rgba(245,242,236,.75);font-size:var(--fs-sm)}
.paybox .btn{justify-self:start}
@media (min-width:720px){.paybox ul{grid-template-columns:repeat(3,1fr);gap:0 var(--sp-3)}}
@media (min-width:1024px){
  .keyfacts{grid-template-columns:repeat(4,1fr)}
  .paybox{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);align-items:end;padding:var(--sp-4)}
  .paybox .btn{grid-column:2}
  #tien-ich .amen{grid-template-columns:repeat(5,1fr)}
}