/* =========================
   POPUP
========================= */

#pop.pop {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

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

    padding: 20px;

    box-sizing: border-box;

    background: rgba(9, 38, 30, .62);

    overflow-y: auto;
}

#pop.pop.on {
    display: flex;
}


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

#pop .pop-c {
    position: relative;

    width: 100%;
    max-width: 520px;

    margin: 0 auto;

    padding: 26px 24px 24px;

    box-sizing: border-box;

    background: #fff;

    border-radius: 20px;

    box-shadow: 0 20px 60px rgba(6, 32, 25, .34);

    max-height: calc(100dvh - 40px);

    overflow-y: auto;

    flex: 0 1 520px;

    animation: len .28s ease;
}


/* =========================
   NÚT ĐÓNG
========================= */

#pop .pop-x {
    position: absolute;

    top: 12px;
    right: 14px;

    background: none;
    border: 0;

    font-size: 26px;
    line-height: 1;

    color: var(--xam-n);

    cursor: pointer;

    padding: 4px 10px;
}


/* =========================
   TIÊU ĐỀ
========================= */

#pop .pop-c h3 {
    font-size: 20px;

    margin-top: 0;
    margin-bottom: 7px;

    padding-right: 30px;
}


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

#pop .pop-c p {
    font-size: 14.5px;

    color: var(--xam);

    margin-bottom: 15px;
}


/* =========================
   GHI CHÚ
========================= */

#pop .f-note {
    color: var(--xam-n);
}


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

@media (max-width: 699px) {

    #pop.pop {
        padding: 12px;
    }

    #pop .pop-c {
        max-width: 100%;

        max-height: calc(100dvh - 24px);

        padding: 22px 18px 30px;

        border-radius: 16px;
    }
}


/* =========================
   DESKTOP
========================= */

@media (min-width: 700px) {

    #pop.pop {
        padding: 24px;
    }

    #pop .pop-c {
        margin: auto;

        border-radius: 20px;

        box-shadow: 0 20px 60px rgba(6, 32, 25, .34);
    }
}


/* =========================
   ANIMATION
========================= */

@keyframes len {
    from {
        transform: translateY(26px);
        opacity: .4;
    }

    to {
        transform: none;
        opacity: 1;
    }
}
*{box-sizing:border-box;margin:0;padding:0}
@font-face{font-family:'Noto Serif Display';font-style:italic;font-weight:600;font-display:swap;src:url(assets/font/noto-serif-display-600-italic-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Noto Serif Display';font-style:italic;font-weight:600;font-display:swap;src:url(assets/font/noto-serif-display-600-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:600;font-display:swap;src:url(assets/font/noto-serif-display-600-normal-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:600;font-display:swap;src:url(assets/font/noto-serif-display-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* phông tiêu đề — dùng cho đầu mục và các con số lớn, phần chữ đọc vẫn là phông hệ thống cho nhẹ */
h1,h2,.st b,.out .kq,.tw b,.evt-row b{font-family:'Noto Serif Display',Georgia,'Times New Roman',serif;
font-weight:600;letter-spacing:-.005em}
h1{line-height:1.14}
h2{line-height:1.2}

:root{
--navy:#123F32; --navy-d:#0B3026; --navy-m:#23624B;
--gold:#FEC110; --gold-l:#FFD666; --gold-d:#8A6100;
--ink:#14201B; --xam:#566258; --xam-n:#8A968D;
--vien:#E1E9E3; --vien-d:#CFDBD3; --nen:#F3F8F5; --trang:#fff;
--xanh:#0E7A48; --do:#B4321F;
--r:16px; --r-s:11px; --wrap:1120px;
--sh:0 1px 2px rgba(11,48,38,.05), 0 6px 20px rgba(11,48,38,.05);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:64px}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
color:var(--ink);background:var(--trang);line-height:1.62;font-size:16px;
-webkit-font-smoothing:antialiased;padding-bottom:calc(74px + env(safe-area-inset-bottom))}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
section{padding:52px 0;scroll-margin-top:64px}
@media(min-width:900px){section{padding:76px 0}}
section.alt{background:var(--nen);border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
section.dark{background:var(--navy-d);color:#fff}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.15em;
text-transform:uppercase;color:var(--gold-d);margin-bottom:11px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold);border-radius:2px}
.dark .eyebrow{color:var(--gold-l)}
h1{font-size:30px;line-height:1.18;font-weight:800;letter-spacing:-.02em}
h2{font-size:25px;line-height:1.24;font-weight:800;letter-spacing:-.02em}
h3{font-size:16.5px;font-weight:750;margin-bottom:5px;letter-spacing:-.01em}
@media(min-width:900px){h1{font-size:46px}h2{font-size:33px}}
.sub{color:var(--xam);margin-top:10px;max-width:660px}
.dark .sub{color:#A8C6B4}
.small{font-size:13.5px;color:var(--xam)}
.note{font-size:12.5px;color:var(--xam-n);margin-top:14px;line-height:1.55}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);backdrop-filter:saturate(1.6) blur(12px);
border-bottom:1px solid var(--vien)}
.hd{display:flex;align-items:center;gap:14px;height:62px}
.hd .lg{height:32px;width:auto}
.nav{display:none;gap:20px;margin-left:8px;flex:1}
.nav a{font-size:14px;font-weight:650;color:var(--xam);padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--navy);border-color:var(--gold)}
@media(min-width:1000px){.nav{display:flex}}
.hd .sp{flex:1}
@media(min-width:1000px){.hd .sp{display:none}}
/* nút ba gạch cho điện thoại */
.mnu-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
  width:42px;height:42px;flex:none;margin-left:2px;
  background:#fff;border:1.5px solid var(--vien-d);border-radius:11px;cursor:pointer;padding:0}
.mnu-b span{display:block;width:19px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.mnu-b[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mnu-b[aria-expanded="true"] span:nth-child(2){opacity:0}
.mnu-b[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:1000px){.mnu-b{display:none}}
.mnu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
  border-bottom:1px solid var(--vien);box-shadow:0 14px 30px rgba(6,32,25,.13);max-height:74vh;overflow-y:auto}
.mnu.on{display:block}
.mnu a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;font-size:15.5px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--vien)}
.mnu a:last-child{border-bottom:0}
.mnu a::after{content:"›";color:var(--gold-d);font-size:20px;font-weight:800;line-height:1}
.mnu a:active{background:var(--nen)}
@media(min-width:1000px){.mnu{display:none!important}}
.who{font-size:12px;color:var(--xam);text-align:right;line-height:1.3;display:none}
.who b{display:block;color:var(--ink);font-size:13.5px;font-weight:750}
@media(min-width:600px){.who{display:block}}

/* nút */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:13px 20px;border-radius:var(--r-s);font-weight:750;font-size:15px;
border:1.5px solid transparent;cursor:pointer;transition:.16s;white-space:nowrap;font-family:inherit}
.btn-v{background:var(--navy);color:#fff}
.btn-v:hover{background:var(--navy-m)}
.btn-g{background:var(--gold);color:#241804}
.btn-g:hover{background:var(--gold-l)}
.btn-o{background:#fff;color:var(--navy);border-color:var(--vien-d)}
.btn-o:hover{border-color:var(--navy)}
.btn-gh{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-sm{padding:9px 15px;font-size:13.5px;border-radius:9px}
.btn-full{width:100%}

/* hero — khẩu hiệu trên nền xanh, phối cảnh nguyên bản trải hết chiều ngang */
.hero{position:relative;color:#fff;overflow:hidden;
background:linear-gradient(150deg,#0B3026 0%,#123F32 48%,#17543F 100%)}
.hero::before{content:"";position:absolute;right:-16%;top:-34%;width:66%;padding-bottom:66%;
border-radius:50%;background:radial-gradient(circle,rgba(35,98,75,.5),transparent 68%);pointer-events:none}
.hero-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:52px 18px 40px}
@media(min-width:900px){.hero-in{padding:92px 18px 62px}}
.hero h1{margin:0;display:flex;flex-direction:column;gap:2px}
.h-nhan{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
color:var(--gold-l);margin-bottom:13px}
@media(min-width:900px){.h-nhan{font-size:13px}}
/* dòng 1 chữ không chân đậm, dòng 2 chữ có chân nghiêng vàng — đúng cặp chữ của chủ đầu tư */
.h-d1{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
font-weight:800;letter-spacing:-.028em;font-size:clamp(33px,8.2vw,66px);line-height:1.05;color:#fff}
.h-d2{font-family:'Noto Serif Display',Georgia,serif;font-style:italic;font-weight:600;
letter-spacing:-.005em;font-size:clamp(31px,7.9vw,63px);line-height:1.16;color:var(--gold-l);margin-top:1px}

/* hiệu ứng hiện dần lúc mở trang — chạy bằng CSS, không phụ thuộc mã máy */
@keyframes hienLen{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes anhLen{from{opacity:0;transform:translateY(26px) scale(1.02)}to{opacity:1;transform:none}}
.h-nhan,.h-d1,.h-d2{animation:hienLen .72s cubic-bezier(.22,.68,.32,1) both}
.h-d1{animation-delay:.1s}
.h-d2{animation-delay:.22s}
.hero-anh{position:relative;z-index:1;margin:0;width:100%;
animation:anhLen .9s cubic-bezier(.22,.68,.32,1) .3s both}
/* luật chung "figure img" ép tỉ lệ 3/2 — hero phải gỡ ra để ảnh giữ đúng khổ gốc */
.hero-anh img{width:100%;height:auto;display:block;aspect-ratio:auto;object-fit:fill}
@media(prefers-reduced-motion:reduce){
  .h-nhan,.h-d1,.h-d2,.hero-anh{animation:none}
}

/* form */
.f{display:flex;flex-direction:column;gap:10px;margin-top:24px;max-width:480px}
.f input{padding:14px 15px;border-radius:var(--r-s);border:1.5px solid var(--vien-d);
font-size:16px;font-family:inherit;background:#fff;color:var(--ink);width:100%}
.f input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(21,58,120,.12)}
@media(min-width:520px){.f.inline{flex-direction:row}.f.inline input{flex:1}}
.f .ok{display:none;background:#E7F5ED;border:1px solid #9FD5BA;color:#0A5230;
padding:14px 16px;border-radius:var(--r-s);font-size:14.5px;font-weight:650}
.f.done .ok{display:block}
.f.done .hide{display:none}
.f .ok .tai{display:inline-block;margin-top:11px;background:var(--navy);color:#fff;
  padding:11px 20px;border-radius:99px;font-weight:750;font-size:14.5px}
.f .ok .tai:hover{background:var(--navy-m)}
/* khối mồi tải tài liệu */
.moi{background:linear-gradient(135deg,#123F32 0%,#23624B 100%);color:#fff;border-radius:var(--r);
  padding:26px 24px;margin-top:26px}
.moi h3{font-size:20px;color:#fff;margin-bottom:6px}
.moi p{font-size:14.5px;color:#C4DBCC;max-width:560px}
.moi .f{margin-top:16px;max-width:460px}
.moi .f input{border-color:rgba(255,255,255,.25)}
.moi .f-note{color:#93B3A0}
@media(min-width:520px){.moi .f{flex-direction:row}.moi .f input{flex:1}}
.f-note{font-size:12.5px;color:#93B3A0;margin-top:11px;max-width:480px}
/* chọn nhanh loại căn quan tâm */
/* Bay an chan bot: nguoi that khong nhin thay, may doc man hinh cung bo qua.
   Khong dung display:none vi vai bot co loc o an. */
.bay{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.qt{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.qt button{border:1.5px solid var(--vien-d);background:#fff;color:var(--xam);border-radius:99px;
  padding:7px 13px;font-size:13px;font-weight:650;font-family:inherit;cursor:pointer;transition:.15s}
.qt button:hover{border-color:var(--navy)}
.qt button.on{background:var(--navy);border-color:var(--navy);color:#fff}
/* popup nhắc khi khách đã đọc gần hết trang */

/* khối số liệu — nằm trong mục Tâm điểm sống mới */
.sg{display:grid;grid-template-columns:repeat(2,1fr);gap:19px 14px;margin-top:24px}
.st b{display:block;font-size:24px;font-weight:800;color:var(--gold-l);line-height:1.15;letter-spacing:-.02em}
.st span{font-size:12.5px;color:#9CBDA9}
.tq .st span{color:#CFE4D8}
@media(min-width:900px){.st b{font-size:31px}}
.sg2{border-top:1px solid rgba(255,255,255,.16);margin-top:20px;padding-top:20px}
.sg2 .st b{font-size:18px;color:#fff}
@media(min-width:900px){.sg2 .st b{font-size:21px}}

/* ===== khối tổng quan: ảnh phối cảnh một bên, chữ một bên ===== */
.tq{background:linear-gradient(150deg,#1A5340 0%,#23624B 50%,#2C7357 100%);color:#fff;
border-top:0;border-bottom:0;overflow:hidden}
.tq-in{display:grid;gap:26px;align-items:center}
@media(min-width:940px){.tq-in{grid-template-columns:1.06fr .94fr;gap:52px}}
.tq-anh{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 22px 54px rgba(4,20,15,.42)}
.tq-anh img{width:100%;display:block;aspect-ratio:5/3;object-fit:cover}
.tq h2{color:#fff}
.tq h2 em{display:block;font-style:italic;color:var(--gold-l);font-size:.78em;margin-top:4px;letter-spacing:0}
.tq h2{margin-bottom:2px}
.tq-nut{display:inline-flex;align-items:center;gap:11px;margin-top:22px;color:#fff;font-weight:700;
font-size:14.5px;border-bottom:1px solid rgba(254,193,16,.5);padding-bottom:5px}
.tq-nut i{width:34px;height:34px;border-radius:99px;border:1px solid rgba(254,193,16,.55);
display:grid;place-items:center;font-style:normal;color:var(--gold-l);flex:none;transition:.18s}
.tq-nut:hover i{background:var(--gold);color:var(--navy-d);border-color:var(--gold)}
@media(min-width:940px){.tq-dao .tq-anh{order:-1}}

/* ===== bảng thông tin dự án: thẻ trắng cạnh phối cảnh ===== */
.tt{background:linear-gradient(150deg,#123F32 0%,#0B3026 100%);color:#fff;border-top:0;border-bottom:0}
.tt h2{color:var(--gold-l);margin-bottom:22px;font-size:clamp(27px,5.4vw,42px)}
.tt-in{display:grid;gap:18px;align-items:stretch}
@media(min-width:940px){.tt-in{align-items:center}}
@media(min-width:940px){.tt-in{grid-template-columns:1fr 1.06fr;gap:26px}}
.spec{background:var(--trang);border-radius:var(--r);padding:4px 15px;
box-shadow:0 18px 46px rgba(4,20,15,.34);display:flex;flex-direction:column;justify-content:center}
@media(min-width:520px){.spec{padding:6px 24px}}
.spec-r{display:grid;grid-template-columns:104px 1fr;align-items:baseline;gap:0 12px;
padding:8px 0 8px 10px;border-bottom:1px solid var(--vien);border-left:3px solid transparent}
.spec-r:last-child{border-bottom:0}
@media(min-width:560px){.spec-r{grid-template-columns:150px 1fr;gap:0 16px;padding:9px 0 9px 11px}}
.spec-r dt{font-size:11.5px;color:var(--xam);font-weight:600;line-height:1.35}
.spec-r dd{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.38}
@media(min-width:560px){.spec-r dt{font-size:13px}.spec-r dd{font-size:14.5px}}
.spec-r.key{border-left-color:var(--gold);background:linear-gradient(90deg,#FFFAF0,transparent 70%)}
.spec-r.key dd{color:var(--navy)}
.tt-anh{position:relative;border-radius:var(--r);overflow:hidden;
box-shadow:0 18px 46px rgba(4,20,15,.34);margin:0;background:#0B3026}
.tt-nen{display:none}
.tt-anh img.tt-chinh{width:100%;height:100%;display:block;aspect-ratio:4/3;object-fit:cover}
/* Máy tính: khung phải cao bằng bảng thông số, nhưng ảnh phối cảnh ngang hơn khung
   nhiều — cắt cho vừa thì mất tháp ngoài cùng. Cách xử lý: trải chính tấm ảnh đó
   làm nền mờ phía sau, ảnh chính đặt trọn vẹn lên trên. Khung đầy đủ chiều cao mà
   không cắt gì. Cùng một file nên không tải thêm lần nào. */
@media(min-width:940px){
  .tt-anh{height:100%;display:grid;place-items:center}
  .tt-nen{display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;filter:blur(26px) brightness(.5) saturate(1.2);
    transform:scale(1.18);pointer-events:none}
  .tt-anh img.tt-chinh{position:relative;z-index:1;width:calc(100% - 36px);height:auto;
    aspect-ratio:auto;object-fit:contain;border-radius:10px;
    box-shadow:0 14px 34px rgba(4,20,15,.45)}
}

/* năm tháp */
.thap{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
@media(min-width:760px){.thap{grid-template-columns:repeat(5,1fr)}}
.tw{background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-s);
padding:15px 14px 14px;display:flex;flex-direction:column;gap:7px}
.tw-m{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
font-size:15px;font-weight:800;letter-spacing:-.02em;background:var(--nen);color:var(--xam-n);
border:1px solid var(--vien)}
.tw b{font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.tw span{font-size:12px;color:var(--xam-n);line-height:1.45}
.tw.on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy),var(--sh)}
.tw.on .tw-m{background:var(--navy);color:var(--gold);border-color:var(--navy)}
.tw.on b{color:var(--navy)}
.tw-tag{display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;padding:3px 8px;border-radius:99px;margin-top:auto}
.tw.on .tw-tag{background:var(--navy);color:var(--gold)}
.tw.off .tw-tag{background:var(--nen);color:var(--xam-n);border:1px solid var(--vien)}
.thap-view{font-size:12.5px;color:var(--xam);margin-top:6px;line-height:1.5;
border-top:1px dashed var(--vien-d);padding-top:8px}

/* sự kiện */
.evt{background:linear-gradient(135deg,#174C3A,#0B3026);color:#fff;border-radius:var(--r);
padding:24px;margin-top:20px;border:1px solid rgba(255,255,255,.09)}
.evt-row{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px dashed rgba(255,255,255,.16)}
.evt-row:last-of-type{border-bottom:0}
.evt-row b{color:var(--gold-l);font-size:18px;font-weight:800;min-width:104px;letter-spacing:-.01em}
.evt p{color:#A6C6B3;font-size:13px;margin-top:12px}

/* lưới thẻ */
.grid{display:grid;gap:14px;margin-top:24px}
.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}
@media(min-width:680px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--vien);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}
.card p{font-size:14.5px;color:var(--xam)}
.card .kv{font-size:13px;color:var(--gold-d);font-weight:750;margin-top:9px}

/* loại căn */
.units{display:grid;gap:14px;margin-top:24px;grid-template-columns:1fr}
@media(min-width:700px){.units{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.units{grid-template-columns:repeat(3,1fr)}}
.unit{background:var(--u-nen,#fff);border:1px solid var(--u-vien,var(--vien));
  border-top:3px solid var(--u-dam,var(--vien-d));border-radius:var(--r);padding:20px;
box-shadow:var(--sh);display:flex;flex-direction:column;transition:.18s}
.unit:hover{border-color:var(--gold);transform:translateY(-2px)}
.unit .pn{display:inline-block;background:var(--nen);border:1px solid var(--vien);color:var(--navy);
font-size:11.5px;font-weight:750;padding:4px 10px;border-radius:99px;margin-bottom:11px;align-self:flex-start}
.unit h3{font-size:18px}
/* mỗi loại căn một sắc riêng — cùng độ nhạt để bộ thẻ vẫn là một hệ */
.units .unit:nth-child(1){--u-nen:#EDF6F1;--u-vien:#D3E8DE;--u-dam:#0E7A48}
.units .unit:nth-child(2){--u-nen:#E9F3F6;--u-vien:#CFE4EC;--u-dam:#16688A}
.units .unit:nth-child(3){--u-nen:#F1EFFA;--u-vien:#DEDAF2;--u-dam:#5744A8}
.units .unit:nth-child(4){--u-nen:#FAF3E7;--u-vien:#EFE0C4;--u-dam:#8A6100}
.units .unit:nth-child(5){--u-nen:#FBEFEC;--u-vien:#F2D9D2;--u-dam:#B4321F}
.unit .pn{background:#fff;border-color:var(--u-vien,var(--vien));color:var(--u-dam,var(--navy))}
.unit h3{color:var(--u-dam,var(--ink))}
.unit .dt{color:var(--ink);font-weight:700}

.unit .dt{font-size:14px;color:var(--xam);font-weight:650}
.unit p{font-size:14px;color:var(--xam);margin-top:9px;flex:1}
.unit .gia{margin-top:15px;padding-top:14px;border-top:1px solid var(--vien);
display:flex;align-items:baseline;gap:7px}
.unit .gia b{font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.unit .gia span{font-size:12.5px;color:var(--xam-n)}

/* bảng giá */
.tbl-w{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:22px;border:1px solid var(--vien);
border-radius:var(--r);background:#fff;box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 16px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--vien)}
th{padding-top:13px;padding-bottom:13px}
th{background:var(--navy);font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff}
tr:last-child td{border-bottom:0}
td b{font-weight:750}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.num{text-align:right}
/* ===== Dien thoai =====
   CA KHOI NAY PHAI NAM SAU moi luat goc o tren. Dat truoc la bi de,
   khong an gi ca — da dinh hai lan roi. */
@media(max-width:660px){
  th.co,td.co{display:none}
  th,td{padding:8px 5px;font-size:11px}
  th{font-size:10.5px;letter-spacing:.02em;padding-top:9px;padding-bottom:9px;white-space:normal}
  td,td.num{white-space:nowrap}   /* moi hang nam gon mot dong */
}
.pill{display:inline-block;background:#FFF6E6;border:1px solid #F0DCB2;color:var(--gold-d);
font-size:11.5px;font-weight:750;padding:3px 10px;border-radius:99px}

/* ===== đầu mục Bảng giá: tiêu đề hai dòng + nút dẫn sang trang tính giá ===== */
#banggia h2 em{display:block;font-style:italic;color:var(--gold-d);font-size:.92em;
margin-top:2px;letter-spacing:-.01em}
/* khối dẫn sang trang tính giá — làm nổi để khách dễ thấy và dễ bấm */
.gia-nut{display:grid;gap:16px;align-items:center;margin-top:22px;
background:linear-gradient(140deg,#123F32 0%,#0B3026 100%);color:#fff;
border-radius:var(--r);padding:20px 22px;box-shadow:0 14px 36px rgba(4,20,15,.26);
transition:transform .16s ease,box-shadow .16s ease}
@media(min-width:760px){.gia-nut{grid-template-columns:1fr auto;gap:26px;padding:22px 26px}}
.gia-nut:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(4,20,15,.34)}
.gia-nut b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
@media(min-width:760px){.gia-nut b{font-size:19px}}
.gia-nut span{display:block;font-size:13.5px;color:#C4DBCC;margin-top:5px;line-height:1.55}
.gia-nut em{display:inline-flex;align-items:center;gap:9px;font-style:normal;
background:var(--gold);color:#241804;font-weight:800;font-size:14.5px;
padding:12px 20px;border-radius:99px;white-space:nowrap;justify-self:start}
.gia-nut em::after{content:"→";font-size:16px}
.gia-ghi{font-size:12.5px;color:var(--xam-n);margin-top:12px;line-height:1.6;max-width:82ch}
.gia-ghi b{color:var(--xam);font-weight:700}
.gia-so{color:var(--gold-d);font-weight:800}
tr.co-tinh{cursor:pointer;transition:background .14s}
tr.co-tinh:hover,tr.co-tinh:focus-visible{background:#FFFAF0;outline:none}
tr.co-tinh:focus-visible{box-shadow:inset 3px 0 0 var(--gold)}
tr.co-tinh:hover .gia-so{text-decoration:underline;text-underline-offset:3px}
.gia-goi{font-size:13px;color:var(--xam);margin-top:12px}
.gia-goi::before{content:"↗";color:var(--gold-d);font-weight:800;margin-right:7px}
.chi-mb{display:none}
@media(max-width:660px){.chi-pc{display:none}.chi-mb{display:inline}}

/* khối lưu ý mềm */
.soft{background:#FFFAF0;border:1px solid #F0DFBB;border-left:3px solid var(--gold);
border-radius:var(--r-s);padding:16px 18px;margin-top:18px}
.soft p{font-size:14px;color:#6B5628;line-height:1.6}

/* tiến độ thanh toán */
.pay{margin-top:24px;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sh)}
.pay-r{display:flex;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--vien)}
.pay-r:last-child{border-bottom:0}
.pay-r .pc{flex:none;min-width:66px;text-align:center;background:var(--navy);color:#fff;
border-radius:9px;padding:8px 6px;font-weight:800;font-size:14px;letter-spacing:-.02em}
.pay-r .pc.sm{font-size:11.5px;padding:9px 6px}
.pay-r b{display:block;font-size:14.5px}
.pay-r span{font-size:13px;color:var(--xam)}

/* máy tính */
.calc{background:#fff;border:1px solid var(--vien);border-radius:var(--r);padding:20px;margin-top:22px;box-shadow:var(--sh)}
@media(min-width:900px){.calc{padding:26px}}
/* ===== khối Tâm điểm kết nối trong mục Vị trí ===== */
.kn{background:linear-gradient(155deg,#0B3026 0%,#123F32 46%,#1D5A43 100%);
color:#fff;border-radius:var(--r);padding:26px 22px 24px;margin-top:26px;
box-shadow:0 18px 46px rgba(4,20,15,.3)}
@media(min-width:900px){.kn{padding:38px 36px 34px}}
.kn h3{font-family:'Noto Serif Display',Georgia,serif;font-weight:600;
font-size:clamp(26px,4.6vw,40px);line-height:1.16;color:#fff;margin:0 0 10px;letter-spacing:-.01em}
.kn h3 em{font-style:italic;color:var(--gold-l)}
.kn>p{color:#C4DBCC;font-size:14.5px;max-width:58ch;margin:0 0 22px;line-height:1.65}
.kn-nhom{margin-top:20px}
.kn-nhom>b{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:#93B3A0;margin-bottom:9px}
.kn-ds{display:grid;gap:8px}
.kn-r{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:0 15px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
border-radius:var(--r-s);padding:11px 15px}
@media(min-width:640px){.kn-r{grid-template-columns:96px 1fr;padding:13px 18px;gap:0 18px}}
/* chữ "phút" xuống dòng dưới số, để số dạng khoảng như 25–35 không bị vỡ hàng */
.kn-p{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
border-right:1px solid rgba(255,255,255,.18);padding-right:12px;line-height:1}
.kn-p b{font-family:'Noto Serif Display',Georgia,serif;font-weight:600;
font-size:22px;color:var(--gold-l);letter-spacing:-.02em;white-space:nowrap}
@media(min-width:640px){.kn-p b{font-size:25px}}
.kn-p span{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93B3A0}
.kn-n{font-size:13px;font-weight:700;letter-spacing:.01em;color:#fff;line-height:1.4}
@media(min-width:640px){.kn-n{font-size:14px}}
.kn-nguon{font-size:12px;color:#8EB39D;margin:18px 0 0;line-height:1.5}

/* ===== mục Các loại căn hộ — nền xanh, bộ lọc theo số phòng ngủ ===== */
.sp{background:linear-gradient(150deg,#123F32 0%,#0B3026 100%);color:#fff;border-top:0;border-bottom:0}
.sp h2{color:#fff}
.sp-h{display:grid;gap:20px;margin-bottom:6px}
@media(min-width:900px){.sp-h{grid-template-columns:1fr auto;align-items:end;gap:32px}}
.sp .seg{margin-bottom:0}
@media(min-width:900px){.sp .seg{justify-content:flex-end}}
.sp .seg button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);color:#DAEBE0}
.sp .seg button:hover{border-color:var(--gold);color:#fff}
.sp .seg button.on{background:var(--gold);border-color:var(--gold);color:#241804}
/* các khối nằm trong mục phải đọc được trên nền xanh */
/* nền mục là xanh nên chữ mặc định trắng — mọi khối nền sáng bên trong
   phải trả chữ về màu mực, không thì trắng trên trắng, mất chữ */
.sp .mc,.sp .gal figure,.sp .f .ok{color:var(--ink)}
.sp .gal figcaption{color:var(--xam)}
.sp .eyebrow{color:var(--gold-l)}          /* vàng đậm chỉ đọc được trên nền sáng */
.sp .small,.sp>.wrap>.note{color:#A8C6B4}
.sp .moi .f-note{color:#BBD6C4}
.sp .moi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.sp .tabs button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);color:#DAEBE0}
.sp .tabs button.on{background:var(--gold);border-color:var(--gold);color:#241804}

.seg{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.seg button{border:1.5px solid var(--vien-d);background:#fff;color:var(--xam);border-radius:99px;
padding:8px 15px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.seg button:hover{border-color:var(--navy)}
.seg button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(min-width:700px){.rows{grid-template-columns:repeat(4,1fr)}}
.row label{display:block;font-size:12.5px;color:var(--xam);margin-bottom:6px;font-weight:700}
.row input{width:100%;padding:12px 13px;border:1.5px solid var(--vien-d);border-radius:10px;
font-size:16px;font-family:inherit;font-variant-numeric:tabular-nums}
.row input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(21,58,120,.1)}
.row .hint{font-size:11.5px;color:var(--xam-n);margin-top:5px}
.out{background:linear-gradient(135deg,var(--navy),#0C3527);color:#fff;border-radius:var(--r);padding:22px;margin-top:20px}
.out .lb{font-size:12.5px;color:#A1C1AE;font-weight:650}
.out .kq{font-size:32px;font-weight:800;color:var(--gold-l);line-height:1.15;letter-spacing:-.025em;margin-top:2px}
@media(min-width:900px){.out .kq{font-size:40px}}
.out .ct{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;
padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
@media(min-width:700px){.out .ct{grid-template-columns:repeat(3,1fr)}}
.out .ct div span{display:block;font-size:12px;color:#A1C1AE}
.out .ct div b{font-size:17px;font-weight:750;font-variant-numeric:tabular-nums}

/* ảnh */
.gal{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px}
.tabp[hidden]{display:none!important}
@media(min-width:600px){.gal{grid-template-columns:1fr 1fr}}
/* thư viện một cột: ảnh không trải quá 720px để khỏi phóng vượt cỡ gốc */
.gal-don{grid-template-columns:1fr!important}
.gal-don figure{max-width:720px;width:100%;margin-left:auto;margin-right:auto}
.gal-rong figure{max-width:none}
@media(min-width:600px){.gal-don{grid-template-columns:1fr!important}}
@media(min-width:960px){.gal{grid-template-columns:repeat(3,1fr)}}
figure{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--vien);background:#fff;box-shadow:var(--sh)}
figure img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .5s ease}
figure:hover img{transform:scale(1.03)}
figcaption{padding:12px 14px;font-size:13.5px;color:var(--xam);font-weight:600}
.mh{position:absolute;top:10px;left:10px;background:rgba(10,20,40,.74);color:#fff;
font-size:10.5px;font-weight:750;padding:4px 10px;border-radius:6px;letter-spacing:.03em;backdrop-filter:blur(4px)}
.zoom{cursor:zoom-in}
.zh{position:absolute;bottom:54px;right:10px;background:rgba(10,20,40,.66);color:#fff;
font-size:11px;padding:5px 10px;border-radius:6px;backdrop-filter:blur(4px)}

/* ba phương án thanh toán */
.pays{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px}
@media(min-width:820px){.pays{grid-template-columns:repeat(3,1fr)}}
.pay-c{background:#fff;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;
box-shadow:var(--sh);display:flex;flex-direction:column}
.pay-c:first-child{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--sh)}
.pay-t{padding:20px;border-bottom:1px solid var(--vien)}
.tk{display:inline-block;background:var(--nen);border:1px solid var(--vien-d);color:var(--gold-d);
font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
padding:4px 10px;border-radius:99px;margin-bottom:10px}
.pay-c:first-child .tk{background:#FFF6E6;border-color:#EEDCB4}
.pay-t h3{font-size:18px}
.pay-t p{font-size:13.5px;color:var(--xam);margin-top:5px}
.pay-l{padding:6px 20px;flex:1}
.pay-l div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
padding:11px 0;border-bottom:1px dashed var(--vien)}
.pay-l div:last-child{border-bottom:0}
.pay-l span{font-size:14px;color:var(--xam)}
.pay-l b{font-size:15.5px;font-weight:800;color:var(--navy);white-space:nowrap}
.pay-w{background:var(--nen);border-top:1px solid var(--vien);padding:13px 20px;
font-size:13px;color:var(--xam);font-weight:600}

/* mẫu căn */
.mcs{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:20px}
@media(min-width:700px){.mcs{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.mcs{grid-template-columns:repeat(4,1fr)}}
.mc{background:#fff;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.mc-h{background:var(--navy);color:#fff;padding:12px 14px;text-align:center}
.mc-h b{display:block;font-size:15px;font-weight:800;letter-spacing:.02em}
.mc-h span{font-size:12.5px;color:var(--gold-l);font-weight:700}
.mc img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff;padding:6px;display:block}
.mc-i{position:relative;cursor:zoom-in}
.mc-i .zh{position:absolute;right:7px;bottom:7px;font-size:10.5px;padding:3px 7px;border-radius:99px;
  background:rgba(15,32,56,.72);color:#fff;font-weight:600;letter-spacing:.01em;pointer-events:none}
.mc-x{aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:14px;
background:repeating-linear-gradient(45deg,#F7FBF8,#F7FBF8 9px,#F1F7F3 9px,#F1F7F3 18px)}
.mc-x>b{font-size:11.5px;color:var(--xam-n);font-weight:650;line-height:1.4;text-align:center}
.bars div{margin-bottom:9px}
.bars span{display:block;font-size:10.5px;color:var(--xam-n);font-weight:700;
letter-spacing:.03em;text-transform:uppercase}
.bars i{display:block;height:7px;border-radius:99px;background:var(--vien-d);margin:4px 0 3px}
.bars i.tt{background:var(--gold)}
.bars em{font-style:normal;font-size:12px;font-weight:750;color:var(--ink)}
.mc-b{display:flex;justify-content:space-between;gap:8px;padding:9px 13px;
border-top:1px solid var(--vien);font-size:12.5px}
.mc-b span{color:var(--xam)}.mc-b b{font-weight:750}

/* tab ảnh căn hộ */
.tabs{display:flex;gap:8px;margin-top:32px;flex-wrap:wrap}
.tabs button{border:1.5px solid var(--vien-d);background:#fff;color:var(--xam);border-radius:99px;
padding:9px 18px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.tabs button.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* checklist tiện ích */
.chk{display:grid;grid-template-columns:1fr;gap:9px;margin-top:22px}
@media(min-width:600px){.chk{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.chk{grid-template-columns:repeat(3,1fr)}}
.chk div{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;
background:#fff;border:1px solid var(--vien);border-radius:var(--r-s);padding:12px 14px}
.chk div::before{content:"✓";flex:none;width:19px;height:19px;border-radius:99px;background:var(--gold);
color:#241804;font-size:11px;font-weight:800;display:grid;place-items:center;margin-top:2px}

/* vị trí nhóm */
.loc{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px}
@media(min-width:700px){.loc{grid-template-columns:1fr 1fr}}
.loc-c{background:#fff;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.loc-c h3{background:var(--nen);padding:13px 18px;margin:0;border-bottom:1px solid var(--vien);font-size:15px}
.loc-c ul{list-style:none;padding:6px 18px 14px}
.loc-c li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
border-bottom:1px dashed var(--vien);font-size:14.5px}
.loc-c li:last-child{border-bottom:0}
.loc-c li span{color:var(--xam);font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.loc-c li span b{color:var(--navy);font-weight:750}

/* tiến độ */
.tl{margin-top:24px;border-left:2px solid var(--vien);padding-left:22px}
.tl-i{position:relative;padding-bottom:22px}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:"";position:absolute;left:-29px;top:6px;width:12px;height:12px;
border-radius:99px;background:var(--vien-d);border:2px solid #fff;box-shadow:0 0 0 2px var(--vien-d)}
.tl-i.done::before{background:var(--xanh);box-shadow:0 0 0 2px var(--xanh)}
.tl-i.next::before{background:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.tl-i b{font-size:14px;color:var(--navy)}
.tl-i p{font-size:14.5px;color:var(--xam)}
.alt .tl-i::before{border-color:var(--nen)}

/* pháp lý */
.legal{margin-top:18px;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sh)}
.legal-r{display:flex;gap:13px;align-items:flex-start;padding:15px 18px;border-bottom:1px solid var(--vien)}
.legal-r:last-child{border-bottom:0}
.legal-r .ic{flex:none;width:21px;height:21px;border-radius:99px;display:grid;place-items:center;
font-size:12px;font-weight:800;color:#fff;margin-top:2px}
.legal-r.y .ic{background:var(--xanh)}
.legal-r.n .ic{background:var(--xam-n)}
.legal-r b{font-size:14.5px;display:block}
.legal-r span{font-size:13.5px;color:var(--xam)}

/* CĐT */
.cdt{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
@media(min-width:900px){.cdt{grid-template-columns:repeat(4,1fr)}}
.cdt div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:18px}
.cdt b{display:block;font-size:19px;font-weight:800;color:var(--gold-l);letter-spacing:-.02em}
.cdt span{font-size:13px;color:#A8C6B4;display:block;margin-top:5px}

/* ngân hàng */
.banks{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.bank{background:#fff;border:1px solid var(--vien);border-radius:10px;padding:10px 16px;
font-size:14px;font-weight:700;color:var(--navy);box-shadow:var(--sh)}

/* hỏi đáp */
details{border:1px solid var(--vien);border-radius:var(--r-s);margin-bottom:10px;background:#fff}
details[open]{border-color:var(--vien-d);box-shadow:var(--sh)}
summary{padding:16px 18px;font-weight:700;cursor:pointer;font-size:15px;list-style:none;
display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:21px;color:var(--gold-d);font-weight:700;flex:none;line-height:1}
details[open] summary::after{content:"−"}
details p{padding:0 18px 17px;font-size:14.5px;color:var(--xam)}

/* ===== thư mục gấp cho mục Tiến độ ===== */
.td-tom{display:flex;flex-wrap:wrap;gap:8px 10px;margin:16px 0 20px}
.td-tom span{display:inline-flex;align-items:center;gap:7px;background:#fff;
border:1px solid var(--vien);border-radius:99px;padding:8px 14px;
font-size:13.5px;font-weight:650;color:var(--ink)}
.td-tom span::before{content:"✓";color:var(--xanh);font-weight:800;font-size:12px}
details.td summary{font-size:15.5px}
details.td summary b{font-weight:750}
details.td summary i{display:block;font-style:normal;font-size:12.5px;
color:var(--xam-n);font-weight:500;margin-top:2px}
.td-than{padding:0 18px 18px}
.td-than>.small,.td-than>.note{margin-top:0}
.td-than .gal{margin-top:12px}
.td-than .legal{margin-top:4px}
.td-than .pay-a{margin-top:2px}
details.td summary .tk{display:inline-block}

/* ===== ba phương thức thanh toán: mỗi cái một sắc riêng ===== */
.pt{position:relative;border-left:4px solid var(--pt);background:var(--pt-nen)}
/* mo ra thi vien quanh nhat di nhung vien trai phai giu mau, khong la mat dau nhan biet */
.pt[open]{box-shadow:0 10px 30px rgba(16,32,60,.09);border-color:var(--pt-vien);border-left-color:var(--pt)}
.pt summary{align-items:flex-start}
.pt summary .tk{background:var(--pt);border:0;color:var(--pt-chu);
font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
padding:5px 12px;border-radius:99px;box-shadow:0 2px 8px var(--pt-bong)}
.pt summary b{color:var(--pt-dam)}
.pt summary::after{color:var(--pt)}
.pt .td-than{background:#fff;margin:0 -1px;border-top:1px solid var(--pt-vien);padding-top:16px}
.pt1{--pt:#D99B2B;--pt-chu:#241804;--pt-dam:#7A5410;--pt-nen:#FFFCF4;--pt-vien:#F0DFBB;--pt-bong:rgba(217,155,43,.35)}
.pt2{--pt:#16688A;--pt-chu:#fff;--pt-dam:#0F4A63;--pt-nen:#F6FBFD;--pt-vien:#CFE4EC;--pt-bong:rgba(22,104,138,.3)}
.pt3{--pt:#1C7A50;--pt-chu:#fff;--pt-dam:#14563A;--pt-nen:#F5FBF7;--pt-vien:#CFE7DA;--pt-bong:rgba(28,122,80,.3)}

/* nút xem thêm cho lưới mặt bằng và dải ảnh */
.them{display:flex;justify-content:center;margin-top:18px}
.them button{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#fff;
border-radius:99px;padding:12px 26px;font-family:inherit;font-size:14.5px;font-weight:700;
cursor:pointer;transition:.16s}
.them button:hover{background:var(--gold);border-color:var(--gold);color:#241804}
.them.sang button{border-color:var(--vien-d);color:var(--navy)}
.them.sang button:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.mc.an,.gal figure.an{display:none}

/* CTV */
.agent{background:#fff;border:1px solid var(--vien);border-radius:var(--r);padding:22px;
display:flex;gap:18px;align-items:center;margin-top:22px;flex-wrap:wrap;box-shadow:var(--sh)}
.av{width:80px;height:80px;border-radius:99px;object-fit:cover;flex:none;
background:linear-gradient(135deg,var(--navy),var(--navy-m));color:#fff;display:grid;place-items:center;
font-size:28px;font-weight:800}
.agent .info{flex:1;min-width:180px}
.agent .nm{font-size:21px;font-weight:800;letter-spacing:-.02em}
.agent .rl{font-size:14px;color:var(--xam)}
.agent .acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* footer */
footer{background:var(--navy-d);color:#8EB39D;padding:44px 0 34px;font-size:13.5px}
footer .flg{height:38px;margin-bottom:16px;opacity:.96}
footer .lhub{display:flex;gap:12px;align-items:flex-start;margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;line-height:1.6}
footer .lhub img{width:30px;height:30px;flex:none;opacity:.95}
footer .lhub b{color:#fff;font-weight:700}
footer strong{color:#fff;display:block;font-size:17px;margin-bottom:5px}
.updated{font-size:12px;color:#6F9B85;margin-top:16px}
.fnote{font-size:12px;line-height:1.65;color:#6F9B85;margin-top:10px;max-width:760px}

/* sticky */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97);
backdrop-filter:blur(12px);border-top:1px solid var(--vien);
padding:11px 14px calc(11px + env(safe-area-inset-bottom));display:flex;gap:10px}
.sticky .btn{flex:1}
@media(min-width:1000px){.sticky{display:none}body{padding-bottom:0}}

/* nút nổi trên máy tính */
.fab{display:none}
@media(min-width:1000px){
  .fab{display:flex;flex-direction:column;gap:11px;position:fixed;right:22px;bottom:26px;z-index:65}
  .fb{width:54px;height:54px;border-radius:99px;display:grid;place-items:center;color:#fff;
      box-shadow:0 8px 24px rgba(6,32,25,.28);transition:.16s}
  .fb:hover{transform:translateY(-2px)}
  .fb-z{background:#0068FF}
  .fb-p{background:var(--gold);color:#241804}
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,26,20,.95);display:none;
align-items:center;justify-content:center;padding:16px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:8px}
.lb-g{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  background:rgba(255,255,255,.95);color:var(--navy);font-size:13.5px;font-weight:750;
  padding:9px 18px;border-radius:99px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.lb-x{position:absolute;top:12px;right:14px;color:#fff;font-size:32px;background:none;
border:0;cursor:pointer;line-height:1;padding:6px 12px}

/* ===== Khoi dan sang cong cu tinh gia ===== */
.tg{background:linear-gradient(150deg,var(--navy-d) 0%,var(--navy) 55%,var(--navy-m) 100%);
  border-radius:var(--r);padding:34px 26px 30px;text-align:center;position:relative;overflow:hidden;
  box-shadow:0 18px 44px rgba(14,42,92,.24)}
.tg:before{content:"";position:absolute;top:-90px;right:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(254,193,16,.30),transparent 68%)}
.tg:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tg-h{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px;position:relative;z-index:1}
@media(max-width:640px){.tg-h{grid-template-columns:1fr;gap:10px}.tg{padding:26px 18px 24px}}
.tg-c{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-s);
  padding:18px 12px 15px;backdrop-filter:blur(2px)}
.tg-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:var(--navy-d);font-weight:800;font-size:13px;margin-bottom:9px}
.tg-c b{display:block;color:#fff;font-size:15.5px;line-height:1.35;margin-bottom:4px}
.tg-c em{font-style:normal;display:block;color:var(--gold-l);font-size:13px;font-weight:700}
.tg-go{display:inline-flex;align-items:center;gap:11px;background:var(--gold);color:var(--navy-d);
  font-size:17px;font-weight:800;letter-spacing:-.01em;padding:17px 38px;border-radius:999px;
  box-shadow:0 10px 26px rgba(254,193,16,.42);position:relative;z-index:1;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.tg-go svg{transition:transform .16s ease}
.tg-go:hover{background:var(--gold-l);transform:translateY(-2px);box-shadow:0 14px 32px rgba(254,193,16,.52)}
.tg-go:hover svg{transform:translateX(4px)}
.tg-go:active{transform:translateY(0)}
.tg-free{margin:12px 0 0;color:#BBD6C4;font-size:12.5px;position:relative;z-index:1}
.tg-note{margin:22px auto 0;max-width:52ch;color:#A1C3AF;font-size:12.5px;line-height:1.6;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:1}

.pay-a{margin:0 -1px 14px;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--vien);background:#FBF6E8}
.pay-a img{display:block;width:100%;height:auto;cursor:zoom-in;transition:transform .25s ease}
.pay-a:hover img{transform:scale(1.03)}

.ht{background:var(--nen);border-left:3px solid var(--gold);border-radius:0 var(--r-s) var(--r-s) 0;
  padding:14px 16px;margin:18px 0 24px}
.ht b{display:block;font-size:13px;color:var(--gold-d);letter-spacing:.02em;margin-bottom:3px}
.ht p{font-size:14.5px;color:var(--ink);margin:0}

.gp{display:block;font-weight:500;font-size:12.5px;color:var(--xam);letter-spacing:0;margin-top:2px}

/* ===== The dan sang tour 360 ===== */
.t360{display:flex;gap:18px;align-items:center;margin-top:26px;padding:20px 22px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--navy-d),var(--navy) 60%,var(--navy-m));color:#fff;
  box-shadow:0 12px 32px rgba(14,42,92,.20);transition:transform .16s ease,box-shadow .16s ease}
.t360:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(14,42,92,.28)}
.t360-i{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:rgba(254,193,16,.16);border:1px solid rgba(254,193,16,.45);color:var(--gold-l)}
.t360-t b{display:block;font-size:17.5px;letter-spacing:-.01em;margin-bottom:4px}
.t360-t p{font-size:13.5px;color:#BBD6C4;margin:0 0 10px;line-height:1.55}
.t360-b{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:var(--navy-d);
  font-weight:800;font-size:14px;padding:9px 18px;border-radius:999px}
.t360-b em{font-style:normal}
@media(max-width:560px){.t360{flex-direction:column;text-align:center;gap:13px;padding:20px 16px}}

.t360-n{display:block;margin-top:9px;font-size:12.5px;color:#A1C3AF;line-height:1.5}
.t360-n b{display:inline;font-size:inherit;color:var(--gold-l);margin:0}
@media(min-width:900px){.t360-n{display:none}}



.arcontactus-widget.right.arcontactus-message{right:20px}
.arcontactus-widget.right.arcontactus-message{bottom:20px}
.arcontactus-widget .arcontactus-message-button
.pulsation{-webkit-animation-duration:2s;animation-duration:2s}
.arcontactus-widget.md .arcontactus-message-button,.arcontactus-widget.md.arcontactus-message{width:60px;height:60px}
.arcontactus-widget{opacity:0;transition:.2s opacity}
.arcontactus-widget *{box-sizing:border-box}
.arcontactus-widget.left.arcontactus-message{left:20px;right:auto}
.arcontactus-widget.left .arcontactus-message-button{right:auto;left:0}
.arcontactus-widget.left .arcontactus-prompt{left:80px;right:auto;transform-origin:0 50%}
.arcontactus-widget.left .arcontactus-prompt:before{border-right:8px solid #FFF;border-top:8px solid transparent;border-left:8px solid transparent;border-bottom:8px solid transparent;right:auto;left:-15px}
.arcontactus-widget.left .messangers-block{right:auto;left:0;-webkit-transform-origin:10% 105%;-ms-transform-origin:10% 105%;transform-origin:10% 105%}
.arcontactus-widget.left .callback-countdown-block{left:0;right:auto}
.arcontactus-widget.left .callback-countdown-block::before,.arcontactus-widget.left .messangers-block::before{left:25px;right:auto}
.arcontactus-widget.md .callback-countdown-block,.arcontactus-widget.md .messangers-block{bottom:70px}
.arcontactus-widget.md .arcontactus-prompt{bottom:5px}
.arcontactus-widget.md.left .callback-countdown-block:before,.arcontactus-widget.md.left .messangers-block:before{left:21px}
.arcontactus-widget.md.left .arcontactus-prompt{left:70px}
.arcontactus-widget.md.right .callback-countdown-block:before,.arcontactus-widget.md.right .messangers-block:before{right:21px}
.arcontactus-widget.md.right .arcontactus-prompt{right:70px}
.arcontactus-widget.md .arcontactus-message-button .pulsation{width:74px;height:74px}
.arcontactus-widget.md .arcontactus-message-button .callback-state,.arcontactus-widget.md .arcontactus-message-button .icons{width:40px;height:40px;margin-top:-20px;margin-left:-20px}
.arcontactus-widget.sm .arcontactus-message-button,.arcontactus-widget.sm.arcontactus-message{width:50px;height:50px}
.arcontactus-widget.sm .callback-countdown-block,.arcontactus-widget.sm .messangers-block{bottom:60px}
.arcontactus-widget.sm .arcontactus-prompt{bottom:0}
.arcontactus-widget.sm.left .callback-countdown-block:before,.arcontactus-widget.sm.left .messangers-block:before{left:16px}
.arcontactus-widget.sm.left .arcontactus-prompt{left:60px}
.arcontactus-widget.sm.right .callback-countdown-block:before,.arcontactus-widget.sm.right .messangers-block:before{right:16px}
.arcontactus-widget.sm.right .arcontactus-prompt{right:60px}
.arcontactus-widget.sm .arcontactus-message-button .pulsation{width:64px;height:64px}
.arcontactus-widget.sm .arcontactus-message-button .icons{width:40px;height:40px;margin-top:-20px;margin-left:-20px}
.arcontactus-widget.sm .arcontactus-message-button .static{margin-top:-16px}
.arcontactus-widget.sm .arcontactus-message-button .callback-state{width:40px;height:40px;margin-top:-20px;margin-left:-20px}
.arcontactus-widget.active{opacity:1}
.arcontactus-widget .icons.hide,.arcontactus-widget .static.hide{opacity:0;transform:scale(0)}
.arcontactus-widget.arcontactus-message{z-index:10000;right:20px;bottom:20px;position:fixed!important;height:70px;width:70px}
.arcontactus-widget .arcontactus-message-button{width:70px;position:absolute;height:70px;right:0;background-color:red;border-radius:50px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}
.arcontactus-widget .arcontactus-message-button p{font-family:Ubuntu,Arial,sans-serif;color:#fff;font-weight:700;font-size:10px;line-height:11px;margin:0}
.arcontactus-widget .arcontactus-message-button .pulsation{width:84px;height:84px;background-color:red;border-radius:50px;position:absolute;left:-7px;top:-7px;z-index:-1;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:arcontactus-pulse 2s infinite;animation:arcontactus-pulse 2s infinite}
.arcontactus-widget .arcontactus-message-button .icons{background-color:#fff;width:44px;height:44px;border-radius:50px;position:absolute;overflow:hidden;top:50%;left:50%;margin-top:-22px;margin-left:-22px}
.arcontactus-widget .arcontactus-message-button .static{position:absolute;top:50%;left:50%;margin-top:-19px;margin-left:-26px;width:52px;height:52px;text-align:center}
.arcontactus-widget .arcontactus-message-button .static img{display:inline}
.arcontactus-widget .arcontactus-message-button .static svg{width:24px;height:24px;color:#FFF}
.arcontactus-widget .arcontactus-message-button.no-text .static{margin-top:-12px}
.arcontactus-widget .pulsation:nth-of-type(2n){-webkit-animation-delay:.5s;animation-delay:.5s}
.arcontactus-widget .pulsation.stop{-webkit-animation:none;animation:none}
.arcontactus-widget .icons-line{top:10px;left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-transition:cubic-bezier(.13,1.49,.14,-.4);-o-transition:cubic-bezier(.13,1.49,.14,-.4);-webkit-animation-delay:0s;animation-delay:0s;-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px);height:24px;transition:.2s all}
.arcontactus-widget .icons,.arcontactus-widget .static{transition:.2s all}
.arcontactus-widget .icons-line.stop{-webkit-animation-play-state:paused;animation-play-state:paused}
.arcontactus-widget .icons-line span{display:inline-block;width:24px;height:24px;color:red}
.arcontactus-widget .icons-line span i,.arcontactus-widget .icons-line span svg{width:24px;height:24px}
.arcontactus-widget .icons-line span i{display:block;font-size:24px;line-height:24px}
.arcontactus-widget .icons-line img,.arcontactus-widget .icons-line span{margin-right:40px}
.arcontactus-widget .icons.hide .icons-line{transform:scale(0)}
.arcontactus-widget .icons .icon:first-of-type{margin-left:0}
.arcontactus-widget .arcontactus-close{color:#FFF}
.arcontactus-widget .arcontactus-close svg{-webkit-transform:rotate(180deg) scale(0);-ms-transform:rotate(180deg) scale(0);transform:rotate(180deg) scale(0);-webkit-transition:ease-in .12s all;-o-transition:ease-in .12s all;transition:ease-in .12s all;display:block}
.arcontactus-widget .arcontactus-close.show-messageners-block svg{-webkit-transform:rotate(0) scale(1);-ms-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}
.arcontactus-widget .arcontactus-prompt,.arcontactus-widget .messangers-block{background:center no-repeat #FFF;box-shadow:0 0 10px rgba(0,0,0,.6);width:235px;position:absolute;bottom:80px;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:14px 0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:7px;-webkit-transform-origin:80% 105%;-ms-transform-origin:80% 105%;transform-origin:80% 105%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:ease-out .12s all;-o-transition:ease-out .12s all;transition:ease-out .12s all;z-index:10000}
.arcontactus-widget .arcontactus-prompt:before,.arcontactus-widget .messangers-block:before{position:absolute;bottom:-7px;right:25px;left:auto;display:inline-block!important;border-right:8px solid transparent;border-top:8px solid #FFF;border-left:8px solid transparent;content:''}
.arcontactus-widget .arcontactus-prompt.show-messageners-block,.arcontactus-widget .messangers-block.show-messageners-block{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.arcontactus-widget .arcontactus-prompt{color:#787878;font-family:Arial,sans-serif;font-size:16px;line-height:18px;width:auto;bottom:10px;right:80px;white-space:nowrap;padding:18px 20px 14px}
.arcontactus-widget .arcontactus-prompt:before{border-right:8px solid transparent;border-top:8px solid transparent;border-left:8px solid #FFF;border-bottom:8px solid transparent;bottom:16px;right:-15px}
.arcontactus-widget .arcontactus-prompt.active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close{position:absolute;right:6px;top:6px;cursor:pointer;z-index:100;height:14px;width:14px;padding:2px}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close svg{height:10px;width:10px;display:block}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing{border-radius:10px;display:inline-block;left:3px;padding:0;position:relative;top:4px;width:50px}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div{position:relative;float:left;border-radius:50%;width:10px;height:10px;background:#ccc;margin:0 2px;-webkit-animation:arcontactus-updown 2s infinite;animation:arcontactus-updown 2s infinite}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div:nth-child(2){animation-delay:.1s}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div:nth-child(3){animation-delay:.2s}
.arcontactus-widget .messangers-block.sm .messanger{padding-left:50px;min-height:44px}
.arcontactus-widget .messangers-block.sm .messanger span{height:32px;width:32px;margin-top:-16px}
.arcontactus-widget .messangers-block.sm .messanger span svg{height:20px;width:20px;margin-top:-10px;margin-left:-10px}
.arcontactus-widget .messanger{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;cursor:pointer;width:100%;padding:8px 20px 8px 60px;position:relative;min-height:54px;text-decoration:none}
.arcontactus-widget .messanger:hover{background-color:#EEE}
.arcontactus-widget .messanger:before{background-repeat:no-repeat;background-position:center}
.arcontactus-widget .messanger.facebook span{background:#0084ff}
.arcontactus-widget .messanger.viber span{background:#7c529d}
.arcontactus-widget .messanger.telegram span{background:#2ca5e0}
.arcontactus-widget .messanger.skype span{background:#31c4ed}
.arcontactus-widget .messanger.email span{background:#ff8400}
.arcontactus-widget .messanger.contact span{background:#7eb105}
.arcontactus-widget .messanger.call-back span{background:#54cd81}
.arcontactus-widget .messanger span{position:absolute;left:10px;top:50%;margin-top:-20px;display:block;width:40px;height:40px;border-radius:50%;background-color:#0084ff;margin-right:10px;color:#FFF;text-align:center;vertical-align:middle}
.arcontactus-widget .messanger span i,.arcontactus-widget .messanger span svg{width:24px;height:24px;vertical-align:middle;text-align:center;display:block;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px}
.arcontactus-widget .messanger span i{font-size:24px;line-height:24px}
.arcontactus-widget .messanger p{margin:0;font-family:Arial,sans-serif;font-size:14px;color:rgba(0,0,0,.87)}
@-webkit-keyframes arcontactus-pulse{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}50%{opacity:.5}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}
@media (max-width:468px){.arcontactus-widget.opened.arcontactus-message,.arcontactus-widget.opened.left.arcontactus-message{width:auto;right:20px;left:20px}}
@keyframes arcontactus-updown{0%,100%,43%{transform:translate(0,0)}25%,35%{transform:translate(0,-10px)}}
@-webkit-keyframes arcontactus-updown{0%,100%,43%{transform:translate(0 0)}25%,35%{transform:translate(-10px 0)}}
@keyframes arcontactus-pulse{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}50%{opacity:.5}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}
@-webkit-keyframes arcontactus-show-stat{0%,100%,20%,85%{-webkit-transform:scale(1);transform:scale(1)}21%,84%{-webkit-transform:scale(0);transform:scale(0)}}
@keyframes arcontactus-show-stat{0%,100%,20%,85%{-webkit-transform:scale(1);transform:scale(1)}21%,84%{-webkit-transform:scale(0);transform:scale(0)}}
@-webkit-keyframes arcontactus-show-icons{0%,100%,20%,85%{-webkit-transform:scale(0);transform:scale(0)}21%,84%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes arcontactus-show-icons{0%,100%,20%,85%{-webkit-transform:scale(0);transform:scale(0)}21%,84%{-webkit-transform:scale(1);transform:scale(1)}}