/* Sàn Căn, p-nen.css: HỆ THỊ GIÁC + THÀNH PHẦN dùng chung của cổng tìm căn (gói WP-1).
   Hợp đồng: nang-cap-2026-10/thiet-ke/ban-chot.md mục D.1-D.5 (token, thang chữ, khoảng cách, bo góc, ảnh bìa dữ kiện),
   C.1-C.4, C.10-C.18, C.23 (thành phần). Mọi class pc-* do js/p-ui.js sinh ra đều định nghĩa ở file này.
   Nạp SAU app.css (thứ tự G.1). Token cũ trong app.css giữ nguyên giá trị; ở đây chỉ THÊM 3 token màu (D.2) và token không màu.
   Ngưỡng màn hình (A.2): điện thoại < 760 · máy tính bảng 760-999 · máy tính ≥ 1000.
   Luật bo góc (D.4): phần tương tác 999 · hộp chứa 16 · ô nhập 12 · ô sơ đồ tòa 8 · dải 12 · nhãn tĩnh 6 (để khác chip bấm được).
   Bóng chỉ cho lớp nổi thật (nút ♡ trên ảnh). Chuyển động: nút ♡ 120 ms, chạm scale(.98) 80 ms; giảm chuyển động thì tắt. */

/* ---------- D.2 token: khai ở :root, ghi đè ở CẢ HAI khối tối (05 GD-04) ---------- */
:root{
  --line-strong:#857a6b;   /* viền ô nhập, chip, nút viền, vòng la bàn, ô tile: 3,97 trên --surface */
  --gold-ink:#6b5320;      /* chữ vàng khi cần trên --gold-soft: 5,97 */
  --off-ink:#5f584c;       /* chữ "Đã cho thuê", "Đã bán", ảnh bìa tin mẫu: 5,60 trên --off-bg */
  --pc-r-ctl:999px; --pc-r-box:16px; --pc-r-in:12px; --pc-r-cell:8px; --pc-r-band:12px; --pc-r-lbl:6px;
  --pc-gap:32px;           /* khoảng giữa các khối lớn: 32 điện thoại, 56 máy tính */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --line-strong:#76829f; --gold-ink:#e3c87f; --off-ink:#b8ae9c; }
}
:root[data-theme="dark"]{ --line-strong:#76829f; --gold-ink:#e3c87f; --off-ink:#b8ae9c; }
@media (min-width:1000px){ :root{ --pc-gap:56px; } }

/* ---------- tiện ích nền: ẩn cho mắt, liên kết bỏ qua, tiêu đề, chữ phụ, link "›" ---------- */
.pc-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pc-skip{position:fixed;left:16px;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:200;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  border-radius:var(--pc-r-ctl);background:var(--navy);color:var(--bg);font-weight:600;font-size:15px;line-height:20px;text-decoration:none;
  transform:translateY(-200%);opacity:0}
.pc-skip:focus,.pc-skip:focus-visible{transform:none;opacity:1;outline:2px solid var(--accent);outline-offset:2px}
.pc-ic{display:inline-block;flex:none;width:20px;height:20px;vertical-align:middle}

/* D.3 thang chữ: Noto Serif tiêu đề · Be Vietnam Pro thân · Roboto Mono mã căn, tầng. Không in hoa toàn bộ, không giãn chữ. */
.pc-h1{margin:0;font-family:var(--serif);font-weight:700;color:var(--navy);font-size:20px;line-height:28px;letter-spacing:-.005em;text-wrap:balance}
html[data-page="unit"] .pc-h1,html[data-page="saved"] .pc-h1{font-size:21px;line-height:28px}
html[data-page="home"] .pc-h1,html[data-page="owner"] .pc-h1,html[data-page="404"] .pc-h1,html[data-page="gone"] .pc-h1{font-size:24px;line-height:32px}
.pc-h1:focus:not(:focus-visible){outline:none}
.pc-h2{margin:0;font-family:var(--serif);font-weight:700;color:var(--navy);font-size:18px;line-height:26px;letter-spacing:-.005em;text-wrap:balance}
@media (min-width:1000px){
  .pc-h1{font-size:28px;line-height:36px}
  html[data-page="unit"] .pc-h1,html[data-page="saved"] .pc-h1{font-size:28px;line-height:36px}
  html[data-page="home"] .pc-h1,html[data-page="owner"] .pc-h1,html[data-page="404"] .pc-h1,html[data-page="gone"] .pc-h1{font-size:34px;line-height:42px}
  .pc-h2{font-size:22px;line-height:30px}
}
.pc-hint{margin:0;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
/* link đứng riêng một dòng ("Chi tiết ›", "Gửi email xin mã ›"): vùng chạm cao 44 (C.24) */
.pc-more{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pc-more:hover{text-decoration-thickness:2px}

/* ---------- C.1 nút pc-btn ---------- */
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:6px 20px;border:1px solid transparent;border-radius:var(--pc-r-ctl);
  background:transparent;color:var(--navy);font-family:var(--f);font-size:15px;line-height:20px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform 80ms ease,background-color 120ms ease,border-color 120ms ease}
@media (pointer:fine){ .pc-btn{min-height:44px} }
.pc-btn:active{transform:scale(.98)}
.pc-btn .pc-ic{width:20px;height:20px}
.pc-btn--pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pc-btn--line{background:transparent;border-color:var(--line-strong);color:var(--navy)}
.pc-btn--ghost{background:transparent;border-color:transparent;color:var(--accent);padding-inline:8px}
.pc-btn--block{display:flex;width:100%}
.pc-btn--zalo .pc-ic{color:var(--navy)}
@media (hover:hover){
  .pc-btn--pri:hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink));border-color:color-mix(in srgb,var(--accent) 88%,var(--ink))}
  .pc-btn--line:hover{border-color:var(--navy)}
  .pc-btn--ghost:hover{text-decoration:underline;text-underline-offset:3px}
}
.pc-btn[aria-busy="true"]{cursor:progress}
.pc-btn:disabled,.pc-btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none}

/* ---------- C.2 chip pc-chip: hàng chip XUỐNG DÒNG, không cuộn ngang (04 N5) ---------- */
.pc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pc-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--pc-r-ctl);
  background:transparent;color:var(--ink);font-family:var(--f);font-size:15px;line-height:20px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
@media (pointer:fine){ .pc-chip{min-height:40px} }
.pc-chip-n{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.pc-dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--zc,var(--navy))}
.pc-chip[aria-current]:not([aria-current="false"]),.pc-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--bg)}
.pc-chip[aria-current]:not([aria-current="false"]) .pc-chip-n,.pc-chip[aria-pressed="true"] .pc-chip-n{color:inherit}
.pc-chip[data-z][aria-current]:not([aria-current="false"]),.pc-chip[data-z][aria-pressed="true"]{background:var(--zs);border-color:var(--zc);color:var(--zc)}
.pc-chip[aria-disabled="true"]{border-style:dashed;border-color:var(--line);color:var(--muted);cursor:default}
@media (hover:hover){ a.pc-chip:hover,button.pc-chip:not(:disabled):hover{border-color:var(--navy)} }

/* ---------- nhãn tĩnh: trạng thái, nhãn phụ, nhãn giao dịch, mã căn nhỏ, ô chữ ví dụ ---------- */
/* inline-block, KHÔNG inline-flex: flex nuốt dấu cách trước <abbr> ("Chuyển nhượngHĐMB", soi trình duyệt 03/10) */
.pc-st,.pc-tag,.pc-tx{display:inline-block;vertical-align:middle;padding:2px 8px;border-radius:var(--pc-r-lbl);font-size:13px;line-height:18px;font-weight:600;white-space:nowrap}
.pc-st--mo{background:var(--ok-bg);color:var(--ok)}
.pc-st--giu{background:var(--warn-bg);color:var(--warn)}
.pc-st--chot{background:var(--off-bg);color:var(--off-ink)}
.pc-tag{background:var(--sunk);color:var(--ink)}
.pc-tx{border:1px solid var(--line-strong);color:var(--ink);background:transparent}
.pc-card-t abbr[title],.pc-tx abbr[title]{text-decoration:underline dotted;text-underline-offset:3px}
.pc-code-s{font-family:var(--mono);font-size:14px;line-height:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pc-field{display:inline-block;padding:0 8px;border-radius:var(--pc-r-lbl);background:var(--sunk);color:var(--ink);font-family:var(--f);font-weight:600;font-size:inherit;line-height:inherit}

/* ---------- D.4 lưới thẻ: 1 cột điện thoại · 2 cột máy tính bảng · auto-fill 300 máy tính ---------- */
.pc-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:760px){ .pc-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .pc-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px} }
/* Mọi hộp lưới 1 cột của thành phần: rãnh minmax(0,1fr), KHÔNG để rãnh auto. Rãnh auto bị ảnh width="640" kéo rộng
   theo cỡ gốc → tràn ngang 496 px ở màn 375 (soi trình duyệt 03/10, khối "Về The Sentosa"). Đặt TRƯỚC các luật máy tính. */
.pc-card,.pc-zone-now,.pc-zone-now-t,.pc-zone-now-m,.pc-fig,.pc-safe,.pc-poster,.pc-poster-me,.pc-empty,.pc-empty-l,.pc-ask,
.pc-faq,.pc-mini-wrap,.pc-tmaps,.pc-tmap,.pc-tmap-fl{grid-template-columns:minmax(0,1fr)}

/* ---------- C.3 thẻ căn pc-card (phẳng, viền 1px, không vạch màu mép thẻ) ---------- */
.pc-card{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--pc-r-box);overflow:hidden;color:var(--ink)}
.pc-card-cv{position:relative;min-width:0}
.pc-card-cv img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--sunk)}
.pc-card-bd{display:grid;align-content:start;gap:6px;padding:12px 16px 16px;min-width:0}
.pc-card-bd p{margin:0}
.pc-card-price{font-weight:800;font-size:20px;line-height:26px;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pc-card-t{margin:0;font-family:var(--f);font-size:15px;line-height:22px;font-weight:600;color:var(--ink);text-wrap:pretty}
.pc-card-a{color:inherit;text-decoration:none}
.pc-card-a::after{content:"";position:absolute;inset:0;border-radius:inherit}   /* cả thẻ bấm được */
.pc-card-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-size:14px;line-height:20px;color:var(--ink)}
.pc-card-more{font-size:14px;line-height:20px;color:var(--ink)}
.pc-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.pc-card-note{font-size:13px;line-height:18px;font-weight:500;color:var(--ink)}
.pc-card-xm{color:var(--muted)}   /* câu PL-08 đi kèm nhãn "Đã xác minh danh tính" (thẻ đầu tiên có nhãn của mỗi lưới) */
.pc-save{position:absolute;top:8px;right:8px;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:0;border-radius:var(--pc-r-ctl);background:var(--surface);color:var(--navy);box-shadow:var(--shadow);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color 120ms ease,color 120ms ease,transform 80ms ease}
.pc-save .pc-ic{width:22px;height:22px}
.pc-save .pc-save-on{display:none}
.pc-save[aria-pressed="true"]{color:var(--accent)}
.pc-save[aria-pressed="true"] .pc-save-on{display:inline-block}
.pc-save[aria-pressed="true"] .pc-save-off{display:none}
.pc-save:active{transform:scale(.98)}
.pc-card-a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@supports selector(:has(*)){
  .pc-card:has(.pc-card-a:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
  .pc-card-a:focus-visible{outline:none}
}
@media (hover:hover){
  .pc-card:hover{border-color:var(--line-strong)}
  .pc-card:hover .pc-card-a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
  .pc-save:hover{background:var(--sunk)}
}
/* KHÔNG content-visibility trên thẻ (HN-03, rà soát 03/10): cỡ giả 420/380 px của thẻ khuất phía trên làm thẻ đang xem trôi
   95-336 px mỗi lần #view vẽ lại (đóng tấm Lọc, Back, vòng 20 giây). 24 thẻ/trang vẽ 18 ms ở CPU 4x nên không cần bỏ qua vẽ. */
@media (min-width:1000px){
  .pc-card-price{font-size:22px;line-height:28px}
  .pc-card-t{font-size:16px;line-height:24px}
}
/* thẻ rộng: danh sách 1-2 thẻ. Ảnh 280 bên trái CHỈ khi LƯỚI THẺ đủ rộng (container query, GD-UI-01), không theo bề rộng màn:
   cột Xếp hạng 300 + bố cục lệch từng bóp lưới còn 336 px ở 1000 → thân thẻ 0 px chữ, giá 2 dòng. Hẹp hơn 620 thì thẻ rộng
   giữ khuôn dọc như thẻ thường. Trình duyệt chưa có container query: luôn khuôn dọc (đọc được, không tràn). */
.pc-cards--1{container:pc-the / inline-size}
@container pc-the (min-width:620px){
  .pc-card--wide{grid-column:1 / -1;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto}
  .pc-card--wide .pc-card-cv{align-self:start}
  .pc-card.pc-card--wide .pc-dc-ruler{top:16px}   /* thẻ rộng: nút ♡ nằm bên thân, không đè ảnh bìa */
  .pc-card--wide .pc-card-bd{padding:16px 64px 16px 20px}
}
.pc-card--sample{background:var(--surface)}
.pc-card--vidu{border-style:dashed;border-color:var(--line-strong)}
.pc-card--vidu .pc-card-price .pc-field{font-size:17px}

/* ---------- C.4 + D.5 ảnh bìa dữ kiện pc-dc: chữ thật trên nền phẳng --zs, nét --zc; đổi màu tối theo biến ---------- */
.pc-dc{position:relative;display:flex;flex-direction:column;gap:6px;aspect-ratio:3 / 2;min-width:0;padding:16px 16px 12px;
  background:var(--zs,var(--sunk));color:var(--ink);border:1px solid color-mix(in srgb,var(--zc,var(--navy)) 25%,transparent);border-radius:var(--pc-r-box)}
.pc-dc p{margin:0}
.pc-dc--card{border-width:0 0 1px;border-radius:0}
.pc-dc--r{padding-right:80px}
.pc-dc.pc-dc--mau{--zc:var(--off-ink);--zs:var(--off-bg)}
.pc-dc--vidu{border-style:dashed}
.pc-dc-zone{font-size:13px;line-height:18px;font-weight:700;color:var(--zc)}
.pc-dc-zone span{font-weight:600}
.pc-dc-big{flex:1 1 auto;display:flex;flex-wrap:wrap;align-content:center;align-items:baseline;column-gap:8px;row-gap:2px;padding-top:4px}
.pc-dc-big b{flex-basis:100%;font-family:var(--serif);font-weight:700;font-size:32px;line-height:40px;color:var(--ink)}
.pc-dc-area{font-weight:600;font-size:20px;line-height:26px;color:var(--zc);font-variant-numeric:tabular-nums}
.pc-dc-tt{font-size:13px;line-height:18px;font-weight:500;color:var(--ink)}
.pc-dc-floor{font-family:var(--mono);font-size:15px;line-height:20px;font-weight:600;color:var(--zc)}
.pc-dc-dir{display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;font-weight:600;color:var(--zc)}
.pc-dc-note{font-size:13px;line-height:18px;font-weight:500;color:var(--ink)}
/* thước tầng (phần tử chữ ký, D.1): cột 12 px, vạch mỗi tầng, con trỏ ở tầng của căn; nhãn đỉnh, đáy đặt ngoài cột (bên phải) */
.pc-dc-ruler{position:absolute;top:16px;bottom:12px;right:16px;width:48px;color:var(--zc)}
.pc-dc-ruler::before{content:"";position:absolute;top:0;bottom:0;left:14px;width:12px;border-left:2px solid var(--zc);
  background:repeating-linear-gradient(to top,color-mix(in srgb,var(--zc) 40%,transparent) 0 1px,transparent 1px calc(100% / var(--fmax,18)))}
.pc-card .pc-dc-ruler{top:64px}   /* nhường góc trên phải cho nút ♡ 44 px (top 8) */
.pc-dc-top,.pc-dc-bot{position:absolute;left:30px;font-family:var(--mono);font-size:13px;line-height:18px;font-weight:600;color:var(--zc)}
.pc-dc-top{top:-4px}
.pc-dc-bot{bottom:-4px}
.pc-dc-mark{position:absolute;left:6px;bottom:calc((var(--fl,1) - .5) / var(--fmax,18) * 100%);transform:translateY(50%);padding:0 4px;border-radius:4px;
  background:var(--zc);color:var(--zs);font-family:var(--mono);font-size:13px;line-height:18px;font-weight:600;font-style:normal;white-space:nowrap}
/* kim hướng: vòng 28 px, vạch Bắc cố định ở đỉnh vòng, kim từ tâm ra xoay theo --deg */
.pc-dc-needle{position:relative;display:inline-block;flex:none;width:28px;height:28px;border:1.5px solid var(--zc);border-radius:50%;color:var(--zc)}
.pc-dc-needle::before{content:"";position:absolute;inset:0;transform:rotate(var(--deg,0deg));
  background:linear-gradient(currentColor,currentColor) 50% 2px / 2px 11px no-repeat,radial-gradient(circle at 50% 50%,currentColor 0 2px,transparent 2.5px)}
.pc-dc-needle::after{content:"";position:absolute;left:50%;top:-1.5px;width:2px;height:4px;margin-left:-1px;background:var(--zc)}
/* trang căn: chữ lớn hơn, chống xén dấu chồng (line-height ≥ 1,2, đệm trên ≥ 12) */
.pc-dc--unit .pc-dc-zone{font-size:15px;line-height:20px}
.pc-dc--unit .pc-dc-big b{font-size:40px;line-height:50px}
.pc-dc--unit .pc-dc-area{font-size:24px;line-height:30px}
.pc-dc--unit .pc-dc-dir{font-size:15px;line-height:20px}
@media (min-width:1000px){
  .pc-dc--unit{padding:20px 24px 16px}
  .pc-dc--unit.pc-dc--r{padding-right:96px}
  .pc-dc--unit .pc-dc-ruler{top:20px;bottom:16px;right:24px}
  .pc-dc--unit .pc-dc-zone{font-size:17px;line-height:24px}
  .pc-dc--unit .pc-dc-big b{font-size:56px;line-height:68px}
  .pc-dc--unit .pc-dc-area{font-size:32px;line-height:40px}
  .pc-dc--unit .pc-dc-tt{font-size:15px;line-height:20px}
}
/* 72 × 72 ở /da-luu */
.pc-dc--mini{width:72px;aspect-ratio:1 / 1;padding:8px;gap:0;justify-content:center;border-radius:var(--pc-r-in)}
.pc-dc--mini .pc-dc-big{padding:0}
.pc-dc--mini .pc-dc-big b{font-size:17px;line-height:22px}
.pc-dc--mini .pc-dc-area{font-size:13px;line-height:18px;font-weight:600}

/* ---------- C.10 khối dữ kiện pc-facts ---------- */
.pc-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0;padding:16px;background:var(--sunk);border-radius:var(--pc-r-in)}
.pc-facts > div{min-width:0}
.pc-facts dt{font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-facts dd{margin:2px 0 0;font-size:15px;line-height:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pc-facts-tt{display:block;font-size:13px;line-height:18px;font-weight:500;color:var(--ink)}
.pc-facts-no{font-weight:500;color:var(--muted)}
.pc-facts-gom{margin:8px 0 0;font-size:13px;line-height:18px;font-weight:500;color:var(--ink)}
@media (min-width:1000px){ .pc-facts{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- C.11 khối người đăng pc-poster (không ảnh đại diện, không link hồ sơ) ---------- */
.pc-poster{display:grid;gap:8px}
.pc-poster p{margin:0}
.pc-poster-role{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px;line-height:22px}
.pc-poster-role b{font-weight:700;color:var(--ink)}
.pc-poster-note{font-size:13px;line-height:18px;font-weight:500;color:var(--muted);max-width:62ch}
.pc-poster-me{display:grid;gap:8px}
.pc-poster-name{font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.pc-poster-tel{font-size:15px;line-height:22px}
.pc-phone{font-family:var(--mono);font-size:17px;line-height:24px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;user-select:all}
.pc-poster-acts{display:flex;flex-wrap:wrap;gap:8px}
.pc-poster-ag{font-size:15px;line-height:22px;color:var(--ink)}

/* ---------- C.12 khối an toàn pc-safe (luôn mở, không viền nhấn mép trái) ---------- */
.pc-safe{display:grid;gap:8px;padding:16px;background:var(--sunk);border-radius:var(--pc-r-box);color:var(--ink);font-size:15px;line-height:24px}
.pc-safe ul{margin:0;padding-left:20px;display:grid;gap:6px;list-style:disc}
.pc-safe-note{margin:4px 0 0;font-size:13px;line-height:18px;font-weight:500;color:var(--ink)}

/* ---------- C.13 hiện trạng phân khu pc-zone-now + ảnh có chú thích DƯỚI ảnh ---------- */
.pc-zone-now{display:grid;gap:12px;font-size:15px;line-height:24px;color:var(--ink)}
.pc-zone-now p{margin:0}
.pc-zone-now--line{display:block;font-size:15px;line-height:22px}
.pc-zone-now--line .pc-more{min-height:24px;vertical-align:baseline}
.pc-zone-now-t{display:grid;gap:8px;align-content:start;max-width:68ch}
.pc-zone-now-m{display:grid;gap:16px;align-content:start}
.pc-zone-now-src{font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-fig{margin:0;display:grid;gap:6px}
.pc-fig img{display:block;width:100%;height:auto;border-radius:var(--pc-r-box);background:var(--sunk)}
.pc-fig-cap{font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-zone-now-pc{display:none}
@media (min-width:1000px){
  .pc-zone-now--ve{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px}
  .pc-zone-now-pc{display:grid}
}

/* ---------- C.14 sơ đồ tòa pc-tmap (chỉ căn có tin; không ô trống, không cuộn ngang) ---------- */
.pc-tmaps{display:grid;gap:24px}
@media (min-width:1000px){ .pc-tmaps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} }
.pc-tmap{display:grid;gap:8px;align-content:start;min-width:0}
.pc-tmap-h{margin:0;font-family:var(--f);font-size:15px;line-height:22px;font-weight:700;color:var(--navy)}
.pc-tmap-n{margin-left:6px;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-tmap-fl{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pc-tmap-fl > li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:start}
.pc-tmap-fl > li.pc-tmap-gap{display:block;padding-left:72px;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-tmap-lv{padding-top:8px;font-family:var(--mono);font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.pc-tmap-row{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pc-tmap-c{display:grid;align-content:center;min-width:72px;min-height:64px;padding:6px 10px;border:1.5px solid var(--ok);border-radius:var(--pc-r-cell);
  background:var(--surface);color:var(--ink);font-size:13px;line-height:17px;text-decoration:none;font-variant-numeric:tabular-nums}
.pc-tmap-c b{font-family:var(--mono);font-size:15px;line-height:20px;font-weight:600}
.pc-tmap-c span:nth-of-type(n+2){font-weight:600}   /* giá gọn 13/600; span đầu là số ngủ 13 */
.pc-tmap-c em{font-style:normal;font-weight:600}
.pc-tmap-c[data-st="giu"]{border-style:dashed;border-color:var(--warn)}
.pc-tmap-c[data-st="chot"]{border-color:var(--line-strong);background:var(--off-bg);color:var(--off-ink)}
.pc-tmap-c[aria-current="page"]{border:2px solid var(--zc,var(--navy))}
@media (hover:hover){ .pc-tmap-c:hover{background:var(--sunk)} }
.pc-tmap-note{margin:0;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}

/* ---------- C.15 dòng gọn pc-mini: 2 dòng chữ, cao ≥ 56, không chuỗi dấu chấm giữa ---------- */
.pc-mini-wrap{display:grid;gap:8px}
.pc-mini{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-soft)}
.pc-mini > li{border-bottom:1px solid var(--line-soft)}
.pc-mini-a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;min-height:56px;padding:8px 4px;color:var(--ink);text-decoration:none}
.pc-mini-a b{font-weight:800;font-size:15px;line-height:22px;color:var(--navy);font-variant-numeric:tabular-nums}
.pc-mini-l{font-size:13px;line-height:18px;font-weight:500;color:var(--ink);min-width:0}
@media (hover:hover){ .pc-mini-a:hover b{text-decoration:underline;text-underline-offset:3px} }
.pc-mini-empty{margin:0;font-size:15px;line-height:22px;color:var(--ink)}

/* ---------- C.16 rỗng thông minh pc-empty (không hình minh họa) ---------- */
.pc-empty{display:grid;gap:8px;padding:20px 16px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--pc-r-box);font-size:15px;line-height:24px}
.pc-empty p{margin:0}
.pc-empty-l{margin:0;padding:0;list-style:none;display:grid}
.pc-empty--short{padding:16px}
.pc-empty-nho{display:grid;gap:6px;justify-items:start;padding-block:4px}

/* ---------- C.17 tin mẫu gập pc-samples ---------- */
.pc-samples{border-top:1px solid var(--line-soft)}
.pc-samples > summary{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;font-weight:600;color:var(--navy);list-style:none}
.pc-samples > summary::-webkit-details-marker{display:none}
.pc-samples > summary::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-right:4px}
.pc-samples[open] > summary::before{transform:rotate(45deg)}
.pc-samples[open] > .pc-cards{padding:8px 0 16px}

/* ---------- C.18 breadcrumb pc-crumbs ---------- */
.pc-crumbs ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-crumbs li{display:flex;align-items:center;min-width:0}
.pc-crumbs li + li::before{content:"›";content:"›" / "";padding:0 8px;color:var(--muted)}
/* vùng chạm 44 × 44 (C.24): tên tòa chữ hẹp ("Tòa S1" 40,8 px) vẫn đủ rộng, chữ canh giữa vùng chạm (GD-UI-11) */
.pc-crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--muted);text-decoration:none}
.pc-crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.pc-crumbs [aria-current="page"]{color:var(--ink)}
@media (max-width:759.98px){
  .pc-crumbs ol{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  .pc-crumbs li:first-child{display:none}
  .pc-crumbs li:nth-child(2)::before{content:none}
  .pc-crumbs li:last-child{display:block;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- C.23 dải thông báo pc-band (không biểu tượng trang trí, không viền nhấn mép trái, dải YMYL không nút đóng) ---------- */
.pc-band{margin:0;padding:12px 16px;border-radius:var(--pc-r-band);color:var(--ink);font-size:15px;line-height:22px}
.pc-band p{margin:0}
.pc-band p + p{margin-top:4px}
.pc-band a:not(.pc-btn){color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.pc-band .pc-btn{margin-left:8px;vertical-align:middle}
.pc-band--warn{background:var(--warn-bg)}
.pc-band--info{background:var(--sunk)}
.pc-band--off{background:var(--off-bg)}
.pc-band--sample{background:var(--gold-soft)}
.pc-band--ok{background:var(--ok-bg)}
.pc-band--err{background:var(--bad-bg)}

/* ---------- B.3 khối hỏi pc-ask (nền --surface: link --accent đạt 5,10:1; trên --sunk chỉ 4,35 nên không dùng) ---------- */
.pc-ask{display:grid;gap:8px;padding:16px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--pc-r-box);font-size:15px;line-height:22px;color:var(--ink)}
.pc-ask p{margin:0}
.pc-ask-note{font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}

/* ---------- E.4 câu hỏi thường gặp pc-faq ---------- */
.pc-faq{display:grid;gap:8px}
.pc-faq-list{display:block}
.pc-faq-i{border-top:1px solid var(--line-soft);break-inside:avoid}
.pc-faq-i:last-child{border-bottom:1px solid var(--line-soft)}
.pc-faq-i > summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 0;cursor:pointer;font-weight:600;line-height:22px;color:var(--ink);list-style:none}
.pc-faq-i > summary::-webkit-details-marker{display:none}
.pc-faq-i > summary::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.pc-faq-i[open] > summary::after{transform:rotate(-135deg)}
.pc-faq-i > p{margin:0 0 12px;max-width:68ch;font-size:15px;line-height:24px;color:var(--ink)}
@media (min-width:1000px){
  .pc-faq-list{column-count:2;column-gap:32px}
  .pc-faq-i:last-child{border-bottom:0}
}

/* ---------- chuyển động: tôn trọng giảm chuyển động (C.24) ---------- */
@media (prefers-reduced-motion:reduce){
  .pc-btn,.pc-save,.pc-skip{transition:none}
  .pc-btn:active,.pc-save:active{transform:none}
}

/* Nghiệm thu 03/10: thẻ căn trên điện thoại, ẢNH BÌA DỮ KIỆN (chưa có ảnh thật) thu còn một dải thấp: bỏ cụm số ngủ + diện tích
   (đã có ngay dưới ở tiêu đề thẻ), giữ phân khu, tòa, tầng/thước tầng, hướng, "Chưa có ảnh thật". Một màn 375 thấy khoảng 2,5 thẻ thay vì 1,5.
   Ảnh thật vẫn giữ khung 3:2 (thẻ dẫn bằng hình, hướng B). Chữ trong chuỗi HTML giữ nguyên nên SSR, trình đọc màn hình và bộ kiểm không đổi. */
@media (max-width:759.98px){
  .pc-card .pc-dc--card{aspect-ratio:auto;height:128px;padding:12px 16px;gap:4px;justify-content:center}   /* cả thẻ --wide: dưới 760 thẻ rộng cũng xếp dọc */
  .pc-card .pc-dc--card .pc-dc-big{display:none}
  .pc-card .pc-dc--card .pc-dc-ruler{top:12px;bottom:12px;right:64px}
}