/*
Theme Name: Huy Luong BDS
Description: Theme bất động sản - Huy Lương (phong cách teal + vàng)
Version: 2.0
Text Domain: hlbds
*/
:root{--teal:#775622;--teal2:#60451d;--ink:#2b1d10;--bg:#fdfaf4;--mist:#f3e9d2;--mu:#86745c;--gold1:#d0bd95;--gold2:#b89143;--gold3:#8a6a2f;--red:#e4572e;--w:#fff}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:15px;padding-bottom:78px}
h1,h2,h3,.logo{font-family:"Be Vietnam Pro",system-ui,sans-serif}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.gold{background:linear-gradient(180deg,#c9a45a,#b89143 48%,#8a6a2f);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar{background:linear-gradient(90deg,#60451d,#775622);color:#f5e6c4;font-size:13px;text-align:center;padding:7px 12px}
.agent{background:#fff;border-bottom:1px solid #ece3d0}.agent .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.ag{display:flex;align-items:center;gap:12px}.ag i{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--gold2));display:grid;place-items:center;color:#fff;font:800 17px 'Be Vietnam Pro';font-style:normal}
.ag b{display:block;font:700 15px 'Be Vietnam Pro'}.ag span{color:var(--mu);font-size:13px}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:11px 24px;border-radius:8px;font-weight:700;border:0;cursor:pointer;font-size:15px;font-family:inherit;transition:.2s}
.btn:hover{background:var(--teal2)}
.btn.gd{background:linear-gradient(180deg,#f3d58a,#d4a64a 55%,#b8862e);color:#3b2a08;box-shadow:0 6px 18px rgba(184,134,46,.35)}
.btn.gl{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.55);color:#fff;border-radius:999px;font-size:13px;letter-spacing:.6px;text-transform:uppercase}
.hdr{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #ece3d0}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{font-weight:800;font-size:22px;color:var(--teal);letter-spacing:-.3px}.logo small{font:500 11px "Be Vietnam Pro";color:var(--mu);letter-spacing:.8px;margin-left:8px}
.nav{display:flex;gap:6px;align-items:center}
.nav a{padding:7px 14px;border-radius:999px;font-weight:500;color:var(--mu)}
.nav a:hover,.nav a.on{background:var(--mist);color:var(--ink)}
.hero{background:linear-gradient(180deg,rgba(54,36,14,.55),rgba(43,29,16,.82)),url(https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=1800&q=70) center/cover;color:#fff;text-align:center;padding:84px 0 70px}
.hero .eb{font:600 13px 'Be Vietnam Pro';letter-spacing:2px;text-transform:uppercase;opacity:.9;margin-bottom:12px}
.hero h1{font-size:clamp(30px,5.2vw,54px);line-height:1.12;font-weight:800;margin-bottom:10px;background:linear-gradient(180deg,#fff6d8,#f3d58a 38%,#d4a64a 62%,#f6de9a 82%,#b8862e);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.hero .sub{font:italic 700 clamp(18px,2.6vw,26px) 'Be Vietnam Pro';margin-bottom:16px}
.hero p{max-width:640px;margin:0 auto 26px;opacity:.95;font-size:16px}
.hero .pills{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.hero .big{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:26px 20px}
.stats div{background:#fff;border-radius:12px;padding:16px;text-align:center;box-shadow:0 2px 10px rgba(90,60,38,.08)}
.stats b{display:block;font:800 26px 'Be Vietnam Pro';color:var(--teal)}.stats span{font-size:13px;color:var(--mu)}
section{padding:56px 0}
h2.t{font-size:clamp(22px,3vw,30px);font-weight:800;text-transform:uppercase;margin-bottom:6px}
.lead{color:var(--mu);margin-bottom:26px;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(90,60,38,.09);transition:.25s;display:block;border:1px solid #eee5d3}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(90,60,38,.18)}
.card .im{aspect-ratio:16/10;background:linear-gradient(135deg,#e8d5b0,#f7efdc) center/cover;position:relative}
.card .tag{position:absolute;top:12px;left:12px;background:var(--teal);color:#fff;font:700 11px 'Be Vietnam Pro';letter-spacing:.4px;padding:5px 10px;border-radius:6px;text-transform:uppercase}
.card .tag.hot{background:var(--red)}.card .tag.new{background:#d98a1f}
.card .bd{padding:16px 18px 18px}.card h3{font-size:18px;font-weight:800;text-transform:uppercase;color:#5a3c26;margin-bottom:6px}
.meta{color:var(--mu);font-size:14px;margin-bottom:6px}.price{color:var(--gold2);font-weight:800;font-size:16px;margin-bottom:8px}
.more{color:var(--teal);font-weight:700;font-size:14px}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why div{background:#fff;padding:26px;border-radius:12px;border:1px solid #eee5d3;border-top:4px solid var(--teal)}
.why h3{margin-bottom:8px;font-size:17px}.why p{color:var(--mu)}
.cta{background:linear-gradient(135deg,#775622,#3a2a12);color:#fff}
.cta .wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.cta h2{font-size:32px;margin-bottom:10px}.cta p{opacity:.9}
.frm{background:#fff;color:var(--ink);padding:26px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.frm input,.frm textarea,.frm select{width:100%;padding:12px 14px;border:1px solid #dccfb4;border-radius:8px;margin-bottom:12px;font:inherit;background:#fffdf8}
.frm .btn{width:100%;padding:13px}.ok{background:#e3f6ea;color:#14632f;padding:12px;border-radius:8px;margin-bottom:12px;font-weight:600}
.ftr{background:linear-gradient(135deg,#60451d,#775622);color:#eadfc6;padding:40px 0 22px;font-size:14px}
.ftr .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}.ftr h4{color:#fff;margin-bottom:8px;font-family:'Be Vietnam Pro'}
.copy{text-align:center;margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:12.5px}
.pg{padding:50px 20px;max-width:820px;margin:0 auto}.pg h1{margin-bottom:16px;font-size:32px;font-weight:800}
.pg .ct p{margin-bottom:16px}.pg .ct img{border-radius:10px;margin:18px 0}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid #e8dcc2;box-shadow:0 -4px 18px rgba(90,60,38,.12);display:flex;gap:10px;justify-content:center;padding:12px 16px}
.bar a{padding:12px 24px;border-radius:8px;font-weight:700;color:#fff;background:var(--teal);font-size:15px;white-space:nowrap}.bar a+a{background:var(--ink)}
@media(max-width:860px){.grid,.why{grid-template-columns:1fr}.stats .wrap{grid-template-columns:1fr 1fr}.cta .wrap{grid-template-columns:1fr}.nav a:not(.on):not(.cta-n){display:none}.agent .btn{display:none}.logo small{display:none}section{padding:40px 0}.hero{padding:56px 0 48px}.bar a{flex:1;text-align:center;padding:12px 8px}}

.card .tag.hot{background:var(--red)}.card .tag.star{background:linear-gradient(180deg,#f3d58a,#b8862e);color:#3b2a08}
.pg .ct h2{font-size:21px;font-weight:800;color:var(--teal);margin:26px 0 10px;text-transform:uppercase}
.pg .ct ul{margin:0 0 16px 22px}.pg .ct li{margin-bottom:6px}
.pg .ct table{width:100%;border-collapse:collapse;margin:12px 0 18px;background:#fff;border-radius:10px;overflow:hidden;font-size:14.5px}
.pg .ct th{background:var(--teal);color:#fff;text-align:left;padding:10px 12px}.pg .ct td{padding:10px 12px;border-bottom:1px solid #eee5d3}
.topbar b{color:#fff}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.gal img{border-radius:10px;width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.gal{grid-template-columns:1fr}}
.ag .av{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--gold1)}
.about .wrap{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:center}
.ab-img img{border-radius:16px;width:100%;height:auto;box-shadow:0 14px 34px rgba(90,60,38,.25)}
.ab-tx p{margin-bottom:10px}
@media(max-width:860px){.about .wrap{grid-template-columns:1fr}.ab-img{max-width:300px;margin:0 auto}}
.nav a{white-space:nowrap}
@media(max-width:1100px){.nav a{padding:7px 10px;font-size:14px}}
@media(max-width:860px){.hdr .wrap{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}.nav{width:100%;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.nav a:not(.on):not(.cta-n){display:inline-block}.nav a.cta-n{display:inline-block}}
.empty{background:#fff;border:1px dashed #d8c79c;border-radius:14px;padding:30px;text-align:center}.empty p{color:var(--mu);margin:8px 0 16px}
.qc{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}
.flt{background:#fff;border:1px solid #eee5d3;border-radius:12px;padding:18px;position:sticky;top:76px}.flt h3{margin-bottom:12px;font-size:17px}
.flt label{display:block;font:600 11.5px 'Be Vietnam Pro';letter-spacing:.5px;text-transform:uppercase;color:var(--mu);margin-bottom:10px}
.flt input:not([type=checkbox]),.flt select{display:block;width:100%;margin-top:4px;padding:10px 11px;border:1px solid #dccfb4;border-radius:8px;font:500 14px 'Be Vietnam Pro';background:#fffdf8;color:var(--ink);text-transform:none;letter-spacing:0}
.flt .ck{display:flex;gap:8px;align-items:center;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink)}
.qc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px}.qc-top select{padding:7px 10px;border:1px solid #dccfb4;border-radius:8px;background:#fffdf8;font:inherit}
.qgrid{grid-template-columns:repeat(3,1fr)}.qcard .im .ph{position:absolute;inset:0;display:grid;place-items:center;font:800 24px 'Be Vietnam Pro';color:#a68b5a}
.qcard h3{text-transform:none;font-size:19px}.qcard .spec{font-size:13.5px;margin-bottom:6px}.qcard .tg span{display:inline-block;background:var(--mist);border-radius:6px;padding:2px 8px;font-size:12.5px;margin:0 6px 6px 0}
.qcard .pr{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed #e4d8bb;padding-top:8px;margin:6px 0}.qcard .pr b{font:800 19px 'Be Vietnam Pro';color:var(--teal)}.qcard .pr small{color:var(--mu);font-size:12px}
@media(max-width:1000px){.qgrid{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.qc{grid-template-columns:1fr}.flt{position:static}.qgrid{grid-template-columns:1fr}}
/* ===== Điện thoại ===== */
@media(max-width:860px){
 body{font-size:15px;padding-bottom:70px}
 .topbar{display:none}
 .agent .wrap{padding-top:8px;padding-bottom:8px}.ag i,.ag .av{width:40px;height:40px}.ag b{font-size:14px}.ag span{font-size:12px}
 .hdr{position:static}
 .hdr .wrap{height:auto;padding-top:10px;padding-bottom:10px;display:block}
 .logo{display:block;margin-bottom:8px;font-size:21px}
 .nav{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;overflow:visible}
 .nav a,.nav a:not(.on):not(.cta-n){display:flex!important;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.2;padding:9px 6px;font-size:13px;border-radius:10px;background:#f6efdf;color:var(--ink);min-height:40px}
 .nav a.on{background:var(--teal);color:#fff}
 .hero{padding:44px 0 40px}.hero h1{font-size:28px;line-height:1.18}.hero .sub{font-size:17px}.hero p{font-size:15px}
 .hero .pills,.hero .big{gap:10px}.btn{padding:12px 20px}
 h2.t{font-size:22px}.lead{font-size:14.5px}
 .stats .wrap{padding:18px 16px}.stats b{font-size:22px}
 .wrap{padding:0 16px}.pg{padding:30px 16px}.pg h1{font-size:25px}
 .cta h2{font-size:25px}.cta .wrap{gap:24px}.frm{padding:20px}
 .card h3{font-size:16.5px}.pg .ct table{font-size:13px;display:block;overflow-x:auto;white-space:nowrap}
 .about .wrap{gap:20px}
 .bar{padding:10px 12px;gap:8px}.bar a{font-size:14px;padding:12px 6px}
 .qc{gap:14px}.flt{padding:14px}.qgrid{grid-template-columns:1fr}
 .ftr .wrap{flex-direction:column}
}
.flt h3 span{display:none}
@media(max-width:860px){.flt h3{margin:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.flt h3 span{display:inline}.flt:not(.open)>*:not(h3){display:none}.flt.open h3{margin-bottom:12px}.flt.open h3 span{transform:rotate(180deg)}}
@media(max-width:860px){.pg .ct table{display:table;white-space:normal;font-size:12.5px;table-layout:fixed;width:100%}.pg .ct th,.pg .ct td{padding:8px 6px;word-break:break-word}.pg .ct th:last-child,.pg .ct td:last-child{width:27%;font-weight:700}}