/* PK Real Estate — hệ thiết kế dùng chung cho toàn site
   Mọi cặp màu chữ/nền dưới đây đã kiểm tương phản đạt WCAG AA (>= 4.5:1).
   Bề rộng dòng chữ đo bằng ch, không bằng px — xem be-rong-dong-chu.md.
   File này do bot copy sang deploy/, không sửa trong deploy/. */

:root {
  --navy: #0B1F3A;
  --navy-2: #132C4F;
  --navy-3: #071527;
  --gold: #C9A227;
  --gold-dark: #8A6D0F;
  --ink: #1F2937;
  --muted: #475569;
  --muted-2: #5B6779;   /* đạt AA trên cả nền trắng lẫn nền xám nhạt #F6F8FB */
  --line: #E2E8F0;
  --bg: #FFFFFF;
  --bg-2: #F6F8FB;
  --tren-toi: #CBD5E1;
  --tren-toi-mo: #94A3B8;
  --xanh-link: #1D4ED8;
  --do: #B91C1C;
  --xanh-ok: #15803D;

  --cao-topbar: 34px;
  --cao-nav: 62px;
  --cao-dinh: 96px;

  --rong-trang: 1180px;
  --rong-chu: 68ch;
  --bo-goc: 14px;
  --bong: 0 1px 2px rgba(11,31,58,.06), 0 8px 24px rgba(11,31,58,.08);
  --font: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cao-dinh) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.65;
  font-display: swap;
}
img, video, iframe, table { max-width: 100%; }
img { height: auto; }
a { color: var(--xanh-link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.bo-qua {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.bo-qua:focus { left: 0; }

.khung { width: 100%; max-width: var(--rong-trang); margin: 0 auto; padding: 0 20px; }
.van-ban, .van-ban.van-ban { max-width: var(--rong-chu); }
.giua { margin-left: auto; margin-right: auto; }

/* ── Đỉnh trang ─────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 1100; height: var(--cao-topbar);
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-3); color: var(--tren-toi);
  font-size: 12.5px; letter-spacing: .01em; text-align: center; padding: 0 12px;
}
.topbar p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dinh-dem { display: block; height: var(--cao-dinh); }

.navbar {
  position: fixed; top: var(--cao-topbar); left: 0; right: 0; z-index: 1000;
  height: var(--cao-nav); background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px);
}
.navbar .khung { display: flex; align-items: center; gap: 16px; height: 100%; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); flex: 0 0 auto; }
.logo img { height: 34px; width: auto; display: block; }
.logo b { font-size: 17px; letter-spacing: .02em; }
.menu { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.menu a {
  color: var(--navy); text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 9px 12px; border-radius: 8px; white-space: nowrap;
}
.menu a:hover { background: var(--bg-2); }
.menu a[aria-current="page"] { color: var(--gold-dark); background: #FBF6E6; }
.nut-goi {
  display: inline-flex; align-items: center; gap: 7px; background: var(--navy); color: #fff !important;
  padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px;
  white-space: nowrap;
}
.nut-menu {
  display: none; margin-left: auto; background: var(--navy); color: #fff; border: 0;
  width: 44px; height: 40px; border-radius: 10px; font-size: 19px; cursor: pointer;
}
.menu-di-dong { display: none; }

@media (max-width: 940px) {
  .menu { display: none; }
  .nut-menu { display: block; }
  .menu-di-dong {
    display: block; position: fixed; inset: var(--cao-dinh) 0 0 0; z-index: 999;
    background: #fff; padding: 14px 20px 28px; overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: .18s ease;
  }
  .menu-di-dong[data-mo="1"] { transform: none; opacity: 1; visibility: visible; }
  .menu-di-dong a {
    display: block; padding: 14px 6px; border-bottom: 1px solid var(--line);
    color: var(--navy); text-decoration: none; font-weight: 600; font-size: 17px;
  }
  .menu-di-dong .nut-goi { display: flex; justify-content: center; margin-top: 18px; border-bottom: 0; }
}

/* ── Chữ ────────────────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.24; color: var(--navy); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(28px, 5vw, 46px); }
h2 { font-size: clamp(23px, 3.4vw, 33px); }
h3 { font-size: clamp(18px, 2.2vw, 21px); }
p { margin: 0 0 1em; }
.nhan-tren {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-dark); margin-bottom: 10px;
}
.dan { font-size: 19px; color: var(--muted); }
.mo { color: var(--muted-2); font-size: 15.5px; }

.muc { padding: 68px 0; }
.muc-nhat { background: var(--bg-2); }
.muc-toi { background: var(--navy); color: var(--tren-toi); }
.muc-toi h2, .muc-toi h3 { color: #fff; }
.muc-toi .nhan-tren { color: var(--gold); }
.muc-toi .dan { color: var(--tren-toi); }
/* Chữ phụ trên nền navy phải sáng lên, dùng màu nền sáng là 3.47:1 — trượt AA. */
.muc-toi .mo, .muc-toi .note, .muc-toi .dem-kq { color: var(--tren-toi-mo); }
/* Nhưng form và thẻ là hộp nền TRẮNG nằm trong section navy — chữ phụ bên trong
   phải quay lại màu tối, không thì #94A3B8 trên trắng chỉ còn 2.56:1. */
.muc-toi .hop-form .mo, .muc-toi .hop-form .note, .muc-toi .hop-form .dong-y,
.muc-toi .the .mo, .muc-toi .the p { color: var(--muted-2); }
.dau-muc { max-width: 62ch; margin-bottom: 34px; }
.dau-muc.giua { text-align: center; }

/* ── Nút ────────────────────────────────────────────────────── */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 16px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2;
}
.nut-vang { background: var(--gold); color: var(--navy); }
.nut-vang:hover { background: #B8931F; }
.nut-toi { background: var(--navy); color: #fff; }
.nut-toi:hover { background: var(--navy-2); }
.nut-vien { background: transparent; color: var(--navy); border-color: var(--navy); }
.nut-vien-sang { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.nut[disabled] { opacity: .6; cursor: not-allowed; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { position: relative; background: var(--navy-3); color: #fff; overflow: hidden; }
.hero-anh { position: absolute; inset: 0; }
.hero-anh img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(7,21,39,.94) 0%, rgba(7,21,39,.72) 52%, rgba(7,21,39,.5) 100%);
}
.hero .khung { position: relative; z-index: 2; padding-top: 76px; padding-bottom: 76px; }
.hero h1 { color: #fff; max-width: 19ch; }
.hero .dan { color: var(--tren-toi); max-width: 56ch; }
.hero-nut { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-gach { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 9px; max-width: 60ch; }
.hero-gach li { padding-left: 26px; position: relative; color: var(--tren-toi); font-size: 15.5px; }
.hero-gach li::before { content: "◆"; position: absolute; left: 0; color: var(--gold); font-size: 12px; top: 3px; }
.hero-nho .khung { padding-top: 52px; padding-bottom: 52px; }
.hero-nho h1 { max-width: 24ch; }

/* ── Lưới & thẻ ─────────────────────────────────────────────── */
.luoi { display: grid; gap: 22px; }
.luoi-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.luoi-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.luoi-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .luoi-3, .luoi-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .luoi-2, .luoi-3, .luoi-4 { grid-template-columns: 1fr; } }

.the {
  background: #fff; border: 1px solid var(--line); border-radius: var(--bo-goc);
  overflow: hidden; display: flex; flex-direction: column;
}
.the-anh { aspect-ratio: 16/10; background: var(--bg-2); overflow: hidden; }
.the-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.the-than { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.the h3 { margin: 0; font-size: 19px; }
.the h3 a { color: var(--navy); text-decoration: none; }
.the h3 a:hover { text-decoration: underline; }
.the p { margin: 0; color: var(--muted); font-size: 15.5px; }
.the-chan { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.the-toi { background: var(--navy-2); border-color: rgba(255,255,255,.12); }
.the-toi h3 { color: #fff; }
.the-toi p { color: var(--tren-toi); }

.nhan {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.nhan-dang-xay-dung { background: #FEF3C7; color: #78350F; }
.nhan-dang-ban-giao { background: #DBEAFE; color: #1E3A8A; }
.nhan-da-ban-giao { background: #DCFCE7; color: #14532D; }
.nhan-con-hang { background: #DCFCE7; color: #14532D; }
.nhan-da-coc { background: #FEF3C7; color: #78350F; }
.nhan-da-ban { background: #F1F5F9; color: #475569; }
.gia { font-weight: 800; color: var(--gold-dark); font-size: 17px; }

.doi { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
@media (max-width: 880px) { .doi { grid-template-columns: 1fr; gap: 26px; } }
.doi img { width: 100%; border-radius: var(--bo-goc); display: block; }

.con-so { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
@media (max-width: 700px) { .con-so { grid-template-columns: repeat(2, 1fr); } }
.con-so-o { padding: 22px 12px; background: var(--navy-2); border-radius: var(--bo-goc); }
.con-so-num { font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: var(--gold); line-height: 1.1; }
.con-so-nhan { font-size: 14px; color: var(--tren-toi); margin-top: 6px; }

.hop-luu-y {
  border-left: 4px solid var(--gold); background: #FBF6E6; color: #4A3B08;
  padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 22px 0; max-width: 72ch;
}
.hop-luu-y strong { color: #3A2E06; }
.muc-toi .hop-luu-y { background: rgba(201,162,39,.12); color: var(--tren-toi); }
.muc-toi .hop-luu-y strong { color: #fff; }

.bang-thong-so { width: 100%; border-collapse: collapse; }
.bang-thong-so th, .bang-thong-so td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.bang-thong-so th { color: var(--muted-2); font-weight: 600; width: 42%; }
.bang-thong-so td { color: var(--ink); font-weight: 600; }

/* ── Lightbox mặt bằng ──────────────────────────────────────── */
.the-mb { border: 1px solid var(--line); border-radius: var(--bo-goc); overflow: hidden; background: #fff; }
.mo-lightbox { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }
.mo-lightbox img { width: 100%; display: block; }
.the-mb figcaption { padding: 12px 16px; font-size: 15px; color: var(--muted); display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.the-mb figcaption span { color: var(--gold-dark); font-weight: 700; font-size: 13px; white-space: nowrap; }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
dialog.lightbox::backdrop { background: rgba(7,21,39,.92); }
dialog.lightbox img { max-width: 96vw; max-height: 86vh; display: block; border-radius: 8px; }
.lightbox-thanh { display: flex; justify-content: space-between; align-items: center; gap: 14px; color: #fff; padding: 10px 4px; }
.lightbox-dong { background: var(--gold); color: var(--navy); border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 700; cursor: pointer; }

/* ── Form ───────────────────────────────────────────────────── */
.hop-form { background: #fff; border: 1px solid var(--line); border-radius: var(--bo-goc); padding: 26px; box-shadow: var(--bong); }
.muc-toi .hop-form { border-color: rgba(255,255,255,.14); }
.hop-form h2, .hop-form h3 { margin-top: 0; }
.hang-form { display: grid; gap: 14px; }
.hang-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .hang-2 { grid-template-columns: 1fr; } }
.o-form { display: grid; gap: 6px; }
.o-form > label { font-size: 14px; font-weight: 600; color: var(--muted); }
input[type=text], input[type=tel], input[type=email], select, textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid #CBD5E1; border-radius: 10px;
  font: inherit; font-size: 16px; color: var(--ink); background: #fff;
}
textarea { min-height: 104px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #6B7688; }
.hop-mat { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; }
.dong-y { font-size: 13.5px; color: var(--muted-2); margin: 12px 0 0; }
.ket-qua { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 15px; display: none; }
.ket-qua[data-hien="1"] { display: block; }
.ket-qua[data-loai="ok"] { background: #DCFCE7; color: #14532D; }
.ket-qua[data-loai="loi"] { background: #FEE2E2; color: #7F1D1D; }

/* ── Bộ lọc ─────────────────────────────────────────────────── */
.loc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 26px; }
.loc-nut {
  border: 1.5px solid var(--line); background: #fff; color: var(--navy);
  padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer;
}
.loc-nut[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.loc-chon { display: flex; flex-wrap: wrap; gap: 10px; }
.loc-chon select { width: auto; min-width: 168px; padding: 10px 12px; }
.dem-kq { color: var(--muted-2); font-size: 15px; margin: 0 0 18px; }
[data-an="1"] { display: none !important; }

/* ── Bảng giỏ hàng ──────────────────────────────────────────── */
.bang-gio { width: 100%; border-collapse: collapse; font-size: 15px; }
.bang-gio th, .bang-gio td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.bang-gio th { background: var(--bg-2); color: var(--navy); font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.bang-gio tbody tr:hover { background: #FAFCFF; }
.bang-gio .ma { font-weight: 800; color: var(--navy); white-space: nowrap; }
.bang-gio .gia { white-space: nowrap; }
.bao-bang { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--bo-goc); }
@media (max-width: 820px) {
  .bao-bang { border: 0; overflow: visible; }
  .bang-gio, .bang-gio tbody, .bang-gio tr, .bang-gio td { display: block; width: 100%; }
  .bang-gio thead { display: none; }
  .bang-gio tr { border: 1px solid var(--line); border-radius: var(--bo-goc); margin-bottom: 14px; padding: 6px 4px; background: #fff; }
  .bang-gio td { border: 0; padding: 8px 14px; display: flex; justify-content: space-between; gap: 14px; }
  .bang-gio td::before { content: attr(data-nhan); color: var(--muted-2); font-size: 13.5px; font-weight: 600; flex: 0 0 auto; }
  .bang-gio td:last-child { border-top: 1px solid var(--line); margin-top: 4px; }
}

/* ── Thẻ sản phẩm (giỏ hàng bán / chuyển nhượng / cho thuê) ── */
.luoi-sp { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
@media (max-width: 980px) { .luoi-sp { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .luoi-sp { grid-template-columns: 1fr; } }

.the-sp {
  background: #fff; border: 1px solid var(--line); border-radius: var(--bo-goc);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .16s ease, border-color .16s ease;
}
.the-sp:hover { box-shadow: var(--bong); border-color: #C9D4E3; }
.the-sp-anh { position: relative; display: block; aspect-ratio: 4/3; background: var(--bg-2); overflow: hidden; }
.the-sp-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.the-sp-than { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.the-sp-gia { color: var(--gold-dark); font-weight: 800; font-size: 20px; line-height: 1.2; }
.the-sp-gia small { color: var(--muted-2); font-weight: 600; font-size: 13.5px; }
.the-sp-ten { font-size: 17px; line-height: 1.35; margin: 0; }
.the-sp-ten a { color: var(--navy); text-decoration: none; }
.the-sp-ten a:hover { text-decoration: underline; }
.the-sp-ts {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14.5px; color: var(--muted);
}
.the-sp-ts li { position: relative; padding-right: 10px; }
.the-sp-ts li + li::before { content: "·"; position: absolute; left: -8px; color: #B6C2D2; }
.the-sp-noi { color: var(--muted-2); font-size: 14.5px; margin: 0; }
.the-sp-chan {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 10px;
  color: var(--muted-2); font-size: 13px;
}

/* Nhãn hình thức nằm trên ảnh — cho biết ngay đây là hàng bán hay hàng thuê */
.nhan-ht, .nhan-tt {
  position: absolute; top: 12px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.nhan-ht { left: 12px; }
.nhan-tt { right: 12px; }
.nhan-ht-ban-cdt { background: #0B1F3A; color: #fff; }
.nhan-ht-chuyen-nhuong { background: var(--gold); color: var(--navy); }
.nhan-ht-cho-thue { background: #0F5132; color: #fff; }
.nhan-con-trong { background: #DCFCE7; color: #14532D; }
.nhan-da-coc { background: #FEF3C7; color: #78350F; }
.nhan-da-giao-dich { background: #E2E8F0; color: #334155; }

/* ── Trang chi tiết sản phẩm ────────────────────────────────── */
.sp-dau { padding-bottom: 0; }
.sp-nhan-hang { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.sp-nhan-hang .nhan-ht { position: static; }
.sp-than { padding-top: 28px; }
.sp-luoi { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 40px; align-items: start; }
@media (max-width: 980px) { .sp-luoi { grid-template-columns: 1fr; gap: 28px; } }
.sp-trai h2 { margin-top: 1.5em; font-size: 24px; }
.sp-anh-lon { margin: 0; border-radius: var(--bo-goc); overflow: hidden; border: 1px solid var(--line); }
.sp-anh-lon img { width: 100%; display: block; }
.sp-anh-nho { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.sp-anh-nho .mo-lightbox { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.sp-anh-nho img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sp-danh-sach { padding-left: 22px; color: var(--muted); }
.sp-danh-sach li { margin-bottom: .45em; }

.sp-phai { position: sticky; top: calc(var(--cao-dinh) + 16px); display: grid; gap: 18px; }
@media (max-width: 980px) { .sp-phai { position: static; } }
.sp-hop {
  background: var(--navy); color: var(--tren-toi);
  border-radius: var(--bo-goc); padding: 22px; display: grid; gap: 12px;
}
.sp-gia { color: var(--gold); font-size: 28px; font-weight: 800; line-height: 1.15; margin: 0; }
.sp-hop .note { color: #9FB0C6; margin: 0; }
.sp-nhanh { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 8px; }
.sp-nhanh li { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 8px; }
.sp-nhanh li:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-nhanh span { color: #9FB0C6; }
.sp-nhanh b { color: #fff; text-align: right; }
.sp-hop .nut { width: 100%; }
.sp-hop .nut-vien { color: #fff; border-color: rgba(255,255,255,.5); }

/* ── Bài viết ───────────────────────────────────────────────── */
.bai { max-width: 68ch; margin: 0 auto; }
.bai h2 { margin-top: 1.6em; font-size: 25px; }
.bai ul { padding-left: 22px; }
.bai li { margin-bottom: .5em; color: var(--muted); }
.bai blockquote {
  margin: 26px 0; padding: 16px 22px; border-left: 4px solid var(--gold);
  background: var(--bg-2); color: var(--navy); font-size: 18px; font-style: italic; border-radius: 0 10px 10px 0;
}
.meta-bai { color: var(--muted-2); font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; }
.anh-bai { width: 100%; border-radius: var(--bo-goc); margin-bottom: 28px; }

/* ── Q&A ────────────────────────────────────────────────────── */
details.qa { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 12px; }
details.qa summary {
  cursor: pointer; padding: 16px 20px; font-weight: 700; color: var(--navy); font-size: 16.5px;
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "+"; color: var(--gold-dark); font-size: 21px; line-height: 1; }
details.qa[open] summary::after { content: "–"; }
details.qa .qa-noi { padding: 0 20px 18px; color: var(--muted); max-width: 72ch; }

/* ── Đường dẫn & phân trang ─────────────────────────────────── */
.duong-dan { font-size: 14px; color: var(--muted-2); padding: 14px 0 0; }
.duong-dan a { color: var(--muted); }
.duong-dan ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.duong-dan li + li::before { content: "›"; margin-right: 8px; color: #94A3B8; }

/* ── Chân trang (tối giản: 1 hàng thông tin + 1 dòng pháp lý) ─ */
.chan {
  background: var(--navy-3); color: var(--tren-toi-mo);
  padding: 30px 0 26px; font-size: 14.5px; line-height: 1.55;
  border-top: 1px solid rgba(201,162,39,.34);
}
.chan a { color: var(--tren-toi); text-decoration: none; }
/* Không cho bẻ đôi nhãn liên kết: 'Chính / sách bảo mật' trên mobile nhìn như lỗi. */
.chan-tren a { white-space: nowrap; }
.chan a:hover { text-decoration: underline; }
.chan p { margin: 0; }
.chan-tren {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px 40px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.chan-phai { text-align: right; }
.chan-ten { color: #fff; font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.chan-tt { color: var(--tren-toi-mo); }
/* Hotline là mỏ neo thị giác của chân trang — không có nó, khối chữ trôi lơ lửng. */
.chan-goi a { color: var(--gold); font-size: 21px; font-weight: 800; letter-spacing: .01em; }
.chan-duoi {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px 40px; flex-wrap: wrap; margin-top: 14px;
}
.chan .disclaimer { font-size: 12.5px; line-height: 1.55; color: #7E8DA3; max-width: 74ch; }
.chan-cr { font-size: 12.5px; color: #7E8DA3; text-align: right; white-space: nowrap; }
@media (max-width: 860px) {
  .chan-cr { text-align: left; white-space: normal; }
}
@media (max-width: 620px) {
  .chan-tren { flex-direction: column; gap: 16px; }
  .chan-phai { text-align: left; }
  .chan-goi a { font-size: 19px; }
}

/* ── Nút gọi nổi trên di động ───────────────────────────────── */
.fab { display: none; }
@media (max-width: 760px) {
  .fab {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
    gap: 10px;
  }
  .fab a { flex: 1; justify-content: center; box-shadow: 0 6px 20px rgba(7,21,39,.28); padding: 13px 10px; font-size: 15px; }
  body { padding-bottom: 74px; }
}

@media print { .topbar, .navbar, .fab, .menu-di-dong { display: none !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ── Bề rộng dòng chữ (theo references/be-rong-dong-chu.md) ───────────────
   Đặt ở CUỐI file để thắng các luật phía trên; nhân đôi class để tăng độ ưu
   tiên mà không phải dùng !important.
   45–75 ký tự/dòng là vùng đọc thoải mái. Đo bằng ch chứ không bằng px —
   cùng một trần px ở 17px và 15px ra số ký tự khác nhau.

   ⚠️ Danh sách class "chữ nhỏ" ở mục 3 PHẢI khớp với regex nhận diện chữ nhỏ
   trong bot/11-kiem-chu-hien-thi.js. Sửa một bên mà quên bên kia thì cổng
   kiểm tự mâu thuẫn với chính luật CSS của nó. */
:root { --do-dai-dong: 72ch; }

/* 1 · chữ để ĐỌC liền mạch */
main p, main li, .van-ban.van-ban, .dan.dan { max-width: var(--do-dai-dong); }

/* 2 · chỗ KHÔNG phải chữ đọc liền mạch — bỏ trần, để layout tự lo bề rộng */
nav p, nav li, form p, .the-sp p, .the-sp li, .sp-nhanh li,
.hero-gach li, .duong-dan li, .bang-gio td, .bang-thong-so td,
.con-so-nhan, .the-chan span, .loc p, .dem-kq { max-width: none; }

/* 3 · chữ nhỏ / pháp lý / chú thích ảnh — rộng hơn nhưng vẫn có trần */
.disclaimer, .consent, .note, figcaption, .cap { max-width: 95ch; }

/* 4 · cân dòng: balance cho tiêu đề và đoạn dẫn ngắn, pretty cho thân dài */
h1, h2, h3, h4, .dan, .nhan-tren, .dau-muc p, .the h3, .con-so-nhan,
/* đoạn ngắn 2–3 dòng trong thẻ, chú thích, hộp lưu ý: balance mới cân được
   dòng cuối; pretty chỉ chống dòng cuối trơ trọi 1 chữ chứ không cân dòng. */
.the p, .the-than p, .mo, .hop-luu-y, .the-mb figcaption, .chan-tt,
.the-sp-ten, .the-sp-noi { text-wrap: balance; }
p, li, figcaption, dd, blockquote, .qa-noi { text-wrap: pretty; }

/* 5 · hàng nhãn–giá trị: đừng xé đôi cụm từ ở chỗ xấu nhất */
.bang-thong-so td { text-wrap: balance; }