/*
Theme Name: Canhosg
Theme URI: https://canhosg.com
Author: canhosg.com
Description: Giao diện cổng căn hộ TP.HCM cho canhosg.com — mobile-first, tối ưu Core Web Vitals. Phương án thiết kế A (vàng hổ phách + xanh rêu).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: canhosg
*/

/* ============ TOKENS ============ */
:root{
  --paper:#F1F5F1; --surface:#FFFFFF; --surface-2:#F7FAF7;
  --ink:#0C2623; --body:#33433E; --muted:#65756E; --line:#E1E8E1;
  --gold:#E0A11E; --gold-deep:#9A6C11; --gold-soft:#FBF1DC;
  --jade:#16665C; --jade-soft:#E4F1EE;
  --skyA:#0C2623; --skyB:#134039;
  --shadow:0 1px 2px rgba(12,38,35,.05), 0 8px 24px -12px rgba(12,38,35,.18);
  --shadow-lg:0 24px 60px -24px rgba(12,38,35,.32);
  --r:16px; --r-sm:11px; --r-pill:999px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:1160px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#08150F; --surface:#0F211B; --surface-2:#0B1A15;
    --ink:#E9F1EB; --body:#BDCAC3; --muted:#849289; --line:#1E2F28;
    --gold:#E9B441; --gold-deep:#E9B441; --gold-soft:#231C0C;
    --jade:#54B7A9; --jade-soft:#12241F;
    --skyA:#04100B; --skyB:#0B2019;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
    --shadow-lg:0 30px 70px -28px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; padding-bottom:76px;
}
@media (min-width:1024px){ body{padding-bottom:0} }
h1,h2,h3{color:var(--ink); margin:0; text-wrap:balance; line-height:1.12; letter-spacing:-.02em; font-weight:800}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:2px; border-radius:6px}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 18px}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ============ HEADER ============ */
.site-header{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:14px; height:60px}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; color:var(--ink); font-size:1.15rem; letter-spacing:-.03em}
.brand .logomark{width:30px; height:30px; flex:0 0 auto}
.brand b{color:var(--gold-deep)}
.brand small{color:var(--muted); font-weight:600; font-size:.7rem; letter-spacing:0; display:block; line-height:1}
nav.top{display:none; margin-left:8px; gap:22px}
@media (min-width:1024px){ nav.top{display:flex} }
nav.top a{font-size:.94rem; font-weight:600; color:var(--body); padding:6px 0}
nav.top a:hover{color:var(--ink)}
nav.top ul{list-style:none; display:flex; gap:22px; margin:0; padding:0}
.spacer{flex:1}
.loc{display:none; align-items:center; gap:6px; font-size:.85rem; font-weight:600; color:var(--body);
  background:var(--surface); border:1px solid var(--line); padding:7px 12px; border-radius:var(--r-pill)}
@media (min-width:640px){ .loc{display:inline-flex} }
.btn{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.9rem;
  border-radius:var(--r-pill); padding:10px 16px; border:1px solid transparent; white-space:nowrap; transition:transform .12s ease, filter .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:var(--gold); color:#231708; box-shadow:0 6px 16px -8px rgba(224,161,30,.8)}
.btn-gold:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line)}

/* ============ HERO ============ */
.hero{position:relative; overflow:hidden}
.hero-sky{position:absolute; inset:auto 0 0 0; width:100%; height:min(46vw,300px); z-index:0; opacity:.9}
.hero-inner{position:relative; z-index:1; padding:34px 0 26px}
@media (min-width:768px){ .hero-inner{padding:60px 0 44px} }
.hero-grid{display:grid; gap:26px}
@media (min-width:960px){ .hero-grid{grid-template-columns:1.05fr .95fr; align-items:center; gap:44px} }
.hero h1{font-size:clamp(2.05rem,6.4vw,3.5rem)}
.hero h1 .u{color:var(--gold-deep); white-space:nowrap}
.hero-lead{margin-top:16px; font-size:clamp(1rem,2.5vw,1.16rem); color:var(--body); max-width:34ch}
.hero-stats{display:flex; flex-wrap:wrap; gap:22px 30px; margin-top:26px}
.stat b{display:block; color:var(--ink); font-size:1.5rem; font-weight:800; letter-spacing:-.02em}
.stat span{font-size:.8rem; color:var(--muted); font-weight:600}

/* ---- SEARCH CARD ---- */
.search{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:8px; box-shadow:var(--shadow-lg)}
.tabs{display:flex; gap:4px; padding:4px; background:var(--surface-2); border-radius:14px; margin-bottom:8px}
.tab{flex:1; border:0; background:transparent; color:var(--muted); font-weight:700; font-size:.9rem; padding:10px 6px; border-radius:10px; transition:all .16s ease; text-align:center; text-decoration:none}
.tab[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.fields{display:grid; gap:2px; background:var(--surface-2); border-radius:14px; overflow:hidden}
@media (min-width:560px){ .fields{grid-template-columns:1fr 1fr} }
.field{background:var(--surface); padding:10px 14px; display:flex; flex-direction:column; gap:2px; min-width:0}
.field label{font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.field select{border:0; background:transparent; color:var(--ink); font-weight:600; font-size:.98rem; font-family:inherit; padding:2px 0; width:100%; appearance:none; cursor:pointer}
.search-go{margin-top:8px}
.search-go .btn{width:100%; justify-content:center; padding:14px; font-size:1rem}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.chip{font-size:.8rem; font-weight:600; color:var(--body); background:var(--surface); border:1px solid var(--line); padding:6px 12px; border-radius:var(--r-pill)}
.chip:hover{border-color:var(--gold); color:var(--ink)}

/* ============ SECTIONS ============ */
section.blk{padding:38px 0}
@media (min-width:768px){ section.blk{padding:52px 0} }
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px}
.head h2{font-size:clamp(1.35rem,3.6vw,1.9rem)}
.head p{color:var(--muted); font-size:.92rem; margin-top:4px}
.seeall{font-size:.88rem; font-weight:700; color:var(--gold-deep); white-space:nowrap; display:inline-flex; align-items:center; gap:5px}
.seeall:hover{gap:8px}

/* ---- LISTING SCROLLER / GRID ---- */
.scroller{display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 18px 12px; margin:0 -18px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
@media (min-width:560px){ .scroller{grid-auto-columns:46%} }
@media (min-width:960px){ .scroller{grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto; overflow:visible; margin:0; padding:0} }
.grid3{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:560px){ .grid3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .grid3{grid-template-columns:repeat(3,1fr)} }
.card{scroll-snap-align:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .16s ease, box-shadow .16s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.photo{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2)}
.photo img{width:100%; height:100%; object-fit:cover}
.photo .sil{position:absolute; inset:0; width:100%; height:100%}
.photo .tag{position:absolute; top:10px; left:10px; font-size:.72rem; font-weight:800; letter-spacing:.02em; padding:5px 10px; border-radius:var(--r-pill); color:#fff}
.tag.sale{background:var(--gold); color:#231708}
.tag.rent{background:var(--jade)}
.fav{position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.9); color:#0C2623; display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.18)}
.fav[aria-pressed="true"]{color:#E0491E}
.fav[aria-pressed="true"] svg{fill:currentColor}
.photo .cnt{position:absolute; bottom:8px; right:8px; font-size:.7rem; font-weight:700; color:#fff; background:rgba(12,38,35,.62); padding:3px 8px; border-radius:var(--r-pill); display:flex; align-items:center; gap:4px}
.card-body{padding:13px 14px 15px; display:flex; flex-direction:column; gap:8px; flex:1}
.price{font-size:1.28rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; display:flex; align-items:baseline; gap:6px}
.price small{font-size:.78rem; font-weight:600; color:var(--muted)}
.card h3{font-size:1rem; font-weight:700; line-height:1.3}
.card h3 a{color:var(--ink)}
.card .addr{display:flex; align-items:center; gap:5px; font-size:.84rem; color:var(--muted)}
.specs{display:flex; gap:14px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line); font-size:.82rem; color:var(--body); font-weight:600; flex-wrap:wrap}
.specs span{display:inline-flex; align-items:center; gap:5px}
.specs svg{color:var(--muted)}
.verified{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; color:var(--jade)}

/* ---- DISTRICT GRID ---- */
.districts{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (min-width:560px){ .districts{grid-template-columns:repeat(3,1fr)} }
@media (min-width:960px){ .districts{grid-template-columns:repeat(6,1fr)} }
.dist{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:1/1.05; border:1px solid var(--line); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:12px; box-shadow:var(--shadow)}
.dist .sil{position:absolute; inset:0}
.dist .dz{position:relative; z-index:1}
.dist b{font-size:1rem; font-weight:800; letter-spacing:-.01em; display:block}
.dist span{font-size:.75rem; opacity:.9; font-weight:600}
.dist:hover{transform:translateY(-2px); transition:transform .16s ease}

/* ---- PROJECTS ---- */
.projects{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (min-width:640px){ .projects{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .projects{grid-template-columns:repeat(4,1fr)} }
.proj{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; transition:transform .16s ease, border-color .16s}
.proj:hover{transform:translateY(-2px); border-color:var(--gold)}
.proj .pm{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold-deep); font-weight:800; margin-bottom:4px; font-size:.85rem}
.proj b{color:var(--ink); font-size:.98rem; font-weight:700}
.proj span{font-size:.8rem; color:var(--muted)}
.proj .pc{font-size:.8rem; color:var(--jade); font-weight:700; margin-top:2px}

/* ---- VALUE PROPS ---- */
.vp-wrap{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.vps{display:grid; gap:20px}
@media (min-width:720px){ .vps{grid-template-columns:repeat(3,1fr); gap:32px} }
.vp{display:flex; gap:13px; align-items:flex-start}
.vp .ico{width:42px; height:42px; flex:0 0 auto; border-radius:12px; background:var(--jade-soft); color:var(--jade); display:grid; place-items:center}
.vp b{display:block; color:var(--ink); font-size:1.02rem; font-weight:700; margin-bottom:3px}
.vp p{font-size:.88rem; color:var(--muted)}

/* ---- CTA ---- */
.cta{position:relative; overflow:hidden; border-radius:22px; padding:30px 22px; color:#EAF1EC; background:linear-gradient(135deg,var(--skyA),var(--skyB))}
@media (min-width:768px){ .cta{padding:44px 40px; display:flex; align-items:center; justify-content:space-between; gap:28px} }
.cta h2{color:#fff; font-size:clamp(1.4rem,3.6vw,2rem)}
.cta p{color:#B9CBC4; margin-top:8px; max-width:46ch; font-size:.95rem}
.cta-act{position:relative; z-index:1; display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
@media (min-width:768px){ .cta-act{margin-top:0; flex:0 0 auto} }

/* ---- ARCHIVE / SINGLE ---- */
.page-head{padding:26px 0 6px}
.page-head h1{font-size:clamp(1.5rem,4vw,2.2rem)}
.page-head .crumbs{font-size:.82rem; color:var(--muted); margin-bottom:10px}
.page-head .crumbs a{color:var(--gold-deep)}
.entry{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); margin:18px 0}
.entry h1{margin-bottom:12px}
.entry p{margin:0 0 14px; color:var(--body)}
.entry img{border-radius:var(--r-sm); margin:10px 0}
.single-hero{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:16/9; box-shadow:var(--shadow); margin-bottom:18px}
.single-hero img{width:100%;height:100%;object-fit:cover}
.spec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0}
@media (min-width:560px){ .spec-grid{grid-template-columns:repeat(4,1fr)} }
.spec-grid .sg{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px}
.spec-grid .sg b{display:block; color:var(--ink); font-size:1.1rem}
.spec-grid .sg span{font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.empty-state{background:var(--surface); border:1px dashed var(--line); border-radius:var(--r); padding:30px; text-align:center; color:var(--muted)}
.entry-content{font-size:1rem; line-height:1.72; color:var(--body); max-width:72ch}
.entry-content h2{font-size:1.4rem; margin:26px 0 10px}
.entry-content h3{font-size:1.12rem; margin:20px 0 8px}
.entry-content p{margin:0 0 14px}
.entry-content ul,.entry-content ol{margin:0 0 14px; padding-left:22px}
.entry-content li{margin:5px 0}
.entry-content strong{color:var(--ink)}
.entry-content a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px}
.entry-content a:hover{color:var(--ink)}
.entry-content .lead{font-size:1.1rem; color:var(--ink); font-weight:500}
.entry-content .keyfacts{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0; padding:0; list-style:none}
@media (min-width:560px){ .entry-content .keyfacts{grid-template-columns:repeat(4,1fr)} }
.entry-content .keyfacts li{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px; margin:0}
.entry-content .keyfacts b{display:block; color:var(--ink); font-size:1.05rem}
.entry-content .keyfacts span{font-size:.78rem; color:var(--muted)}
.entry-content h2{border-left:4px solid var(--gold); padding-left:12px}
.entry-content figure{margin:16px 0}
.entry-content figure img{width:100%; border-radius:var(--r-sm); border:1px solid var(--line)}
.entry-content figure figcaption{font-size:.82rem; color:var(--muted); text-align:center; margin-top:6px}
.entry-content .proj-hero img{aspect-ratio:16/9; object-fit:cover}
.entry-content .proj-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0; padding:0; list-style:none}
@media (min-width:640px){ .entry-content .proj-gallery{grid-template-columns:repeat(3,1fr)} }
.entry-content .proj-gallery li{margin:0}
.entry-content .proj-gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--line)}
.entry-content .proj-gallery figcaption{font-size:.74rem}
.entry-content table.ptable{width:100%; border-collapse:collapse; margin:14px 0; font-size:.9rem}
.entry-content table.ptable th,.entry-content table.ptable td{border:1px solid var(--line); padding:9px 11px; text-align:left}
.entry-content table.ptable th{background:var(--surface-2); color:var(--ink); font-weight:700}
.entry-content table.ptable td{color:var(--body)}
.entry-content .ptable-wrap{overflow-x:auto}
.entry-content .floorplans{display:grid; grid-template-columns:1fr; gap:16px; margin:16px 0; padding:0; list-style:none}
@media (min-width:560px){ .entry-content .floorplans{grid-template-columns:repeat(2,1fr)} }
.entry-content .floorplans li,.entry-content .floorplans figure{margin:0}
.entry-content .floorplans a{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.entry-content .floorplans img{width:100%; height:auto; display:block; object-fit:contain}
.entry-content .floorplans figcaption{font-size:.82rem; color:var(--muted); text-align:center; margin-top:6px; font-weight:600}
.entry-content .fp-note{font-size:.85rem; color:var(--muted); font-style:italic}
.entry-content .fp-tabs{margin:16px 0}
.entry-content .fp-tabnav{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px; border-bottom:2px solid var(--line)}
.entry-content .fp-tab{border:0; background:transparent; font-family:inherit; font-weight:700; font-size:.95rem; color:var(--muted); padding:10px 20px; cursor:pointer; position:relative; top:2px; border-bottom:2px solid transparent}
.entry-content .fp-tab:hover{color:var(--ink)}
.entry-content .fp-tab.is-active,.entry-content .fp-tab[aria-selected="true"]{color:var(--gold-deep); border-bottom-color:var(--gold)}
.entry-content .fp-panel.is-hidden{display:none}

/* ---- Project 2-column layout (main + sticky sidebar) ---- */
.proj-layout{display:grid; gap:24px}
@media (min-width:1000px){ .proj-layout{grid-template-columns:minmax(0,1fr) 330px; align-items:start} }
.proj-main .entry{margin:0}
.proj-main .entry-content{max-width:none}
.proj-aside{display:flex; flex-direction:column; gap:14px}
@media (min-width:1000px){ .proj-aside{position:sticky; top:76px} }
.proj-cta{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow)}
.proj-cta h3{font-size:1.1rem; margin-bottom:6px}
.proj-cta p{font-size:.88rem; color:var(--muted); margin:0 0 14px}
.proj-cta .btn{width:100%; justify-content:center; margin-bottom:9px}
.proj-cta .stats{margin:6px 0 12px; border-top:1px solid var(--line)}
.proj-cta .stat{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--muted)}
.proj-cta .stat b{color:var(--ink); font-size:1.05rem; font-weight:800}
.proj-cta .contact-note{font-size:.78rem; color:var(--muted); text-align:center; margin:4px 0 0}

/* ---- FOOTER ---- */
.site-footer{padding:40px 0 30px; color:var(--muted); font-size:.88rem; border-top:1px solid var(--line); background:var(--surface-2)}
.foot-grid{display:grid; gap:26px; grid-template-columns:1fr 1fr}
@media (min-width:768px){ .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.foot-grid h4{color:var(--ink); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; margin:0 0 12px; font-weight:800}
.foot-grid a{display:block; padding:4px 0; color:var(--muted)}
.foot-grid a:hover{color:var(--ink)}
.foot-bottom{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; align-items:center}

/* ---- MOBILE BOTTOM NAV ---- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:50; background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(14px) saturate(1.4); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,1fr); padding:6px 4px 8px}
@media (min-width:1024px){ .tabbar{display:none} }
.tabbar a{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.66rem; font-weight:700; color:var(--muted); padding:5px 2px}
.tabbar a.on{color:var(--gold-deep)}
.tabbar a .post{width:44px; height:44px; margin-top:-16px; border-radius:50%; background:var(--gold); color:#231708; display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(224,161,30,.9); border:3px solid var(--paper)}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto !important} }