/* Sàn Căn, p-can.css (gói WP-4): trang căn /can/{MÃ}, thanh dính đáy pc-u-bar, thẻ phải pc-u-side, biển mã pc-code,
   dải Tin của bạn pc-own, lời chào nhiều môi giới pc-offers, thư viện ảnh pc-gal, trang 404/410 pc-nf, tấm đặt lịch pc-book,
   tấm đổi tình trạng pc-stf.
   Hợp đồng: nang-cap-2026-10/thiet-ke/ban-chot.md mục B.3, B.7, C.8, C.9, C.19, C.20, C.21, D.3, D.4.
   Nạp SAU p-nen.css, p-khung.css (thứ tự G.1). Không định nghĩa lại class dùng chung (pc-btn, pc-chip, pc-band, pc-facts, …).
   Ngưỡng (A.2): điện thoại < 760 · máy tính bảng 760-999 (điều hướng như điện thoại) · máy tính ≥ 1000.
   Ô nhập viết input.pc-… / textarea.pc-… (thắng input[type=…] của app.css cùng độ ưu tiên vì nạp sau). */

/* ---------- khung trang căn ---------- */
.pc-u{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.pc-u p{margin:0}
.pc-u-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.pc-u-head{display:grid;gap:12px;min-width:0}
.pc-u-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pc-gap,32px);min-width:0;padding-top:8px}
.pc-u-crumbs{min-width:0}
.pc-u-khac-dau{min-width:0}

/* thanh trên trang căn (điện thoại, máy tính bảng): ‹ · mã căn · Chia sẻ · ♡; header site ẩn (p-khung.css) */
.pc-u-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;display:flex;align-items:center;gap:4px;height:56px;margin:0 -16px;padding:0 8px;
  background:var(--bg);border-bottom:1px solid var(--line-soft)}
.pc-u-top-code{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--mono);font-size:15px;line-height:20px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-u-top-a{display:flex;align-items:center;flex:none}
.pc-u-back{flex:none}
.pc-u-top .pc-save{position:static;box-shadow:none;background:transparent}

/* ảnh bìa: điện thoại rộng hết màn (bỏ lề 16), chú thích DƯỚI ảnh */
.pc-u-cv{min-width:0}
.pc-u-cap{margin-top:6px;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
@media (max-width:759.98px){
  .pc-u-cv{margin-inline:-16px}
  .pc-u-top + .pc-u-grid{margin-top:-16px}   /* ảnh bìa sát ngay dưới thanh trên (khung dây y = 56) */
  .pc-u-cv .pc-dc{border-radius:0;border-width:0 0 1px}
  .pc-u-cv .pc-gal-l{border-radius:0}
  .pc-u-cap{padding-inline:16px}
}
/* thư viện ảnh thật (khi bật R2): cuộn ngang có nút trước/sau 44 (WCAG 2.5.7), scroll-snap */
.pc-gal{position:relative}
.pc-gal-l{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--pc-r-box,16px);background:var(--sunk)}
.pc-gal-l::-webkit-scrollbar{display:none}
.pc-gal-l > li{flex:0 0 100%;scroll-snap-align:start}
.pc-gal-l img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.pc-gal-b{position:absolute;top:50%;right:8px;margin-top:-22px;background:var(--surface);box-shadow:var(--shadow)}
.pc-gal-b--prev{left:8px;right:auto}
.pc-gal-b--prev svg{transform:rotate(180deg)}

/* dòng nhãn: giao dịch + trạng thái + độ tươi */
.pc-u-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-u-stale{font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}

/* link neo thuê/bán (căn có cả hai giao dịch) */
.pc-u-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pc-u-seg a{display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:6px 16px;border:1px solid var(--line-strong);border-radius:var(--pc-r-ctl,999px);
  color:var(--ink);font-size:13px;line-height:18px;font-weight:600;text-decoration:none}
.pc-u-seg a b{font-size:15px;line-height:20px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
@media (hover:hover){.pc-u-seg a:hover{border-color:var(--navy)}}

/* C.9 biển mã: mã mono + 3 ô bóc lớp, ngăn bằng viền trái (không in ký tự ngăn) */
.pc-code{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.pc-code-v{font-family:var(--mono);font-size:18px;line-height:24px;font-weight:600;color:var(--ink);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pc-code-parts{display:inline-flex;align-items:baseline;flex-wrap:wrap;row-gap:4px}
.pc-code-parts > span{display:inline-flex;align-items:baseline;gap:4px;padding:0 10px;border-left:1px solid var(--line-strong);font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-code-parts > span:first-child{padding-left:0;border-left:0}
.pc-code-parts b{font-family:var(--mono);font-size:15px;line-height:20px;font-weight:600;color:var(--ink)}
.pc-code .pc-btn--ghost{padding-inline:8px}

/* thẻ phải: điện thoại nằm trong luồng (giá + khối hỏi); nhóm nút .pc-u-cta chỉ máy tính */
.pc-u-side{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.pc-u-price{font-weight:800;font-size:28px;line-height:34px;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pc-u-price--2{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:22px;line-height:28px}
.pc-u-price-k{font-size:15px;line-height:20px;font-weight:600;color:var(--ink);letter-spacing:0}
.pc-u-price-k abbr[title],.pc-u-h3 abbr[title],.pc-u-sec .pc-h2 abbr[title],.pc-own-k abbr[title],.pc-u-cta-k abbr[title]{text-decoration:underline dotted;text-underline-offset:3px}
.pc-u-pnote{max-width:52ch}
.pc-u-giu{font-size:15px;line-height:22px;color:var(--ink)}
.pc-u-side-st{display:none}
.pc-u-side-st--chot .pc-st{font-size:15px;line-height:22px;padding:4px 10px}
.pc-u-cta{display:none}
.pc-u-cta-note{font-size:13px;line-height:18px;font-weight:500;color:var(--ink)}
.pc-u-cta-k{font-size:15px;line-height:20px;font-weight:700;color:var(--ink)}
@media (max-width:999.98px){ .pc-u--chot .pc-u-side{display:none} }

/* thân trang */
.pc-u-blk{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.pc-u-h3{margin:0;font-family:var(--serif);font-weight:700;color:var(--navy);font-size:17px;line-height:24px}
.pc-u-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0;padding-top:24px;border-top:1px solid var(--line-soft)}
.pc-u-desc{font-size:15px;line-height:24px;color:var(--ink);max-width:68ch;overflow-wrap:anywhere}
.pc-u-desc--trong{color:var(--muted)}
.pc-u-more > summary{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:600;cursor:pointer;list-style:none;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pc-u-more > summary::-webkit-details-marker{display:none}
.pc-u-more[open] > summary{display:none}
.pc-u--chot .pc-facts dd{color:var(--muted)}
.pc-u--mau .pc-u-price{color:var(--off-ink)}   /* tin mẫu: "Giá minh họa" cùng tông xám với ảnh bìa mẫu */
.pc-u-mod{display:grid;gap:0}
.pc-u-mod p{display:flex;flex-wrap:wrap;gap:0 8px}
.pc-u-pos{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}

/* lời chào nhiều môi giới: đăng trước lên trên */
.pc-offers{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.pc-offers-l{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-soft)}
.pc-offer{display:grid;gap:6px;justify-items:start;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.pc-offer-p{font-weight:800;font-size:17px;line-height:24px;color:var(--navy);font-variant-numeric:tabular-nums}
.pc-offer-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:15px;line-height:22px;color:var(--ink)}
.pc-offer-who > span:last-child{font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-offer-me{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pc-offer-name{font-weight:600;color:var(--ink)}
.pc-offer-mine{font-size:13px;line-height:18px;font-weight:600;color:var(--ink)}

/* C.19 dải "Tin của bạn": nền --gold-soft, chữ --ink (13,41:1) */
.pc-own{display:grid;gap:10px;padding:16px;background:var(--gold-soft);color:var(--ink);border-radius:var(--pc-r-box,16px);font-size:15px;line-height:22px}
.pc-own-t{font-weight:600}
.pc-own-row{display:grid;gap:6px}
.pc-own-k{font-weight:700}
.pc-own-acts{display:flex;flex-wrap:wrap;gap:8px}
.pc-own .pc-btn--line{background:var(--surface)}
.pc-own .pc-own-cu{background:var(--warn-bg);border-color:var(--warn);color:var(--ink)}

/* C.8 thanh hành động dính đáy (điện thoại, máy tính bảng). Ẩn khi bàn phím mở, khi tấm mở. */
.pc-u-bar{display:none}
@media (max-width:999.98px){
  html[data-page="unit"] #view{padding-top:0}
  html[data-page="unit"] body{padding-bottom:var(--pc-ubar-h,88px)}
  html[data-page="unit"] body > .toast{bottom:calc(var(--pc-ubar-h,88px) + 12px)}
  html[data-page="unit"] #view [id]{scroll-margin-top:72px}
  html[data-page="unit"] #view :is(a,button,input,select,textarea,summary,[tabindex]){scroll-margin-bottom:104px}
  .pc-u-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:block;
    padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
    background:var(--surface);border-top:1px solid var(--line-soft);box-shadow:0 -12px 32px -18px rgba(19,31,53,.35)}
  html.pc-kb .pc-u-bar,html.pc-sheet-mo .pc-u-bar{display:none}
  .pc-u-bar-v{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
  .pc-u-bar-p{flex:0 0 auto;display:grid;justify-items:start;gap:2px;max-width:45%}
  .pc-u-bar-p b{font-weight:800;font-size:17px;line-height:22px;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
  .pc-u-bar-s{font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
  .pc-u-bar-a{flex:1 1 0;display:flex;justify-content:flex-end;gap:8px;min-width:0}
  .pc-u-bar-a .pc-btn{flex:0 1 auto;min-width:0;padding-inline:14px;white-space:normal;line-height:18px}
  .pc-u-bar-a .pc-btn--block{flex:1 1 auto;width:auto}
  .pc-u-bar-a .pc-btn--zalo{flex:none;padding-inline:12px}
  .pc-u-bar-a .pc-btn--ghost{padding-inline:8px}
  .pc-u-bar-duoi{flex:1 0 100%;display:flex;justify-content:center}
  .pc-u-bar-duoi .pc-btn{min-height:44px}
  .pc-u-bar-note{flex:1 0 100%;font-size:13px;line-height:18px;font-weight:500;color:var(--muted);text-align:center}
  .pc-u-bar-note--moi{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:6px}
  .pc-u-bar-note--moi .pc-more{white-space:nowrap;padding-inline:4px}
}
@media (max-width:999.98px) and (prefers-color-scheme:dark){ .pc-u-bar{box-shadow:0 -12px 32px -18px rgba(0,0,0,.7)} }

/* máy tính bảng: một cột, khung đọc gọn */
@media (min-width:760px) and (max-width:999.98px){
  .pc-u{max-width:720px;margin-inline:auto}
}

/* ---------- máy tính ≥ 1000: hai cột 7/12 + 5/12, thẻ phải dính top 88, không thanh dính đáy ---------- */
@media (min-width:1000px){
  .pc-u-top{display:none}
  .pc-u-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:40px;row-gap:16px;
    grid-template-areas:"crumbs crumbs" "cv side" "head side" "body side";grid-template-rows:auto auto auto 1fr}
  .pc-u-crumbs{grid-area:crumbs}
  .pc-u-cv{grid-area:cv}
  .pc-u-head{grid-area:head}
  .pc-u-body{grid-area:body}
  .pc-u-side{grid-area:side;align-self:start;justify-self:end;width:100%;max-width:400px;position:sticky;top:88px;gap:12px;padding:24px;
    background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--pc-r-box,16px);box-shadow:var(--shadow)}
  .pc-u-side .pc-ask{padding:0;border:0;background:transparent}
  .pc-u-side-st{display:block}
  .pc-u-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;justify-items:stretch}
  .pc-u-cta .pc-btn--ghost{justify-self:start}
  .pc-u-cta-g{padding-top:12px;border-top:1px solid var(--line-soft)}
  .pc-u-cta-g:first-of-type{padding-top:0;border-top:0}
  .pc-u-cta.pc-u-tools{display:flex;flex-wrap:wrap;gap:8px}
  .pc-u-price{font-size:32px;line-height:40px}
  .pc-u-price--2{font-size:24px;line-height:30px}
  .pc-code-v{font-size:20px;line-height:26px}
  .pc-u-h3{font-size:19px;line-height:26px}
}

/* ---------- B.7 trang 404 / 410: khối rộng tối đa 640, căn trái; máy tính thêm 3 thẻ mới nhất ---------- */
.pc-nf{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pc-gap,32px);min-width:0}
.pc-nf p{margin:0}
.pc-nf-in{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:640px;min-width:0}
.pc-nf-lede{font-size:15px;line-height:24px;color:var(--ink)}
.pc-nf-lk{max-width:440px}
.pc-nf-acts{display:flex;flex-wrap:wrap;gap:8px}
.pc-nf-moi{display:none}
@media (min-width:1000px){ .pc-nf-moi{display:grid;grid-template-columns:minmax(0,1fr);gap:16px} }

/* ---------- C.20 tấm đặt lịch (trong #modal-root, form method="post") ---------- */
.pc-book{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
.pc-book p{margin:0}
.pc-book-unit{font-weight:700;font-size:17px;line-height:24px;color:var(--navy);font-variant-numeric:tabular-nums}
.pc-bk-f{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;margin:0;padding:0;border:0}
/* legend thả nổi: thành ô lưới bình thường (khoảng cách bằng gap), không bị khung fieldset vẽ đè */
.pc-bk-f > legend{float:left;width:100%;margin:0;padding:0;font-size:15px;line-height:20px;font-weight:600;color:var(--ink)}
.pc-bk-chips{display:flex;flex-wrap:wrap;gap:8px}
.pc-bk-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pc-bk-seg{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-book .pc-bk-c{min-height:44px;justify-content:center;padding:0 12px;font-variant-numeric:tabular-nums}
.pc-bk-slots .pc-bk-c{padding:0 4px}
.pc-bk-seg .pc-bk-c{white-space:normal;text-align:center;line-height:18px;padding:4px 12px}
.pc-book input:checked + .pc-bk-c{background:var(--navy);border-color:var(--navy);color:var(--bg)}
.pc-book input:focus-visible + .pc-bk-c,.pc-book input:focus-visible + .pc-bk-o{outline:2px solid var(--accent);outline-offset:2px}
.pc-book input:disabled + .pc-bk-c{border-style:dashed;border-color:var(--line);color:var(--muted);cursor:not-allowed}
.pc-bk-offers{display:grid;gap:8px}
.pc-bk-o{display:grid;gap:2px;min-height:56px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--pc-r-in,12px);cursor:pointer;color:var(--ink)}
.pc-bk-o b{font-weight:800;font-size:15px;line-height:22px;color:var(--navy);font-variant-numeric:tabular-nums}
.pc-bk-o span{font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.pc-book input:checked + .pc-bk-o{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:var(--sunk)}
.pc-bk-fld{display:grid;gap:6px;min-width:0}
.pc-bk-l{font-size:15px;line-height:20px;font-weight:600;color:var(--ink)}
.pc-bk-khac{display:grid;gap:6px;max-width:240px}
.pc-bk-note{font-size:13px;line-height:18px;font-weight:600;color:var(--ink)}
input.pc-bk-in,textarea.pc-bk-in{width:100%;min-width:0;min-height:48px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--pc-r-in,12px);
  background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:24px}
textarea.pc-bk-in{min-height:96px;resize:vertical}
input.pc-bk-in[aria-invalid="true"],textarea.pc-bk-in[aria-invalid="true"]{border-color:var(--bad)}
.pc-bk-f[aria-invalid="true"] > legend{color:var(--bad)}
.pc-bk-goi .pc-chip,.pc-bk-goi-c{white-space:normal;text-align:left;line-height:18px;padding:6px 14px;font-weight:500}
.pc-err{padding:10px 12px;border-radius:var(--pc-r-band,12px);background:var(--bad-bg);color:var(--ink);font-size:15px;line-height:22px;font-weight:600}

/* ---------- C.21 tấm đổi tình trạng (chỉ chủ tin): nút chọn gốc của trình duyệt, mỗi dòng cao 48 ---------- */
.pc-stf{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
.pc-stf p{margin:0}
.pc-stf-o{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--pc-r-in,12px);
  cursor:pointer;font-size:15px;line-height:20px;font-weight:600;color:var(--ink)}
input.pc-stf-r{flex:none;width:22px;height:22px;margin:0;accent-color:var(--navy)}
@supports selector(:has(*)){ .pc-stf-o:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)} }

@media (prefers-reduced-motion:reduce){ .pc-gal-l{scroll-behavior:auto} }