/* =====================================================================
   HCARE — website công khai
   Path: public/style.css

   Một tệp CSS duy nhất, viết tay, không framework. Lý do: trang này phải đạt
   Lighthouse mobile ≥ 90, mà Tailwind/Bootstrap kéo theo hàng chục KB CSS không
   dùng tới. Trang chỉ có 10 mẫu, viết tay gọn hơn nhiều.

   Mobile-first: mọi thứ mặc định cho điện thoại, rồi mới nới ra cho màn lớn.
   ===================================================================== */

/* ---------- Font tự lưu trên máy chủ ----------
   Không gọi Google Fonts: nhanh hơn (không phải mở kết nối tới máy chủ khác),
   không phụ thuộc bên ngoài, và không để lộ IP khách sang Google. */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/tinh/fonts/bvp-400-vi.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/tinh/fonts/bvp-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/tinh/fonts/bvp-600-vi.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/tinh/fonts/bvp-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/tinh/fonts/bvp-700-vi.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/tinh/fonts/bvp-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Màu thương hiệu ----------
   #2759A0 lấy từ bộ logo gốc của người thiết kế (thuong-hieu/bo-logo-goc).
   Bản đặc tả ghi #2559A4 — hai màu gần như không phân biệt được bằng mắt;
   dùng màu của bộ logo để web, app và namecard in ra giống hệt nhau. */
:root {
  --xanh: #2759A0;
  --xanh-dam: #1d4780;
  --xanh-nhat: #eef3fa;
  --navy: #142C52;
  --cam: #F97316;
  --chu: #16202e;
  --chu-mo: #5b6779;
  --vien: #e3e8ef;
  --nen: #ffffff;
  --nen-xam: #f6f8fb;
  --bo-rong: 1140px;
  --bo-tron: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--chu);
  background: var(--nen);
  font-size: 16px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--xanh); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; margin-top: 1.5em; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

.bo { width: 100%; max-width: var(--bo-rong); margin: 0 auto; padding: 0 16px; }
.hep { max-width: 680px; margin-left: auto; margin-right: auto; }
.khoang { padding-top: 28px; padding-bottom: 28px; }
.giua { text-align: center; }
.mo { color: var(--chu-mo); font-size: .92rem; }
.an-hoan-toan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bo-qua { position: absolute; left: -999px; }
.bo-qua:focus { left: 8px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }

/* ---------- Đầu trang ---------- */
.dau { border-bottom: 1px solid var(--vien); background: #fff; position: sticky; top: 0; z-index: 50; }
.dau .bo { display: flex; align-items: center; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.logo img { width: 116px; height: auto; }
.nut-menu { margin-left: auto; display: flex; flex-direction: column; gap: 4px; padding: 10px; cursor: pointer; }
.nut-menu span { width: 22px; height: 2px; background: var(--chu); border-radius: 2px; }
.dieu-huong { display: none; width: 100%; flex-direction: column; padding-bottom: 12px; }
#mo-menu:checked ~ .dieu-huong { display: flex; }
.dieu-huong a { padding: 10px 2px; color: var(--chu); font-weight: 600; border-bottom: 1px solid var(--vien); }
.dieu-huong .doi-ngon-ngu { color: var(--xanh); }
.dieu-huong .nut-goi { color: #fff; background: var(--xanh); border-radius: 10px; text-align: center; margin-top: 10px; border: 0; }
/* Nút Tài khoản: cùng hình dáng nút Gọi nhưng VIỀN chứ không tô đặc. Gọi là
   hành động chính của trang bán nhà; tài khoản là phụ — hai nút tô đặc cạnh
   nhau thì không cái nào còn nổi. */
/* ĐIỂM CHUYỂN LÀ 1060px CHỨ KHÔNG PHẢI 900px, và con số này đo ra chứ không
   chọn bừa: thanh điều hướng ngang rộng cố định 898px (chín mục, đều
   white-space: nowrap) cộng logo 135px. Bật nó từ 900px thì khung nội dung chỉ
   còn 853px, và trong cả dải 900–1050px trang tràn ngang 14px còn logo bị bóp
   từ 135px xuống 15px. Dưới ngưỡng thì dùng menu gập — nó vẫn tốt. */
@media (min-width: 1060px) {
  .nut-menu { display: none; }
  .dieu-huong { display: flex !important; flex-direction: row; align-items: center; width: auto; margin-left: auto; padding: 0; gap: 4px; }
  .dieu-huong a { border: 0; padding: 8px 10px; font-size: .95rem; font-weight: 600; }
  .dieu-huong .nut-goi { margin: 0 0 0 8px; padding: 9px 14px; }
}

/* ---------- Hero ---------- */
.hero { background: linear-gradient(160deg, var(--xanh) 0%, var(--navy) 100%); color: #fff; padding: 36px 0 28px; }
.hero h1 { font-size: 1.7rem; margin-bottom: .35em; }
.hero-phu { max-width: 640px; opacity: .92; margin-bottom: 1.25em; }
@media (min-width: 720px) { .hero { padding: 56px 0 44px; } .hero h1 { font-size: 2.35rem; } }

.tim-nhanh { display: grid; gap: 10px; background: #fff; padding: 14px; border-radius: var(--bo-tron); }
.tim-nhanh label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--chu-mo); font-weight: 600; }
.tim-nhanh select, .tim-nhanh input { font: inherit; padding: 11px 10px; border: 1px solid var(--vien); border-radius: 9px; background: #fff; color: var(--chu); }
@media (min-width: 760px) { .tim-nhanh { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; } }

/* ---------- Nút ---------- */
.nut { display: inline-block; font: inherit; font-weight: 600; padding: 11px 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; text-align: center; }
.nut:hover { text-decoration: none; }
.nut-chinh { background: var(--xanh); color: #fff; }
.nut-chinh:hover { background: var(--xanh-dam); color: #fff; }
.nut-nhe { background: #fff; color: var(--xanh); border-color: var(--vien); }
.nut-zalo { background: #0068ff; color: #fff; }
.nut-wa { background: #25d366; color: #0b2e18; }
.rong { display: block; width: 100%; }

/* ---------- Lưới thẻ căn ---------- */
.dong-tieu-de { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lien-ket-manh { font-weight: 600; }
/* Số cột chạy theo BỀ RỘNG CHỖ NÓ CÓ, không theo bề rộng màn hình.
   Trước đây đặt bằng @media: từ 960px màn hình trở lên là ba cột. Nhưng từ
   khi có cột lọc bên trái thì cột kết quả hẹp hơn màn hình nhiều — màn 1000px
   cột kết quả chỉ còn 686px, mà luật cũ vẫn bắt ba cột và thẻ căn tụt xuống
   215px. auto-fill đếm theo chỗ thật sự có, nên không còn phải đoán.
   280px là bề ngang nhỏ nhất mà một thẻ căn còn đọc được giá và thông số. */
.luoi-the { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 8px; }

/* ---------- Lưới thưa: bố cục chạy theo SỐ căn thật ----------
   Kho đang có 5 căn. Năm căn trong lưới ba cột xếp ra [1][2][3] / [4][5][lỗ] —
   một ô trống nằm chính giữa tầm mắt, và ô trống đó đọc ra là "hết hàng" chứ
   không phải "ít hàng có chọn lọc".

   Chữa bằng cách đổi BỐ CỤC theo số lượng, chứ không bằng cách nới khung cho
   rộng: khung rộng hơn với từng ấy căn chỉ dàn chúng mỏng ra.

     1 căn         → một cột hẹp, không để một thẻ kéo dài hết 1140px
     2 hoặc 4 căn  → hai cột, khít 1×2 và 2×2, ảnh to gần gấp đôi
     còn lại       → ba cột như cũ, MỌI THẺ BẰNG NHAU

   01/10/2026: bỏ kiểu thẻ đầu chiếm hai cột (xem lopLuoi trong server.js).

   Lớp do view tính từ ds.length — xem views/danh-sach.ejs. */
@media (min-width: 620px) {
  .luoi-the.luoi-don { grid-template-columns: minmax(0, 560px); }
}
@media (min-width: 960px) {
  .luoi-the.luoi-doi { grid-template-columns: repeat(2, 1fr); }
}

.the { border: 1px solid var(--vien); border-radius: var(--bo-tron); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
/* overflow: hidden đặt ở ĐÂY chứ không chỉ ở .the — ảnh phóng lên khi rê chuột
   phải bị cắt trong khung ảnh, không được tràn xuống đè lên phần chữ bên dưới. */
.the-anh { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--nen-xam); overflow: hidden; }
.the-anh img { width: 100%; height: 100%; object-fit: cover; }

/* Bất động sản bán bằng ảnh. Một cú nhích rất nhẹ khi rê chuột đủ để cái thẻ
   thành một vật bấm được, thay vì một ô tĩnh. Giữ thật nhẹ — 1.04 và 0.35s;
   mạnh hơn là thành quảng cáo. */
.the { transition: box-shadow .2s ease, border-color .2s ease; }
.the:hover { border-color: #c3d3e8; box-shadow: 0 6px 20px rgba(20, 44, 82, .10); }
.the-anh img { transition: transform .35s ease; }
.the:hover .the-anh img { transform: scale(1.04); }

/* Ảnh thứ hai hiện khi rê chuột. src CHỈ được gán vào lần rê chuột đầu tiên
   (xem mục 3 trong public/web.js), nên một trang 24 căn không tải sẵn 48 ảnh. */
.the-anh-2 {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .3s ease;
}
.the:hover .the-anh-2.san-sang { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .the, .the-anh img, .the-anh-2 { transition: none; }
  .the:hover .the-anh img { transform: none; }
}
/* Không có con trỏ chuột (điện thoại, máy tính bảng) thì bỏ hết: trên cảm ứng
   trạng thái :hover dính lại sau khi chạm, ảnh thứ hai kẹt ở đó và khách tưởng
   thẻ bị hỏng. */
@media (hover: none) {
  .the:hover .the-anh img { transform: none; }
  .the-anh-2 { display: none; }
}
.the-khong-anh { display: block; width: 100%; height: 100%; background: var(--nen-xam); }
/* Lưới kéo mọi thẻ trong cùng một hàng cao bằng nhau. Thẻ nào nội dung ngắn
   hơn thì phần dôi ra phải đi đâu đó — cho ẢNH ăn chỗ đó, đừng để nó thành
   một mảng trắng dưới chữ. Thấy rõ nhất ở hàng có thẻ nổi bật: thẻ bên cạnh
   bị kéo cao thêm gần 300px, và 300px trắng thì khó coi hơn cả ô trống mà thẻ
   nổi bật được đặt ra để chữa. Ảnh to hơn thì bất động sản không mất gì. */
.the-anh { flex: 1 1 auto; }
.the-than { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.the-ten { font-size: 1rem; margin: 0; }
.the-ten a { color: var(--chu); }
.the-thong-so, .the-noi { margin: 0; font-size: .9rem; color: var(--chu-mo); }
.the-gia { margin: 6px 0 0; font-size: 1.05rem; }
.the-gia strong { color: var(--xanh); }
.the-usd, .can-usd { color: var(--chu-mo); font-size: .9rem; margin-left: 6px; }

.nhan { position: absolute; top: 10px; padding: 4px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; }
.nhan-hcare { left: 10px; background: var(--xanh); color: #fff; }
/* #16a34a + chữ trắng chỉ được 3,30:1, mà chữ 12px cần 4,5:1 (WCAG AA).
   #15803d được 5,01:1 — vẫn là xanh lá "còn trống", chỉ đậm hơn một nấc. */
.nhan-trong { right: 10px; background: #15803d; color: #fff; }
/* Chữ navy chứ không trắng: trắng trên cam thương hiệu chỉ được 2,80:1, mà chữ
   12px cần 4,5:1. Navy trên cùng nền cam đó được 4,96:1 — giữ nguyên được màu
   cam anh Dũng chọn, không phải đổi một sắc nào. */
.nhan-sap { right: 10px; background: var(--cam); color: var(--navy); }
.can-nhan .nhan { position: static; display: inline-block; margin: 0 6px 6px 0; }

/* ---------- Dải chạy hết bề ngang cho trang chuyên mục ----------
   VẤN ĐỀ ĐO ĐƯỢC: khung nội dung rộng cố định 1140px. Màn 1600 thì hai bên
   trắng 460px (29% màn hình), màn 1920 thì trắng 780px (41%). Cả trang từ đầu
   xuống chân là MỘT tấm trắng liền, nên mắt đọc ra "một cột chữ lơ lửng giữa
   khoảng trắng" chứ không đọc ra một trang được thiết kế.

   Chữa bằng cách cho NỀN chạy hết bề ngang còn CHỮ vẫn 1140px. Khoảng hai bên
   từ chỗ trống thành một phần của thiết kế, và không phải đụng tới việc nới
   khung — việc mà kho ít tin như hiện nay làm vào chỉ tệ hơn.

   Đây là dùng lại khuôn của .dai-so-lieu ở trang chủ, đã chạy từ trước. */
.dai-muc {
  background: linear-gradient(168deg, var(--xanh-nhat) 0%, #fff 82%);
  border-bottom: 1px solid var(--vien);
  padding: 26px 0 18px;
}
.dai-muc h1 { margin-bottom: .2em; }
/* Tiêu đề bên trái, lọc nhanh bên phải. Màn hẹp thì xếp dọc. */
.dai-muc-hang { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; }
.dai-muc-hang > div { min-width: 0; }
.loc-nhanh { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chip {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--vien); color: var(--chu);
  font-size: .9rem; font-weight: 600; line-height: 1.2;
}
.chip:hover { border-color: var(--xanh); color: var(--xanh-dam); text-decoration: none; }
/* Đang bật thì đặc ruột, không chỉ đổi màu chữ — trên màn sáng ngoài đường
   màu chữ nhạt hơn một chút thì không ai phân biệt được. */
.chip-bat { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.chip-bat:hover { background: var(--xanh-dam); border-color: var(--xanh-dam); color: #fff; }
.dai-muc .dan-nhap { max-width: 62ch; }
/* Nền dải đã ngả xanh; bộ lọc cũng nền xám nữa thì hai mảng dính vào nhau và
   mắt không thấy bộ lọc là một khối riêng. Đổi sang trắng để nó nổi lên. */
.dai-muc .bo-loc { background: #fff; margin: 14px 0 0; }
/* Phần tử cuối trong dải không tự thêm lề dưới — lề dưới là việc của dải. */
.dai-muc > .bo > :last-child { margin-bottom: 0; }

/* ---------- Trang danh sách: cột lọc bên trái ----------
   Bộ lọc nằm ngang bên trên thì khách cuộn tới căn thứ mười là nó khuất
   hẳn — muốn đổi một ô phải cuộn ngược lên đầu. Đưa sang cột trái và cho
   dính lại khi cuộn thì nó luôn ở đó, đồng thời lấp bề ngang bằng CÔNG DỤNG
   chứ không phải bằng khoảng đệm.

   ĐI KÈM KHUNG RỘNG HƠN, và hai việc này bắt buộc đi cùng nhau: nhét thêm một
   cột 260px vào khung 1140 thì cột kết quả chỉ còn 824px và thẻ căn tụt từ 359
   xuống 261 — đánh đổi mất ảnh để lấy tiện ích, sai chiều. Nới lên 1400 thì
   cột kết quả trở lại 1084 (thẻ 347px, gần bằng cũ) và khoảng trắng hai bên
   trên màn 1600 tụt từ 460px xuống 200px.

   Chỉ trang danh sách rộng hơn. Trang bài viết và trang căn vẫn 1140 — chữ
   dài quá một dòng thì khó đọc. */
.bo.rong-hon { max-width: 1360px; }

/* ---------- HAI CỘT: chữ bên trái, biểu mẫu bên phải ----------
   Anh Dũng 27/09/2026: mấy trang chuyên mục còn trắng nhiều hai bên.

   Đo trên màn 1600px: /chu-nha, /hop-tac và /lien-he đều là MỘT cột 680px,
   cao 1.300–1.340px — một dải mảnh chạy dọc giữa màn hình, trắng 460px mỗi
   bên, mà vẫn phải cuộn vì biểu mẫu cao 560–780px nằm dưới cùng.

   KHÔNG chữa bằng cách kéo chữ ra 1140px: dòng chữ dài quá 700px là mắt phải
   quét ngang quá xa, đọc mệt hơn hẳn. Chữa bằng cách xếp biểu mẫu SANG BÊN:
   chữ giữ đúng bề rộng dễ đọc, khoảng trắng bên phải thành chỗ có việc, và
   trang ngắn lại gần một nửa.

   Biểu mẫu dính theo khi cuộn (sticky) để người đọc hết phần giới thiệu vẫn
   thấy nó ngay cạnh, không phải cuộn ngược lên.

   Dưới 980px thì xếp chồng như cũ — điện thoại không đổi gì. */
.dc-luoi { display: grid; gap: 28px; align-items: start; }
@media (min-width: 980px) {
  .dc-luoi { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; }
  /* 88px = chiều cao thanh đầu trang dính + một chút thở */
  .dc-ben { position: sticky; top: 88px; }
}
/* Chữ trong cột trái vẫn giữ bề rộng dễ đọc kể cả khi cột rộng ra */
.dc-chinh > p, .dc-chinh > ul, .dc-chinh > h1 { max-width: 680px; }

.ds-than { display: grid; gap: 22px; }
@media (min-width: 1000px) {
  .ds-than { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  /* Dính dưới thanh đầu trang (cao 95px) cộng một khoảng thở.
     CẨN THẬN: bất kỳ tổ tiên nào có overflow khác visible là sticky chết im
     không báo lỗi — đã mất một lượt vì chuyện này ở bảng so sánh. */
  .ds-loc { position: sticky; top: 107px; }
  /* Trong cột hẹp thì xếp dọc một ô một dòng, không chia ba cột nữa. */
  .ds-loc .bo-loc { grid-template-columns: 1fr; margin: 0; }
  .ds-loc .bo-loc-nut { grid-template-columns: 1fr 1fr; }
}

/* Dải xám xen giữa hai vùng trắng, dùng cho khối phụ dưới danh sách. */
.dai-xam { background: var(--nen-xam); border-top: 1px solid var(--vien); border-bottom: 1px solid var(--vien); }

/* ---------- Toà nhà ---------- */
.luoi-toa { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.the-toa { border: 1px solid var(--vien); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; color: var(--chu); }
.the-toa:hover { border-color: var(--xanh); text-decoration: none; }
.tien-ich { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 0 0 16px; }
.tien-ich li { background: var(--xanh-nhat); color: var(--xanh-dam); padding: 5px 11px; border-radius: 999px; font-size: .88rem; }

/* ---------- Vì sao HCARE ---------- */
.loi-the-nen { background: var(--nen-xam); }
.luoi-loi-the { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .luoi-loi-the { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .luoi-loi-the { grid-template-columns: repeat(4, 1fr); } }
.loi-the { background: #fff; border: 1px solid var(--vien); border-radius: var(--bo-tron); padding: 16px; }
.loi-the h3 { color: var(--xanh-dam); }
.loi-the p { margin: 0; font-size: .94rem; color: var(--chu-mo); }

/* ---------- Bộ lọc ---------- */
.bo-loc { display: grid; gap: 10px; background: var(--nen-xam); border: 1px solid var(--vien); border-radius: var(--bo-tron); padding: 14px; margin: 14px 0 20px; }
.bo-loc label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--chu-mo); }
/* Bắt theo "không phải ô tick" chứ không liệt kê từng type. Trước đây ở đây ghi
   input[type="number"], rồi ô giá đổi sang type="text" để hiện được dấu chấm
   phân nhóm — thế là hai ô giá rụng sạch định dạng, mỏng dính và lệch hẳn so với
   mấy ô chọn bên cạnh. Không có lỗi nào báo, chỉ là nhìn xấu. */
.bo-loc select,
.bo-loc input:not([type="checkbox"]) { font: inherit; line-height: 1.25; padding: 10px; border: 1px solid var(--vien); border-radius: 9px; background: #fff; color: var(--chu); min-width: 0; min-height: 42px; }

/* Khoảng giá: một ô lọc, hai đầu vào, luôn nằm cùng một dòng */
.o-khoang { display: flex; flex-direction: column; gap: 4px; }
.o-khoang-ten { font-size: .85rem; font-weight: 600; color: var(--chu-mo); }
.o-khoang-doi { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.o-khoang-gach { color: var(--chu-mo); font-weight: 600; }

/* Ô nhập giữ 16px trên điện thoại. Nhỏ hơn 16px là Safari trên iPhone TỰ PHÓNG TO
   cả trang lúc khách bấm vào ô, rồi bỏ đó — khách phải tự thu nhỏ lại mới xem
   tiếp được danh sách. Từ màn rộng trở lên mới hạ xuống bằng cỡ chữ của mấy ô
   chọn bên cạnh, vì lúc đó chúng mới nằm cùng một hàng và mắt mới thấy lệch. */
/* Đặt cỡ chữ ở KHUNG CHA chứ không ở chính ô nhập: quy tắc chung của bộ lọc là
   `font: inherit` với độ ưu tiên cao hơn, nên nhắm thẳng vào input thì bị đè và
   không hiểu tại sao. Đổi cha thì `inherit` tự lấy đúng. */
.o-khoang-doi { font-size: 1rem; }
@media (min-width: 760px) { .o-khoang-doi { font-size: .85rem; } }
.o-tick { flex-direction: row !important; align-items: center; gap: 8px !important; }
.o-tick input { width: 18px; height: 18px; }
/* .o-tick vẫn còn vì biểu mẫu khác dùng; bộ lọc thì hết dùng từ 24/09/2026. */
/* Hai nút chia đôi ô lưới, KHÔNG để chúng tự co theo độ dài chữ.
   "Áp dụng" bốn chữ cái, "Xoá lọc" bảy — để flex tự co thì hai nút lệch nhau
   rõ rệt, mà chúng nằm cạnh nhau nên mắt so ngay. Chia đôi thì cân, và cả cặp
   rộng đúng bằng ô lọc phía trên.

   Cùng một hình dáng, chỉ khác màu: nút chính đặc, nút phụ viền. Khác cả hình
   lẫn màu thì trông như hai thứ không liên quan. */
.bo-loc-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Cao bằng ô chọn và ô nhập bên trên (42px) — cả hàng dưới thẳng với hàng trên.
   Dùng flex bên trong để chữ nằm giữa dù là <button> hay <a>. */
.bo-loc-nut .nut {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 12px; border-radius: 9px;
  font-size: .9rem; line-height: 1.2;
}
/* Lưới của .bo-loc khai ở khối thu gọn phía dưới tệp, KHÔNG khai ở đây.
   Trước có hai khối cùng khai một thứ, sửa khối trên thì khối dưới đè lại —
   mất một lượt mới tìm ra. Một chỗ thôi. */

/* ---------- Phân trang ---------- */
.phan-trang { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 24px 0 8px; }
.phan-trang a, .phan-trang span { padding: 9px 14px; border: 1px solid var(--vien); border-radius: 9px; color: var(--chu); font-weight: 600; }
.phan-trang a:hover { border-color: var(--xanh); text-decoration: none; }
.phan-trang [aria-current] { background: var(--xanh); color: #fff; border-color: var(--xanh); }

/* ---------- Trang căn ---------- */
.vet-duong { font-size: .88rem; color: var(--chu-mo); margin-bottom: 10px; }
.can-dau { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
.thu-vien { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
.thu-vien img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.thu-vien .anh-lon { grid-column: 1 / -1; }
.thu-vien .anh-lon img { aspect-ratio: 16 / 10; }
@media (min-width: 760px) { .thu-vien { grid-template-columns: repeat(4, 1fr); } .thu-vien .anh-lon { grid-column: span 4; } }

.can-luoi { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .can-luoi { grid-template-columns: 1fr 300px; align-items: start; } }
.can-gia { font-size: 1.5rem; margin-bottom: .2em; }
.can-gia strong { color: var(--xanh); }
.can-ben .hop-lien-he { position: sticky; top: 80px; border: 1px solid var(--vien); border-radius: var(--bo-tron); padding: 14px; display: grid; gap: 8px; background: #fff; }
.hop-lien-he.ngang { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; position: static; }

.thong-so { display: grid; gap: 0; margin: 0 0 20px; border-top: 1px solid var(--vien); }
.thong-so > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 2px; border-bottom: 1px solid var(--vien); }
.thong-so dt { color: var(--chu-mo); margin: 0; }
.thong-so dd { margin: 0; font-weight: 600; text-align: right; }
.mo-ta p { margin-bottom: .8em; }
/* Bản đồ là ẢNH dựng sẵn, không phải bản đồ tương tác — xem public/web.js.
   Tỉ lệ 2:1 khớp đúng ảnh 1024x512 nên trang không nhảy lúc ảnh về. */
.khung-ban-do { margin: 18px 0 0; }
.khung-ban-do img {
  display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  border: 1px solid var(--vien); border-radius: var(--bo-tron); background: var(--nen-xam);
}
.khung-ban-do figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px;
}
.khung-ban-do figcaption .nut { padding: 8px 14px; font-size: .92rem; }

/* ---------- Biểu mẫu ---------- */
.form-lh { border: 1px solid var(--vien); border-radius: var(--bo-tron); padding: 18px; background: var(--nen-xam); display: grid; gap: 12px; }
.form-lh h2 { margin: 0; font-size: 1.2rem; }
.form-lh label { display: flex; flex-direction: column; gap: 5px; }
.form-lh label > span { font-size: .88rem; font-weight: 600; color: var(--chu-mo); }
/* Chữ "(bắt buộc)" cạnh nhãn ô nhập. Cam đặt lên nền sáng chỉ được 2,63:1 —
   ở đây cam là màu CHỮ chứ không phải màu nền, nên không có đường nào khác ngoài
   đổi chính nó. Anh Dũng chọn navy: 13,06:1. Đánh đổi là nó không còn nổi lên như
   một dấu báo nữa, nhưng đọc được vẫn hơn nổi bật mà mờ. */
.form-lh label em { font-style: normal; font-weight: 400; color: var(--navy); }
.form-lh input, .form-lh textarea { font: inherit; padding: 11px; border: 1px solid var(--vien); border-radius: 9px; background: #fff; color: var(--chu); }
.form-lh input:focus, .form-lh textarea:focus,
.bo-loc select:focus, .bo-loc input:focus,
.tim-nhanh select:focus { outline: 2px solid var(--xanh); outline-offset: 1px; }
.form-ghi-chu { margin: 0; font-size: .9rem; color: var(--chu-mo); }
.bao { margin: 0; padding: 11px 13px; border-radius: 9px; font-weight: 600; }
.bao-ok { background: #dcfce7; color: #14532d; }
.bao-loi { background: #fee2e2; color: #7f1d1d; }

.dan-nhap { font-size: 1.05rem; color: var(--chu-mo); }
.danh-sach-diem { padding-left: 20px; margin: 0 0 24px; }
.danh-sach-diem li { margin-bottom: .5em; }
.trong-rong { background: var(--nen-xam); border: 1px dashed var(--vien); border-radius: var(--bo-tron); padding: 24px; text-align: center; color: var(--chu-mo); }

/* ---------- Chân trang ---------- */
.chan { background: var(--navy); color: #cdd7e6; margin-top: 40px; padding: 28px 0 16px; }
.chan a { color: #cdd7e6; display: block; padding: 3px 0; }
.chan a:hover { color: #fff; }
.chan h3 { color: #fff; font-size: .95rem; margin-bottom: .6em; }
.chan-luoi { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .chan-luoi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .chan-luoi { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; } }
.chan-mo-ta { color: #93a3ba; font-size: .88rem; margin: 6px 0 0; }
/* Lớp .mo dùng chung mang màu dành cho NỀN SÁNG (#5b6779). Rơi vào chân trang
   nền navy thì chỉ còn 2,42:1 — gần như không đọc được. Dùng lại đúng màu chân
   trang đã có sẵn ở trên, đo được 5,42:1. */
.chan .mo { color: #93a3ba; }
.chan-duoi { border-top: 1px solid rgba(255,255,255,.12); margin-top: 22px; padding-top: 14px; display: grid; gap: 4px; }
.chan-duoi p { margin: 0; font-size: .85rem; color: #93a3ba; }

/* Người dùng bật "giảm chuyển động" thì bỏ mọi hiệu ứng */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Bộ lọc thu gọn trên điện thoại ----------
   Mở sẵn trên màn nhỏ thì bộ lọc chiếm hết màn hình đầu tiên và khách không thấy
   căn nào. Dùng checkbox ẩn + label thay vì <details>: <details> không có cách nào
   ép mở bằng CSS trên màn lớn. */
.nut-mo-loc { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.nut-mo-loc::after { content: '▾'; }
#mo-loc:checked ~ .nut-mo-loc::after { content: '▴'; }
.cham-loc { width: 8px; height: 8px; border-radius: 50%; background: var(--cam); display: inline-block; }
.bo-loc { display: none; }
#mo-loc:checked ~ .bo-loc { display: grid; }
/* Trang Tim nhanh KHONG co nut mo/dong bo loc — bieu mau CHINH LA noi dung
   cua trang do. Khong co lop nay thi tren dien thoai trang mo ra chi thay
   mot cau hua 'khai mot lan' roi khong co o nao de khai. */
.bo-loc.luon-hien { display: grid; }

@media (min-width: 760px) {
  .nut-mo-loc { display: none; }
  /* Nút KHÔNG chiếm trọn hàng: sau khi bỏ hai ô tick thì còn đúng năm ô lọc,
     xếp 3 + 2 và chừa lại ô thứ ba của hàng hai — để nút vào đó là vừa khít,
     thành một khối 3×2 thay vì một khối lệch cộng thêm một hàng gần như trống. */
  .bo-loc { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; }
}

/* ===== Trang cá nhân nhân viên (Mốc 7) =====
   Bố cục do hệ thống quy định, nhân viên KHÔNG đổi được màu hay khung
   (đặc tả 6.4) — để mọi namecard và trang cá nhân trông như một nhà. */
.ho-so { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ho-so-chinh { flex: 1 1 260px; min-width: 0; }
.ho-so-anh {
  width: 140px; height: 140px; flex: 0 0 auto;
  border-radius: 14px; object-fit: cover; background: #eef2f7;
}
/* Không có ảnh thì hiện chữ cái đầu. Một khung xám hình người trông như
   tài khoản đã bị khoá, tệ hơn là không có ảnh. */
.ho-so-chu {
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 700; color: #fff; background: var(--xanh);
}
.ho-so h1 { margin: 0 0 2px; }
.ho-so-chuc { margin: 0 0 6px; color: var(--xanh); font-weight: 600; }
.ho-so-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ho-so-qr { flex: 0 0 auto; margin: 0; text-align: center; max-width: 140px; }
.ho-so-qr svg { width: 120px; height: 120px; display: block; margin: 0 auto 6px; }
.ho-so-qr figcaption { font-size: 12px; line-height: 1.35; }
.ho-so-bang { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 16px 0 0; }
.ho-so-bang dt { font-weight: 600; color: #475569; }
.ho-so-bang dd { margin: 0; }

/* --- Khối đầu trang nền tối ---
   Ảnh và tên đặt trên nền navy để mặt người nổi hẳn lên, và để trang cá nhân
   khác hẳn mấy trang danh sách — khách bấm từ namecard vào là biết mình đang
   xem hồ sơ một con người, không phải một tin rao. */
.ho-so-dau {
  background: linear-gradient(160deg, var(--xanh-dam, #142C52) 0%, #1e4a82 100%);
  color: #fff; padding: 22px 0 34px; margin-bottom: 0;
}
.ho-so-dau h1 { color: #fff; }
.ho-so-dau .vet-duong-sang, .ho-so-dau .vet-duong-sang a { color: #c9d9ef; }
.ho-so-dau .vet-duong-sang a:hover { color: #fff; }
.ho-so-anh { border: 3px solid rgba(255, 255, 255, .85); }
.ho-so-chuc { color: #9dc0ee; }
.ho-so-thuoc { margin: 6px 0 0; font-size: .92rem; color: #c9d9ef; }
.ho-so-qr figcaption { color: #c9d9ef; }
.ho-so-qr svg { background: #fff; padding: 6px; border-radius: 8px; }
/* Nút sáng trên nền tối: nút trắng viền mảnh, không dùng nút xám mặc định */
.nut-sang {
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
}
.nut-sang:hover { background: rgba(255, 255, 255, .22); text-decoration: none; }

/* --- Dải số liệu ---
   Đè lên mép dưới khối đầu trang. Đây là thứ thuyết phục nhất trên cả trang
   nên phải thấy ngay, không bắt cuộn. */
.ho-so-so {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--vien); border: 1px solid var(--vien); border-radius: var(--bo-tron);
  overflow: hidden; margin-top: -22px; box-shadow: 0 6px 20px rgba(20, 44, 82, .10);
}
@media (min-width: 720px) { .ho-so-so { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ho-so-o { background: #fff; padding: 16px 12px; text-align: center; }
.ho-so-o b {
  display: block; font-size: 1.85rem; line-height: 1.1; color: var(--xanh);
  font-variant-numeric: tabular-nums;
}
.ho-so-o span { display: block; margin-top: 3px; font-size: .84rem; color: var(--chu-mo); }

/* --- Thân trang: nội dung bên trái, thông tin liên hệ bên phải --- */
.ho-so-than { display: grid; gap: 26px; }
@media (min-width: 900px) {
  .ho-so-than { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
.ho-so-trai section { margin-bottom: 26px; }
.ho-so-trai h2 { margin: 0 0 8px; font-size: 1.15rem; }
.ho-so-thanh-tich { margin: 0; padding-left: 18px; }
.ho-so-thanh-tich li { margin-bottom: .45em; }
.ho-so-the { display: flex; flex-wrap: wrap; gap: 7px; }
.the-nho {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  background: var(--nen-xam); border: 1px solid var(--vien);
  font-size: .88rem; color: var(--chu);
}
.ho-so-phai {
  background: var(--nen-xam); border: 1px solid var(--vien);
  border-radius: var(--bo-tron); padding: 16px;
}
/* Tiêu đề chỉ dành cho trình đọc màn hình: khối bên phải nhìn là hiểu, nhưng
   người dùng trình đọc cần một cái tên để biết mình đang ở khối nào. */
.chi-doc {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ho-so-bang { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
.ho-so-bang > div { display: grid; gap: 1px; }
.ho-so-bang dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }

/* Màn hình hẹp: QR xuống dòng riêng, đừng ép ba cột trên điện thoại */
@media (max-width: 640px) {
  .ho-so-anh { width: 96px; height: 96px; }
  .ho-so-chu { font-size: 40px; }
  .ho-so-qr { max-width: none; width: 100%; }
}
/* In ra giấy: bỏ nút bấm và nền tối, giữ QR — trang in ra dùng thay tờ rơi được */
@media print {
  .ho-so-nut { display: none; }
  .ho-so-dau { background: none; color: inherit; }
  .ho-so-dau h1 { color: inherit; }
  .ho-so-thuoc, .ho-so-qr figcaption { color: #444; }
  .ho-so-so { box-shadow: none; margin-top: 12px; }
}

/* ===== Băng ảnh chạy ở đầu trang chủ =====
   Chạy bằng CSS thuần. Không JavaScript: đây là thứ khách thấy trước nhất,
   chờ tải script rồi mới có ảnh là hỏng cảm giác đầu tiên về công ty.

   Chính sách bảo mật của trang chặn style nội tuyến, nên số lượng ảnh được
   truyền xuống bằng thuộc tính data-so và chọn bằng bộ chọn CSS. Không dùng
   style="animation-delay:..." trên từng thẻ được. */
.hero { position: relative; overflow: hidden; }
.hero-anh { position: absolute; inset: 0; z-index: 0; }
.hero-anh img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
}
/* Lớp phủ tối: nền xanh thương hiệu mờ dần, để chữ trắng luôn đọc được dù ảnh
   căn hộ sáng hay tối. Không có lớp này thì gặp ảnh phòng khách nhiều nắng là
   tiêu đề biến mất. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Đậm bên TRÁI nơi có chữ, nhạt dần sang PHẢI để lộ ảnh căn hộ.
     Phủ đều một màu đậm thì chữ đọc tốt nhưng ảnh coi như không có — mà cả
     băng ảnh này sinh ra là để khách nhìn thấy nhà. Thêm một lớp dọc nhạt
     nữa cho chắc, phòng gặp ảnh phòng khách chan hoà nắng. */
  background:
    linear-gradient(90deg,
      rgba(20, 44, 82, .93) 0%,
      rgba(20, 44, 82, .80) 38%,
      rgba(39, 89, 160, .42) 100%),
    linear-gradient(180deg, rgba(20, 44, 82, .30) 0%, rgba(20, 44, 82, .55) 100%);
}
/* Có ảnh thì để băng cao hơn một chút cho thấy được nhà, nhưng không cao tới
   mức đẩy ô tìm kiếm xuống dưới màn hình điện thoại. */
@media (min-width: 720px) {
  .hero:has(.hero-anh) { min-height: 380px; display: flex; align-items: center; }
}
.hero-chu { position: relative; z-index: 2; }

/* Mỗi ảnh hiện 7 giây. Độ trễ ÂM để ảnh thứ hai trở đi vào đúng lượt ngay từ
   lần chạy đầu, không phải chờ hết một vòng. */
.hero-anh[data-so="1"] img { opacity: 1; }
.hero-anh[data-so="2"] img { animation: hero-doi-2 14s linear infinite; }
.hero-anh[data-so="3"] img { animation: hero-doi-3 21s linear infinite; }
.hero-anh[data-so="4"] img { animation: hero-doi-4 28s linear infinite; }
.hero-anh[data-so="5"] img { animation: hero-doi-5 35s linear infinite; }
.hero-anh[data-so="6"] img { animation: hero-doi-6 42s linear infinite; }
/* Khai báo SAU phần trên: thuộc tính rút gọn animation đặt lại độ trễ về 0,
   nên các dòng này phải đứng sau mới có tác dụng. */
.hero-anh img:nth-child(2) { animation-delay: -7s; }
.hero-anh img:nth-child(3) { animation-delay: -14s; }
.hero-anh img:nth-child(4) { animation-delay: -21s; }
.hero-anh img:nth-child(5) { animation-delay: -28s; }
.hero-anh img:nth-child(6) { animation-delay: -35s; }

@keyframes hero-doi-2 { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hero-doi-3 { 0%, 29% { opacity: 1; } 33%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hero-doi-4 { 0%, 21% { opacity: 1; } 25%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hero-doi-5 { 0%, 17% { opacity: 1; } 20%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hero-doi-6 { 0%, 14% { opacity: 1; } 16.6%, 98% { opacity: 0; } 100% { opacity: 1; } }

/* Người đã tắt hiệu ứng chuyển động trong máy: giữ một ảnh đứng yên.
   Ảnh nhấp nháy có thể gây khó chịu thật sự, không phải chuyện nhỏ. */
@media (prefers-reduced-motion: reduce) {
  .hero-anh img { animation: none; opacity: 0; }
  .hero-anh img:first-child { opacity: 1; }
}

/* ===== Đổi ngôn ngữ bằng cờ ===== */
.co-ngon-ngu { display: flex; align-items: center; gap: 4px; }
.co-ngon-ngu a {
  display: block; line-height: 0; padding: 3px;
  border: 2px solid transparent; border-radius: 5px;
}
.co-ngon-ngu a:hover { border-color: rgba(39, 89, 160, .35); }
/* Ngôn ngữ đang xem: viền đậm. Vẫn để nguyên độ sáng chứ không làm mờ cái kia —
   làm mờ thì khách tưởng bấm không được. */
.co-ngon-ngu a[aria-current="true"] { border-color: var(--xanh); }
.co-ngon-ngu svg { display: block; width: 26px; height: auto; border-radius: 2px; }

/* Màn hình hẹp: chữ chiếm gần hết băng nên lớp phủ ngang (đậm trái, nhạt phải)
   thành đậm cả bề ngang, ảnh coi như không có. Phần lớn khách xem bằng điện
   thoại, nên đổi sang phủ DỌC nhạt hơn và thêm bóng chữ để bù độ tương phản —
   bóng chữ chỉ tối đúng vùng sau con chữ, không làm tối cả tấm ảnh. */
@media (max-width: 719px) {
  .hero:has(.hero-anh)::after {
    background: linear-gradient(180deg,
      rgba(20, 44, 82, .58) 0%,
      rgba(20, 44, 82, .74) 55%,
      rgba(20, 44, 82, .88) 100%);
  }
  .hero:has(.hero-anh) h1,
  .hero:has(.hero-anh) .hero-phu { text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
}

/* ===== Dải số liệu dưới băng đầu =====
   Nền xanh đậm cắt ngang giữa băng đầu và vùng trắng bên dưới. Không có dải
   này thì cả trang từ băng đầu xuống chân trang là một tấm trắng dài, không
   có nhịp — mắt không biết dừng ở đâu. */
.dai-so-lieu { background: var(--navy, #142C52); color: #fff; }
.so-lieu {
  display: grid; gap: 4px 20px;
  grid-template-columns: repeat(2, 1fr);
  padding: 18px 0;
}
.so-lieu > div { padding: 6px 0; }
.so-lieu strong { display: block; font-size: 1.6rem; line-height: 1.15; color: #fff; }
.so-lieu span { font-size: .86rem; opacity: .82; }
@media (min-width: 720px) {
  .so-lieu { grid-template-columns: repeat(4, 1fr); padding: 26px 0; }
  .so-lieu strong { font-size: 2rem; }
}

/* ===== Thẻ toà nhà có ảnh =====
   Trước đây chỉ có tên toà trên nền trắng — mà toà nhà là thứ khách nhận ra
   bằng mắt chứ không bằng tên. */
.luoi-toa { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.the-toa { padding: 0; overflow: hidden; gap: 0; }
.the-toa-anh {
  display: block; aspect-ratio: 5 / 3; background: var(--nen-xam, #eef2f7);
  overflow: hidden;
}
.the-toa-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Toà chưa có ảnh nào: ô chữ cái đầu. Vẫn là một khối màu, không để thẻ trơ
   mỗi dòng chữ trông như lỗi hiển thị. */
/* Toà chưa có ảnh: ô chữ cái đầu.
   Đây KHÔNG phải chỗ để qua loa — hiện 12 trên 16 toà chưa có ảnh, nên chính
   ô này mới là thứ chiếm phần lớn trang Toà nhà. Một ô xanh phẳng trông như
   ảnh hỏng chưa tải xong; thêm chuyển sắc và một vệt sáng chéo thì nó trông
   như được thiết kế, không phải chỗ trống. */
.the-toa-chu {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 2.8rem; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--xanh) 0%, var(--navy, #142C52) 100%);
  letter-spacing: -.02em;
}
.the-toa-chu::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .13) 0 38%, transparent 38%);
}
.the-toa-chu-nhat { display: block; padding: 11px 13px; }
.the-toa-chu-nhat strong { display: block; }
.the-toa:hover .the-toa-anh img { transform: scale(1.04); }
.the-toa-anh img { transition: transform .35s ease; }
@media (prefers-reduced-motion: reduce) { .the-toa-anh img { transition: none; } }

/* ===== Biểu tượng cho lợi thế ===== */
.loi-the { display: flex; flex-direction: column; gap: 6px; }
.loi-the-icon { width: 30px; height: 30px; color: var(--xanh); }
.loi-the h3 { margin: 0; }

/* ===== Khối liên hệ nổi bật =====
   Đây là chỗ khách để lại số điện thoại — thứ cả trang này sinh ra để lấy.
   Trước đây là biểu mẫu xám trên nền trắng, nằm lẫn với phần trên nên rất dễ
   lướt qua. */
.dai-lien-he {
  background: linear-gradient(160deg, var(--xanh) 0%, var(--navy, #142C52) 100%);
}
.dai-lien-he .khoi, .dai-lien-he form {
  background: #fff; border-radius: var(--bo-tron); padding: 18px;
}
.dai-lien-he h2, .dai-lien-he > .bo > h2 { color: #fff; }
/* Tiêu đề NẰM TRONG thẻ form trắng thì phải chữ tối — trước 28/10/2026 nó
   ăn luật trên, trắng trên trắng, khách không thấy form hỏi gì. */
.dai-lien-he form h2 { color: var(--navy, #142C52); }

/* ===== Quy trình theo bước =====
   Số bước to, đặt lệch bên trái — người đọc lướt qua là biết ngay có mấy bước
   và mình đang ở bước nào. Dùng <ol> thật chứ không vẽ số bằng CSS lên <div>:
   trình đọc màn hình phải nghe được "mục 2 trên 3". */
.quy-trinh { list-style: none; counter-reset: buoc; padding: 0; margin: 0; }
.quy-trinh > li {
  counter-increment: buoc;
  position: relative;
  padding: 0 0 22px 52px;
  border-left: 2px solid var(--vien);
  margin-left: 17px;
}
.quy-trinh > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.quy-trinh > li::before {
  content: counter(buoc);
  position: absolute; left: -18px; top: -2px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--xanh); color: #fff;
  border-radius: 50%; font-weight: 700; font-size: 1rem;
}
.quy-trinh h2, .quy-trinh h3 { margin: 0 0 .35em; }

/* MỖI BƯỚC XẾP HAI CỘT TỪ 980px: chữ bên trái, ảnh bên phải.
   Trang /quy-trinh đo được ngày 27/09/2026: bề rộng 680px mà nội dung cao
   4.168px — hơn bốn màn hình cuộn, trong khi hai bên trắng 460px mỗi bên.
   Thủ phạm là mỗi bước có một tấm ảnh 16:9 nằm chắn ngang giữa đoạn chữ.
   Xếp ảnh sang bên thì trang ngắn lại quá nửa mà chữ vẫn đúng bề rộng dễ đọc.
   Dưới 980px giữ nguyên xếp dọc — trên điện thoại ảnh phải rộng hết màn. */
@media (min-width: 980px) {
  .quy-trinh > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    column-gap: 28px;
    align-items: start;
  }
  /* Mọi thứ xếp dọc trong cột 1; riêng tấm ảnh nhảy sang cột 2 và cao suốt
     chiều cao của bước đó (grid-row 1 / -1). */
  .quy-trinh > li > * { grid-column: 1; }
  .quy-trinh > li > .qt-anh { grid-column: 2; grid-row: 1 / -1; margin: 0; }
}
.quy-trinh ul { margin: .5em 0 0; padding-left: 1.1em; }
.quy-trinh ul li { margin-bottom: .35em; }
/* Dòng "cần chuẩn bị": tách hẳn ra để khách lướt trang vẫn bắt được, vì đây là
   phần duy nhất họ phải LÀM gì đó trước khi tới. */
.quy-trinh-chuan-bi {
  margin: .7em 0 0; padding: 8px 12px;
  background: var(--nen-xam); border-radius: 8px;
  font-size: .92rem;
}
.giua-trang { text-align: center; margin-top: 22px; }

@media (max-width: 519px) {
  .quy-trinh > li { padding-left: 40px; }
  .quy-trinh > li::before { width: 30px; height: 30px; left: -16px; font-size: .92rem; }
}

/* ===== Thanh liên hệ dính màn hình =====
   Điện thoại: thanh dính đáy, ba nút chia đều, cao 54px cho vừa ngón tay.
   Máy tính: cột nút nhỏ dính mép phải, không che nội dung. */
.lien-he-dinh {
  position: fixed; z-index: 60;
  left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fff;
  border-top: 1px solid var(--vien);
  /* Chừa vùng vuốt của iPhone, không thì nút bị thanh gạch che mất */
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .07);
}
.lien-he-dinh a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 54px; padding: 6px 4px;
  font-size: .76rem; font-weight: 600; text-decoration: none;
  color: var(--chu);
}
.lien-he-dinh a + a { border-left: 1px solid var(--vien); }
.lien-he-dinh svg { width: 21px; height: 21px; }
.ld-goi { color: var(--xanh); }
.ld-zalo { color: #0068FF; }
.ld-wa { color: #25D366; }
/* Chữ "Zalo" trong ô tròn: Zalo không có biểu tượng dạng nét vẽ dùng tự do,
   nên dùng chính chữ — ai cũng nhận ra. */
.ld-chu-zalo {
  display: flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 5px;
  background: #0068FF; color: #fff;
  font-size: .5rem; font-weight: 700; letter-spacing: -.02em;
}

/* Chừa chỗ cho thanh, không thì nó che mất dòng cuối chân trang */
@media (max-width: 899px) {
  body { padding-bottom: 58px; }
}

/* Máy tính: gom thành cột nhỏ ở mép phải */
@media (min-width: 900px) {
  .lien-he-dinh {
    left: auto; right: 14px; bottom: 14px;
    grid-template-columns: 1fr;
    gap: 8px;
    background: none; border: 0; box-shadow: none; padding: 0;
  }
  .lien-he-dinh a {
    width: 54px; height: 54px; min-height: 0;
    border-radius: 50%; background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
    font-size: 0;            /* chỉ còn biểu tượng, chữ để cho trình đọc màn hình */
  }
  .lien-he-dinh a + a { border-left: 0; }
  .lien-he-dinh svg { width: 24px; height: 24px; }
  .ld-chu-zalo { width: 26px; height: 26px; font-size: .6rem; }
  .lien-he-dinh a:hover { transform: translateY(-2px); }
  .lien-he-dinh a { transition: transform .15s ease; }
}
@media (prefers-reduced-motion: reduce) { .lien-he-dinh a { transition: none; } }
/* In ra giấy thì bỏ hẳn */
@media print { .lien-he-dinh { display: none; } }

/* ===== Chip toà nhà dưới ô tìm nhanh ===== */
.chip-toa { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip-toa a {
  display: inline-block; padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
  color: #fff; font-size: .86rem; text-decoration: none;
  background: rgba(255, 255, 255, .10);
}
.chip-toa a:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }

/* Mục lục toà nhà: ô rộng hơn trang chủ vì đây là trang chính của chúng,
   không phải mục phụ. */
.luoi-toa-day { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

/* =====================================================================
   PHẦN ĐẦU TRANG — bố cục hai dải, học theo Alpha Housing
   Ghi đè phần .dau cũ ở trên; để ở cuối tệp cho dễ đọc lịch sử sửa đổi.
   ===================================================================== */
.dau { border-bottom: 1px solid var(--vien); background: #fff; position: sticky; top: 0; z-index: 50; }

/* ---------- Dải trên: liên hệ + ngôn ngữ ---------- */
.dau-tren { background: var(--navy, #142C52); color: #fff; font-size: .82rem; }
.dau-tren .bo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.dau-tren-trai { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dau-tren a { color: #fff; display: inline-flex; align-items: center; gap: 5px; opacity: .92; }
.dau-tren a:hover { opacity: 1; text-decoration: underline; }
.dau-tren svg { width: 13px; height: 13px; }
.dau-tren-phai { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dau-tren .tk-tren { padding: 3px 4px; white-space: nowrap; }
.dau-tren .tk-vien {
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 8px; padding: 3px 10px;
}
.dau-tren .tk-vien:hover { border-color: #fff; text-decoration: none; background: rgba(255, 255, 255, .1); }

/* Điện thoại: email dài quá thì giấu, giữ số gọi — số mới là thứ khách bấm.
   Dải trên lúc này còn: số điện thoại · Đăng nhập · Đăng ký · hai lá cờ. */
@media (max-width: 559px) {
  .dau-tren-trai a + a { display: none; }
  .dau-tren .bo { gap: 8px; }
  .dau-tren-phai { gap: 7px; }
  .dau-tren .tk-vien { padding: 3px 8px; }
}
/* Cờ trên nền tối: viền sáng, không dùng viền xanh thương hiệu vì chìm */
.dau-tren .co-ngon-ngu a[aria-current="true"] { border-color: #fff; }
.dau-tren .co-ngon-ngu a:hover { border-color: rgba(255, 255, 255, .5); }

/* ---------- Dải chính: logo + menu ---------- */
.dau-chinh .bo { display: flex; align-items: center; gap: 12px; min-height: 60px; flex-wrap: wrap; }

/* ---------- Menu xổ ---------- */
.co-xo { position: relative; }
.xo-mui {
  display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor; opacity: .6;
}

@media (max-width: 1059px) {
  /* Màn hẹp: KHÔNG xổ gì cả, hiện phẳng hết. Menu xổ trên màn cảm ứng luôn
     khó bấm — chạm một cái là vừa mở vừa nhảy trang. */
  .xo-mui { display: none; }
  .xo { display: flex; flex-direction: column; }
  .xo a { padding-left: 16px !important; font-weight: 500 !important; opacity: .85; }
  /* 16 toà nhà KHÔNG xổ trên điện thoại: chúng đẩy "Dịch vụ", "Về HCARE" và
     nút gọi xuống tận đáy, ai tìm "Liên hệ" phải cuộn qua cả danh sách toà.
     Bấm "Toà nhà" là sang thẳng trang danh sách — trang đó có ảnh, trên điện
     thoại còn dễ nhìn hơn một cột chữ dài. */
  .xo-rong { display: none; }
  /* Mục lặp lại tên mục cha — chỉ cần trên máy tính, nơi khối xổ mở bằng
     rê chuột nên mục cha không bấm được. */
  .chi-may-tinh { display: none !important; }
}

@media (min-width: 1060px) {
  .nut-menu { display: none; }
  .dieu-huong {
    display: flex !important; flex-direction: row; align-items: center;
    width: auto; margin-left: auto; padding: 0; gap: 2px;
  }
  /* KHÔNG cho chữ vỡ dòng — đây chính là lỗi cũ: 9 mục xếp ngang, tới 1280px
     là mỗi mục tách thành hai dòng, nhìn như trang hỏng. */
  .dieu-huong > a, .xo-dau { white-space: nowrap; }
  .dieu-huong > a, .xo-dau { border: 0; padding: 8px 11px; font-size: .95rem; font-weight: 600; }

  .xo {
    position: absolute; top: 100%; left: 0; z-index: 10;
    display: none; flex-direction: column;
    min-width: 210px; padding: 6px;
    background: #fff; border: 1px solid var(--vien); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  }
  /* :focus-within để bấm phím Tab cũng mở được, không chỉ rê chuột */
  .co-xo:hover > .xo, .co-xo:focus-within > .xo { display: flex; }
  .xo a {
    padding: 8px 10px; border-radius: 7px; font-size: .92rem; font-weight: 500;
    color: var(--chu); white-space: nowrap;
  }
  .xo a:hover { background: var(--nen-xam); text-decoration: none; }

  /* 16 toà nhà: xếp hai cột cho khỏi dài quá màn hình */
  .xo-rong { display: none; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 0 4px; right: 0; left: auto; }
  .co-xo:hover > .xo-rong, .co-xo:focus-within > .xo-rong { display: grid; }

  .dieu-huong .nut-goi {
    margin-left: 8px; padding: 9px 16px;
    color: #fff; background: var(--xanh); border-radius: 10px; border: 0;
  }
}

/* Số căn trống nhỏ bên cạnh tên toà trong menu */
.xo-so {
  display: inline-block; min-width: 18px; padding: 0 5px;
  background: var(--xanh); color: #fff;
  border-radius: 999px; font-size: .72rem; font-weight: 700; text-align: center;
}

/* ===== Bài cẩm nang =====
   Bề ngang hẹp là CỐ Ý: dòng dài quá ~75 ký tự thì mắt khó bắt đầu dòng tiếp
   theo, đọc một lúc là mỏi. Đây là trang để ĐỌC, không phải để lướt. */
.bai-viet { max-width: 44rem; }
.bai-viet h1 { margin-bottom: .3em; }
.bai-viet h2 { margin: 1.7em 0 .5em; font-size: 1.18rem; }
.bai-viet p { margin: 0 0 .9em; line-height: 1.75; }
.bai-viet ul { margin: 0 0 1em; padding-left: 1.2em; }
.bai-viet ul li { margin-bottom: .4em; line-height: 1.7; }
/* Ô lưu ý: thứ người đọc lướt nhanh vẫn phải bắt được */
.bai-luu-y {
  padding: 12px 14px; margin: 1em 0 1.3em !important;
  background: var(--nen-xam); border-left: 3px solid var(--xanh);
  border-radius: 0 8px 8px 0;
}
.bai-ngay { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--vien); font-size: .88rem; }

.luoi-bai { display: grid; gap: 12px; margin-top: 18px; }
.the-bai {
  display: block; padding: 16px;
  border: 1px solid var(--vien); border-radius: var(--bo-tron); color: var(--chu);
}
.the-bai:hover { border-color: var(--xanh); text-decoration: none; }
.the-bai strong { display: block; margin-bottom: 4px; font-size: 1.05rem; color: var(--xanh-dam); }

/* Nhãn chuyên mục trên đầu bài: cho người đọc biết bài này viết cho ai
   trước khi họ đọc nhầm bài của nhóm khác. */
.nhan-muc {
  margin: 0 0 .25em; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--xanh);
}
.bai-nut { margin: 1.6em 0 0 !important; }
.muc-bai { margin-top: 30px; }
.muc-bai h2 { margin-bottom: 0; font-size: 1.1rem; }

/* ---------- Trang một toà nhà ----------
   Hai cột trên màn rộng: phần đọc bên trái, bảng số liệu và tiện ích bên
   phải. Trên điện thoại xếp dọc, và bảng số liệu xuống dưới phần giới thiệu
   vì đoạn văn mới là thứ khách đọc trước. */
/* minmax(0, 1fr) chứ KHÔNG để trống: ô lưới mặc định có min-width: auto, nên
   bảng giá bên trong (.bang-gia min-width 26rem = 416px) đẩy cả cột rộng ra
   416px. Trên màn 375px thì CẢ TRANG cuộn ngang — bảng thì vẫn cuộn được
   trong khung của nó nên không ai nghi bảng, chỉ thấy trang bị lệch.
   Bản màn rộng phía dưới vốn đã có minmax(0, 1fr), nên lỗi chỉ hiện trên
   điện thoại — đúng chỗ ít người ngồi soi nhất. */
.toa-than { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 18px; }
@media (min-width: 900px) {
  .toa-than { grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: start; }
}
.toa-chinh h2 { margin: 1.6em 0 .5em; font-size: 1.15rem; }
.toa-chinh .mo-ta p { line-height: 1.75; margin: 0 0 .9em; }

.danh-cham { margin: 0 0 1em; padding-left: 1.2em; }
.danh-cham li { margin-bottom: .4em; line-height: 1.7; }

/* Ô nhận định: tách ra để khách biết đang đọc ý kiến của HCARE chứ không
   phải số liệu tra được. */
.toa-nhan-dinh {
  margin-top: 1.4em; padding: 14px 16px;
  background: var(--nen-xam); border-left: 3px solid var(--xanh); border-radius: 0 8px 8px 0;
}
.toa-nhan-dinh h2 { margin: 0 0 .35em !important; font-size: 1.02rem; }
.toa-nhan-dinh p { margin: 0; line-height: 1.7; }

.toa-bang { padding: 16px; border: 1px solid var(--vien); border-radius: var(--bo-tron); }
.toa-bang + .toa-bang { margin-top: 14px; }
.toa-bang h2 { margin: 0 0 .6em !important; font-size: 1rem; }
.toa-bang dl { margin: 0; }
.toa-bang dt { font-size: .82rem; color: var(--chu-mo); }
.toa-bang dd { margin: 0 0 .7em; font-weight: 600; line-height: 1.5; }
.toa-bang dd:last-child { margin-bottom: 0; }
.toa-bang .tien-ich { margin: 0; }

/* Ảnh bìa toà nhà. Tỉ lệ 2:1 cố định để trang không nhảy khi ảnh tải về,
   và để ảnh dọc lẫn ảnh ngang đều dùng được — object-fit tự cắt. */
.toa-anh { margin: 16px 0 0; }
.toa-anh img {
  display: block; width: 100%; aspect-ratio: 2 / 1;
  object-fit: cover; border-radius: var(--bo-tron); background: var(--nen-xam);
}
.toa-anh figcaption { margin-top: 6px; font-size: .8rem; }
.toa-anh figcaption a { color: inherit; text-decoration: underline; }

/* Bảng giá theo loại căn. Trên điện thoại cho cuộn ngang thay vì ép bốn cột
   vào 360px — ép thì chữ vỡ thành từng ký tự một, đọc không nổi. */
.bang-cuon { overflow-x: auto; margin: 0 0 8px; }
.bang-gia { width: 100%; min-width: 26rem; border-collapse: collapse; font-size: .95rem; }
.bang-gia th, .bang-gia td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang-gia th { font-size: .82rem; font-weight: 600; color: var(--chu-mo); text-transform: uppercase; letter-spacing: .03em; }
.bang-gia tbody tr:last-child td { border-bottom: 0; }
.bang-gia td:first-child { color: var(--xanh-dam); }
.bang-gia-chu { margin-top: 0 !important; font-size: .84rem; }

/* ===== Trang chọn loại tài khoản (Mốc 10) =====
   Ba thẻ xếp dọc trên điện thoại, ba cột từ màn hình vừa trở lên. Chiều cao do
   nội dung quyết định, nút luôn nằm đáy thẻ để ba nút thẳng hàng nhau. */
.the-vai { display: grid; gap: 16px; margin: 24px 0 8px; }
@media (min-width: 760px) { .the-vai { grid-template-columns: repeat(3, 1fr); } }

/* CẢ THẺ là một liên kết. Trước đây thẻ chứa một nút con, nên bấm vào khoảng
   trống trong thẻ thì không ăn — mà trên điện thoại người ta bấm vào giữa ô. */
.vai {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 84px; padding: 18px 20px;
  border: 1px solid var(--vien, #e3e8ee); border-radius: 12px;
  background: #fff; color: var(--chu);
}
.vai:hover {
  border-color: var(--xanh); background: var(--nen-xam);
  text-decoration: none; color: var(--xanh-dam);
}
.vai-ten { font-size: 1.05rem; font-weight: 600; line-height: 1.3; display: block; }
/* Dòng mô tả dưới tên vai — chỉ trang Đăng nhập dùng. Thẻ ở trang Đăng ký
   không có dòng này nên nó vẫn như cũ, không phải sửa gì bên đó. */
.vai-mo { display: block; margin-top: 4px; font-size: .9rem; color: var(--chu-mo); line-height: 1.45; font-weight: 400; }
.vai:hover .vai-mo { color: inherit; }
.vai-mui { color: var(--xanh); font-size: 1.2rem; flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   KHÔNG DÙNG style="" TRONG TRANG EJS.

   server.js đặt Content-Security-Policy style-src 'self', nên mọi thuộc tính
   style viết thẳng vào thẻ đều bị TRÌNH DUYỆT CHẶN — thẻ vẫn còn nguyên trong
   HTML, chỉ là không ăn. Đã có ba trang (chủ nhà, hợp tác, nhà phố) mất khoảng
   cách kiểu đó mà không ai thấy, vì nó chỉ lệch vài chục pixel và console thì
   không ai mở.

   Cần khoảng cách rời thì khai một lớp ở đây.
   --------------------------------------------------------------------------- */
.tach-tren { margin-top: 18px; }
.tach-duoi { margin-bottom: 22px; }

/* Dòng phí quản lý dưới giá thuê. Đậm hơn chữ .mo vì đây là tiền khách phải
   trả thêm, không phải ghi chú cho đẹp — để mờ là đúng cái bẫy đang muốn gỡ. */
.phi-ql {
  margin-top: 6px; font-size: .9rem; color: #7a4a00;
  background: #fff6e5; border-radius: 8px; padding: 6px 10px; display: inline-block;
}
.phi-ql-gom { color: #1c6b3c; background: #eaf7ef; }

/* ---------------------------------------------------------------------------
   HAI LỐI VÀO trên trang chủ nhà và trang môi giới (25/09/2026)

   Hai ô, một việc: đọc "vì sao" trước, hay mở tài khoản luôn. Ô "vì sao" nổi
   hơn vì phần lớn người tới đây chưa biết HCARE là ai — đưa họ thẳng tới biểu
   mẫu là hỏi tên trước khi tự giới thiệu.
   --------------------------------------------------------------------------- */
.hai-loi { display: grid; gap: 12px; margin: 20px 0 26px; }
@media (min-width: 700px) { .hai-loi { grid-template-columns: 1fr 1fr; } }
.loi-vao {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; border: 1px solid var(--vien); border-radius: var(--bo-tron);
  background: #fff; color: var(--chu);
}
.loi-vao:hover { border-color: var(--xanh); background: var(--nen-xam); text-decoration: none; }
.loi-vao-chinh { border-color: var(--xanh); background: var(--xanh-nhat); }
.loi-vao-chinh:hover { background: #e3ecf8; }
.loi-ten { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.loi-ten::after { content: ' →'; color: var(--xanh); }
.loi-y { font-size: .9rem; color: var(--chu-mo); }

/* ---------------------------------------------------------------------------
   TRANG "TẠI SAO NÊN CHỌN HCARE" và TRANG "VỀ HCARE"

   Một bộ lớp, ba trang. Anh Dũng muốn các trang này giống nhau về hình thức,
   nên phần trình bày phải ở chung một chỗ chứ không nhân đôi.

   25/09/2026 — làm lại cho bớt chữ: mỗi khối có một hình dạng riêng (thẻ có
   ảnh, danh sách dấu tích, sơ đồ khối, bảng so sánh, dải ảnh). Trước đây khối
   nào cũng là một dãy hộp chữ giống nhau nên mắt trượt qua hết.
   --------------------------------------------------------------------------- */

/* ----- Đầu trang ----- */
.vs-dau {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--xanh) 0%, var(--navy) 100%);
  color: #fff; padding: 28px 0 32px;
}
/* Ảnh nền: đặt bằng thẻ <img> vì CSP chặn style="" nên không truyền được tên
   tệp qua CSS, mà mỗi trang một ảnh khác. Lớp phủ nằm ở ::after. */
.vs-dau-nen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.vs-dau-anh::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(20,44,82,.94) 0%, rgba(20,44,82,.86) 55%, rgba(39,89,160,.62) 100%);
}
@media (max-width: 699px) {
  /* Điện thoại: ảnh hẹp nên chữ đè lên nhiều hơn — phủ đậm hơn cho chắc chắn đọc được */
  .vs-dau-anh::after { background: linear-gradient(160deg, rgba(20,44,82,.95), rgba(20,44,82,.9)); }
}
.vs-dau-chu { position: relative; z-index: 1; }
.vs-dau h1 { font-size: 1.75rem; margin: 6px 0 .4em; text-wrap: balance; }
@media (min-width: 760px) { .vs-dau { padding: 52px 0 56px; } .vs-dau h1 { font-size: 2.15rem; } }
.vs-lan { margin: 0; font-size: .9rem; }
.vs-lan a { color: #cfe0f7; }
.vs-dan { max-width: 640px; margin: 0 0 20px; font-size: 1.02rem; color: #e6eefa; }
.vs-nut { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
/* Nút chính ở đây là màu CAM: nền đã là xanh navy, nút xanh đặt lên đó thì chìm
   mất — mà đây đúng là việc trang muốn người đọc làm. */
/* NÚT BẤM CHÍNH. Trắng trên cam chỉ 2,80:1 — thấp nhất trong cả trang, mà đây
   lại là nút quan trọng nhất cho việc có khách, và người đọc nó nhiều khi là
   chủ nhà lớn tuổi cầm điện thoại ngoài nắng. Chữ navy được 4,96:1.

   RÊ CHUỘT THÌ PHẢI SÁNG LÊN, KHÔNG ĐẬM XUỐNG. Bản cũ đậm màu (#e2620a) vì chữ
   lúc đó màu trắng. Với chữ navy thì ngược lại: đậm nền là tụt xuống 3,96:1,
   dưới chuẩn. Sáng lên #fb923c thì được 6,14:1. */
.nut-cam { background: var(--cam); color: var(--navy); }
.nut-cam:hover { background: #fb923c; color: var(--navy); }
.nut-vien { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.nut-vien:hover { background: rgba(255,255,255,.12); color: #fff; }

.vs-nen { background: var(--nen-xam); border-block: 1px solid var(--vien); }
.vs-hep { max-width: 680px; }
.vs-doan { margin: 0 0 .9em; }

/* ----- Sơ đồ khối: năm bước nối nhau rồi quay vòng ----- */
.sd { list-style: none; counter-reset: b; padding: 0; margin: 20px 0 0; display: grid; gap: 30px; }
@media (min-width: 900px) { .sd { grid-template-columns: repeat(5, 1fr); gap: 34px; } }
.sd-o {
  counter-increment: b; position: relative;
  background: #fff; border: 1px solid var(--vien); border-top: 3px solid var(--xanh);
  border-radius: 10px; padding: 32px 14px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
/* Số bước là một huy hiệu tròn đè lên mép trên của ô */
.sd-o::before {
  content: counter(b); position: absolute; top: -15px; left: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--xanh); color: #fff; font-weight: 700; font-size: .92rem;
  display: flex; align-items: center; justify-content: center;
}
/* Mũi tên nối hai ô. Trên điện thoại chỉ xuống, trên màn hình rộng thì sang
   phải. Ô cuối không có mũi tên — vòng lặp nói tiếp ở dòng .sd-vong. */
.sd-o:not(:last-child)::after {
  content: '▾'; position: absolute; color: var(--xanh); font-size: 1.1rem; line-height: 1;
  left: 50%; bottom: -22px; transform: translateX(-50%);
}
@media (min-width: 900px) {
  .sd-o:not(:last-child)::after {
    content: '▸'; left: auto; right: -23px; bottom: auto; top: 50%; transform: translateY(-50%);
  }
}
.sd-ten { font-weight: 700; line-height: 1.25; }
.sd-y { font-size: .88rem; color: var(--chu-mo); }
/* Mốc thời gian (7 ngày / 30 ngày) — thứ môi giới cần nhớ nhất trên sơ đồ này */
.sd-moc {
  align-self: flex-start; margin-top: 4px;
  background: #fff1e3; color: #9a4a06; font-weight: 700; font-size: .8rem;
  padding: 3px 9px; border-radius: 999px;
}
.sd-o-nhan { border-top-color: var(--cam); }
.sd-o-nhan::before { background: var(--cam); }
.sd-vong, .sd-re { margin: 26px 0 0; font-size: .95rem; }
.sd-vong {
  background: var(--xanh-nhat); color: var(--xanh-dam); font-weight: 600;
  border-radius: 10px; padding: 12px 14px 12px 40px; position: relative;
}
.sd-vong::before { content: '↻'; position: absolute; left: 15px; font-size: 1.15rem; line-height: 1.35; }
.sd-re { color: var(--chu-mo); padding-left: 40px; position: relative; margin-top: 10px; }
.sd-re::before { content: '↳'; position: absolute; left: 17px; color: var(--cam); font-weight: 700; }

/* ----- Thẻ có ảnh ----- */
.vs-luoi { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 760px) { .vs-luoi { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .vs-luoi-2 { grid-template-columns: repeat(2, 1fr); } }

.vs-the {
  background: #fff; border: 1px solid var(--vien); border-radius: var(--bo-tron);
  overflow: hidden; display: flex; flex-direction: column;
}
.vs-the-anh { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.vs-the-than { padding: 16px 18px 18px; }
.vs-the-ten {
  display: flex; align-items: center; gap: 10px;
  color: var(--xanh-dam); margin: 0 0 .6em; font-size: 1.05rem;
}
.vs-the-bt {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px;
  background: var(--xanh-nhat); color: var(--xanh);
  display: flex; align-items: center; justify-content: center;
}
.bt { width: 20px; height: 20px; }
.vs-the ul { margin: 0; padding-left: 18px; }
.vs-the li { margin-bottom: .45em; font-size: .94rem; }

/* ----- Hai cột: chữ một bên, ảnh một bên ----- */
.vs-doi { display: grid; gap: 22px; align-items: center; }
@media (min-width: 860px) { .vs-doi { grid-template-columns: 1fr 1fr; gap: 34px; } }
.vs-doi-chu h2 { margin-top: 0; }
.vs-doi-anh { margin: 0; }
.vs-doi-anh img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--bo-tron); display: block;
}

/* ----- Bốn điểm "vì sao": số + chữ, không viền hộp ----- */
.vs-diem { display: flex; gap: 14px; align-items: flex-start; }
.vs-diem-so {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cam); color: var(--navy); font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.vs-diem h3 { margin: 3px 0 .35em; font-size: 1.02rem; }
.vs-diem p { margin: 0; color: var(--chu-mo); font-size: .95rem; }

/* ----- Danh sách dấu tích ----- */
.vs-dau-tick { list-style: none; padding: 0; margin: 12px 0 0; }
.vs-dau-tick li { position: relative; padding-left: 30px; margin-bottom: .7em; }
.vs-dau-tick li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--xanh); color: #fff; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ----- Đoạn văn tách thành ô có gạch màu ----- */
.vs-y { display: grid; gap: 12px; margin-top: 14px; }
.vs-y-o {
  margin: 0; background: #fff; border-left: 3px solid var(--xanh);
  border-radius: 0 10px 10px 0; padding: 14px 16px; font-size: .96rem;
}
.vs-nen .vs-y-o { background: #fff; }

/* ----- Ba bước ----- */
.vs-buoc { list-style: none; counter-reset: b2; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .vs-buoc { grid-template-columns: repeat(3, 1fr); } }
.vs-buoc li {
  counter-increment: b2; background: #fff; border: 1px solid var(--vien);
  border-radius: var(--bo-tron); padding: 16px 18px;
}
.vs-buoc li::before {
  content: counter(b2); display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--xanh); color: #fff;
  font-weight: 700; font-size: .9rem; margin-bottom: 10px;
}
.vs-buoc h3 { margin: 0 0 .35em; font-size: 1rem; }
.vs-buoc p { margin: 0; color: var(--chu-mo); font-size: .93rem; }

/* ----- Lời chủ nhà ----- */
.vs-loi {
  margin: 0; background: #fff; border: 1px solid var(--vien); border-radius: var(--bo-tron);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.vs-loi p { margin: 0; font-size: .96rem; }
.vs-loi p::before { content: '“'; }
.vs-loi p::after { content: '”'; }
.vs-loi footer { display: flex; align-items: center; gap: 11px; }
/* Chữ cái đầu thay cho ảnh: chủ nhà không gửi ảnh, mà một ô xám trống thì
   trông như ảnh hỏng. */
.vs-loi-chu {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.vs-loi-ai { display: flex; flex-direction: column; font-size: .88rem; color: var(--chu-mo); }
.vs-loi-ai strong { color: var(--chu); font-size: .95rem; }

/* ---------------------------------------------------------------------------
   TRANG VỀ HCARE — câu chuyện hình thành công ty
   --------------------------------------------------------------------------- */
.vh-so { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 12px; margin: 26px 0 0; }
@media (min-width: 700px) { .vh-so { grid-template-columns: repeat(4, 1fr); max-width: 760px; } }
.vh-so div {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 12px; border-left: 3px solid var(--cam);
}
.vh-so dt { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vh-so dd { margin: 0; font-size: .85rem; color: #c8d6ea; }

/* Dòng thời gian: một vạch dọc và các mốc trên vạch. Sáu cái thẻ xếp lưới thì
   mất đúng cái thứ tự trước-sau mà cả mục này đang kể. */
.vh-chang { list-style: none; counter-reset: c; padding: 0; margin: 18px 0 0; }
.vh-chang li {
  counter-increment: c; position: relative;
  padding: 0 0 30px 46px; border-left: 2px solid var(--vien); margin-left: 14px;
}
.vh-chang li:last-child { border-left-color: transparent; padding-bottom: 0; }
.vh-chang li::before {
  content: counter(c); position: absolute; left: -15px; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--xanh); color: #fff; font-weight: 700; font-size: .88rem;
  display: flex; align-items: center; justify-content: center;
}
.vh-chang h3 { margin: 2px 0 .4em; font-size: 1.08rem; color: var(--xanh-dam); }
.vh-chang p { margin: 0; max-width: 62ch; }
.vh-chang-anh {
  width: 100%; margin-top: 14px; border-radius: 10px; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
}
/* Màn hình rộng: ảnh sang bên phải cho chữ khỏi chạy dài quá một dòng đọc */
@media (min-width: 900px) {
  .vh-co-anh { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
  .vh-chang-anh { margin-top: 0; aspect-ratio: 4 / 3; }
}

/* Dải ảnh giữa bài — chỗ cho mắt nghỉ giữa hai khối chữ */
.vh-dai { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 14px; }
@media (min-width: 860px) { .vh-dai { grid-template-columns: repeat(4, 1fr); } }
.vh-dai figure { margin: 0; }
.vh-dai img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; display: block;
}
.vh-dai figcaption { margin-top: 7px; font-size: .84rem; color: var(--chu-mo); }

/* Sơ đồ hệ sinh thái: HCARE ở giữa, bốn bên vây quanh */
.he { display: grid; gap: 12px; margin-top: 16px; }
.he-giua {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center; padding: 20px 16px;
  background: linear-gradient(150deg, var(--xanh), var(--navy)); color: #fff;
  border-radius: var(--bo-tron);
}
.he-giua strong { font-size: 1.3rem; letter-spacing: .04em; }
.he-giua span { font-size: .87rem; color: #cfe0f7; }
.he-ben {
  background: #fff; border: 1px solid var(--vien); border-radius: var(--bo-tron);
  padding: 15px 17px;
}
.he-ben h3 { margin: 0 0 .5em; font-size: 1rem; color: var(--xanh-dam); }
.he-can, .he-nhan { margin: 0; font-size: .9rem; position: relative; padding-left: 24px; }
.he-can { color: var(--chu-mo); margin-bottom: 6px; }
/* Mũi tên vào và mũi tên ra — cái họ CẦN và cái họ NHẬN */
.he-can::before { content: '→'; position: absolute; left: 0; color: var(--chu-mo); }
.he-nhan::before { content: '←'; position: absolute; left: 0; color: var(--cam); font-weight: 700; }
@media (min-width: 900px) {
  .he {
    grid-template-columns: 1fr minmax(200px, 250px) 1fr;
    grid-template-areas: 'b1 giua b2' 'b3 giua b4';
    gap: 16px 22px; align-items: stretch;
  }
  .he-giua { grid-area: giua; }
  .he-ben-1 { grid-area: b1; } .he-ben-2 { grid-area: b2; }
  .he-ben-3 { grid-area: b3; } .he-ben-4 { grid-area: b4; }
}

/* Bảng so sánh ba vai trò với HCARE */
/* Bo góc đặt ở KHUNG CUỐN chứ không phải ở bảng. Để overflow:hidden trên chính
   thẻ table thì hai cột ghim bên dưới chết lặng: overflow ẩn trên thẻ cha biến
   nó thành một khung cắt, và position:sticky bên trong hết tác dụng — bảng vẫn
   cuốn, chỉ là cột HCARE trôi ra ngoài màn hình. */
.bang-cuon { overflow-x: auto; margin-top: 16px; border-radius: var(--bo-tron); background: #fff; }
.bang-ss {
  width: 100%; min-width: 560px; border-collapse: collapse;
  background: #fff; font-size: .93rem;
}
.bang-ss th, .bang-ss td { padding: 11px 12px; border-bottom: 1px solid var(--vien); text-align: center; }
.bang-ss thead th { background: var(--nen-xam); font-size: .87rem; color: var(--chu-mo); vertical-align: bottom; }
.bang-ss tbody th { text-align: left; font-weight: 500; }
.bang-ss tr:last-child th, .bang-ss tr:last-child td { border-bottom: 0; }
/* Cột HCARE tô nổi lên — đó là cột cả bảng đang nói tới */
.bang-ss .ss-minh { background: var(--xanh-nhat); }
.bang-ss thead .ss-minh { background: var(--xanh); color: #fff; font-weight: 700; font-size: .95rem; }

/* GHIM HAI CỘT ĐẦU VÀ CUỐI khi bảng phải cuốn ngang.
   Trên điện thoại, bảng rộng hơn màn hình nên mở ra là chỉ thấy hai cột đầu
   với một dãy dấu gạch — tức là đúng cái kết luận của bảng thì nằm ngoài màn
   hình. Ghim tên việc bên trái và cột HCARE bên phải thì dù cuốn tới đâu người
   đọc vẫn thấy "việc này — HCARE có làm". */
.bang-ss tbody th, .bang-ss thead th:first-child {
  position: sticky; left: 0; z-index: 2;
  background: #fff; min-width: 150px;
  box-shadow: 1px 0 0 var(--vien);
}
.bang-ss thead th:first-child { background: var(--nen-xam); z-index: 3; }
.bang-ss .ss-minh { position: sticky; right: 0; z-index: 2; box-shadow: -1px 0 0 var(--vien); }
.bang-ss thead .ss-minh { z-index: 3; }
.bang-goi { margin: 10px 0 0; font-size: .85rem; color: var(--chu-mo); }
@media (min-width: 760px) { .bang-goi { display: none; } }
.ss-co { color: #16803c; font-weight: 700; }
.ss-khong { color: #9aa7b6; }

@media (min-width: 900px) { .vh-loi-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------------
   ẢNH THẬT TRÊN CÁC TRANG TRƯỚC GIỜ TOÀN CHỮ (25/09/2026)
   --------------------------------------------------------------------------- */

/* Ảnh ngang đứng riêng một dòng — dùng ở khối cộng đồng và trang liên hệ */
.vs-anh-ngang {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--bo-tron); display: block; margin: 16px 0 4px;
}

/* Thẻ dịch vụ có ảnh. Ảnh tràn hết bề ngang thẻ, chữ nằm dưới. */
.loi-the-anh { padding: 0; overflow: hidden; gap: 0; }
.loi-the-anh img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.loi-the-chu { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }

/* Ảnh minh hoạ từng bước ở trang quy trình */
.qt-anh {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; display: block; margin: 4px 0 14px;
}

/* Hai ô nằm cạnh nhau trong biểu mẫu — số phòng ngủ và giá mong muốn đều ngắn,
   để mỗi ô một dòng thì biểu mẫu dài ra vô ích trên điện thoại. */
.form-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-doi select {
  font: inherit; padding: 11px; border: 1px solid var(--vien);
  border-radius: 9px; background: #fff; color: var(--chu); min-height: 45px;
}

/* Dải nút giữa trang dài. Nền hơi xanh để tách khỏi hai khối chữ quanh nó,
   nhưng không viền không bóng — nó là một quãng nghỉ, không phải một cái thẻ. */
.giua-nut {
  margin-top: 28px; padding: 20px 22px;
  background: var(--xanh-nhat); border-radius: var(--bo-tron);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
@media (min-width: 640px) {
  .giua-nut { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
}
.giua-nut > p { margin: 0; font-weight: 600; font-size: 1.02rem; color: var(--xanh-dam); }
.giua-nut-hang { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* ===================================================================
   THẺ NGƯỜI PHỤ TRÁCH (đợt 110)
   Hiện khi khách vào bằng link có mã giới thiệu của một sale. Đặt ngay
   dưới thanh menu để khách thấy trước khi cuộn — nếu để cuối trang thì
   đúng người cần gọi lại là người ít ai nhìn thấy nhất.
   =================================================================== */
.phu-trach {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: var(--rong-toi-da, 1200px); margin: 12px auto 0;
  padding: 10px 14px; border: 1px solid var(--vien, #e5e7eb);
  border-radius: 14px; background: #fff;
}
.phu-trach-anh { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.phu-trach-chu {
  display: flex; align-items: center; justify-content: center;
  background: var(--xanh-nhat, #eef3fb); color: var(--xanh, #2759A0);
  font-size: 1.3rem; font-weight: 700;
}
.phu-trach-chinh { flex: 1 1 160px; min-width: 0; }
.phu-trach-ten { font-weight: 600; margin: 0; }
.phu-trach-phu { margin: 2px 0 0; font-size: .85rem; color: var(--chu-mo, #6b7280); }
.phu-trach-nut { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) { .phu-trach-nut { width: 100%; } .phu-trach-nut .nut { flex: 1; text-align: center; } }

/* ===== Trang sửa chữa / nội thất / tuyển dụng (gộp info.hcarevietnam.vn, 24/10/2026) ===== */
.form-lh select { font: inherit; padding: 11px; border: 1px solid var(--vien); border-radius: 9px; background: #fff; color: var(--chu); }
.form-lh > *, .form-lh label { min-width: 0; }
.form-lh input[type="file"], .form-lh select { width: 100%; max-width: 100%; box-sizing: border-box; }
.form-lh input[type="file"] { padding: 9px; font-size: .9rem; }
@media (min-width: 960px) { .luoi-loi-the.luoi-3 { grid-template-columns: repeat(3, 1fr); } }
.gia-tu { margin: 2px 0 0; font-size: 1.05rem; color: var(--chu); }
.gia-tu strong { color: var(--xanh); }
.loi-the ul { margin: 6px 0 0; padding-left: 18px; font-size: .92rem; color: var(--chu-mo); }
.loi-the ul li { margin-bottom: 3px; }
.cam-ket { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 22px 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .cam-ket { grid-template-columns: repeat(2, 1fr); } }
.cam-ket li { background: var(--nen-xam); border-radius: var(--bo-tron); padding: 12px 14px; font-size: .95rem; }
.cam-ket strong { display: block; color: var(--xanh-dam); }
.buoc-gon { counter-reset: b; list-style: none; padding: 0; margin: 12px 0 24px; display: grid; gap: 12px; }
@media (min-width: 900px) { .buoc-gon { grid-template-columns: repeat(4, 1fr); } }
.buoc-gon li { counter-increment: b; border: 1px solid var(--vien); border-radius: var(--bo-tron); padding: 14px; background: #fff; }
.buoc-gon li::before { content: counter(b); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--xanh); color: #fff; font-weight: 700; margin-bottom: 6px; }
.buoc-gon h3 { margin: 0 0 4px; font-size: 1rem; }
.buoc-gon p { margin: 0; font-size: .92rem; color: var(--chu-mo); }
.anh-rong { width: 100%; height: auto; border-radius: var(--bo-tron); display: block; margin: 8px 0 20px; }
.ghi-nho { font-size: .9rem; color: var(--chu-mo); }

/* Bảng giá dịch vụ /bang-gia — 27/10/2026, cùng phong cách bản in bảng giá */
.bg-dau { position: relative; overflow: hidden; color: #fff; padding: 34px 0 30px;
  background: radial-gradient(circle at 88% 0%, #2f6bc0 0, transparent 55%), radial-gradient(circle at 0% 130%, #1d3f78 0, transparent 55%), var(--navy); }
.bg-dau::before, .bg-dau::after { content: ''; position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.09); pointer-events: none; }
.bg-dau::before { width: 520px; height: 520px; right: -180px; top: -260px; }
.bg-dau::after { width: 320px; height: 320px; right: -80px; top: -150px; }
.bg-dau .bo { position: relative; }
.bg-moc { display: inline-block; background: var(--cam); font-weight: 800; font-size: 13px; letter-spacing: .6px; padding: 6px 14px; border-radius: 999px; box-shadow: 0 8px 22px rgba(249,115,22,.35); }
.bg-dau h1 { color: #fff; margin: 14px 0 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; letter-spacing: .5px; line-height: 1.05; }
.bg-dau h1 span { color: var(--cam); }
.bg-phu { color: #cfe0ff; margin: 10px 0 0; max-width: 720px; }
.bg-goi { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.bg-nut-cam { background: var(--cam); color: #fff; }
.bg-nut-cam:hover { background: #ea580c; color: #fff; }
.bg-nut-vien { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
.bg-nut-vien:hover { background: rgba(255,255,255,.18); color: #fff; }
.bg-cam-ket { background: var(--xanh-nhat); border-bottom: 3px solid var(--cam); }
.bg-cam-ket .bo { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-top: 12px; padding-bottom: 12px; }
.bg-cam-ket span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--navy); }
.bg-cam-ket i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--xanh); color: #fff; display: inline-grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 900; }

.bg-uu-dai { border: 2px solid var(--cam); border-radius: 18px; background: #fff4ec; padding: 18px; margin: 0 0 22px; }
.bg-uu-dai h2 { color: var(--cam); margin: 0; font-size: 1.15rem; font-weight: 900; letter-spacing: .4px; }
.bg-uu-dai .phu { color: var(--chu-mo); margin: 2px 0 12px; font-size: .9rem; }
.bg-the { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.bg-the > div { position: relative; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 4px 14px rgba(249,115,22,.14); }
.bg-the .nh { font-size: 12px; font-weight: 700; color: var(--xanh); text-transform: uppercase; letter-spacing: .3px; padding-right: 54px; }
.bg-the .tn { font-weight: 600; color: var(--navy); margin-top: 2px; }
.bg-the s { display: block; color: #94a3b8; font-size: 14px; margin-top: 4px; }
.bg-the .gm { color: var(--cam); font-weight: 900; font-size: 1.6rem; line-height: 1.1; }
.bg-the .gm small { font-size: 13px; color: var(--chu-mo); font-weight: 600; }
.bg-the .han { color: var(--chu-mo); font-size: 13px; margin-top: 2px; }
.bg-the .bg-nhan { position: absolute; top: 12px; right: 12px; background: var(--cam); color: #fff; font-weight: 900; font-size: 13px; border-radius: 8px; padding: 2px 8px; }

/* Xuống dòng, KHÔNG lướt ngang (27/10, anh Dũng): trên điện thoại khách không biết
   còn nhóm bên phải nên bỏ qua. Mọi nhóm phải nhìn thấy ngay. */
.bg-muc-td { margin: 0 0 8px; font-size: .9rem; font-weight: 700; color: var(--navy); }
.bg-muc { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; margin: 0 0 6px; }
.bg-muc a { font-size: .88rem; font-weight: 600; color: var(--navy); background: var(--xanh-nhat); border: 1px solid #d3e0f3; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.bg-muc a:hover { background: var(--xanh); color: #fff; text-decoration: none; }
.bg-luoi { columns: 2; column-gap: 20px; }
.bg-khoi { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 16px; border: 1px solid var(--vien); border-radius: 16px; overflow: hidden; background: #fff; scroll-margin-top: 90px; }
.bg-td { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; font-size: 1.05rem; font-weight: 800; color: var(--navy); background: linear-gradient(90deg, var(--xanh-nhat), #fff); }
.bg-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--xanh); display: grid; place-items: center; }
.bg-ic svg { width: 21px; height: 21px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bg-dong { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 9px 14px; border-top: 1px solid #eef2f7; }
.bg-dong:nth-child(odd) { background: #fafcff; }
.bg-dong .t { flex: 1; font-size: .95rem; }
.bg-dong .ghi { display: block; color: var(--chu-mo); font-size: .8rem; margin-top: 1px; }
.bg-dong .p { text-align: right; white-space: nowrap; font-weight: 800; color: var(--navy); }
.bg-dong .p small { font-size: .78rem; color: var(--chu-mo); font-weight: 500; }
.bg-dong .p s { display: block; font-size: .8rem; color: #94a3b8; font-weight: 500; }
.bg-dong .p .moi { color: var(--cam); }
.bg-dong .p .bd { display: inline-block; margin-left: 4px; background: var(--cam); color: #fff; border-radius: 5px; padding: 0 5px; font-size: .72rem; vertical-align: 2px; }

.bg-cta { display: flex; align-items: center; gap: 20px; background: var(--cam); color: #fff; border-radius: 18px; padding: 20px 24px; margin: 18px 0 28px; }
.bg-cta .goi { flex: 1; min-width: 0; }
.bg-cta .bg-cta-nhan { font-size: .82rem; font-weight: 700; letter-spacing: .5px; }
.bg-cta .sdt { display: inline-block; white-space: nowrap; color: #fff; font-size: clamp(1.6rem, 7.4vw, 2.6rem); font-weight: 900; line-height: 1.05; letter-spacing: .5px; }
.bg-cta .sdt:hover { text-decoration: none; }
.bg-cta .web { font-size: .85rem; font-weight: 600; margin-top: 4px; }
.bg-cta .qr { flex: none; background: #fff; border-radius: 14px; padding: 8px 8px 6px; text-align: center; color: var(--navy); font-size: 11px; font-weight: 700; }
.bg-cta .qr svg { width: 92px; height: 92px; display: block; margin: 0 auto 3px; }
@media (max-width: 760px) {
  .bg-luoi { columns: 1; }
  .bg-cam-ket .bo { flex-direction: column; }
  .bg-cta { padding: 16px; gap: 12px; }
  .bg-cta .qr { padding: 6px 6px 4px; font-size: 10px; }
  .bg-cta .qr svg { width: 58px; height: 58px; }
}

/* Lối vào Bảng giá — 27/10/2026: mục riêng trên menu chính. Dải bảng giá ở
   trang chủ bỏ 28/10/2026 — nút bảng giá đã lên đầu trang. */
.menu-bang-gia { color: #c2410c !important; font-weight: 700 !important; }

/* ===== Trang chủ mở bằng dịch vụ — 28/10/2026 (anh Dũng) ===== */
/* Hai nút ở đầu trang: điện thoại xếp dọc, nút to bằng ngón tay */
.hero-nut { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.hero-nut .nut { padding: 13px 18px; font-size: 1.02rem; }
@media (min-width: 560px) { .hero-nut { flex-direction: row; flex-wrap: wrap; } }

/* Thẻ dịch vụ: cả thẻ là một liên kết. Trên điện thoại ảnh thu nhỏ bên trái,
   chữ bên phải — bốn thẻ ảnh 16:9 xếp dọc dài gần ba màn hình. */
@media (min-width: 1060px) { .chi-dien-thoai { display: none !important; } }
.the-dv { display: flex; color: var(--chu); text-decoration: none; }
.the-dv:hover { text-decoration: none; border-color: var(--xanh); }
.the-dv .loi-the-chu strong { color: var(--xanh-dam); font-size: 1.05rem; }
.the-dv .loi-the-chu > span { font-size: .92rem; color: var(--chu-mo); }
.the-dv .loi-the-chu b { color: #c2410c; font-size: .92rem; margin-top: auto; }
@media (max-width: 619px) {
  .the-dv { flex-direction: row; align-items: stretch; }
  .the-dv img { width: 112px; aspect-ratio: auto; flex: none; }
  .the-dv .loi-the-chu { padding: 12px 14px; gap: 4px; }
}
@media (min-width: 620px) { .the-dv { flex-direction: column; } }

/* Khối thuê căn hộ — nền xanh như đầu trang cũ, để form trắng và chip toà
   trong suốt giữ đúng màu như trước khi lùi xuống */
.dai-thue { background: linear-gradient(160deg, var(--xanh) 0%, var(--navy) 100%); color: #fff; padding: 32px 0 28px; }
.dai-thue h2 { color: #fff; margin-top: 0; }
@media (min-width: 720px) { .dai-thue { padding: 48px 0 40px; } }

/* Giỏ đặt lịch ở trang bảng giá (224) — nút + từng dòng, khung trong biểu mẫu, thanh dưới đáy */
.bg-chon { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--cam); background: #fff; color: var(--cam); font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.bg-chon:hover { background: #fff4ec; }
.bg-chon.co { background: var(--cam); color: #fff; font-size: 16px; }
.bg-dong { align-items: center; }
.bg-gio { border: 2px solid var(--cam); border-radius: 14px; background: #fff8f2; padding: 12px 14px; margin: 0 0 14px; }
.bg-gio-td { font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.bg-gio ul { list-style: none; margin: 0; padding: 0; }
.bg-gio li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed #f3d3bb; }
.bg-gio li .tn { grid-column: 1 / -1; font-weight: 600; font-size: .95rem; color: var(--navy); }
.bg-gio li .tn small { display: block; font-weight: 500; color: var(--chu-mo); font-size: .8rem; }
.bg-gio li .sl { display: inline-flex; align-items: center; border: 1px solid var(--vien); border-radius: 10px; background: #fff; overflow: hidden; justify-self: start; }
.bg-gio li .sl button { width: 40px; height: 38px; border: 0; background: #fff; color: var(--navy); font-size: 20px; font-weight: 700; cursor: pointer; }
.bg-gio li .sl span { min-width: 34px; text-align: center; font-weight: 800; }
.bg-gio li .tt { color: var(--navy); white-space: nowrap; }
.bg-gio-tong { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; font-weight: 700; color: var(--navy); }
.bg-gio-tong b { color: var(--cam); font-size: 1.35rem; font-weight: 900; }
.bg-gio-goi { margin: 0 0 12px; }
.bg-thanh { position: fixed; left: 12px; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 59; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--navy); color: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 10px 28px rgba(20,44,82,.35); font-size: .95rem; }
.bg-thanh:hover { text-decoration: none; color: #fff; }
.bg-thanh b { color: #fff; }
.bg-thanh .di { background: var(--cam); border-radius: 10px; padding: 8px 12px; font-weight: 800; white-space: nowrap; }
.bg-thanh[hidden], .bg-gio[hidden], .bg-chon[hidden], .bg-gio-goi[hidden] { display: none; }
@media (min-width: 720px) { .bg-thanh { left: auto; right: 24px; bottom: 24px; min-width: 340px; } }
@media print { .bg-chon, .bg-thanh, .bg-gio { display: none !important; } }

/* Ô "Chọn hạng mục & xem giá" trong form đặt dịch vụ (27/10/2026) — trang Dịch vụ, Sửa chữa, Nội thất */
.gc { border: 1.5px solid var(--cam); border-radius: 14px; background: #fff; margin: 0 0 4px; }
.gc summary { list-style: none; cursor: pointer; padding: 12px 44px 12px 14px; position: relative; display: block; }
.gc summary::-webkit-details-marker { display: none; }
.gc summary::after { content: '▾'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--cam); font-size: 18px; }
.gc[open] summary::after { content: '▴'; }
.gc-td { display: block; font-weight: 800; color: var(--cam); }
.gc-phu { display: block; font-size: .8rem; color: var(--chu-mo); margin-top: 1px; }
.gc-ds { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #f3d3bb; padding: 0 12px 6px; }
.gc-nhom { position: sticky; top: 0; background: #fff; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--xanh); padding: 10px 0 4px; z-index: 1; }
.gc-dong { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #eef2f7; }
.gc-dong .t { flex: 1; min-width: 0; font-size: .92rem; color: var(--navy); }
.gc-dong .p { display: block; font-size: .8rem; color: var(--chu-mo); margin-top: 1px; }
.gc-dong .p b { color: var(--navy); }
.gc-dong .p b.moi { color: var(--cam); }
.gc-dong .p s { color: #94a3b8; }
.gc-dong .bg-chon { width: 40px; height: 40px; }
.gc-chan { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--navy); color: #fff; border-radius: 0 0 12px 12px; padding: 10px 12px; font-size: .9rem; }
.gc-chan b { color: #ffd2b0; font-size: 1.05rem; }
.gc-chan .nut { padding: 8px 18px; min-height: 0; }
.bg-gio { scroll-margin-top: 130px; }

/* Lưu ý VAT (anh Dũng 27/10/2026) + lối vào bảng giá dưới form trang chủ */
.bg-vat { margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid var(--cam); background: #fff8f2; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--navy); }
.bg-thanh .vat { font-size: .75rem; opacity: .8; font-weight: 500; }
.gc-vat { margin: 8px 0 0; font-size: .8rem; font-weight: 600; color: var(--cam); }
.gc-chan small { font-size: .72rem; opacity: .8; }
.tc-dat-dv { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.tc-dat-dv:hover { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; }
.tc-dat-dv b { color: #ffd2b0; }
.bg-gio-tong .vat { font-weight: 500; font-size: .78rem; color: var(--chu-mo); }
.bg-gio-tam, .bg-gio-vat { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; color: var(--navy); font-size: .92rem; }
.bg-gio-vat { padding-top: 2px; color: var(--chu-mo); }
.bg-gio-tam .vat { font-weight: 500; font-size: .78rem; color: var(--chu-mo); }
.bg-gio-tong { border-top: 1px dashed #f3d3bb; margin-top: 6px; }
.bg-vat-tb { display: inline-block; margin-left: 4px; background: #fef3c7; color: #92400e; border-radius: 5px; padding: 0 5px; font-size: .7rem; font-weight: 600; vertical-align: 2px; }
/* 242: giá trước thuế (dòng nhỏ dưới giá đã gồm VAT) + nhãn có hoá đơn */
.bg-tt { display: block; font-size: .72rem; font-weight: 500; color: var(--chu-mo); white-space: nowrap; }
.bg-hd { display: inline-block; margin-right: 6px; background: var(--navy); color: #fff; border-radius: 6px; padding: 1px 8px; font-size: .78rem; font-weight: 700; }

/* ===== Điện thoại trước — 28/10/2026 (anh Dũng: khách xem web chủ yếu trên điện thoại) ===== */
/* Đầu trang một dải: ẩn dải trên (số gọi đã có ở thanh dưới đáy, tài khoản vào
   menu), chỉ giữ nút đổi tiếng EN/VI cạnh nút ba gạch. 95px → 61px. */
.nn-dt { display: none; }
.tk-dt { display: none; }
@media (max-width: 1059px) {
  .dau-tren { display: none; }
  .nn-dt {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; min-width: 44px; height: 36px; padding: 0 10px;
    border: 1.5px solid var(--xanh); border-radius: 999px;
    color: var(--xanh); font-weight: 700; font-size: .9rem; letter-spacing: .5px;
  }
  .nn-dt:hover { text-decoration: none; background: var(--xanh-nhat); }
  /* Nút ba gạch đủ to cho ngón tay (trước 42x34) */
  .nut-menu { margin-left: 4px; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  /* MENU MỞ PHẢI CUỘN ĐƯỢC. Đầu trang dính trên cùng, nên phần menu dài hơn màn
     hình trước đây nằm hẳn ngoài màn — Liên hệ, Gọi ngay không bấm tới được dù
     có cuộn trang. Cho riêng khối menu cuộn, chừa chỗ thanh Gọi/Zalo dưới đáy. */
  #mo-menu:checked ~ .dieu-huong {
    max-height: calc(100dvh - 62px); overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .dieu-huong > a, .dieu-huong .xo-dau, .dieu-huong .xo a { min-height: 46px; display: flex; align-items: center; }
  .tk-dt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .dieu-huong > a.nut-goi { justify-content: center; }
  .tk-dt a { display: flex; justify-content: center; border: 1px solid var(--vien) !important; border-radius: 10px; color: var(--xanh-dam); }
}

/* Chân trang: trên điện thoại liên kết xếp hai cột, ngắn đi một nửa */
.chan-h3-sau { margin-top: 1.2em; }
@media (max-width: 619px) {
  .chan-lk { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .chan-lk a { padding: 7px 0; }
}

/* Hai nút dưới đoạn mở đầu trang Sửa chữa / Nội thất */
.nut-dau-trang { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 22px; }
.nut-vien-xanh { background: #fff; color: var(--xanh); border-color: var(--xanh); }
.nut-vien-xanh:hover { background: var(--xanh-nhat); color: var(--xanh-dam); }
@media (max-width: 559px) { .nut-dau-trang .nut { flex: 1 1 100%; padding: 13px 18px; } }

/* Thẻ dịch vụ trang /dich-vu: điện thoại ảnh nhỏ bên trái như thẻ trang chủ */
@media (max-width: 619px) {
  .the-dv-ngang { display: flex; flex-direction: row; align-items: stretch; }
  .the-dv-ngang img { width: 112px; aspect-ratio: auto; flex: none; object-fit: cover; }
  .the-dv-ngang .loi-the-chu { padding: 12px 14px; gap: 4px; }
  .the-dv-ngang h3 { font-size: 1.02rem; margin: 0; }
  .the-dv-ngang p { font-size: .9rem; }
}

/* ===== Sửa theo đánh giá trải nghiệm — 28/10/2026 ===== */
/* Form: phần không bắt buộc gập lại */
.form-them { border: 1px dashed var(--vien); border-radius: 10px; padding: 0 12px; }
.form-them > summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--xanh-dam); list-style: none; }
.form-them > summary::-webkit-details-marker { display: none; }
.form-them > summary::before { content: '＋ '; }
.form-them[open] > summary::before { content: '－ '; }
.form-them > summary small { display: block; margin-top: 2px; font-weight: 500; color: var(--chu-mo); font-size: .85rem; }
.form-them[open] { padding-bottom: 12px; }
.form-them > label { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }

/* Bảng giá: khi thanh "N hạng mục · Đặt lịch" hiện thì cất thanh Gọi/Zalo
   dưới đáy — hai thanh chồng nhau che gần 1/5 màn hình điện thoại. Thanh giỏ
   tụt xuống sát đáy. Gọi vẫn còn ở nút đầu trang và cuối trang. */
@media (max-width: 719px) {
  body:has(.bg-thanh:not([hidden])) .lien-he-dinh { display: none; }
  body:has(.bg-thanh:not([hidden])) .bg-thanh { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* Chi tiết căn: giá + nút đặt lịch ngay dưới tiêu đề, chỉ trên điện thoại */
.can-gia-nhanh { display: none; }
@media (max-width: 899px) {
  .can-gia-nhanh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; }
  .can-gia-nhanh strong { color: var(--xanh); font-size: 1.35rem; }
  .can-gia-nhanh .nut { flex: 1 1 100%; margin-top: 6px; padding: 12px 18px; }
}

/* Dải cam kết: chữ dài hơn con số nên nhỏ lại cho khỏi vỡ hai dòng */
.so-lieu-chu strong { font-size: 1.3rem; }
@media (min-width: 720px) { .so-lieu-chu strong { font-size: 1.6rem; } }

/* Trang chủ điện thoại: căn trống + toà nhà vuốt ngang một hàng (28/10/2026).
   Thẻ rộng 80% để lộ mép thẻ kế tiếp — khách thấy là còn, vuốt được. */
@media (max-width: 619px) {
  .vuot-ngang {
    display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 8px -16px 0; padding: 0 16px 8px; scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .vuot-ngang::-webkit-scrollbar { display: none; }
  .vuot-ngang > * { flex: 0 0 80%; scroll-snap-align: start; min-width: 0; }
  .luoi-toa.vuot-ngang > * { flex-basis: 62%; }
}

/* ===== Công trình thực tế (28/10/2026) — ảnh thật thợ chụp, người duyệt trong app ===== */
.cong-trinh { margin-top: 8px; }
.cong-trinh-phu { color: var(--chu-mo); margin: -4px 0 12px; font-size: .95rem; }
.luoi-cong-trinh { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.the-cong-trinh { margin: 0; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo-tron); overflow: hidden; }
.ct-anh { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--vien); }
.ct-anh.ct-doi { grid-template-columns: 1fr 1fr; }
.ct-o { position: relative; }
.ct-o img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--nen-xam); }
.ct-anh.ct-doi .ct-o img { aspect-ratio: 3 / 4; }
.ct-nhan {
  position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(20, 44, 82, .82); color: #fff; font-size: .75rem; font-weight: 600;
}
.the-cong-trinh figcaption { padding: 10px 12px 12px; display: grid; gap: 2px; }
.the-cong-trinh figcaption strong { font-size: .98rem; line-height: 1.35; }
.the-cong-trinh figcaption span { color: var(--chu-mo); font-size: .9rem; line-height: 1.45; }
@media (max-width: 619px) {
  .luoi-cong-trinh.vuot-ngang > * { flex-basis: 86%; }
}

/* ===== Tuyển dụng (migration 233, 28/10/2026): tin lấy từ App Quản Lý ===== */
.td-ve { margin: 0 0 6px; font-size: .9rem; }
.td-meta { list-style: none; padding: 0; margin: 8px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.td-meta li { background: var(--nen-xam); border: 1px solid var(--vien); border-radius: 999px; padding: 6px 12px; font-size: .92rem; }
.td-nop-nhanh { margin: 0 0 8px; }
.td-ds { padding-left: 20px; }
.td-ds li { margin: 4px 0; }
.td-the { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.td-the:hover { border-color: var(--xanh); text-decoration: none; }
.td-the ul { margin: 4px 0 0; padding-left: 18px; font-size: .92rem; color: var(--chu-mo); }
.loi-the .td-luong { color: var(--navy); font-weight: 700; font-size: 1rem; }
.td-xem { margin-top: auto; color: var(--xanh-dam); font-weight: 600; font-size: .92rem; }
.form-lh .form-dong-y { flex-direction: row; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--chu-mo); }
.form-lh .form-dong-y input { width: 22px; height: 22px; flex: none; margin-top: 1px; padding: 0; }