/* Hải Triều BĐS · bộ khung trang tư vấn dự án (bản 2). Màu riêng từng dự án đặt qua DA.theme. */
:root{
  --bg:#0f0d0a; --bg2:#17130e; --card:#1d1813; --card2:#251e17;
  --line:rgba(217,181,116,.22); --line2:rgba(217,181,116,.45);
  --gold:#D9B574; --gold2:#B8914F; --ink:#1b1307; --tx:#F3EBDD; --tx2:#B4A68F; --mute:#8a7d68;
  --ok:#7CD992; --warn:#FFB347; --bad:#FF8080;
  --serif:'Cormorant Garamond',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);background-image:radial-gradient(1200px 700px at 75% -10%,rgba(217,181,116,.10) 0%,transparent 60%);color:var(--tx);min-height:100vh;font-size:14.5px;line-height:1.55}
a{color:inherit}button{font-family:inherit}img{max-width:100%}
.mute{color:var(--tx2)}

/* thanh trên + tab */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:9px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.homebtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--gold);font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
.homebtn:hover{background:rgba(255,255,255,.05)}
.brand{line-height:1.1;min-width:0;overflow:hidden}
.brand b{display:block;font-family:var(--serif);font-size:21px;letter-spacing:2px;color:var(--gold);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{display:block;font-size:10px;color:var(--tx2);letter-spacing:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{display:flex;gap:2px;margin-left:auto}
.tabs button{background:none;border:0;color:var(--tx2);font-weight:700;font-size:12.5px;padding:8px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--tx)}
.tabs button.on{background:rgba(255,255,255,.08);color:var(--gold)}
.callbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:linear-gradient(180deg,var(--gold),var(--gold2));color:var(--ink);font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap}
.botnav{display:none}
@media(max-width:1100px){.tabs{display:none}.callbtn{margin-left:auto}}
@media(max-width:1100px){
  .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:4px 2px calc(4px + env(safe-area-inset-bottom));overflow-x:auto;scrollbar-width:none}
  .botnav::-webkit-scrollbar{display:none}
  .botnav button{flex:1 0 64px;background:none;border:0;color:var(--tx2);font-size:10.5px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;cursor:pointer;white-space:nowrap}
  .botnav button i{font-style:normal;font-size:17px;line-height:1.25}
  .botnav button.on{color:var(--gold)}
  body{padding-bottom:66px}
}
@media(max-width:640px){.brand span,.hb-t{display:none}.top{gap:9px;padding:8px 11px}.brand b{font-size:18px;letter-spacing:1px}.callbtn{padding:7px 11px;font-size:12.5px}}

.wrap{max-width:1220px;margin:0 auto;padding:20px 16px 70px}
.view{display:none}.view.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1,h2,h3.serif{font-family:var(--serif);font-weight:700;letter-spacing:.3px;line-height:1.15}
h1{font-size:clamp(30px,4.4vw,44px)}
h2{font-size:clamp(24px,3vw,32px);margin:32px 0 4px}
h1 em,h2 em{font-style:normal;color:var(--gold)}
.kick{font-size:11px;letter-spacing:2.4px;color:var(--gold);font-weight:800;text-transform:uppercase}
.sub{color:var(--tx2);font-size:14px;margin:6px 0 14px;max-width:880px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.note{font-size:12px;color:var(--mute);line-height:1.6;margin-top:8px}
.src{font-size:11px;color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--tx);font-weight:700;font-size:13.5px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--gold)}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold2));color:var(--ink);border:0}
.btn.sm{padding:6px 11px;font-size:12px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:color-mix(in srgb,var(--tx) 85%,transparent);font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--line2)}
.chip.on{background:color-mix(in srgb,var(--gold) 18%,transparent);border-color:var(--gold);color:var(--gold)}
.chip[disabled]{opacity:.45;cursor:not-allowed}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;white-space:nowrap;border:1px solid}
.b-upd{color:var(--warn);border-color:rgba(255,179,71,.6);background:rgba(255,179,71,.1)}
.b-ok{color:var(--ok);border-color:rgba(124,217,146,.55);background:rgba(124,217,146,.1)}
.b-gold{color:var(--gold);border-color:var(--line2);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.b-bad{color:var(--bad);border-color:rgba(255,128,128,.55);background:rgba(255,128,128,.1)}
.b-org{color:#FFB347;border-color:#FF9900;background:rgba(255,153,0,.12)}
.b-mute{color:var(--tx2);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.warnbox{border:1px dashed rgba(255,179,71,.6);background:rgba(255,179,71,.07);color:#ffd9a6;border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.6}
.warnbox b{color:var(--warn)}
.minh-hoa{font-size:11px;color:var(--mute);font-style:italic}

/* tổng quan */
.hero{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);min-height:min(76vh,600px);display:flex;align-items:flex-end;background:#000}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,color-mix(in srgb,var(--bg) 55%,transparent) 58%,color-mix(in srgb,var(--bg) 96%,transparent) 100%)}
.hero .in{position:relative;z-index:2;padding:26px;width:100%}
.hero h1{font-size:clamp(38px,6.6vw,74px);letter-spacing:3px}
.hero .tag{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,27px);color:var(--gold);margin-top:2px}
.hero .loc{color:color-mix(in srgb,var(--tx) 88%,transparent);font-size:14px;margin-top:8px;max-width:820px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px;max-width:860px}
.stat{background:color-mix(in srgb,var(--bg) 65%,transparent);border:1px solid var(--line);border-radius:14px;padding:10px 12px;backdrop-filter:blur(6px)}
.stat b{font-family:var(--serif);font-size:30px;color:var(--gold);line-height:1}
.stat span{display:block;font-size:12.5px;font-weight:700}
.stat small{display:block;font-size:11px;color:var(--tx2)}
.cta{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}.hero .in{padding:16px}.stat b{font-size:24px}.hero{min-height:560px}}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-top:20px}
.two>*,.plan-lay>*,.lay>*,.map-lay>*,.ti-lay>*,.um-lay>*{min-width:0}
@media(max-width:880px){.two{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.fact{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:9px 11px}
.fact .k{font-size:10.5px;letter-spacing:1.3px;color:var(--tx2);text-transform:uppercase}
.fact .v{font-weight:700;font-size:13.5px;margin-top:2px}
.fact .v.g{color:var(--gold)}
.qz h3{font-family:var(--serif);font-size:24px;color:var(--gold)}
.qz .q{margin-top:12px}.qz .q>b{display:block;font-size:13px;margin-bottom:7px}
.qz .opts{display:flex;flex-wrap:wrap;gap:7px}
.qres{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.usp{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:12px}
.usp div{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.usp i{font-style:normal;font-size:21px;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--gold) 12%,transparent);display:grid;place-items:center}
.usp b{display:block;font-size:14px}.usp span{font-size:12px;color:var(--tx2)}

/* thư viện / dải ảnh */
.gal{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-top:10px}
.gal figure{flex:0 0 min(400px,80%);scroll-snap-align:start;cursor:zoom-in;margin:0}
.gal img{width:100%;height:240px;object-fit:cover;border-radius:12px;display:block;border:1px solid var(--line);background:#222}
.gal figcaption{font-size:12px;color:var(--tx2);margin-top:5px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
.pgrid figure{margin:0;cursor:zoom-in;position:relative}
.pgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;border:1px solid var(--line);background:#222}
.pgrid figcaption{font-size:12px;color:var(--tx2);margin-top:4px}
.pgrid .vtag{position:absolute;left:8px;top:8px;font-size:11px;font-weight:800;background:rgba(0,0,0,.65);color:#fff;border-radius:8px;padding:2px 8px}
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:12px}
.doc{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-decoration:none}
.doc:hover{border-color:var(--gold)}
.doc i{font-style:normal;width:42px;height:50px;border-radius:8px;background:color-mix(in srgb,var(--gold) 15%,transparent);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--gold);flex:0 0 42px}
.doc b{font-size:13.5px;display:block}.doc small{font-size:11.5px;color:var(--tx2)}

/* bản đồ */
.map-lay{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;margin-top:12px}
@media(max-width:900px){.map-lay{grid-template-columns:1fr}}
#map{height:min(62vh,520px);border-radius:16px;border:1px solid var(--line);overflow:hidden;background:#2a2620;position:relative}
#map .nomap{position:absolute;inset:0;display:grid;place-items:center;color:var(--tx2);font-size:13px;text-align:center;padding:20px}
.kn{display:flex;flex-direction:column;gap:7px}
.kn .it{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer}
.kn .it:hover{border-color:var(--gold)}
.kn .it b{font-size:13px}.kn .it span{font-weight:800;color:var(--gold);white-space:nowrap;font-size:13.5px}
.kn .it small{display:block;font-size:11px;color:var(--tx2);font-weight:500}
.kn h4{font-size:11.5px;letter-spacing:1.4px;color:var(--tx2);margin-top:6px}
.mk-da{display:flex;flex-direction:column;align-items:center}
.mk-da i{width:24px;height:24px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 35%,transparent),0 4px 10px rgba(0,0,0,.4)}
.mk-da span{margin-top:6px;font:800 12px 'Be Vietnam Pro',sans-serif;color:var(--ink);background:var(--gold);border:2px solid #fff;border-radius:8px;padding:2px 9px;white-space:nowrap}
.mk-pt{font:700 11px 'Be Vietnam Pro',sans-serif;color:#1f1a14;background:#fff;border:1px solid #d6c9b4;border-radius:8px;padding:3px 8px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer}
.mk-pt b{color:#9a6b1f}
.maplibregl-popup-content{font-family:'Be Vietnam Pro',sans-serif;font-size:12.5px;color:#1f1a14;border-radius:10px!important}

/* mặt bằng + bảng hàng */
.sp-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:6px 0 12px}
.plan-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.plan-top .lbl{font-size:12px;color:var(--tx2);font-weight:700}
.floors{display:flex;gap:5px;overflow-x:auto;padding-bottom:4px;max-width:100%}
.floors button{flex:0 0 auto;min-width:40px;padding:6px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:color-mix(in srgb,var(--tx) 85%,transparent);font-weight:800;font-size:12.5px;cursor:pointer}
.floors button.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.plan-lay{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start}
@media(max-width:1000px){.plan-lay{grid-template-columns:1fr}}
.planscroll{overflow-x:auto;border-radius:14px}
.planbox{position:relative;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.planbox img{display:block;width:100%;height:auto;user-select:none}
@media(max-width:700px){.planbox.wide{min-width:720px}}
.hs{position:absolute;border:2px solid transparent;border-radius:4px;cursor:pointer;padding:0;background:transparent;transition:background .15s,border-color .15s}
.hs:hover,.hs.sel{border-color:#9a6b1f;background:rgba(217,181,116,.36)}
.hs.sel{box-shadow:0 0 0 3px rgba(154,107,31,.5) inset}
.hs .lb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 clamp(8px,.95vw,12px) 'Be Vietnam Pro';color:#3b2a14;background:rgba(255,255,255,.9);border-radius:6px;padding:1px 6px;white-space:nowrap;pointer-events:none;opacity:0;transition:.15s}
.hs:hover .lb,.hs.sel .lb,.planbox.lbls .hs .lb{opacity:1}
.hs.dim{background:rgba(20,16,12,.5)}
.hs.hit{border-color:#1f7a4d;background:rgba(52,211,153,.24)}
.hs.st-sold{background:repeating-linear-gradient(45deg,rgba(160,40,50,.5) 0 6px,rgba(120,28,38,.4) 6px 12px)}
.hs.st-bk{background:rgba(255,153,0,.38)}
.hs.st-kth,.hs.st-na{background:rgba(90,90,100,.6)}
.plan-leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:11.5px;color:var(--tx2)}
.plan-leg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-2px}
.uside{position:sticky;top:72px}
.uside .empty{color:var(--tx2);font-size:13px;text-align:center;padding:26px 10px}
.uh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.uh h3{font-family:var(--serif);font-size:30px;color:var(--gold);line-height:1}
.urow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:13px}
.urow span{color:var(--tx2)}.urow b{text-align:right}
.ubd{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.uact{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.uact .btn{padding:8px 10px;font-size:12.5px}
.pricebox{margin-top:10px;border:1px dashed var(--line2);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--tx2)}
.pricebox b.p{display:block;font-family:var(--serif);font-size:28px;color:var(--gold)}
.uimg{background:#fff;border-radius:12px;overflow:hidden;cursor:zoom-in;margin:6px 0}
.uimg img{display:block;width:100%;max-height:260px;object-fit:contain}
.bh-search{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:14px;padding:6px 6px 6px 14px;margin-top:12px}
.bh-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--tx);font:600 15px 'Be Vietnam Pro',sans-serif;padding:8px 0}
.bh-search input::placeholder{color:color-mix(in srgb,var(--tx) 42%,transparent);font-weight:500}
.bh-ex{font-size:12px;color:var(--tx2);margin:7px 2px 10px}
.bh-ex a{color:var(--gold);cursor:pointer;text-decoration:underline dotted}
.bh-chips{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px}
.bh-g{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bh-g>small{font-size:10.5px;color:var(--mute);font-weight:800;letter-spacing:.05em}
@media(max-width:700px){.bh-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.bh-g{flex-wrap:nowrap}}
.bh-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:6px}
.bh-range{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;background:rgba(0,0,0,.25);border:1px solid var(--line2);border-radius:9px;padding:6px 12px;color:var(--gold)}
.bh-range input{width:170px;accent-color:var(--gold)}
.fsel{background:rgba(0,0,0,.3);color:var(--gold);border:1px solid var(--line2);border-radius:9px;padding:7px 10px;font:700 13px 'Be Vietnam Pro',sans-serif;max-width:100%}
@media(max-width:700px){.bh-range{width:100%}.bh-range input{flex:1;width:auto}}
.grid-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:12px;margin:6px 0 16px}
.gh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:10px}
.gh b{color:var(--gold)}.gh span{font-size:12px;color:var(--tx2)}
.gw{overflow-x:auto}
.grow{display:grid;gap:3px;margin-bottom:3px}
.grow .hd{font-size:10px;color:var(--mute);text-align:center;font-weight:800;white-space:nowrap;overflow:hidden}
.grow .fl{font-size:11px;color:var(--tx2);font-weight:800;display:flex;align-items:center}
.grow .tw{font-size:11px;color:var(--gold);font-weight:800;text-align:center}
.gu{height:26px;border-radius:5px;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#1d160c;cursor:pointer;position:relative;transition:transform .12s}
.gu:hover{transform:scale(1.15);z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.gu.dim{opacity:.18}.gu.hit{outline:2px solid #fff;outline-offset:-1px}
.gu.sel{outline:3px solid var(--gold);outline-offset:0}
.gu.none{background:rgba(255,255,255,.04)!important;cursor:default}
.gu.best::after{content:"★";position:absolute;top:-7px;right:-3px;color:var(--gold);font-size:12px;text-shadow:0 0 4px #000}
.gu.st-sold{background:repeating-linear-gradient(45deg,#5b2330 0 4px,#4a1c27 4px 8px)!important;color:#f9a8b4}
.gu.st-bk{background:#7a4a1c!important;color:#fed7aa}
.gu.st-kth,.gu.st-na{background:#3a3f52!important;color:#aab}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.uc{display:grid;grid-template-columns:86px 1fr;gap:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;padding:10px;cursor:pointer;transition:.15s}
.uc:hover{border-color:var(--line2);transform:translateY(-2px)}
.uc img{width:86px;height:86px;object-fit:cover;border-radius:10px;background:#fff}
.uc .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.uc .c{font-weight:900;color:var(--gold);font-size:16px}
.uc .p{font-weight:900;font-size:16px;color:var(--gold);white-space:nowrap}
.uc .p small{display:block;font-size:10.5px;color:var(--tx2);font-weight:600;text-align:right}
.uc .p.none{font-size:12.5px;color:var(--tx2)}
.uc .m{font-size:12.5px;color:color-mix(in srgb,var(--tx) 85%,transparent);margin-top:2px}
.uc .bd{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;align-items:center}
.uc.best{border-color:var(--ok)}
.uc.st-sold{border-left:3px solid #ff4d4d}.uc.st-bk{border-left:3px solid #ff9900}.uc.st-kth,.uc.st-na{border-left:3px solid #9a9a9a}
.morebtn{display:block;margin:12px auto 0}

/* so sánh */
.cmpbar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:58;display:none;align-items:center;gap:10px;background:color-mix(in srgb,var(--card) 96%,transparent);border:1px solid var(--gold);border-radius:999px;padding:7px 8px 7px 16px;box-shadow:0 10px 40px rgba(0,0,0,.5);white-space:nowrap}
.cmpbar.on{display:flex}.cmpbar b{color:var(--gold)}
.cmpbar .x{background:none;border:0;color:var(--tx2);cursor:pointer;font-size:12px;text-decoration:underline}
@media(max-width:1100px){.cmpbar{bottom:74px}}
table.cmp{width:100%;border-collapse:collapse;font-size:13px}
table.cmp th,table.cmp td{padding:8px 9px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;vertical-align:top}
table.cmp th{color:var(--tx2);font-weight:600;font-size:12px;white-space:nowrap}
table.cmp thead td{font-family:var(--serif);font-size:24px;color:var(--gold);font-weight:700}
table.cmp td.best{color:var(--ok);font-weight:800}
.cmpimg{width:100%;max-width:220px;aspect-ratio:4/3;object-fit:contain;border-radius:10px;background:#fff;cursor:pointer}

/* căn hộ / loại căn */
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px}
.type{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;transition:.15s}
.type:hover,.type.on{border-color:var(--gold);transform:translateY(-2px)}
.type .sw{width:26px;height:6px;border-radius:3px;margin-bottom:8px}
.type b{display:block;font-size:14px}
.type .dt{font-family:var(--serif);font-size:24px;color:var(--gold);line-height:1.15}
.type small{font-size:12px;color:var(--tx2)}
.lay{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:14px;align-items:start}
@media(max-width:900px){.lay{grid-template-columns:1fr}}
.lay .img{background:#fff;border-radius:16px;border:1px solid var(--line);cursor:zoom-in;overflow:hidden}
.lay .img img{display:block;width:100%}
.lay-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mini-plan{position:relative;background:#fff;border-radius:10px;overflow:hidden;margin-top:10px}
.mini-plan img{display:block;width:100%}
.mini-plan i{position:absolute;border:2px solid #c0392b;background:rgba(192,57,43,.25);border-radius:3px}

/* tiện ích */
.ti-lay{display:grid;grid-template-columns:270px 1fr;gap:18px;margin-top:14px;align-items:start}
@media(max-width:820px){.ti-lay{grid-template-columns:1fr}}
.ti-nav{display:flex;flex-direction:column;gap:5px;position:sticky;top:72px}
@media(max-width:820px){.ti-nav{position:static;flex-direction:row;overflow-x:auto}.ti-nav button{flex:0 0 auto}}
.ti-nav button{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--tx);border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer}
.ti-nav button:hover,.ti-nav button.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.ti-nav button b{display:block;font-family:var(--serif);font-size:19px;color:var(--gold);line-height:1.1}
.ti-nav button span{font-size:12px;color:var(--tx2)}
.tpanel h3{font-family:var(--serif);font-size:28px;color:var(--gold)}
.tpanel ul,.ul{list-style:none;margin:8px 0 12px}
.tpanel li,.ul li{padding:5px 0 5px 18px;position:relative}
.tpanel li::before,.ul li::before{content:'◆';position:absolute;left:0;color:var(--gold);font-size:10px;top:9px}
.tpics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tpics img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;cursor:zoom-in;display:block;background:#222}

/* pháp lý / tiến độ */
.tl{position:relative;margin-top:14px;padding-left:26px}
.tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--gold),color-mix(in srgb,var(--gold) 15%,transparent))}
.tl .e{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin-bottom:9px}
.tl .e::before{content:'';position:absolute;left:-24px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 22%,transparent)}
.tl .e.fut::before{background:transparent;border:2px solid var(--gold)}
.tl .e .d{font-size:12px;color:var(--gold);font-weight:800;letter-spacing:.5px}
.tl .e b{font-size:14.5px}
.tl .e .no{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:rgba(255,255,255,.06);border-radius:6px;padding:1px 7px;margin-left:6px}
.tl .e p{font-size:12.5px;color:var(--tx2);margin-top:3px}
.tl .e img{margin-top:8px;border-radius:10px;max-height:220px;cursor:zoom-in}

/* giá & tài chính */
.pa{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
.pa .card{cursor:pointer}.pa .card.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 9%,var(--card))}
.pa .card b{display:block;color:var(--gold);font-size:14.5px}
.pa .card p{font-size:12.5px;color:var(--tx2);margin:4px 0 0}
.frow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:9px 0}
.frow .l{font-size:12.5px;font-weight:700;color:var(--tx2);min-width:150px}
.frow input,.frow select{background:rgba(0,0,0,.3);border:1px solid var(--line2);border-radius:9px;padding:7px 10px;color:var(--gold);font:700 13.5px 'Be Vietnam Pro',sans-serif;outline:none;width:130px;text-align:right}
.frow select{text-align:left;width:auto;max-width:100%}
.frow input[type=date]{text-align:left;width:auto}
.frow input:focus{border-color:var(--gold)}
.frow .u{font-size:12px;color:var(--tx2)}
@media(max-width:620px){.frow .l{min-width:100%}}
.tbl{overflow-x:auto}
table.fin{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
table.fin th{color:var(--gold);text-align:left;padding:8px;font-size:12px;border-bottom:1px solid var(--line2);white-space:nowrap}
table.fin td{padding:8px;border-bottom:1px solid rgba(255,255,255,.07)}
table.fin td.n,table.fin th.n{text-align:right;white-space:nowrap}
table.fin tr.short td{color:var(--bad)}
table.fin tr.best td{background:rgba(124,217,146,.08)}
table.fin tr.tot td{font-weight:800;color:var(--gold);border-top:1px solid var(--line2)}
table.fin tr.sub td{color:var(--tx2);font-size:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:8px;margin-top:10px}
.kpi{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px}
.kpi span{font-size:11.5px;color:var(--tx2)}.kpi b{display:block;font-size:18px;color:var(--gold)}
.chart{width:100%;height:auto;display:block;margin-top:10px}
textarea.story{width:100%;min-height:260px;background:rgba(0,0,0,.3);color:var(--tx);border:1px solid var(--line2);border-radius:12px;padding:12px;font:13px/1.65 'Be Vietnam Pro',sans-serif;resize:vertical}
.linkout{display:flex;gap:8px;align-items:center;margin-top:8px}
.linkout input{flex:1;min-width:0;background:rgba(0,0,0,.3);border:1px solid var(--line2);border-radius:9px;padding:8px 10px;color:var(--tx);font:12.5px ui-monospace,Consolas,monospace}
.pricegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px}
.pricegrid .card b{font-family:var(--serif);font-size:24px;color:var(--gold);display:block;line-height:1.1}

/* phiếu tư vấn riêng (link gửi khách) */
.pr-banner{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 18%,transparent),color-mix(in srgb,var(--gold) 4%,transparent));border:1px solid var(--gold);border-radius:18px;padding:16px 18px;margin-bottom:18px}
.pr-banner h2{margin:0;font-size:28px}

/* hộp nổi */
.modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(4,3,2,.74);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:14px}
.modal.show{display:flex}
.mbox{width:min(900px,96vw);max-height:92vh;overflow:auto;background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:20px;box-shadow:0 24px 80px rgba(0,0,0,.6);position:relative}
.mx{position:absolute;right:12px;top:10px;background:rgba(255,255,255,.07);border:0;color:var(--tx2);width:34px;height:34px;border-radius:10px;font-size:16px;cursor:pointer;z-index:2}
.um-lay{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
@media(max-width:760px){.um-lay{grid-template-columns:1fr}.mbox{padding:15px}}
.ugal{position:relative;background:#fff;border-radius:12px;overflow:hidden}
.ugal img{display:block;width:100%;aspect-ratio:16/12;object-fit:contain;cursor:zoom-in}
.ugal .nv{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:46px;border:0;border-radius:8px;background:rgba(18,13,5,.55);color:var(--gold);font-size:26px;cursor:pointer}
.ugal .pv{left:6px}.ugal .nx{right:6px}
.ugal .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:11.5px;padding:4px 8px;text-align:center}
.flrow{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.flrow button{min-width:36px;padding:4px 6px;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:color-mix(in srgb,var(--tx) 85%,transparent);font-weight:800;font-size:11.5px;cursor:pointer}
.flrow button.on,.flrow button.on[class*=st-]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.flrow button.st-sold{border-color:#ff4d4d;color:#ff9b9b}.flrow button.st-bk{border-color:#FF9900;color:#FFB347}.flrow button.st-kth,.flrow button.st-na{border-color:#9a9a9a;color:#c8c8c8}
#lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.95);display:none;flex-direction:column}
#lb.on{display:flex}
#lb .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;color:var(--gold);font-weight:700;font-size:13px;gap:10px}
#lb .bar button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--gold);border-radius:8px;min-width:38px;height:36px;font-size:17px;cursor:pointer;font-weight:800}
#lb .stage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
#lb img,#lb video{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;transform-origin:center}
#lb .cap{text-align:center;color:#e9dcc5;font-size:12.5px;padding:8px 14px 14px;opacity:.85}
.gbox{position:relative;background:#FFFBF3;border:1px solid #E8D49A;border-radius:18px;padding:28px 26px;text-align:center;max-width:370px;width:100%;color:#3a3320}
.gbox h2{margin:0 0 6px;color:#9a6b1f;font-size:26px}
.gbox p{margin:0 0 16px;font-size:13px;color:#6b6247}
.gbox input{width:100%;font-size:15px;padding:12px 14px;margin-bottom:10px;border:1.5px solid #E8D49A;border-radius:11px;outline:none;font-family:inherit}
.gbox .go{width:100%;padding:13px;border:0;border-radius:11px;background:linear-gradient(135deg,#D4A73C,#9a6b1f);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.gbox .err{color:#C0392B;font-size:12px;min-height:16px;margin-bottom:6px;text-align:left}
.gbox .gx{position:absolute;top:12px;right:12px;width:30px;height:30px;background:rgba(0,0,0,.06);color:#6b6247;border-radius:8px;border:0;cursor:pointer}
.toast{position:fixed;left:50%;top:72px;transform:translateX(-50%);z-index:300;background:#1f7a4d;color:#fff;font-weight:700;font-size:13px;border-radius:999px;padding:8px 16px;display:none}
.toast.on{display:block}
.foot{margin-top:40px;border-top:1px solid var(--line);padding-top:16px;font-size:12px;color:var(--mute);line-height:1.7}

/* Ô chọn (select): nền đặc, chữ sáng, dòng đang chọn nổi rõ — Chrome Windows + điện thoại (góp ý vòng 1) */
select{color-scheme:dark;-webkit-appearance:menulist;appearance:auto}
.fsel,.frow select,select{background-color:var(--bg2)!important;color:#FFF3D6;border-color:var(--line2)}
select option,select optgroup{background-color:var(--bg2);color:#FFFFFF;font-weight:600}
select option:checked{background:var(--gold) linear-gradient(0deg,var(--gold),var(--gold));color:var(--ink);font-weight:800}
select option:hover,select option:focus{background:var(--card2) linear-gradient(0deg,var(--card2),var(--card2));color:#FFFFFF}
select option:disabled{color:var(--mute)}
select:focus{outline:2px solid var(--gold);outline-offset:1px}

/* chip chọn phương án thanh toán trong ô giá căn */
.pb-pa{margin:-2px 0 10px;text-align:left}
.pb-pa small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);margin-bottom:6px}
.pb-pa>div{display:flex;flex-wrap:wrap;gap:6px}
.pb-pa .chip{font-size:12px;padding:5px 10px;line-height:1.25;text-align:left}
.pb-pa .chip.on{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:800}
.pb-mt{font-size:11.5px;color:var(--tx2);margin-top:4px}
.pb-row{cursor:pointer;border-radius:6px;padding-left:6px;padding-right:6px}
.pb-row:hover{background:rgba(255,255,255,.05)}
.pb-row.on{background:rgba(255,255,255,.07);outline:1px solid var(--line2)}
.pb-row.on span{color:var(--gold);font-weight:700}

/* hồ sơ chủ đầu tư + pháp lý (bấm mở đầy đủ; thiếu → "đang cập nhật") */
.dcn{color:var(--warn);font-weight:700;font-style:italic}
.fact.bam{cursor:pointer;transition:border-color .15s,background .15s}
.fact.bam:hover,.fact.bam:focus{border-color:var(--line2);background:rgba(255,255,255,.06);outline:none}
.fact .k i{font-style:normal;color:var(--gold);margin-left:6px;font-size:13px}
.cdt-the{cursor:pointer;margin-top:14px}
.cdt-the:hover{border-color:var(--line2)}
.cdt-rows .urow{align-items:flex-start;gap:14px}
.cdt-rows .urow span{flex:0 0 38%;max-width:220px}
.cdt-rows .urow b{text-align:right;font-weight:600;line-height:1.5}
.hs-h{font-family:var(--serif);color:var(--gold);font-size:21px;margin:18px 0 6px}
.hs-p{font-size:13.5px;color:var(--tx);line-height:1.65}
.hs-ul{padding-left:18px;font-size:13.5px;line-height:1.7}
.hs-da{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.hs-da>div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.hs-da b{display:block;font-size:13.5px}.hs-da span{display:block;font-size:12px;color:var(--tx2);margin-top:2px}
.hs-anh{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:14px}
.hs-anh figure{margin:0;cursor:zoom-in;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.hs-anh img{display:block;width:100%;height:170px;object-fit:cover}.hs-anh figcaption{font-size:12px;color:var(--tx2);padding:6px 9px}
.hs-pl>div{display:grid;grid-template-columns:96px 1fr auto;gap:2px 12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:7px;cursor:pointer;background:rgba(255,255,255,.025)}
.hs-pl>div:hover{border-color:var(--line2);background:rgba(255,255,255,.05)}
.hs-pl .d{grid-row:span 2;font-size:12px;font-weight:800;color:var(--gold)}
.hs-pl b{font-size:14px}.hs-pl small{grid-column:2;font-size:12px;color:var(--tx2)}
.hs-pl i{grid-row:1/span 2;grid-column:3;font-style:normal;color:var(--gold);font-size:16px}
.plck{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px;margin-top:10px}
.plc{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:9px 11px;background:rgba(255,255,255,.025)}
.plc>i{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px}
.plc.ok>i{background:rgba(124,217,146,.18);color:var(--ok)}.plc.part>i{background:rgba(255,179,71,.18);color:var(--warn)}.plc.no>i{background:rgba(255,255,255,.07);color:var(--mute)}
.plc b{display:block;font-size:13px}.plc span{display:block;font-size:12px;color:var(--tx2);margin-top:2px;line-height:1.5}
.plc a{color:var(--gold);cursor:pointer;text-decoration:underline dotted;margin-right:4px}.plc em{font-style:normal;color:var(--warn)}
.tl .e.bam{cursor:pointer}.tl .e.bam:hover{border-color:var(--line2)}
.tl .e .pl-act{color:var(--gold);font-size:12px;margin-top:5px}
@media (max-width:640px){.cdt-rows .urow{flex-direction:column;gap:2px}.cdt-rows .urow span{max-width:none}.cdt-rows .urow b{text-align:left}.hs-pl>div{grid-template-columns:1fr auto}.hs-pl .d{grid-row:auto}.hs-pl small{grid-column:1}.hs-pl i{grid-row:1/span 3;grid-column:2}}

/* ===== 2 khối chuẩn Vị trí — chép từ bd_moi.css (bản đồ cũ anh duyệt 27/10) ===== */
.bd-wrap{margin-top:18px;background:rgba(255,255,255,.03);border:1px solid rgba(245,200,66,.18);border-radius:16px;padding:14px}
.bd-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:10px}
.bd-h b{font-size:17px;color:var(--gold)}.bd-h span{font-size:12.5px;opacity:.7}
.bd-lay{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.bd-map{position:relative;border-radius:12px;overflow:hidden;background:#fff;line-height:0}
.bd-map img{width:100%;display:block}
.bd-map svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bd-tg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.bd-tg button{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#C9CFE3;font:700 12px inherit;font-family:inherit;cursor:pointer}
.bd-tg button.on{border-color:var(--gold);color:var(--gold);background:rgba(245,200,66,.12)}
.bd-tg i{width:20px;height:5px;border-radius:3px;display:inline-block}
.bd-list{display:flex;flex-direction:column;gap:6px;max-height:560px;overflow:auto}
.bd-it{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:9px 11px;background:rgba(255,255,255,.03);cursor:pointer}
.bd-it.on{border-color:var(--gold);background:rgba(245,200,66,.08)}
.bd-it b{font-size:13.5px;display:block}
.bd-it .tt{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px;margin-right:4px;display:inline-block;margin-top:3px}
.tt.hc{background:rgba(196,140,90,.2);color:#e2b183}.tt.tc{background:rgba(251,146,60,.18);color:#FDBA74}.tt.qh{background:rgba(96,165,250,.16);color:#93C5FD}.tt.cn{background:rgba(255,255,255,.08);color:#C9CFE3}
.bd-it small{display:block;font-size:12px;opacity:.78;margin-top:3px;line-height:1.45}
.bd-src{font-size:11px;opacity:.6;margin-top:8px;line-height:1.5}
.bd-km{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.bd-km div{background:rgba(245,200,66,.08);border:1px solid rgba(245,200,66,.25);border-radius:10px;padding:7px 9px}
.bd-km b{color:var(--gold);font-size:16px;display:block}.bd-km span{font-size:11.5px;opacity:.8}
.bd-r{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s}
.bd-r.an{opacity:0}
.bd-r.sel{filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
.bd-lbl{position:absolute;transform:translate(-50%,-50%);font:800 11px/1.2 inherit;font-family:inherit;padding:3px 7px;border-radius:7px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:none;line-height:1.25}
.bd-lbl.an{display:none}
.bd-me{position:absolute;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 7px rgba(245,200,66,.35)}
@keyframes bdrun{to{stroke-dashoffset:-28}}
/* tiện ích */
.bd-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;cursor:pointer;line-height:1.2;z-index:2}
.bd-pin i{font-style:normal;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.bd-pin i span{transform:rotate(45deg);font-size:14px}
.bd-pin em{font-style:normal;margin-top:2px;font:800 10.5px inherit;font-family:inherit;color:#fff;background:rgba(7,12,31,.85);padding:1px 6px;border-radius:6px;white-space:nowrap}
.bd-pin.mo{opacity:.18}
.bd-pin.sel i{outline:3px solid var(--gold);outline-offset:2px}
.bd-ring{fill:rgba(245,200,66,.05);stroke:#F5C842;stroke-width:2.5;stroke-dasharray:8 7}
.bd-rl{position:absolute;transform:translate(-50%,-50%);font:700 11px inherit;font-family:inherit;color:#F5C842;background:rgba(7,12,31,.85);padding:1px 7px;border-radius:6px;line-height:1.3;pointer-events:none}
.bd-card{margin-top:8px;border:1px solid rgba(245,200,66,.35);border-radius:12px;padding:10px 12px;background:rgba(245,200,66,.06);font-size:13px;line-height:1.5}
.bd-card b{color:var(--gold)}
.bd-card .bd-xem{margin-top:6px;display:inline-block;padding:6px 12px;border-radius:999px;background:var(--gold);color:#1a1405;font-weight:800;font-size:12px;cursor:pointer;border:0;font-family:inherit}
/* kiểu gọn 27/10: mặc định sạch, bấm mới hiện */
.bd-h .bd-all{margin-left:auto;padding:6px 12px;border-radius:999px;border:1px solid rgba(245,200,66,.5);background:transparent;color:var(--gold);font:800 12px inherit;font-family:inherit;cursor:pointer}
.bd-h .bd-all.on{background:var(--gold);color:#1a1405}
.bd-r{opacity:.75}.bd-r.bd-n{opacity:.55}
.co-chon .bd-r{opacity:.22}.co-chon .bd-r.sel{opacity:1}
.bd-hit{fill:none;stroke:transparent;stroke-width:44;pointer-events:stroke;cursor:pointer}
.bd-r.sel:not(.bd-n){animation:bdrun 1.2s linear infinite}
.bd-phu.an{display:none}
.bd-lbl.me{background:var(--gold);color:#1a1405;transform:translate(-50%,-100%)}
.bd-ga{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:5px solid #E8590C;box-shadow:0 0 0 6px rgba(232,89,12,.3);cursor:pointer}
.bd-ga.an,.bd-pin.an{display:none}
#ti-duong.an{display:none}
.bd-leg{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11.5px;opacity:.8}
.bd-leg i{display:inline-block;width:18px;height:5px;border-radius:3px;margin-right:5px;vertical-align:middle}
.bd-it b i{display:inline-block;width:14px;height:5px;border-radius:3px;margin-right:7px;vertical-align:middle}
.bd-it .co-anh{font-size:11px;opacity:.75}
.bd-lay>div:last-child{display:flex;flex-direction:column}
#bd-ht-card,#ti-card{order:-1}
#bd-ht-card .bd-card,#ti-card .bd-card{margin:0 0 10px}
.bd-anh{margin:8px 0 2px}.bd-anh img{width:100%;max-height:300px;object-fit:cover;border-radius:10px;display:block}
.bd-anh figcaption{font-size:11px;opacity:.65;margin-top:4px;font-style:italic}
.bd-mo{margin:6px 0 0;padding-left:18px}.bd-mo li{margin:3px 0}
.bd-mo .ng{opacity:.65;font-size:11px;white-space:nowrap}.bd-mo .ng a{color:inherit;text-decoration:underline dotted}
.bd-map{scroll-margin-top:110px}
/* ảnh từng tiện ích: dải vuốt ngang + xem lớn */
.ti-strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:8px 0 2px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.ti-strip figure{flex:0 0 86%;margin:0;scroll-snap-align:start;cursor:zoom-in}
.ti-strip figure:only-child{flex-basis:100%}
.ti-strip img{width:100%;height:190px;object-fit:cover;border-radius:10px;display:block}
.ti-strip figcaption{font-size:10.5px;opacity:.65;margin-top:3px;font-style:italic}
.ti-hd{display:block;font-size:11px;opacity:.6}
#ti-lb{position:fixed;inset:0;z-index:9999;background:rgba(4,6,14,.94);display:none;align-items:center;justify-content:center}
#ti-lb.show{display:flex}
#ti-lb figure{margin:0;max-width:92vw;text-align:center}
#ti-lb img{max-width:92vw;max-height:80vh;border-radius:10px;display:block;margin:0 auto}
#ti-lb figcaption{color:#e5e7eb;font-size:13px;margin-top:8px}
#ti-lb button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:999px;cursor:pointer;font:700 26px/1 inherit;font-family:inherit}
#ti-lb .x{top:14px;right:14px;width:42px;height:42px;font-size:20px}
#ti-lb .nv{top:50%;transform:translateY(-50%);width:46px;height:46px}
#ti-lb .tr{left:10px}#ti-lb .ph{right:10px}
#ti-lb .nv[hidden]{display:none}
@media(min-width:901px){.bd-lay>div:first-child{position:sticky;top:76px}}
@media(max-width:900px){.bd-lbl.phu{display:none}.bd-anh img{max-height:240px}.bd-ga{width:14px;height:14px;border-width:4px;box-shadow:0 0 0 4px rgba(232,89,12,.3)}.bd-lay{grid-template-columns:1fr}.bd-list{max-height:none}.bd-pin i{width:24px;height:24px}.bd-pin i span{font-size:11px}.bd-pin em{font-size:9px}.bd-lbl{font-size:9.5px;padding:2px 5px}}

.bd-wrap{margin-top:22px}
.bd-geo{height:min(62vh,520px);background:#e9e5dc;line-height:normal}
.bd-geo .nomap{height:100%;display:grid;place-items:center;color:#5b5346;font-size:13px}
.bd-geo .maplibregl-canvas{outline:none}
.mt-khung{height:min(78vh,660px);border-radius:16px;overflow:hidden;border:1px solid var(--line2);background:#f3f4f6;margin-top:10px}
.mt-khung iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:700px){.mt-khung{height:calc(100svh - 150px);min-height:460px}}
/* tab Thấp tầng */
.tt-stats{margin:14px 0}
.tt-stats .stat b{font-size:24px}
.tt-sd figure img{aspect-ratio:16/10;object-fit:cover}

/* bản đồ quy hoạch bấm được */
.bdb-nut{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.bdb-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.bdb-wrap{max-height:68vh;overflow:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
.bdb-box{position:relative;width:100%;line-height:0}
.bdb-box img{width:100%;display:block;user-select:none}
.bdb-hs{position:absolute;border:2px dashed rgba(37,99,235,.85);background:rgba(37,99,235,.06);border-radius:6px;cursor:pointer;padding:0}
.bdb-hs.go{border:3px solid #ff4d4d;background:rgba(255,77,77,.10)}
.bdb-hs:hover,.bdb-hs.on{background:rgba(245,200,66,.28);border-color:#F5C842}
#bdb-the .bd-card{margin-top:10px}
.frow .chips{display:inline-flex;flex-wrap:wrap;gap:6px}
#f-lai{flex-wrap:wrap;gap:6px 8px}

.story-box{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.03);font-size:13px;line-height:1.65}
.story-box p+p{margin-top:6px}

/* mục "Công cụ AI miễn phí" (trang /cong-cu/ do tab web quản lý) */
.aibtn{display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border-radius:999px;border:1px solid var(--gold);color:var(--gold);font-weight:800;font-size:12.5px;text-decoration:none;white-space:nowrap}
.aibtn:hover{background:var(--gold);color:var(--ink)}
@media(max-width:1100px){.aibtn{margin-left:auto}.aibtn+.callbtn{margin-left:0}}
@media(max-width:640px){.aibtn .ai-t{display:none}.aibtn{padding:7px 10px}}
@media(max-width:1560px){.ai-gon .ai-t{display:none}.ai-gon{padding:7px 10px}}

/* tiến độ đóng tiền */
.td-h{font-family:var(--serif);font-size:21px;color:var(--gold);margin:10px 0 6px;font-weight:600}
.td-h em{color:var(--tx)}
table.fin.td td{vertical-align:top}
table.fin.td tr.nh td{background:rgba(255,255,255,.025)}
.td-nut{margin-top:12px;width:100%;justify-content:center}
.u-td.mo{margin-top:10px;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.02)}
.u-td table.fin{font-size:12.5px}

/* tiến độ đóng tiền gọn trong hộp chi tiết căn (mở sẵn dưới ô giá) */
.u-td.mo{margin-top:12px;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.02)}
.u-td .td-h{font-size:19px;margin:2px 0 8px}
.tdg{display:flex;flex-direction:column}
.tdr{display:grid;grid-template-columns:1fr auto auto;gap:4px 12px;align-items:center;padding:7px 4px;border-bottom:1px dashed var(--line)}
.tdr .a b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.tdr .a small{display:block;font-size:11.5px;color:var(--tx2);margin-top:1px}
.tdr .p{font-size:12.5px;font-weight:800;color:var(--gold);text-align:right;white-space:nowrap}
.tdr .t{font-size:13.5px;font-weight:800;text-align:right;white-space:nowrap}
.tdr .t small{display:block;font-size:10.5px;font-weight:500;color:var(--mute)}
.tdr.nh{background:rgba(79,163,227,.09);border-radius:8px}
.tdr.nh .a b,.tdr.nh .t{color:#9CC9EE}
.tdr.tong{border-bottom:0;border-top:1px solid var(--line2);margin-top:2px}
.tdr.tong .t{color:var(--gold);font-size:15px}
#f-td{margin-top:14px}
/* video pháp lý + dãy ảnh giấy tờ trong video (trang Pháp lý & tiến độ) */
.plv{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);grid-template-areas:"vid txt" "day day" "goi goi";gap:14px 22px;margin:14px 0 8px}
.plv-vid{grid-area:vid}.plv-vid video{display:block;width:100%;aspect-ratio:9/16;max-height:76vh;background:#000;border-radius:14px;object-fit:contain}
.plv-txt{grid-area:txt;min-width:0}.plv-h{font-family:var(--serif);font-size:30px;color:var(--gold);margin:2px 0 6px;line-height:1.15}
.plv-mo{color:var(--tx2);font-size:14px;line-height:1.55;margin:0 0 10px}.plv-k{font-size:12px;font-weight:800;letter-spacing:.6px;color:var(--gold);text-transform:uppercase;margin-bottom:4px}
.plv-ds{margin:0;padding:0;list-style:none;counter-reset:pv;display:grid;gap:5px}
.plv-ds li{counter-increment:pv;display:grid;grid-template-columns:24px 1fr;column-gap:8px;padding:6px 9px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);cursor:pointer;font-size:13px;line-height:1.4}
.plv-ds li::before{content:counter(pv);width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold);font-weight:800;font-size:11.5px;display:grid;place-items:center}
.plv-ds li:hover{border-color:var(--line2)}.plv-ds li b{color:var(--gold)}.plv-ds li span{display:block;color:var(--tx2);font-size:12.5px}
.plv-day{grid-area:day;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px;scrollbar-width:thin;scrollbar-color:var(--gold2) transparent}
.plv-day figure{flex:0 0 112px;margin:0;cursor:zoom-in;position:relative;scroll-snap-align:start}
.plv-day img{display:block;width:112px;height:150px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line2);background:#fff;transition:transform .15s}
.plv-day figure:hover img,.plv-day figure:focus-visible img{transform:translateY(-3px);border-color:var(--gold)}
.plv-day figcaption{font-size:11px;line-height:1.3;margin-top:5px;color:var(--tx2)}.plv-day figcaption b{display:block;color:var(--tx);font-size:11.5px;overflow-wrap:anywhere}
.plv-n{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.72);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 7px}
.plv-goi{grid-area:goi;font-size:12px;color:var(--mute);margin-top:-6px}
@media(max-width:760px){.plv{grid-template-columns:1fr;grid-template-areas:"vid" "day" "goi" "txt";gap:12px}.plv-vid video{max-width:400px;max-height:none;margin:0 auto}.plv-h{font-size:26px}}
.pl-anh{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.pl-anh figure{margin:0;width:128px;cursor:zoom-in}
.pl-anh img{display:block;width:128px;height:170px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line2);background:#fff}
.pl-anh figcaption{font-size:11px;color:var(--tx2);margin-top:4px;line-height:1.3}
/* sơ đồ thấp tầng bấm từng lô (tab Thấp tầng) */
.ttv{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#0c0c0c;touch-action:pan-y;user-select:none;-webkit-user-select:none;width:100%;height:300px;cursor:default}
.ttv.zoomed{touch-action:none;cursor:grab}
.ttv-in{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;--z:1}
.ttv-in.anim{transition:transform .3s ease}
.ttv-in img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.ttv-in svg{position:absolute;inset:0;width:100%;height:100%}
.ttv-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 6px}
.ttv-ctl{display:flex;gap:6px;flex:0 0 auto}
.ttv-ctl button{width:38px;height:36px;border-radius:10px;border:1px solid var(--line2);background:var(--card);color:var(--gold);font-size:18px;font-weight:800;cursor:pointer}
.ttv-goi{font-size:13px;color:var(--tx2);min-width:0}
.mini-lo{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:10px;border:1px solid var(--line);margin-top:10px;background:#111}
.mini-lo>div{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.mini-lo img{display:block;width:100%;height:100%;object-fit:fill}
.mini-lo svg{position:absolute;inset:0;width:100%;height:100%}.mini-lo polygon{fill:rgba(245,200,66,.5);stroke:#fff;stroke-width:calc(2px / var(--z, 1));vector-effect:non-scaling-stroke}
@media(max-width:760px){.ttv-ctl button{width:40px;height:40px}.ttv-goi{font-size:12px}}
/* ô thông tin lô = vùng bấm; khung phóng bằng CSS transform nên viền / nét đứt chia lại cho --z để luôn mảnh */
.ttv svg .hsb{fill:transparent;stroke:rgba(245,200,66,.8);stroke-width:calc(1.2px / var(--z));vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .15s}
.ttv svg .hsb:hover{fill:rgba(245,200,66,.16);stroke:#F5C842;stroke-width:calc(2.4px / var(--z))}
.ttv svg .hsb.sel{fill:rgba(245,200,66,.2);stroke:#fff;stroke-width:calc(2.8px / var(--z))}
.ttv svg .hsb.st-sold,.ttv svg .hsb.st-bk,.ttv svg .hsb.st-kth{fill:rgba(20,20,24,.62);stroke:#8a8a8a;stroke-dasharray:calc(4px / var(--z)) calc(3px / var(--z))}
.ttv svg .lo{display:none;pointer-events:none;vector-effect:non-scaling-stroke}.ttv svg .lo.sel{display:inline;fill:rgba(245,200,66,.55);stroke:#fff;stroke-width:calc(2px / var(--z))}