/* Sàn Căn, p-san.css: lưới 10 sàn ở màn đầu + trang /san/<slug> (quỹ căn Shophouse Happy Home theo mặt bằng). Lệnh CEO 08/10/2026.
   Màu theo phân khu dùng biến --zc/--zs sẵn có ([data-z] trong app.css). Thêm 2 màu: hh (Happy Home), egc (Eurowindow Garden City),
   tương phản chữ ≥ 4,5:1 trên nền sáng và tối. */
:root{--z-hh:#8a2f5b;--z-hh-soft:#f6e1ea;--z-egc:#2e6b4f;--z-egc-soft:#e1efe7}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--z-hh:#f2a7c8;--z-hh-soft:#3a1a2a;--z-egc:#8fd3b0;--z-egc-soft:#13301f} }
:root[data-theme="dark"]{--z-hh:#f2a7c8;--z-hh-soft:#3a1a2a;--z-egc:#8fd3b0;--z-egc-soft:#13301f}
[data-z="hh"]{--zc:var(--z-hh);--zs:var(--z-hh-soft)}
[data-z="egc"]{--zc:var(--z-egc);--zs:var(--z-egc-soft)}

/* ---------- màn đầu: H1 + lưới sàn ---------- */
.pc-home-dau{display:grid;gap:12px;min-width:0}
.pc-san-w{min-width:0}
.pc-san-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pc-san-l > li{min-width:0;display:grid}
.pc-san{display:grid;align-content:start;gap:1px;min-height:68px;padding:8px 10px 8px 12px;border:1px solid var(--line-strong);
  border-left:4px solid var(--zc);border-radius:var(--pc-r-box,16px);background:var(--zs);color:var(--ink);text-decoration:none;min-width:0}
.pc-san-ten{font-size:15px;line-height:20px;font-weight:700;color:var(--zc);overflow-wrap:anywhere}
.pc-nw{white-space:nowrap}
.pc-san-loai{font-size:12px;line-height:16px;color:var(--muted)}
.pc-san-n{font-size:13px;line-height:18px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
a.pc-san .pc-san-n::after{content:" ›";content:" ›" / ""}
.pc-san--cho{background:transparent;border-style:dashed;border-left-style:solid}
.pc-san--cho .pc-san-n{color:var(--muted);font-weight:500}
a.pc-san:active{transform:scale(.98)}
a.pc-san:focus-visible{outline:3px solid var(--zc);outline-offset:2px}
@media (hover:hover){ a.pc-san:hover{border-color:var(--zc)} }
@media (prefers-reduced-motion:reduce){ a.pc-san:active{transform:none} }
@media (min-width:760px){ .pc-san-l{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1000px){ .pc-san-l{grid-template-columns:repeat(5,minmax(0,1fr))} .pc-san{min-height:88px} }
.pc-tim-h{margin:0 0 8px}

/* ---------- trang sàn ---------- */
.pc-sanp{display:grid;gap:16px;min-width:0}
.pc-sanp .pc-san-w{margin-top:8px}
.pc-sq-tong{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;line-height:22px;color:var(--muted)}
.pc-sq-tong b{font-size:20px;line-height:26px;color:var(--zc);font-variant-numeric:tabular-nums}
.pc-sq-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pc-sq{display:grid;gap:12px;min-width:0}
.pc-sq-f{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
.pc-sq-f legend{padding:0;margin:0 0 8px;font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.pc-sq-f label{cursor:pointer}
/* chip đang chọn: radio thật đứng TRƯỚC fieldset (bộ chọn anh em, chạy không cần JS) */
#pc-sq-tat-ca:checked ~ .pc-sq-f label[for="pc-sq-tat-ca"],#pc-sq-duoi-50:checked ~ .pc-sq-f label[for="pc-sq-duoi-50"],
#pc-sq-50-65:checked ~ .pc-sq-f label[for="pc-sq-50-65"],#pc-sq-65-75:checked ~ .pc-sq-f label[for="pc-sq-65-75"],
#pc-sq-tu-75:checked ~ .pc-sq-f label[for="pc-sq-tu-75"]{background:var(--zs);border-color:var(--zc);color:var(--zc)}
.pc-sq-r:focus-visible ~ .pc-sq-f{outline:2px solid var(--zc);outline-offset:4px;border-radius:12px}
#pc-sq-duoi-50:checked ~ .pc-sq-los .pc-sq-u:not([data-b="duoi-50"]),#pc-sq-50-65:checked ~ .pc-sq-los .pc-sq-u:not([data-b="50-65"]),
#pc-sq-65-75:checked ~ .pc-sq-los .pc-sq-u:not([data-b="65-75"]),#pc-sq-tu-75:checked ~ .pc-sq-los .pc-sq-u:not([data-b="tu-75"]){display:none}
/* block, lô không còn căn nào khớp bộ lọc thì ẩn luôn tiêu đề (trình duyệt chưa có :has() vẫn chạy, chỉ còn tiêu đề trống) */
#pc-sq-duoi-50:checked ~ .pc-sq-los :is(.pc-sq-k,.pc-sq-lo):not(:has(.pc-sq-u[data-b="duoi-50"])),
#pc-sq-50-65:checked ~ .pc-sq-los :is(.pc-sq-k,.pc-sq-lo):not(:has(.pc-sq-u[data-b="50-65"])),
#pc-sq-65-75:checked ~ .pc-sq-los :is(.pc-sq-k,.pc-sq-lo):not(:has(.pc-sq-u[data-b="65-75"])),
#pc-sq-tu-75:checked ~ .pc-sq-los :is(.pc-sq-k,.pc-sq-lo):not(:has(.pc-sq-u[data-b="tu-75"])){display:none}
.pc-sq-hint{margin:0}
.pc-sq-los{display:grid;gap:24px;min-width:0}
.pc-sq-lo{display:grid;gap:12px;min-width:0;scroll-margin-top:80px}
.pc-sq-lo > .pc-h2 small,.pc-sq-kh small{font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-sq-ghi{margin:0;padding:8px 12px;border-left:3px solid var(--zc);background:var(--sunk);font-size:13px;line-height:20px;color:var(--ink);border-radius:0 8px 8px 0}
.pc-sq-k{display:grid;gap:8px;min-width:0}
.pc-sq-kh{margin:0;font-size:16px;line-height:22px;font-weight:700}
.pc-sq-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.pc-sq-u{display:grid;align-content:start;gap:1px;min-height:56px;padding:6px 8px;border:1px solid var(--line);border-top:3px solid var(--zc);
  border-radius:10px;background:var(--surface);min-width:0}
.pc-sq-u b{font-family:var(--mono);font-size:14px;line-height:18px;font-weight:600;color:var(--zc);white-space:nowrap}
.pc-sq-u span{font-size:13px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums}
.pc-sq-u small{font-size:11px;line-height:14px;color:var(--muted)}
.pc-sq-u[data-ngo]{border-style:dashed;border-top-style:solid}
.pc-sq-truoc ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px;line-height:22px}
.pc-sq-hoi{padding:12px 14px;border:1px solid var(--line);border-radius:var(--pc-r-box,16px);background:var(--surface)}
.pc-sq-hoi .pc-h2{margin:0 0 6px}
.pc-sq-hoi p{margin:0 0 8px}
.pc-sq-hoilo{margin:0}
.pc-sq-hoi-n{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.pc-sq-nguon{margin:0}
@media (min-width:760px){ .pc-sq-g{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} }
/* Trang ẩn danh (Shophouse Happy Home, CEO chốt 08/10): ẩn dòng tên đơn vị vận hành ở chân trang khi tới bằng chuyển trang trong ứng dụng */
body:has(.pc-sanp[data-an-danh]) :is(#pc-foot-chu,#pc-foot-email){display:none}