/*
Theme Name: Vinhomes Nhà Đẹp — web nhóm
Theme URI: https://phamtienloi.com
Author: Realtor OS
Description: Giao diện web nhóm Vinhomes Nhà Đẹp — bản tách từ giao diện phamtienloi.com ngày 08/10/2026, chạy riêng trên máy chủ riêng. Màu teal/cam theo bộ nhận diện Realtor OS. Có sẵn trang dự án Masteri Grand Coast, khối thu lead, và trang blog cho hệ thống auto đăng bài.
Version: 1.0
Text Domain: phamtienloi
*/

/* ============================================================
   1. BIẾN MÀU  —  đổi 2 dòng đầu là đổi màu cả web
   ============================================================ */
:root{
  --brand:#2DBDB6;          /* màu chủ đạo */
  --accent:#F5A623;         /* màu nút bấm */

  --brand-dark:#239A94;
  --brand-deep:#177f7a;
  --line-hard:#1cbab4;
  --navy:#0E2A31;
  --navy-2:#123840;
  --ink:#1F2937;
  --muted:#6B7280;
  --bg:#FFFFFF;
  --bg-soft:#F7FAFA;
  --hair:#E5E7EB;
  --tint:rgba(45,189,182,.10);
  --tint-line:rgba(45,189,182,.30);
  --wrap:1160px;
  --r:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
section{padding:72px 0}
@media(max-width:768px){section{padding:48px 0}}
.soft{background:var(--bg-soft)}
.dark{background:var(--navy);color:#fff}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- CHỮ ---------- */
h1,h2,h3,h4{line-height:1.16;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(30px,5.4vw,54px);font-weight:900}
h2{font-size:clamp(25px,3.8vw,40px)}
h3{font-size:clamp(17px,2vw,22px);font-weight:700}
.eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-dark);margin-bottom:14px
}
.dark .eyebrow,.hero .eyebrow,.cta-band .eyebrow{color:var(--brand)}
.lead{font-size:clamp(15px,1.9vw,18px);color:var(--muted);max-width:62ch}
.dark .lead,.cta-band .lead{color:#B7C7CB}
b,strong{font-weight:800;color:inherit}
.sec-head{margin-bottom:38px}
.sec-head .lead{margin-top:14px}

/* ---------- NÚT ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:#fff;font-family:inherit;font-size:16px;font-weight:800;
  padding:16px 30px;border:0;border-radius:10px;cursor:pointer;text-decoration:none;
  box-shadow:0 6px 18px rgba(245,166,35,.32);transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(245,166,35,.44);text-decoration:none;color:#fff}
.btn-line{
  background:transparent;color:var(--brand-dark);border:2px solid var(--line-hard);box-shadow:none;
}
.btn-line:hover{background:var(--tint);box-shadow:none;color:var(--brand-dark)}
.dark .btn-line,.hero .btn-line,.cta-band .btn-line{color:#fff;border-color:rgba(45,189,182,.75)}
.dark .btn-line:hover,.hero .btn-line:hover{background:rgba(45,189,182,.16);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.center .btn-row{justify-content:center}
@media(max-width:520px){.btn{width:100%}.btn-row{flex-direction:column}}

.badges{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px}
.badges span{font-size:13px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px}
.dark .badges span,.hero .badges span{color:#9FB3B8}
.badges span::before{content:"✓";color:var(--brand);font-weight:900}

/* ============================================================
   2. ĐẦU TRANG
   ============================================================ */
.topbar{
  background:var(--navy);color:#cfe0e2;font-size:13px;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.topbar a{color:#fff}
.topbar b{color:var(--brand)}
@media(max-width:768px){.topbar .wrap{justify-content:center;text-align:center}.topbar .tb-hide{display:none}}

.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark:hover{text-decoration:none}
/* Dấu đầu trang: logo "LỢI ĐẤT - LỢI NHÀ" (mái nhà), thay ô chữ PTL cũ.
   Chữ PTL vẫn nằm trong HTML cho máy đọc màn hình, chỉ ẩn bằng font-size:0. */
.mark-ico{
  width:40px;height:40px;border-radius:10px;flex:0 0 40px;
  background:url(anh/bieu-tuong-512.png) center/contain no-repeat;
  font-size:0;
  display:flex;align-items:center;justify-content:center
}
.mark-t{display:flex;flex-direction:column;line-height:1.2}
.mark-t b{font-size:16px;font-weight:900;color:var(--navy);letter-spacing:-.02em}
.mark-t span{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

.menu{display:flex;align-items:center;gap:28px;list-style:none}
.menu a{font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
/* Tên dự án dài (Vinhomes King Park, Vinhomes Olympic) làm menu gãy hai dòng trên
   màn hình vừa. Thu khoảng cách và cỡ chữ theo bề ngang thay vì cắt bớt tên. */
@media(max-width:1340px){.menu{gap:18px}.nav-in{gap:14px}}
@media(max-width:1180px){.menu{gap:12px}.menu a{font-size:13.5px}.nav-cta .btn{padding:10px 15px;font-size:13.5px}}
.menu a:hover,.menu .current-menu-item>a{color:var(--brand-dark);border-bottom-color:var(--brand);text-decoration:none}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:11px 20px;font-size:14px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--hair);border-radius:9px;background:#fff;cursor:pointer;align-items:center;justify-content:center;font-size:19px;color:var(--navy)}
@media(max-width:980px){
  .menu,.nav-cta .btn-line{display:none}
  .burger{display:flex}
  .nav-in{gap:12px}
  .menu.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--hair);box-shadow:0 18px 34px rgba(0,0,0,.10);padding:8px 20px 16px
  }
  .menu.open li{border-bottom:1px solid var(--hair)}
  .menu.open li:last-child{border-bottom:0}
  .menu.open a{display:block;padding:14px 0;border-bottom:0}
}
@media(max-width:520px){.nav-cta .btn{padding:10px 14px;font-size:13px}}

/* ============================================================
   3. HERO
   ============================================================ */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 460px at 82% 12%,rgba(45,189,182,.20),transparent 62%),
    radial-gradient(700px 420px at 8% 88%,rgba(245,166,35,.10),transparent 60%);
}
/* Cột chữ canh GIỮA, ảnh vẫn đứng trên đáy.
   Để cả hai cùng canh đáy thì cột chữ ngắn hơn bị đẩy xuống, chừa một mảng
   navy trống hơn 250px phía trên — nhìn như trang chưa tải xong. */
.hero-in{position:relative;display:grid;gap:34px;padding:48px 20px 0}
@media(min-width:981px){
  .hero-in{grid-template-columns:1.06fr .94fr;align-items:center;gap:48px;padding:56px 20px 0}
}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lead{color:#B7C7CB;margin-top:20px;font-size:17px}
.hero-txt{padding-bottom:56px}
@media(min-width:981px){.hero-txt{padding-bottom:0}}

.hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-stats div{
  background:rgba(255,255,255,.06);border:1px solid rgba(45,189,182,.34);
  border-radius:10px;padding:11px 15px;font-size:12.5px;font-weight:600;color:#C8D8DB
}
.hero-stats b{color:var(--brand);display:block;font-size:20px;font-weight:900;line-height:1.2}

/* Ảnh chụp studio có nền xám — đóng khung thành thẻ bo góc cho gọn,
   thay vì để nguyên khối chữ nhật xám nổi trên nền navy. */
.hero-fig{position:relative;align-self:end;display:flex;justify-content:center;padding-bottom:40px}
.hero-fig::after{
  content:"";position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:min(400px,88%);height:80%;border-radius:24px;z-index:0;
  background:linear-gradient(180deg,rgba(45,189,182,.34),rgba(45,189,182,.04));
  filter:blur(30px)
}
.hero-fig img{
  position:relative;z-index:1;width:min(392px,88%);
  border-radius:18px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 28px 64px rgba(0,0,0,.48)
}
@media(max-width:980px){
  .hero-fig{padding-bottom:24px}
  .hero-fig img{width:min(300px,72%)}
}

/* ---------- DẢI SỐ ---------- */
.strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  margin-top:-38px;position:relative;z-index:5;box-shadow:0 18px 42px rgba(14,42,49,.13)
}
@media(min-width:769px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip div{background:#fff;padding:24px 16px;text-align:center}
.strip b{display:block;font-size:clamp(23px,3vw,31px);font-weight:900;color:var(--brand-dark);line-height:1.2}
.strip span{font-size:12.5px;color:var(--muted);font-weight:600}

/* ============================================================
   4. KHỐI CHUNG
   ============================================================ */
/* Ô lưới mặc định là min-width:auto — ảnh rộng 1400px sẽ phình cột và bóp
   nát cột chữ bên cạnh. Đặt min-width:0 để ảnh co theo cột, không ngược lại. */
.grid>*,.split>*,.anh-doi>*,.anh-ba>*,.bang-chung>*,.kenh>*,.toa>*,.cs>*{min-width:0}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
@media(min-width:769px){
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
}
.card{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:28px 24px;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:0 14px 32px rgba(14,42,49,.09);transform:translateY(-2px)}
.card h3{margin-bottom:9px;color:var(--navy)}
.card p{font-size:14.5px;color:var(--muted)}
.card .no{
  width:38px;height:38px;border-radius:9px;background:var(--tint);color:var(--brand-dark);
  font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:16px
}

/* hai cột chữ + ảnh */
.split{display:grid;gap:34px;align-items:center}
@media(min-width:869px){.split{grid-template-columns:1fr 1fr;gap:56px}.split.rev>div:first-child{order:2}}
.split-fig{border-radius:var(--r);overflow:hidden;background:var(--bg-soft);border:1px solid var(--hair)}
/* Chặn chiều cao: ảnh dọc để tự do sẽ cao lêu nghêu và lộ phần trần nhà.
   Ngắm hơi lệch xuống dưới để lấy đúng người, bỏ bớt trần. */
.split-fig img{width:100%;max-height:520px;object-fit:cover;object-position:center 62%}
@media(max-width:868px){.split-fig img{max-height:400px}}

/* Chừa chỗ cho thanh menu dính khi bấm link nhảy tới khối (#lien-he...) */
section[id],div[id]{scroll-margin-top:92px}

/* mốc thời gian */
.moc{display:grid;gap:0;margin-top:32px}
.moc .m{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--hair)}
.moc .m:last-child{border-bottom:1px solid var(--hair)}
.moc .nam{font-weight:900;color:var(--brand-dark);font-size:15px;letter-spacing:.02em;padding-top:2px}
.moc h3{margin-bottom:6px;color:var(--navy)}
.moc p{font-size:14.5px;color:var(--muted)}
@media(max-width:600px){.moc .m{grid-template-columns:1fr;gap:6px}}

/* bảng thông số */
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.tbl tr{border-bottom:1px solid var(--hair)}
.tbl tr:last-child{border-bottom:0}
.tbl tr:nth-child(odd){background:var(--bg-soft)}
.tbl th,.tbl td{padding:15px 18px;text-align:left;font-size:14.5px;vertical-align:top}
.tbl th{width:38%;font-weight:700;color:var(--navy);white-space:normal}
.tbl td{color:var(--ink)}
@media(max-width:600px){.tbl th,.tbl td{display:block;width:100%;padding:12px 16px}.tbl th{padding-bottom:2px;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}}

/* danh sách tick */
/* KHÔNG dùng display:grid cho <li>: mọi thẻ <b> bên trong sẽ thành ô lưới
   riêng và rớt xuống dòng. Dùng lề trái + dấu tick canh tuyệt đối. */
.ticks{list-style:none;display:grid;gap:13px;margin-top:20px}
.ticks li{position:relative;padding-left:34px;font-size:15px;color:var(--ink);line-height:1.6}
.ticks li::before{
  content:"✓";position:absolute;left:0;top:2px;
  color:#fff;background:var(--brand);width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900
}
.dark .ticks li,.cta-band .ticks li{color:#D3E1E4}

/* ảnh thật — bằng chứng làm việc */
.bang-chung{display:grid;gap:22px;margin-top:34px}
@media(min-width:769px){.bang-chung{grid-template-columns:repeat(3,1fr)}}
.bang-chung figure{margin:0;background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  transition:box-shadow .18s,transform .18s}
.bang-chung figure:hover{box-shadow:0 14px 32px rgba(14,42,49,.11);transform:translateY(-2px)}
/* 3/2 cắt ít hơn 4/3; đẩy khung ngắm lên trên để không cụt đầu người */
.bang-chung .khung{aspect-ratio:3/2;overflow:hidden;background:var(--bg-soft)}
.bang-chung .khung img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.bang-chung figcaption{padding:18px 20px 20px}
.bang-chung figcaption b{display:block;font-size:15px;font-weight:800;color:var(--navy);margin-bottom:5px;letter-spacing:-.01em}
.bang-chung figcaption span{font-size:13.5px;color:var(--muted);line-height:1.6}

/* kênh mạng xã hội — thẻ lớn */
.kenh{display:grid;gap:16px;margin-top:34px}
@media(min-width:600px){.kenh{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.kenh{grid-template-columns:repeat(4,1fr)}}
.kenh .k{
  display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r);padding:24px 22px;text-decoration:none;color:var(--ink);
  transition:box-shadow .18s,transform .18s,border-color .18s
}
.kenh .k:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 16px 34px rgba(14,42,49,.12)}
.kenh .k .ico{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;flex:0 0 46px
}
.kenh .k .ico svg{width:24px;height:24px;fill:currentColor}
.kenh .k b{display:block;font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.kenh .k span{font-size:13.5px;color:var(--muted);line-height:1.55;margin-top:3px;display:block}
.kenh .k i.tay{font-style:normal;display:block;font-size:12.5px;font-weight:700;color:var(--brand-dark);margin-top:2px;
  word-break:break-all}
.kenh .k em{
  font-style:normal;font-size:13px;font-weight:800;color:var(--brand-dark);
  margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:6px
}
.kenh .k:hover em{gap:10px}
.k-tiktok .ico{background:#111}
.k-tiktok:hover{border-color:#111}
.k-youtube .ico{background:#FF0000}
.k-youtube:hover{border-color:#FF0000}
.k-facebook .ico{background:#1877F2}
.k-facebook:hover{border-color:#1877F2}
.k-zalo .ico{background:#0068FF}
.k-zalo:hover{border-color:#0068FF}

/* icon nhỏ trên đầu trang + chân trang */
.mxh{display:flex;gap:9px;align-items:center}
.mxh a{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);color:#fff;transition:background .16s,transform .16s
}
.mxh a:hover{background:var(--brand);transform:translateY(-2px)}
.mxh a svg{width:16px;height:16px;fill:currentColor}
.topbar .mxh a{width:28px;height:28px}
.topbar .mxh a svg{width:14px;height:14px}

/* chip tiện ích */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.chips span,.chips a{
  font-size:13px;font-weight:600;color:var(--navy);background:#fff;
  border:1px solid var(--hair);border-radius:999px;padding:8px 15px
}
.soft .chips span{background:#fff}
/* chip bấm được — dẫn sang trang con */
.chips a{text-decoration:none;transition:border-color .15s,color .15s}
.chips a:hover{border-color:var(--line-hard);color:var(--brand-deep);text-decoration:none}

/* ============================================================
   5. TRANG DỰ ÁN
   ============================================================ */
.da-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:78px 0}
.da-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1000px 520px at 70% 0%,rgba(45,189,182,.24),transparent 62%),
    radial-gradient(760px 460px at 12% 100%,rgba(245,166,35,.11),transparent 60%);
}
.da-hero .wrap{position:relative}
.da-hero h1{color:#fff;max-width:16ch}
.da-hero .lead{color:#B7C7CB;margin-top:20px}
.da-tag{
  display:inline-flex;align-items:center;gap:8px;background:rgba(45,189,182,.16);
  border:1px solid rgba(45,189,182,.42);color:var(--brand);border-radius:999px;
  padding:8px 16px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px
}

/* ảnh chính thức của dự án — hiện NGUYÊN ảnh, không cắt.
   Mặt bằng mà bị cắt là mất thông tin, nên không dùng object-fit:cover ở đây. */
.anh-da{margin:0;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:#fff}
.anh-da img{width:100%;height:auto;display:block}
.anh-da figcaption{
  padding:12px 16px;font-size:12.5px;color:var(--muted);
  border-top:1px solid var(--hair);background:var(--bg-soft)
}
.anh-doi{display:grid;gap:22px;margin-top:26px}
@media(min-width:769px){.anh-doi{grid-template-columns:1fr 1fr}}
.anh-ba{display:grid;gap:20px;margin-top:26px}
/* Ảnh trong lưới phải CÙNG TỶ LỆ, nếu không lưới kéo mọi thẻ cao bằng thẻ cao nhất
   và để lại mảng trắng lớn dưới ảnh thấp. Cắt giữa ảnh còn hơn để hở như vậy.
   Chú thích cho giãn nốt phần dư để nền chạy hết đáy thẻ. */
.anh-ba .anh-da,.anh-doi .anh-da{display:flex;flex-direction:column}
.anh-ba .anh-da img,.anh-doi .anh-da img{aspect-ratio:3/2;object-fit:cover}
.anh-ba .anh-da figcaption,.anh-doi .anh-da figcaption{flex:1}
@media(min-width:769px){.anh-ba{grid-template-columns:repeat(3,1fr)}}

/* ô đặt ảnh dự án */
.anh-cho{
  border:2px dashed var(--tint-line);border-radius:var(--r);background:var(--tint);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:34px 20px;text-align:center;min-height:220px
}
.anh-cho b{color:var(--brand-dark);font-size:14px;font-weight:800}
.anh-cho span{color:var(--muted);font-size:12.5px}

/* toà nhà */
.toa{display:grid;gap:18px;margin-top:26px}
@media(min-width:769px){.toa{grid-template-columns:repeat(2,1fr)}}
.toa .t{border:1px solid var(--hair);border-radius:var(--r);padding:24px;background:#fff}
.toa .t h3{color:var(--navy);margin-bottom:4px}
.toa .t .pk{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:12px}
.toa .t ul{list-style:none;display:grid;gap:8px}
.toa .t li{font-size:14px;color:var(--muted);position:relative;padding-left:22px;line-height:1.6}
.toa .t li::before{content:"—";position:absolute;left:0;top:0;color:var(--brand)}

/* chính sách */
.cs{display:grid;gap:14px;margin-top:26px}
@media(min-width:769px){.cs{grid-template-columns:repeat(2,1fr)}}
.cs .c{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  background:#fff;border:1px solid var(--hair);border-left:4px solid var(--accent);
  border-radius:12px;padding:20px 22px
}
.cs .c b{font-size:27px;font-weight:900;color:var(--accent);line-height:1}
.cs .c span{font-size:14px;color:var(--ink);font-weight:600}
.cs .c small{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}

/* ============================================================
   6. THU LEAD
   ============================================================ */
.cta-band{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff}
.cta-band h2{color:#fff}
.cta-grid{display:grid;gap:38px;align-items:start}
@media(min-width:869px){.cta-grid{grid-template-columns:1fr 440px;gap:56px}}
.form-card{background:#fff;border-radius:var(--r);padding:30px 26px;box-shadow:0 24px 56px rgba(0,0,0,.3)}
.form-card h3{color:var(--navy);margin-bottom:4px}
.form-card p.sm{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.form-card label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:0 0 6px}
.form-card input,.form-card select,.form-card textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  padding:13px 14px;border:1.5px solid var(--hair);border-radius:9px;margin-bottom:15px;background:#fff
}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:0;border-color:var(--brand)}
.form-card .btn{width:100%}
.form-note{font-size:12px;color:var(--muted);text-align:center;margin-top:13px}
.form-ok{background:var(--tint);border:1px solid var(--tint-line);color:var(--brand-deep);
  border-radius:10px;padding:14px 16px;font-size:14px;font-weight:700;margin-bottom:18px}

/* ============================================================
   7. BLOG
   ============================================================ */
.bai-list{display:grid;gap:24px;margin-top:34px}
@media(min-width:769px){.bai-list{grid-template-columns:repeat(3,1fr)}}
.bai{background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.bai:hover{box-shadow:0 14px 32px rgba(14,42,49,.10);transform:translateY(-2px)}
.bai-anh{aspect-ratio:16/10;background:linear-gradient(135deg,var(--tint),var(--bg-soft));overflow:hidden}
.bai-anh img{width:100%;height:100%;object-fit:cover}
.bai-in{padding:22px 20px 24px;display:flex;flex-direction:column;flex:1}
.bai .cat{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:9px}
.bai h3{margin-bottom:9px}
.bai h3 a{color:var(--navy);text-decoration:none}
.bai h3 a:hover{color:var(--brand-dark);text-decoration:none}
.bai p{font-size:14px;color:var(--muted);flex:1}
.bai .meta{font-size:12.5px;color:var(--muted);margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}

.bai-don{max-width:760px;margin:0 auto;padding:56px 20px 20px}
.bai-don h1{margin-bottom:16px;color:var(--navy)}
.bai-don .meta{font-size:13.5px;color:var(--muted);padding-bottom:22px;border-bottom:1px solid var(--hair);margin-bottom:32px}
.noi-dung{font-size:17px;line-height:1.8;color:#374151}
.noi-dung>*+*{margin-top:22px}
.noi-dung h2{font-size:clamp(21px,3vw,28px);color:var(--navy);margin-top:44px}
.noi-dung h3{font-size:clamp(17px,2.2vw,21px);color:var(--navy);margin-top:32px}
.noi-dung ul,.noi-dung ol{padding-left:24px;display:grid;gap:10px}
.noi-dung img{border-radius:12px;margin:30px 0}
.noi-dung blockquote{
  border-left:4px solid var(--brand);background:var(--bg-soft);
  padding:18px 22px;border-radius:0 10px 10px 0;color:var(--ink);font-style:italic
}
.noi-dung a{color:var(--brand-dark);text-decoration:underline}
.noi-dung table{width:100%;border-collapse:collapse;font-size:15px}
.noi-dung th,.noi-dung td{border:1px solid var(--hair);padding:11px 14px;text-align:left}
.noi-dung th{background:var(--bg-soft);font-weight:800;color:var(--navy)}

.phan-trang{display:flex;gap:9px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.phan-trang .page-numbers{
  min-width:42px;height:42px;padding:0 13px;border:1px solid var(--hair);border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
  color:var(--ink);text-decoration:none;background:#fff
}
.phan-trang .page-numbers:hover{border-color:var(--brand);color:var(--brand-dark);text-decoration:none}
.phan-trang .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}

/* ============================================================
   8. CHÂN TRANG
   ============================================================ */
.foot{background:var(--navy);color:#9FB3B8;padding:56px 0 0;font-size:14px}
.foot-grid{display:grid;gap:32px;padding-bottom:40px}
/* Chân trang có 4 cột. Ở khổ máy tính bảng chia 2×2 — chia 3 thì cột thứ tư
   rớt xuống một mình, nhìn lệch hẳn. Đủ 4 cột chỉ từ 900px trở lên. */
@media(min-width:600px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot h4{color:#fff;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.foot a{color:#9FB3B8;text-decoration:none}
.foot a:hover{color:var(--brand);text-decoration:none}
.foot ul{list-style:none;display:grid;gap:10px}
.foot .mark-t b{color:#fff}
.foot .mark-t span{color:var(--brand)}
.foot .gt{margin-top:16px;max-width:42ch;line-height:1.7}
.foot-end{border-top:1px solid rgba(255,255,255,.10);padding:20px 0;font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* nút nổi Zalo/gọi trên điện thoại */
.hotdock{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;background:rgba(255,255,255,.16);
  box-shadow:0 -6px 20px rgba(0,0,0,.18)
}
.hotdock a{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;
  font-size:14.5px;font-weight:800;color:#fff;text-decoration:none
}
.hotdock .z{background:var(--brand-deep)}
.hotdock .g{background:var(--accent)}
/* Nut vao nhom Zalo kin: mau xanh Zalo */
.hotdock .n{background:#0068FF}
@media(max-width:768px){.hotdock{display:grid}body{padding-bottom:52px}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;border-radius:8px;z-index:200}

/* ============================================================
   9. ĐỢT 1 — BỐ CỤC MỚI THEO ĐỊNH VỊ "NGƯỜI PHÂN TÍCH"
   ============================================================ */

/* ---------- MENU XỔ XUỐNG ----------
   Hai bộ tên lớp: `co-con`/`con` là do hàm menu dự phòng sinh ra,
   `menu-item-has-children`/`sub-menu` là do WordPress sinh ra khi dùng menu
   tạo trong quản trị. Phải khai cả hai, nếu không menu con chỉ chạy một kiểu. */
.menu li.co-con,
.menu li.menu-item-has-children{position:relative}

.menu .con,
.menu .sub-menu{
  position:absolute;top:100%;left:-14px;min-width:250px;list-style:none;
  background:#fff;border:1px solid var(--hair);border-radius:12px;padding:8px;
  box-shadow:0 16px 40px rgba(14,42,49,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:70
}

.menu li.co-con:hover>.con,
.menu li.co-con:focus-within>.con,
.menu li.menu-item-has-children:hover>.sub-menu,
.menu li.menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}

.menu .con a,
.menu .sub-menu a{display:block;padding:10px 13px;border-radius:8px;border-bottom:0;font-size:14px;font-weight:600}
.menu .con a:hover,
.menu .sub-menu a:hover{background:var(--tint);color:var(--brand-dark)}
.menu .mui{font-size:10px;opacity:.6;margin-left:3px}

@media(max-width:980px){
  /* Trên điện thoại menu con mở sẵn — không có chuột để rê, mà bắt bấm hai lần
     mới thấy mục con thì rất dễ bỏ lỡ. */
  .menu .con,
  .menu .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--tint-line);border-radius:0;
    margin:0 0 6px 10px;padding:0 0 0 12px;min-width:0
  }
  .menu .con a,
  .menu .sub-menu a{padding:11px 0}
}

/* ---------- HERO ĐỢT 1: người trước, không có số liệu dự án ---------- */
.hero h1 .ten{display:block;color:#fff}
.hero h1 .nghe{display:block;color:var(--brand);font-size:.62em;font-weight:800;margin-top:6px;letter-spacing:-.01em}

/* ---------- S2 · VẤN ĐỀ ---------- */
.van-de{list-style:none;display:grid;gap:0;margin-top:22px;border-top:1px solid var(--hair)}
.van-de li{
  padding:15px 0 15px 34px;border-bottom:1px solid var(--hair);position:relative;
  font-size:16px;color:var(--ink);line-height:1.6
}
.van-de li::before{
  content:"";position:absolute;left:6px;top:24px;width:14px;height:1px;background:var(--brand)
}
.chot{
  margin-top:26px;padding:20px 24px;background:var(--tint);border-left:3px solid var(--brand);
  border-radius:0 12px 12px 0;font-size:17px;font-weight:700;color:var(--navy);line-height:1.55
}

/* ---------- S3 · SÁU CÂU HỎI ---------- */
.hoi{display:grid;gap:18px;margin-top:36px}
@media(min-width:700px){.hoi{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.hoi{grid-template-columns:repeat(3,1fr)}}
.hoi>*{min-width:0}
.hoi .h{
  background:#fff;border:1px solid var(--hair);border-radius:14px;padding:24px 22px;
  display:flex;flex-direction:column;gap:9px;transition:box-shadow .18s,transform .18s,border-color .18s
}
.hoi .h:hover{box-shadow:0 14px 34px rgba(14,42,49,.09);transform:translateY(-2px)}
.hoi .h .so{
  font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--brand-dark);
  font-variant-numeric:tabular-nums
}
.hoi .h h3{color:var(--navy)}
.hoi .h p{font-size:14.5px;color:var(--muted);line-height:1.62}
/* Câu 06 là câu khác biệt nhất — hầu như không môi giới nào hỏi */
.hoi .h.dam{border-color:var(--line-hard);background:var(--tint)}
.hoi .h.dam .so{color:var(--brand-deep)}

/* ---------- S6 · TRÍCH DẪN LỚN ---------- */
.trich{
  margin-top:24px;padding:22px 26px;border-left:3px solid var(--brand);
  font-size:clamp(17px,2.2vw,21px);font-weight:700;color:var(--navy);line-height:1.5;
  letter-spacing:-.01em
}
.dark .trich,.hero .trich,.cta-band .trich{color:#fff}

/* ---------- S12 · CHIP CHỌN NHANH ---------- */
.chip-nhom{border:0;padding:0;margin:0 0 16px}
.chip-nhom legend{
  font-size:13px;font-weight:700;color:var(--ink);padding:0;margin-bottom:8px
}
.chips-in{display:flex;flex-wrap:wrap;gap:7px}
.chips-in input{position:absolute;opacity:0;width:0;height:0}
/* Cao 44px: dưới mức đó ngón tay bấm trượt trên điện thoại. */
.chips-in label{
  display:inline-flex;align-items:center;font-size:14px;font-weight:600;color:var(--ink);
  background:#fff;border:1.5px solid var(--hair);border-radius:999px;
  padding:0 16px;cursor:pointer;transition:background .14s,border-color .14s,color .14s;
  min-height:44px;line-height:1.2
}
.chips-in label:hover{border-color:var(--line-hard)}

/* Dùng background-color (thuộc tính đơn), KHÔNG dùng background (thuộc tính gộp).
   Lý do: `background:#fff` ở luật trên được trình duyệt tách ra thành cả
   background lẫn background-color. Còn `background:var(--brand)` có var() nên
   không tách được — thành ra background-color trắng của luật yếu hơn vẫn thắng,
   bấm chip xong không thấy đổi màu. */
.chips-in input[type="radio"]:checked+label{
  background-color:var(--brand);
  border-color:var(--brand);
  color:#fff
}
.chips-in input[type="radio"]:focus-visible+label{outline:2px solid var(--brand-dark);outline-offset:2px}

.form-card .tach{
  border:0;border-top:1px solid var(--hair);margin:20px 0 18px;padding:0
}

/* ---------- CHÂN TRANG 4 CỘT ---------- */
@media(min-width:900px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.foot .luu-y{
  border-top:1px solid rgba(255,255,255,.10);padding:22px 0 0;margin-top:8px;
  font-size:12.5px;line-height:1.7;color:#8AA0A6;display:grid;gap:9px;max-width:80ch
}

/* ---------- Chừa chỗ cho thanh menu dính ---------- */
section[id],div[id]{scroll-margin-top:92px}

/* ============================================================
   10. TINH CHỈNH CHO ĐIỆN THOẠI
   Phần lớn khách mở link từ Zalo hoặc Facebook trên điện thoại.
   Ở khổ này khoảng đệm của desktop làm trang dài lê thê, phải bóp lại —
   nhưng chỉ bóp khoảng đệm, không bóp cỡ chữ.
   ============================================================ */
@media(max-width:768px){
  .topbar{font-size:12px}
  .topbar .wrap{padding-top:8px;padding-bottom:8px}

  .sec-head{margin-bottom:26px}

  /* Sáu câu hỏi xếp dọc thành sáu thẻ — gọn lại kẻo phải cuộn quá lâu */
  .hoi{gap:12px;margin-top:26px}
  .hoi .h{padding:18px 18px;gap:6px;border-radius:12px}
  .hoi .h:hover{transform:none;box-shadow:none}

  .van-de{margin-top:18px}
  .van-de li{padding:13px 0 13px 28px;font-size:15.5px}
  .van-de li::before{top:22px;width:12px}

  .chot{padding:17px 18px;font-size:16px;margin-top:20px}
  .trich{padding:16px 18px;margin-top:20px}

  .form-card{padding:22px 18px}
  .chip-nhom{margin-bottom:14px}
  .chips-in{gap:6px}
  .chips-in label{font-size:13.5px;padding:0 14px}

  .card{padding:20px 18px}
  .anh-da figcaption{padding:11px 14px;font-size:12px}

  /* Ảnh trong khối hai cột: chặn thấp hơn để chữ và ảnh cân nhau */
  .split-fig img{max-height:340px}

  /* Bỏ hiệu ứng nhấc lên khi chạm — trên cảm ứng nó gây giật, không đẹp */
  .bai:hover,.kenh .k:hover,.bang-chung figure:hover{transform:none;box-shadow:none}
}

/* Máy nhỏ hơn nữa */
@media(max-width:400px){
  .wrap{padding:0 16px}
  .hero-in{padding-left:16px;padding-right:16px}
  .mark-t b{font-size:15px}
  .mark-t span{font-size:10px}
}

/* Người dùng bật chế độ giảm chuyển động thì tắt hết hiệu ứng */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Thanh trên cùng: bên phải xếp ngang, ẩn hẳn trên điện thoại
   (số điện thoại đã có ở thanh dính đáy rồi, để lại là thừa chỗ) */
.topbar .tb-hide{display:flex;align-items:center;gap:16px}
@media(max-width:768px){.topbar .tb-hide{display:none}}

/* Máy hẹp: bỏ dòng nghề dưới tên để thanh menu còn đúng một dòng.
   Để nguyên thì nó xuống 2 dòng, đẩy thanh menu cao thêm 26px — mất chỗ
   của phần quan trọng nhất là màn hình đầu tiên. */
@media(max-width:560px){
  .mark-t span{display:none}
  .mark-ico{width:36px;height:36px;flex:0 0 36px}
  .nav-in{padding-top:11px;padding-bottom:11px}
}

/* ---------- Dọn màn hình đầu trên điện thoại ----------
   Thanh trên cùng lặp lại đúng câu "Chuyên sâu Masterise Homes · Ocean City ·
   khu Đông Hà Nội" mà hero ghi ngay bên dưới. Trên máy tính thì vô hại, nhưng
   trên điện thoại nó xuống 2 dòng và ăn mất ~90px của phần quan trọng nhất. */
@media(max-width:768px){
  .topbar{display:none}
}

/* Tên không được xuống dòng trong thanh menu — xuống dòng là menu cao gấp rưỡi */
.mark-t b{white-space:nowrap}

/* Nút thu gọn còn "Đặt lịch" ở máy hẹp để tên có đủ chỗ */
@media(max-width:560px){
  .an-hep{display:none}
  .nav-cta .btn{padding:10px 16px}
}

/* ============================================================
   11. TIẾN ĐỘ THANH TOÁN (chính sách vay ngân hàng)
   Ngang trên máy tính, dọc trên điện thoại. Không dùng bảng —
   bảng 4 cột ở khổ điện thoại phải cuộn ngang, khách không cuộn.
   ============================================================ */
.csbh-han{
  display:inline-flex;align-items:center;gap:8px;background:var(--cam-nen,#FEF3C7);
  border:1px solid #FCD34D;color:#92400E;border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:700;margin-bottom:18px
}
.csbh-han b{font-weight:800}

.tien-do{margin-top:30px}
.td-moc{list-style:none;display:grid;gap:14px;position:relative;margin:0;padding:0}
@media(min-width:860px){
  .td-moc{grid-template-columns:repeat(4,1fr);gap:0}
}
.td-moc>*{min-width:0}
.td-moc li{
  background:#fff;border:1px solid var(--hair);border-radius:14px;
  padding:20px 20px 18px;position:relative;display:flex;flex-direction:column;gap:5px
}
@media(min-width:860px){
  .td-moc li{border-radius:0;border-left-width:0}
  .td-moc li:first-child{border-left-width:1px;border-radius:14px 0 0 14px}
  .td-moc li:last-child{border-radius:0 14px 14px 0}
}
.td-moc .khi{
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-dark)
}
.td-moc .so{
  font-size:clamp(24px,3.4vw,32px);font-weight:900;color:var(--navy);
  line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums
}
.td-moc .ai{font-size:13.5px;color:var(--muted);line-height:1.55}
/* Đợt do ngân hàng giải ngân — tô nhạt để phân biệt tiền khách và tiền vay */
.td-moc li.nh{background:var(--tint)}
.td-moc li.nh .so{color:var(--brand-deep)}

/* Hai giai đoạn lãi suất */
.td-pha{display:grid;gap:12px;margin-top:16px}
@media(min-width:760px){.td-pha{grid-template-columns:1fr 1fr}}
.td-pha>*{min-width:0}
.td-pha div{
  border-radius:12px;padding:16px 18px;font-size:14.5px;line-height:1.55;
  display:flex;flex-direction:column;gap:3px
}
.td-pha b{font-size:16px;font-weight:800}
.td-pha .p1{background:var(--accent);color:#fff}
.td-pha .p1 span{color:rgba(255,255,255,.9)}
.td-pha .p2{background:var(--navy-2);color:#fff}
.td-pha .p2 span{color:#B7C7CB}

/* Tóm tắt: khách bỏ bao nhiêu, ngân hàng bao nhiêu */
.td-tom{
  display:grid;gap:12px;margin-top:18px
}
@media(min-width:600px){.td-tom{grid-template-columns:1fr 1fr}}
.td-tom>*{min-width:0}
.td-tom div{
  border:1px solid var(--hair);border-radius:12px;padding:16px 18px;background:#fff;
  display:flex;align-items:baseline;gap:10px
}
.td-tom b{font-size:26px;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums}
.td-tom span{font-size:14px;color:var(--muted)}

/* ============================================================
   12. HAI HƯỚNG CHÍNH SÁCH — chọn một, không cộng dồn
   ============================================================ */
.duong{display:grid;gap:18px;margin-top:30px}
@media(min-width:820px){.duong{grid-template-columns:1fr 1fr}}
.duong>*{min-width:0}
.duong .d{
  border:1px solid var(--hair);border-radius:16px;padding:26px 24px;background:#fff;
  display:flex;flex-direction:column;gap:14px
}
.duong .d.chinh{border-color:var(--line-hard);border-width:2px}
.duong .d .top{display:flex;align-items:center;gap:11px}
.duong .d .ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--tint);
  color:var(--brand-dark);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:900
}
.duong .d h3{color:var(--navy);margin:0}
.duong .d .mo{font-size:14px;color:var(--muted);line-height:1.6}
.duong .muc{display:grid;gap:9px;margin-top:2px}
.duong .muc .m{
  display:flex;align-items:baseline;gap:11px;padding:11px 14px;
  background:var(--bg-soft);border-radius:10px
}
.duong .muc .m b{
  font-size:19px;font-weight:900;color:var(--navy);flex:0 0 auto;
  font-variant-numeric:tabular-nums;min-width:58px
}
.duong .muc .m span{font-size:13.5px;color:var(--muted);line-height:1.5}
.duong .canh{
  font-size:13.5px;line-height:1.6;background:#FEF3C7;border:1px solid #FCD34D;
  color:#92400E;border-radius:10px;padding:12px 14px;margin-top:auto
}
.duong .canh b{color:#92400E}

/* Ưu đãi áp dụng chung cho cả hai hướng */
.chung{display:grid;gap:12px;margin-top:20px}
@media(min-width:700px){.chung{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.chung{grid-template-columns:repeat(4,1fr)}}
.chung>*{min-width:0}
.chung div{
  border:1px solid var(--hair);border-radius:12px;padding:15px 17px;background:#fff;
  display:flex;flex-direction:column;gap:2px
}
.chung b{font-size:17px;font-weight:900;color:var(--brand-dark);font-variant-numeric:tabular-nums}
.chung span{font-size:13px;color:var(--muted);line-height:1.5}

/* Hộp lưu ý dùng chung */
.hop-luu-y{
  margin-top:22px;background:var(--bg-soft);border-left:3px solid var(--brand);
  border-radius:0 12px 12px 0;padding:16px 20px;font-size:14px;color:var(--muted);line-height:1.65
}
/* Chữ đậm ĐẦU TIÊN là tiêu đề hộp, đứng riêng một dòng. Chữ đậm ở giữa câu thì nằm trong
   câu — trước đây mọi chữ đậm đều thành một dòng riêng, câu văn bị bẻ vụn (sửa 04/10/2026). */
.hop-luu-y b{color:var(--navy);font-weight:800}
.hop-luu-y>b:first-child{display:block;margin-bottom:4px}

/* ============================================================
   13. XEM NHÀ MẪU 360°
   Không nhúng iframe ngay từ đầu: mỗi khung 360 kéo theo vài trăm KB.
   Hiện một tấm bìa trước, khách bấm mới tải — trang vẫn nhẹ.
   ============================================================ */
.tour{
  margin-top:28px;border-radius:16px;overflow:hidden;border:1px solid var(--hair);
  background:linear-gradient(135deg,var(--navy),var(--navy-2));position:relative
}
.tour-bia{
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:28px 22px;cursor:pointer;border:0;width:100%;
  background:transparent;color:#fff;font-family:inherit
}
@media(max-width:600px){.tour-bia{aspect-ratio:4/3}}
.tour-bia::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 50% 40%,rgba(45,189,182,.24),transparent 65%)
}
.tour-play{
  width:66px;height:66px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 10px 30px rgba(245,166,35,.42);transition:transform .18s
}
.tour-bia:hover .tour-play{transform:scale(1.07)}
.tour-play::after{
  content:"";border-left:20px solid #fff;border-top:12px solid transparent;
  border-bottom:12px solid transparent;margin-left:5px
}
.tour-bia b{position:relative;font-size:clamp(18px,2.6vw,23px);font-weight:800;letter-spacing:-.01em}
.tour-bia span{position:relative;font-size:14px;color:#B7C7CB;max-width:44ch;line-height:1.55}
.tour iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
@media(max-width:600px){.tour iframe{aspect-ratio:4/3}}
.tour-ngoai{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 18px;background:var(--bg-soft);border-top:1px solid var(--hair);
  font-size:13.5px;color:var(--muted)
}
.tour-ngoai a{font-weight:700}

/* ============================================================
   14. AI NÊN MUA / AI CHƯA NÊN — hai cột đối nhau
   Cột phải KHÔNG dùng màu đỏ hay dấu ✗. Đây không phải lỗi của khách,
   chỉ là chưa đúng thời điểm — dùng đỏ sẽ thành ra chê khách.
   ============================================================ */
.can-nhac{display:grid;gap:18px;margin-top:34px}
@media(min-width:820px){.can-nhac{grid-template-columns:1fr 1fr}}
.can-nhac>*{min-width:0}
.can-nhac .cn{
  border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:16px;
  background:#fff;border:1px solid var(--hair)
}
.can-nhac .cn.nen{border-color:var(--line-hard);background:var(--tint)}
.can-nhac .cn h3{color:var(--navy);margin:0;font-size:clamp(17px,2.1vw,20px)}
.can-nhac ul{list-style:none;display:grid;gap:13px;margin:0;padding:0}
.can-nhac li{
  position:relative;padding-left:32px;font-size:15px;line-height:1.6;color:var(--ink)
}
.can-nhac li::before{
  position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900
}
.can-nhac .nen li::before{content:"✓";background:var(--brand);color:#fff}
.can-nhac .cho li::before{
  content:"…";background:#fff;color:var(--muted);border:1.5px solid var(--hair);
  line-height:1;padding-bottom:4px
}
.can-nhac .cn > p{font-size:14px;color:var(--muted);line-height:1.6;margin:0}

/* ============================================================
   15. TRANG DỰ ÁN — CÁC KHỐI THƯƠNG HIỆU
   Khối quan điểm phải nổi hơn khối kỹ thuật: nền đậm, chữ lớn,
   nhiều khoảng trắng. Khối thông số để nhạt, đọc lướt là đủ.
   ============================================================ */

/* --- Góc nhìn: khối nổi nhất trang --- */
.goc-nhin{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.goc-nhin::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 420px at 78% 8%,rgba(45,189,182,.20),transparent 62%)
}
.goc-nhin .wrap{position:relative}
.goc-nhin h2{color:#fff;max-width:18ch}
.gn-y{
  font-size:clamp(17px,2.1vw,20px);line-height:1.72;color:#D3E1E4;
  max-width:64ch;margin-top:22px
}
.gn-y b{color:#fff}
.gn-5{display:grid;gap:10px;margin-top:26px}
@media(min-width:700px){.gn-5{grid-template-columns:repeat(5,1fr)}}
.gn-5>*{min-width:0}
.gn-5 div{
  background:rgba(255,255,255,.06);border:1px solid rgba(45,189,182,.32);
  border-radius:12px;padding:14px 15px;font-size:13.5px;font-weight:700;color:#fff;
  line-height:1.4;display:flex;align-items:center
}

/* --- Hai cột đánh giá --- */
.danh-gia{display:grid;gap:18px;margin-top:32px}
@media(min-width:820px){.danh-gia{grid-template-columns:1fr 1fr}}
.danh-gia>*{min-width:0}
.danh-gia .dg{border-radius:16px;padding:26px 24px;background:#fff;border:1px solid var(--hair)}
.danh-gia .dg.cao{border-color:var(--line-hard);background:var(--tint)}
.danh-gia .dg h3{color:var(--navy);margin-bottom:16px}
.danh-gia ul{list-style:none;display:grid;gap:11px;margin:0;padding:0}
.danh-gia li{position:relative;padding-left:30px;font-size:15px;line-height:1.55;color:var(--ink)}
.danh-gia li::before{
  position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900
}
.danh-gia .cao li::before{content:"✓";background:var(--brand);color:#fff}
.danh-gia .doi li::before{content:"◷";background:#fff;border:1.5px solid var(--hair);color:var(--muted);font-size:12px}

/* --- Hạ tầng chia 3 nhóm --- */
.ha-tang{display:grid;gap:16px;margin-top:30px}
@media(min-width:900px){.ha-tang{grid-template-columns:repeat(3,1fr)}}
.ha-tang>*{min-width:0}
.ha-tang .ht{
  border:1px solid var(--hair);border-radius:16px;padding:24px 22px;background:#fff;
  display:flex;flex-direction:column;gap:14px
}
.ha-tang .ht .cap{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;width:fit-content
}
.ha-tang .hien .cap{background:var(--tint);color:var(--brand-deep)}
.ha-tang .dang .cap{background:#FEF3C7;color:#92400E}
.ha-tang .quy .cap{background:var(--bg-soft);color:var(--muted);border:1px solid var(--hair)}
.ha-tang .ht h3{color:var(--navy);font-size:17px;margin:0}
.ha-tang ul{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.ha-tang li{font-size:14.5px;line-height:1.55;color:var(--ink);position:relative;padding-left:16px}
.ha-tang li::before{content:"·";position:absolute;left:3px;top:-2px;font-size:20px;color:var(--brand)}
.ha-tang .xem{
  font-size:13px;font-weight:700;color:var(--brand-dark);display:inline-flex;
  align-items:center;gap:5px;margin-top:auto;padding-top:6px
}

/* --- Sáu tiêu chí lọc căn --- */
.tieu-chi{display:grid;gap:12px;margin-top:28px}
@media(min-width:640px){.tieu-chi{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.tieu-chi{grid-template-columns:repeat(3,1fr)}}
.tieu-chi>*{min-width:0}
.tieu-chi div{
  background:#fff;border:1px solid var(--hair);border-radius:12px;padding:16px 18px;
  display:flex;align-items:center;gap:12px
}
.tieu-chi b{
  width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:var(--tint);
  color:var(--brand-dark);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900
}
.tieu-chi span{font-size:15px;font-weight:600;color:var(--navy)}

/* --- Video --- */
.vid{display:grid;gap:18px;margin-top:32px}
@media(min-width:760px){.vid{grid-template-columns:repeat(3,1fr)}}
.vid>*{min-width:0}
.vid .v{border-radius:14px;overflow:hidden;background:var(--navy-2);border:1px solid rgba(255,255,255,.10)}
.vid .bia{
  position:relative;width:100%;border:0;padding:0;cursor:pointer;display:block;
  aspect-ratio:16/9;background:#000;overflow:hidden
}
.vid .bia img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .2s,transform .3s}
.vid .bia:hover img{opacity:1;transform:scale(1.03)}
.vid .bia::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(245,166,35,.95);
  box-shadow:0 6px 20px rgba(0,0,0,.4)
}
.vid .bia .tam{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;
  margin-left:4px
}
.vid iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vid .ten{padding:15px 17px 17px;font-size:14.5px;font-weight:700;color:#fff;line-height:1.45}
.vid .ten span{display:block;font-size:12px;font-weight:600;color:var(--brand);margin-bottom:5px;letter-spacing:.06em;text-transform:uppercase}

/* --- Case study --- */
.case{background:#fff;border:1px solid var(--hair);border-radius:18px;overflow:hidden;margin-top:30px}
.case-dau{padding:22px 26px;background:var(--bg-soft);border-bottom:1px solid var(--hair)}
.case-dau .nhan{
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:5px
}
.case-dau b{font-size:clamp(17px,2.2vw,21px);color:var(--navy);font-weight:800}
.case-buoc{display:grid;gap:0}
@media(min-width:760px){.case-buoc{grid-template-columns:1fr 1fr}}
.case-buoc>*{min-width:0}
.case-buoc .b{padding:20px 26px;border-bottom:1px solid var(--hair)}
@media(min-width:760px){.case-buoc .b:nth-child(odd){border-right:1px solid var(--hair)}}
.case-buoc .b .k{
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-dark);display:block;margin-bottom:6px
}
.case-buoc .b p{font-size:15px;color:var(--ink);line-height:1.6;margin:0}
.case-buoc .b.nhan-manh{background:var(--tint);grid-column:1/-1;border-right:0}
.case-buoc .b.nhan-manh .k{color:var(--brand-deep)}

/* --- FAQ --- */
.faq{display:grid;gap:10px;margin-top:30px;max-width:860px}
.faq details{background:#fff;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.faq details[open]{border-color:var(--tint-line)}
.faq summary{
  cursor:pointer;padding:17px 52px 17px 20px;font-size:16px;font-weight:700;color:var(--navy);
  position:relative;list-style:none;line-height:1.45
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;color:var(--brand-dark);line-height:1
}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--brand-dark)}
.faq .tl{padding:0 20px 18px;font-size:15px;color:var(--muted);line-height:1.7}
.faq .tl b{color:var(--ink)}

/* --- Nhãn cập nhật chính sách --- */
.cap-nhat{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:var(--muted);background:var(--bg-soft);border:1px solid var(--hair);
  border-radius:999px;padding:7px 15px;margin-bottom:14px
}
.cap-nhat b{color:var(--navy)}

@media(max-width:768px){
  .goc-nhin h2{max-width:none}
  .danh-gia .dg,.ha-tang .ht{padding:20px 18px}
  .case-buoc .b{padding:17px 20px}
  .case-dau{padding:18px 20px}
  .faq summary{font-size:15px;padding:15px 46px 15px 17px}
  .faq .tl{padding:0 17px 16px;font-size:14.5px}
}

/* ============================================================
   16. BẢNG KHOẢNG CÁCH ĐO ĐƯỢC
   Tách riêng khỏi 3 thẻ hạ tầng: thẻ trả lời "có cái gì",
   bảng này trả lời "xa bao nhiêu". Hai câu hỏi khác nhau.
   ============================================================ */
.kc{display:grid;gap:10px;margin-top:26px}
.kc>*{min-width:0}
.kc .k{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  background:#fff;border:1px solid var(--hair);border-radius:12px;padding:14px 18px
}
.kc .k b{
  font-size:19px;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.kc .k .diem{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
.kc .k .diem small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:2px}
.kc .k i{
  font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;white-space:nowrap
}
.kc .k i.hien{background:var(--tint);color:var(--brand-deep)}
.kc .k i.dang{background:#FEF3C7;color:#92400E}
.kc .k i.quy{background:var(--bg-soft);color:var(--muted);border:1px solid var(--hair)}
@media(max-width:600px){
  .kc .k{grid-template-columns:auto 1fr;row-gap:8px;padding:14px 16px}
  .kc .k i{grid-column:1/-1;justify-self:start}
  .kc .k b{font-size:18px}
}
.kc-ghi{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:12px}

/* ============================================================
   17. KHỐI THU THÔNG TIN RÚT GỌN — đặt giữa trang

   Trang dự án dài, người đọc tới giữa trang là lúc quan tâm nhất.
   Bắt họ cuộn tiếp tới đáy mới để lại được số là mất khách không đáng.
   Chỉ hai ô, nằm ngang trên máy tính, xuống dòng trên điện thoại.
   ============================================================ */
.thu-gon{padding:0}
.thu-gon .tg-hop{
  display:grid;gap:26px;align-items:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  border-radius:var(--r);padding:34px 30px;color:#fff
}
.thu-gon .tg-hop>*{min-width:0}
.thu-gon h2{font-size:clamp(21px,3vw,27px);color:#fff;margin:0 0 10px}
.thu-gon .tg-chu p{margin:0;font-size:15.5px;line-height:1.65;color:#B7C7CB}

.thu-gon .tg-form{display:grid;gap:8px}
.thu-gon .tg-form .sm{font-size:12.5px;font-weight:700;color:#9FB3B8;letter-spacing:.02em}
.thu-gon .tg-form input{
  width:100%;height:50px;padding:0 15px;font:inherit;font-size:15px;
  border:1px solid rgba(255,255,255,.22);border-radius:11px;
  background:rgba(255,255,255,.07);color:#fff
}
.thu-gon .tg-form input::placeholder{color:#7E939A}
.thu-gon .tg-form input:focus{
  outline:none;border-color:var(--brand);background:rgba(255,255,255,.12)
}
.thu-gon .tg-form .btn{margin-top:8px;width:100%;justify-content:center}
.thu-gon .tg-note{margin:2px 0 0;font-size:12.5px;color:#8199A0;line-height:1.5}

@media(min-width:769px){
  .thu-gon .tg-hop{grid-template-columns:1.05fr .95fr;padding:38px 40px}
  .thu-gon .tg-form .btn{width:auto;justify-self:start;padding:0 30px}
}

/* ============================================================
   18. THẺ TIỆN ÍCH — ảnh trên, số thứ tự, tiêu đề và mô tả dưới

   Mọi thẻ cùng cấu trúc và ảnh cùng tỷ lệ, nên lưới không bao giờ
   hở mảng trắng dưới thẻ thấp — lỗi cũ khi dùng ảnh kèm chú thích.
   ============================================================ */
.luoi-ti{display:grid;gap:22px;margin-top:26px}
.luoi-ti>*{min-width:0}
@media(min-width:641px){.luoi-ti{grid-template-columns:1fr 1fr}}
@media(min-width:981px){.luoi-ti{grid-template-columns:repeat(3,1fr)}}
@media(min-width:981px){.luoi-ti.ti2{grid-template-columns:1fr 1fr}}

.ti-the{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  transition:box-shadow .18s,transform .18s
}
.ti-the:hover{box-shadow:0 14px 34px rgba(14,42,49,.11);transform:translateY(-3px)}

.ti-anh{position:relative;overflow:hidden;background:var(--bg-soft)}
.ti-anh img{
  width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
  transition:transform .4s
}
.ti-the:hover .ti-anh img{transform:scale(1.04)}

/* Nhãn "Phối cảnh" đặt ngay trên ảnh, không giấu dưới chân —
   người lướt nhanh vẫn biết đây là hình vẽ chứ không phải ảnh chụp. */
.ti-nhan{
  position:absolute;left:12px;top:12px;z-index:2;
  padding:5px 11px;border-radius:999px;
  background:rgba(14,42,49,.78);backdrop-filter:blur(4px);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase
}
.ti-so{
  position:absolute;right:12px;top:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--navy);
  font-size:13px;font-weight:900;letter-spacing:-.02em
}

.ti-chu{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px;flex:1}
.ti-chu h3{
  margin:0;font-size:17.5px;font-weight:800;color:var(--navy);
  line-height:1.35;letter-spacing:-.01em;text-wrap:balance
}
.ti-chu p{margin:0;font-size:14.5px;line-height:1.65;color:var(--muted)}

/* Nền tối thì đảo màu thẻ để chữ vẫn đọc được */
.dark .ti-the,.cta-band .ti-the{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.dark .ti-chu h3,.cta-band .ti-chu h3{color:#fff}
.dark .ti-chu p,.cta-band .ti-chu p{color:#B7C7CB}

@media(prefers-reduced-motion:reduce){
  .ti-the,.ti-anh img{transition:none}
  .ti-the:hover{transform:none}
  .ti-the:hover .ti-anh img{transform:none}
}

/* ============================================================
   19. MỤC LỤC DÍNH TRONG TRANG + XEM ẢNH PHÓNG TO
   ============================================================ */
.muc-luc{
  position:sticky;top:69px;z-index:55;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair)
}
.ml-in{
  display:flex;gap:6px;overflow-x:auto;
  padding-top:10px;padding-bottom:10px;
  scrollbar-width:none;-ms-overflow-style:none
}
.ml-in::-webkit-scrollbar{display:none}
.muc-luc a{
  flex:0 0 auto;padding:8px 15px;border-radius:999px;
  font-size:13.5px;font-weight:700;color:var(--muted);
  text-decoration:none;white-space:nowrap;
  transition:background .15s,color .15s
}
.muc-luc a:hover{background:var(--bg-soft);color:var(--navy);text-decoration:none}
.muc-luc a.dang{background:var(--brand);color:#fff}

/* Neo phải dừng dưới CẢ hai thanh dính, nếu không tiêu đề mục bị che khuất */
section[id]{scroll-margin-top:126px}

/* --- Xem ảnh phóng to --- */
.ti-anh img,.anh-da img{cursor:zoom-in}
.lop-anh{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;
  background:rgba(9,25,29,.94);padding:26px 18px
}
.lop-anh.mo{display:flex}
.lop-anh img{max-width:min(1400px,96vw);max-height:82vh;border-radius:10px;display:block}
.lop-anh .la-chu{
  margin:0;max-width:min(900px,92vw);text-align:center;
  color:#C9D8DB;font-size:13.5px;line-height:1.6
}
.lop-anh .la-dong{
  position:absolute;right:16px;top:16px;width:44px;height:44px;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:23px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center
}
.lop-anh .la-dong:hover{background:rgba(255,255,255,.2)}

@media(max-width:768px){
  .muc-luc{top:63px}
  section[id]{scroll-margin-top:112px}
}

/* ============================================================
   20. DẢI THÔNG TIN NHANH — đặt ngay dưới hero

   Sáu ô, mỗi ô một dòng nhãn và một dòng giá trị. Người vào trang
   nắm được khung dự án trong ba giây mà chưa cần đọc gì.
   Chỉ đưa số CHÍNH CHỦ đã công bố — không nhét diện tích căn vào đây,
   vì diện tích là thứ các nguồn còn vênh nhau.
   ============================================================ */
.nhanh{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.nhanh>div{background:#fff;padding:18px 20px;min-width:0}
.nhanh dt{margin:0 0 5px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.nhanh dd{margin:0;font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.4}
@media(min-width:641px){.nhanh{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1025px){.nhanh{grid-template-columns:repeat(6,1fr)}}

/* ============================================================
   21. DÒNG "TRANG ĐỘC LẬP" — cụm Olympic trên tên miền con
   Tên miền mang chữ "vinhomes", nên ngay dưới ảnh đầu trang phải nói rõ
   đây là trang của môi giới, không phải web chủ đầu tư.
   ============================================================ */
.doc-lap{margin:0;padding:9px 0;background:var(--bg-soft);border-bottom:1px solid var(--hair);font-size:13px;line-height:1.5;color:var(--muted)}
.doc-lap .wrap{display:block}
.doc-lap b{color:var(--navy)}

/* ============================================================
   22. THANH DỰ ÁN — dính trên cùng trang dự án một-trang-dài
   Kiểu sếp chọn 30/09/2026: dấu tròn + tên dự án bên trái, các mục ở giữa,
   nút đăng ký bên phải. Dùng chung khung .muc-luc nên đoạn JS tô sáng mục
   đang xem ở chân trang chạy luôn, không phải viết thêm.
   ============================================================ */
.thanh-du-an{background:rgba(251,250,247,.98);border-bottom:1px solid var(--hair)}
.thanh-du-an .ml-in{align-items:center;gap:16px;overflow:visible;padding-top:9px;padding-bottom:9px}
.tda-ten{
  display:flex;align-items:center;gap:9px;flex:0 0 auto;
  font-size:15px;font-weight:800;color:var(--navy);white-space:nowrap
}
.tda-dau{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  background:url(anh/bieu-tuong-512.png) center/contain no-repeat
}
.tda-tinh{color:var(--muted);font-weight:700}
.tda-muc{
  display:flex;gap:4px;flex:1 1 auto;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none
}
.tda-muc::-webkit-scrollbar{display:none}
/* Mép phải mờ dần: báo cho người dùng biết dải mục còn kéo ngang được,
   và mục bị cắt ngang chữ trông đỡ cụt. */
@supports(mask-image:linear-gradient(#000,#000)){
  .tda-muc{mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%)}
}
.muc-luc .tda-nut{
  flex:0 0 auto;background:var(--brand-deep);color:#fff;
  padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:800
}
.muc-luc .tda-nut:hover{background:var(--brand-dark);color:#fff}
.muc-luc .tda-nut.tda-zalo{background:#0068FF;margin-left:8px}
.muc-luc .tda-nut.tda-zalo:hover{background:#0052CC}
/* Dien thoai: chi giu nut nhom Zalo, nut dang ky da co thanh day va form cuoi trang */
@media(max-width:759px){.muc-luc .tda-nut:not(.tda-zalo){display:none}.muc-luc .tda-nut.tda-zalo{margin-left:0}}
@media(max-width:980px){
  /* Điện thoại: giấu tên dự án cho đỡ chật, NHƯNG giữ nút đăng ký —
     đó là nút thu khách chính, giấu đi là mất khách. */
  .thanh-du-an .ml-in{gap:8px}
  .tda-ten{display:none}
  .muc-luc .tda-nut{padding:9px 14px;font-size:12.5px}
}


/* ============================================================
   23. HỆ THỐNG TRANG — khối dẫn qua lại giữa web chính và web dự án
   Học cách Phương Hoa BĐS làm: đứng ở web nào cũng thấy còn web nào nữa.
   Trang đang xem để chữ mờ, không bấm được.
   ============================================================ */
.he-thong{padding-bottom:26px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.12)}
.ht-nhan{margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
/* minmax(0,1fr): cột được phép hẹp hơn dòng địa chỉ dài (dòng ấy không xuống dòng).
   Thiếu nó thì trên điện thoại cột phình theo chữ, cả trang bị xê ngang. */
.ht-cac{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.ht-cac{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.ht-mot{
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  text-decoration:none;transition:background .15s,border-color .15s
}
a.ht-mot:hover{background:rgba(255,255,255,.1);border-color:var(--brand);text-decoration:none}
.ht-mot.dang{opacity:.62}
.ht-dau{
  flex:0 0 36px;width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:900;color:#fff;letter-spacing:-.02em
}
.ht-chu{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.ht-chu b{font-size:14px;color:#fff;font-weight:800}
.ht-chu b i{font-style:normal;font-weight:600;font-size:12px;color:#9FB3B8;white-space:nowrap}
.ht-chu span{font-size:12px;color:#9FB3B8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ============================================================
   24. WEB DỰ ÁN ĐỨNG RIÊNG — King Park
   Không có thanh trên cùng và menu web chính, nên thanh dự án dính ngay top:0.
   ============================================================ */
body.web-du-an .muc-luc{top:0}
body.web-du-an .thanh-du-an .ml-in{padding-top:11px;padding-bottom:11px}
.tda-ten{text-decoration:none}
a.tda-ten:hover{text-decoration:none}
.tda-chu{display:flex;flex-direction:column;line-height:1.25}
.tda-nguoi{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}

/* Chân trang rút gọn của web dự án */
.foot-rieng{display:grid;gap:22px;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
@media(min-width:860px){.foot-rieng{grid-template-columns:1.6fr .9fr;align-items:start}}
.fr-ten{margin:0 0 10px;font-size:17px;font-weight:900;color:#fff}
.fr-y{margin:0 0 10px;font-size:13.5px;line-height:1.7;color:#9FB3B8;max-width:72ch}
.fr-y b{color:#D3E1E4}
.fr-nut{display:flex;flex-wrap:wrap;gap:10px}
.fr-nut .btn{font-size:14px;padding:12px 20px}
/* ".foot a" tô mọi đường dẫn ở chân trang màu xám. Nút phải lấy lại chữ trắng,
   không thì số điện thoại chìm vào nền cam của nút. */
.foot .fr-nut .btn,.foot .fr-nut .btn:hover{color:#fff}
.foot .fr-nut .btn-line{border-color:rgba(45,189,182,.75)}
.foot .fr-nut .btn-line:hover{background:rgba(45,189,182,.16)}


/* ============================================================
   25. ĐẦU TRANG DỰ ÁN KING PARK — ảnh phối cảnh nền + dải thẻ thông số
   ============================================================ */
.kp-hero{
  position:relative;background-size:cover;background-position:center;
  color:#fff;padding:clamp(54px,9vw,104px) 0 clamp(46px,7vw,78px);
  /* Ảnh truyền vào bằng biến --kp-anh ngay trên thẻ, lớp phủ khai ở đây —
     nhờ vậy màn hình hẹp đổi được hướng phủ mà không phải nhắc lại đường dẫn ảnh. */
  background-image:
    linear-gradient(100deg,rgba(9,28,24,.93) 0%,rgba(9,28,24,.78) 46%,rgba(9,28,24,.42) 100%),
    var(--kp-anh)
}
@media(max-width:860px){
  /* Điện thoại: chữ nằm đè lên giữa ảnh chứ không dồn sang trái nữa,
     nên phủ theo chiều dọc và đậm đều, không thì chữ chìm vào mảng sáng. */
  .kp-hero{
    background-image:
      linear-gradient(183deg,rgba(9,28,24,.9) 0%,rgba(9,28,24,.82) 48%,rgba(9,28,24,.93) 100%),
      var(--kp-anh)
  }
}
.kp-hero-in{max-width:var(--wrap)}
.kp-eyebrow{
  display:inline-block;margin:0 0 18px;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase
}
.kp-hero h1{
  margin:0;color:#fff;font-size:clamp(32px,5.6vw,60px);line-height:1.08;letter-spacing:-.02em;
  text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)
}
.kp-hero h1 span{
  display:block;margin-top:12px;font-size:clamp(17px,2.4vw,26px);font-weight:700;
  color:var(--brand);letter-spacing:0;text-shadow:none
}
.kp-lead{
  margin:20px 0 0;max-width:60ch;font-size:clamp(15.5px,1.8vw,18.5px);
  line-height:1.72;color:#D8E6E2
}
.kp-lead b{color:#fff}
.kp-hero .btn-row{margin-top:28px}
.kp-hero .btn{text-align:center}
.kp-hero .btn-line{color:#fff;border-color:rgba(255,255,255,.6)}
.kp-hero .btn-line:hover{background:rgba(255,255,255,.14);color:#fff}
.kp-nguon-anh{margin:22px 0 0;font-size:12px;color:rgba(255,255,255,.62)}

/* Dải thẻ thông số */
.kp-luoi{display:grid;gap:12px}
@media(min-width:620px){.kp-luoi{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.kp-luoi{grid-template-columns:repeat(4,1fr)}}
.kp-the{
  display:flex;gap:12px;align-items:flex-start;padding:16px 16px 17px;
  background:#fff;border:1px solid var(--hair);border-radius:14px;
  box-shadow:0 10px 24px rgba(14,42,49,.06)
}
.kp-the-icon{
  flex:0 0 38px;width:38px;height:38px;border-radius:11px;
  background:var(--tint);color:var(--brand-deep);
  display:flex;align-items:center;justify-content:center
}
.kp-the-icon svg{width:21px;height:21px}
.kp-the-nhan{
  margin:0 0 4px;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)
}
.kp-the-gt{margin:0;font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.38}
.kp-the-y{margin:7px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
@media(max-width:620px){
  .kp-the{padding:14px}
  .kp-the-gt{font-size:16px}
}


/* ============================================================
   26. FORM THU THÔNG TIN Ở CUỐI TRANG DỰ ÁN (khoi-dang-ky.php)

   Khác form 3 ô ở các trang khác: hỏi thêm loại nhà quan tâm, nơi đang
   sống và mục đích mua. Bấm chọn chứ không gõ, nên khách không nản mà
   tôi gọi lại thì đã biết nói chuyện gì.
   ============================================================ */
.dk-doi{display:grid;gap:0 14px}
@media(min-width:460px){.dk-doi{grid-template-columns:1fr 1fr}}
.form-card select{
  display:block;width:100%;margin:0 0 15px;padding:12px 38px 12px 13px;
  border:1px solid var(--hair);border-radius:10px;background-color:#fff;
  font:inherit;font-size:15px;color:var(--navy);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B6E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:17px
}
.form-card select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.form-card textarea{width:100%;resize:vertical;min-height:76px}
.form-card .chip-nhom{margin-bottom:6px}

/* ============================================================
   27. HỘP BẬT LÊN XIN BẢNG GIÁ — nút đầu trang bấm vào thì mở

   Dùng thẻ <dialog> của trình duyệt: không cần thư viện, có sẵn khoá
   tiêu điểm và Esc để đóng. Trình duyệt cũ không mở được thì nút rơi
   về neo #lien-he, khách vẫn tới đúng form ở cuối trang.
   ============================================================ */
.hop-dk{
  /* margin:auto là thứ căn hộp vào giữa màn hình. Phải ghi lại ở đây vì
     dòng reset `*{margin:0}` đầu tệp đè mất mặc định của trình duyệt. */
  margin:auto;max-height:calc(100vh - 32px);overflow:auto;
  width:min(520px,calc(100vw - 28px));padding:0;border:0;border-radius:16px;
  background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(9,28,24,.4)
}
.hop-dk::backdrop{background:rgba(9,28,24,.72)}
.hop-dk-in{padding:26px 24px 24px}
.hop-dk h2{margin:0;font-size:21px;line-height:1.3;color:var(--navy);text-wrap:balance}
.hop-dk .hop-y{margin:11px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted)}
.hop-dk form{margin-top:18px}
.hop-dk label{display:block;margin:0 0 6px;font-size:13.5px;font-weight:700;color:var(--navy)}
.hop-dk input{
  width:100%;margin:0 0 14px;padding:12px 13px;border:1px solid var(--hair);
  border-radius:10px;font:inherit;font-size:15px;color:var(--navy)
}
.hop-dk input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.hop-dk .btn{width:100%;justify-content:center}
.hop-dk .hop-note{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.hop-dk .hop-dong{
  position:absolute;right:12px;top:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--tint);color:var(--navy);font-size:21px;line-height:1;cursor:pointer
}
.hop-dk .hop-dong:hover{background:var(--hair)}
@media(max-width:480px){
  .hop-dk-in{padding:22px 18px 20px}
  .hop-dk h2{font-size:19px}
}


/* ============================================================
   28. LƯỚI ẢNH TRANG KING PARK (king-park/hinh-anh.php)

   Dùng lại khung thẻ .ti-the / .ti-anh có sẵn. Thêm ba thứ:
   - nhãn hạng ảnh theo màu: ảnh thật (xanh lá), hồ sơ quy hoạch (xanh đậm),
     minh hoạ AI (cam) — lướt nhanh cũng không nhầm hạng nọ với hạng kia;
   - rê chuột thì ảnh phóng nhẹ, con trỏ đổi thành kính lúp;
   - bấm vào xem bản lớn (đoạn JS xem ảnh ở chân trang, đọc data-lon).
   ============================================================ */
.kp-luoi-anh{margin-top:22px}
.kp-anh{margin:0}
.kp-anh .ti-anh img{aspect-ratio:16/10;cursor:zoom-in;transition:transform .55s ease}
.kp-anh:hover .ti-anh img,.kp-anh:focus-within .ti-anh img{transform:scale(1.06)}
.kp-luoi-anh.r169 .kp-anh .ti-anh img{aspect-ratio:16/9}
.kp-anh .ti-chu{padding:15px 18px 18px;gap:6px}
.kp-anh .ti-chu h3{font-size:15.5px}
.kp-anh .ti-chu p{font-size:13.5px;line-height:1.6}
.ti-nhan.that{background:rgba(21,128,61,.94)}
.ti-nhan.ai{background:rgba(180,83,9,.95)}
/* Dòng chú giải ba hạng ảnh, đặt ngay dưới tiêu đề mục ảnh đầu tiên */
.kp-hang{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:13px;font-weight:600;color:var(--muted)}
.kp-hang span{display:inline-flex;align-items:center;gap:7px}
.kp-hang i{width:11px;height:11px;border-radius:50%;background:var(--navy);flex:0 0 11px}
.kp-hang i.that{background:#15803D}
.kp-hang i.ai{background:#B45309}
/* Tấm bản vẽ: hiện nguyên khổ, rê chuột phóng rất nhẹ để báo là bấm được */
.kp-ban-ve{overflow:hidden}
.kp-ban-ve img{cursor:zoom-in;transition:transform .55s ease}
.kp-ban-ve:hover img{transform:scale(1.025)}
.kp-ban-ve figcaption{position:relative;z-index:1}
.kp-tieu-de-anh{margin-top:46px}
.kp-tieu-de-anh+.lead{margin-top:8px;max-width:74ch}
@media(prefers-reduced-motion:reduce){
  .kp-anh .ti-anh img,.kp-ban-ve img{transition:none}
  .kp-anh:hover .ti-anh img,.kp-ban-ve:hover img{transform:none}
}

/* Nút ảnh nhỏ trong ô bật lên của bản đồ cũng mở khung xem ảnh lớn */
.kp-xem{border:0;padding:0;background:none;cursor:zoom-in;font:inherit}

/* ============================================================
   29. BẢN ĐỒ VỆ TINH (king-park/ban-do.php + ban-do.js)

   Thanh điều khiển nằm NGOÀI khung bản đồ: trên điện thoại nó tự xuống
   dòng, không đè lên bản đồ. Trong khung chỉ có nút phóng to, thẻ liên hệ
   của sếp và dòng ghi nguồn ảnh.
   ============================================================ */
.kp-bd{margin-top:18px}
.kp-bd-thanh{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:12px 14px;background:#fff;border:1px solid var(--hair);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0
}
.kp-bd-truot{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;color:var(--navy);margin-right:4px}
.kp-bd-truot input{width:150px;accent-color:var(--brand-deep);cursor:pointer}
.kp-bd-o{
  display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;
  font-size:13px;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:999px;cursor:pointer;user-select:none
}
.kp-bd-o:hover{border-color:var(--line-hard)}
.kp-bd-o input{width:15px;height:15px;accent-color:var(--brand-deep);margin:0}
.kp-bd-nhom{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.kp-bd-nut{
  min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--tint-line);
  background:var(--tint);color:var(--brand-deep);font:inherit;font-size:13px;font-weight:800;cursor:pointer
}
.kp-bd-nut:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.kp-bd-toan{background:var(--navy);border-color:var(--navy);color:#fff}
.kp-bd-toan:hover{background:var(--brand-deep);border-color:var(--brand-deep)}

.kp-bd-khung{
  position:relative;isolation:isolate;height:clamp(380px,58vw,640px);
  border-radius:0 0 var(--r) var(--r);overflow:hidden;background:#0D2622;
  box-shadow:0 18px 44px rgba(14,42,49,.18)
}
.kp-bd-nen{position:absolute;inset:0;z-index:0;background:#0D2622;font-family:inherit}
.kp-bd-cho{
  position:absolute;inset:0;z-index:1;background:#0D2622 center/cover no-repeat;
  display:flex;align-items:flex-end;justify-content:center;padding:0 16px 20px;
  transition:opacity .45s;text-align:center
}
.kp-bd-cho span{
  padding:8px 16px;border-radius:999px;background:rgba(9,28,24,.82);color:#fff;
  font-size:13px;font-weight:700
}
.kp-bd-hong{display:none}
.kp-bd.loi .kp-bd-dang{display:none}
.kp-bd.loi .kp-bd-hong{display:inline-block;border-radius:12px;line-height:1.55}
.kp-bd.san-sang .kp-bd-cho{opacity:0;pointer-events:none}

/* Thẻ liên hệ của sếp, ghim góc dưới trái bản đồ */
.kp-bd-the{
  position:absolute;left:12px;bottom:12px;z-index:3;
  display:flex;align-items:center;gap:10px;padding:7px 8px 7px 7px;
  background:rgba(255,255,255,.97);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.32)
}
.kp-bd-the img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;flex:0 0 44px}
.kp-bd-the-chu{display:flex;flex-direction:column;line-height:1.25}
.kp-bd-the-chu b{font-size:13.5px;font-weight:800;color:var(--navy)}
.kp-bd-the-chu a{font-size:15px;font-weight:900;color:var(--brand-deep);text-decoration:none;letter-spacing:.01em}
.kp-bd-zalo{
  display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;
  background:var(--accent);color:var(--navy);font-size:13px;font-weight:900;text-decoration:none
}
.kp-bd-zalo:hover{filter:brightness(1.06);color:var(--navy)}

/* Dòng gợi ý trên máy chạm: một ngón là cuộn trang, muốn kéo bản đồ thì mở toàn màn hình */
.kp-bd-cham{display:none}
@media(hover:none) and (pointer:coarse){
  .kp-bd-cham{
    display:block;position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:3;
    padding:9px 16px;border:0;border-radius:999px;background:rgba(9,28,24,.86);color:#fff;
    font:inherit;font-size:12.5px;font-weight:800;white-space:nowrap;cursor:pointer
  }
  .kp-bd.kp-bd-day .kp-bd-cham{display:none}
}
.kp-bd-chu{margin-top:14px;font-size:13px;line-height:1.65;color:var(--muted);max-width:92ch}
.kp-bd-chu b{color:var(--ink)}

/* Toàn màn hình */
html.kp-khoa-cuon{overflow:hidden}
.kp-bd.kp-bd-day{
  position:fixed;inset:0;z-index:110;margin:0;background:#0D2622;
  display:flex;flex-direction:column
}
.kp-bd.kp-bd-day .kp-bd-thanh{border:0;border-radius:0;flex:0 0 auto}
.kp-bd.kp-bd-day .kp-bd-khung{flex:1 1 auto;height:auto;border-radius:0;box-shadow:none}
.kp-bd.kp-bd-day .kp-bd-chu{display:none}
/* Nút × chỉ hiện khi đang mở toàn màn hình — lối thoát luôn nằm trong tầm ngón tay */
.kp-bd-dong{
  display:none;position:absolute;right:10px;top:10px;z-index:3;width:42px;height:42px;
  align-items:center;justify-content:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.96);color:var(--navy);font-size:24px;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35)
}
.kp-bd.kp-bd-day .kp-bd-dong{display:flex}
@media(max-width:700px){
  /* Điện thoại, toàn màn hình: thanh điều khiển gọn thành MỘT hàng kéo ngang,
     nhường chỗ cho bản đồ */
  .kp-bd.kp-bd-day .kp-bd-thanh{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:9px 10px}
  .kp-bd.kp-bd-day .kp-bd-thanh::-webkit-scrollbar{display:none}
  .kp-bd.kp-bd-day .kp-bd-truot{width:auto;flex:0 0 auto;margin:0}
  .kp-bd.kp-bd-day .kp-bd-truot span{white-space:nowrap}
  .kp-bd.kp-bd-day .kp-bd-truot input{flex:0 0 118px;width:118px}
  .kp-bd.kp-bd-day .kp-bd-o,.kp-bd.kp-bd-day .kp-bd-nut{flex:0 0 auto;white-space:nowrap}
  .kp-bd.kp-bd-day .kp-bd-nhom{flex-wrap:nowrap;flex:0 0 auto}
  .kp-bd.kp-bd-day .kp-bd-toan{display:none}
}

/* Những thứ Leaflet vẽ ra */
.kp-bd .leaflet-container{font-family:inherit;background:#0D2622}
.kp-bd .leaflet-control-attribution{font-size:10.5px;background:rgba(255,255,255,.82);padding:1px 7px;border-radius:6px 0 0 0}
.kp-bd .leaflet-bar a{color:var(--navy)}
.kp-bd-ten{
  color:#fff;font-size:13px;font-weight:800;font-style:italic;letter-spacing:.06em;text-align:center;
  text-shadow:0 0 4px #062a3a,0 0 9px #062a3a,0 1px 2px #000;white-space:nowrap
}
.kp-bd-may{position:relative}
.kp-bd-may span{
  position:absolute;inset:6px;border-radius:50%;background:#15803D;border:3px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.5)
}
.kp-bd-may span::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid #4ADE80;
  animation:kp-nhip 2.2s ease-out infinite
}
@keyframes kp-nhip{0%{transform:scale(.6);opacity:.95}100%{transform:scale(1.5);opacity:0}}
.kp-bd-pop b{display:block;font-size:14px;font-weight:800;color:var(--navy)}
.kp-bd-pop span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.kp-bd-4{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.kp-bd-4 .kp-xem{position:relative;display:block;border-radius:8px;overflow:hidden}
.kp-bd-4 img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .4s}
.kp-bd-4 .kp-xem:hover img{transform:scale(1.08)}
.kp-bd-4 i{
  position:absolute;left:6px;bottom:6px;padding:2px 8px;border-radius:999px;
  background:rgba(9,28,24,.82);color:#fff;font-size:11px;font-weight:800;font-style:normal
}
.kp-bd .leaflet-popup-content{margin:13px 13px 12px}
.kp-bd .leaflet-popup-content-wrapper{border-radius:14px}

@media(max-width:700px){
  .kp-bd-thanh{padding:10px;gap:7px}
  .kp-bd-truot{width:100%;margin:0 0 2px}
  .kp-bd-truot input{flex:1;width:auto}
  .kp-bd-o,.kp-bd-nut{min-height:38px;font-size:12.5px;padding:0 11px}
  .kp-bd-nhom{margin-left:0}
  /* Điện thoại, khung nhỏ: giấu bớt nút phụ cho thanh điều khiển khỏi cao quá.
     Mở toàn màn hình thì hiện đủ. */
  .kp-bd:not(.kp-bd-day) .kp-bd-o.phu,.kp-bd:not(.kp-bd-day) .kp-bd-ve{display:none}
  .kp-bd-khung{height:clamp(340px,96vw,460px)}
  .kp-bd-the{left:8px;bottom:8px;gap:8px}
  .kp-bd-the img{width:38px;height:38px;flex-basis:38px}
  .kp-bd-the-chu b{font-size:12.5px}
  .kp-bd-the-chu a{font-size:14px}
  .kp-bd-zalo{min-height:34px;padding:0 12px;font-size:12.5px}
  .kp-bd .leaflet-control-scale{display:none}
  /* Dòng ghi nguồn ảnh dài hơn bề ngang điện thoại: cho nó một dòng riêng sát đáy,
     thẻ liên hệ nhấc lên trên để hai thứ không đè nhau */
  .kp-bd .leaflet-control-attribution{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100vw}
  .kp-bd-the{bottom:26px}
}
@media(prefers-reduced-motion:reduce){.kp-bd-may span::after{animation:none;opacity:0}}

/* ============================================================
   30. NÚT NỔI GÓC PHẢI + HỘP NHẬN TÀI LIỆU (khoi-tro-ly.php)

   Ảnh đại diện tròn có hai vòng sóng lan và lắc nhẹ mỗi vài giây.
   Trên điện thoại nút đứng trên thanh Gọi/Zalo dính đáy, không đè lên nó.
   ============================================================ */
.tl-noi{
  position:fixed;right:20px;bottom:24px;z-index:90;
  display:flex;align-items:flex-end;gap:12px;
  transition:opacity .28s,transform .28s
}
.tl-noi.an{opacity:0;transform:translateY(14px);pointer-events:none}
.tl-nut{
  position:relative;display:block;width:64px;height:64px;flex:0 0 64px;border-radius:50%;
  animation:tl-lac 6s ease-in-out infinite;transform-origin:50% 90%
}
.tl-nut img{
  position:relative;z-index:2;display:block;width:64px;height:64px;border-radius:50%;
  object-fit:cover;border:3px solid #fff;background:#DCE5E4;
  box-shadow:0 10px 26px rgba(14,42,49,.38)
}
.tl-song{
  position:absolute;inset:0;z-index:1;border-radius:50%;background:var(--accent);
  animation:tl-song 2.6s ease-out infinite
}
.tl-song2{animation-delay:1.3s}
.tl-cham{
  position:absolute;right:1px;top:1px;z-index:3;width:16px;height:16px;border-radius:50%;
  background:#22C55E;border:3px solid #fff
}
@keyframes tl-song{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.85);opacity:0}}
@keyframes tl-lac{
  0%,84%,100%{transform:rotate(0)}
  87%{transform:rotate(-10deg)} 90%{transform:rotate(9deg)}
  93%{transform:rotate(-6deg)}  96%{transform:rotate(4deg)}
}
.tl-nut:hover,.tl-nut:focus-visible{animation-play-state:paused}
.tl-nut:focus-visible img{outline:3px solid var(--brand-deep);outline-offset:2px}

.tl-bong-hop{
  position:relative;max-width:258px;margin-bottom:6px;
  opacity:0;transform:translateY(8px) scale(.95);transform-origin:right bottom;
  pointer-events:none;transition:opacity .3s,transform .3s
}
.tl-noi.co-bong .tl-bong-hop{opacity:1;transform:none;pointer-events:auto}
.tl-bong{
  display:block;padding:13px 34px 13px 15px;border-radius:16px 16px 4px 16px;
  background:#fff;border:1px solid var(--hair);box-shadow:0 14px 34px rgba(14,42,49,.26);
  color:var(--navy);font-size:13.5px;font-weight:800;line-height:1.45;text-decoration:none
}
.tl-bong:hover{color:var(--brand-deep)}
.tl-an{
  position:absolute;right:5px;top:5px;width:26px;height:26px;border:0;border-radius:50%;
  background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer
}
.tl-an:hover{background:var(--bg-soft);color:var(--navy)}

/* Phần đầu hộp: ảnh + tên người gửi tài liệu */
.hop-dau{display:flex;align-items:center;gap:11px;margin-bottom:14px;padding-right:40px}
.hop-dau img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 46px}
.hop-dau b{display:block;font-size:14.5px;font-weight:800;color:var(--navy);line-height:1.3}
.hop-dau span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.hop-dk .chip-nhom{margin:2px 0 16px}
.hop-dk .chip-nhom legend{font-size:13.5px;font-weight:700;color:var(--navy)}
/* Ô chọn nhiều (checkbox) trong nhóm chip: bấm là đổi màu như chip chọn một */
.chips-in input[type="checkbox"]:checked+label{
  background-color:var(--brand);border-color:var(--brand);color:#fff
}
.chips-in input[type="checkbox"]:focus-visible+label{outline:2px solid var(--brand-dark);outline-offset:2px}
.hop-dk .chips-in input{width:0;height:0;margin:0;padding:0;border:0}

@media(max-width:768px){
  .tl-noi{right:12px;bottom:66px;gap:9px}
  .tl-nut,.tl-nut img{width:56px;height:56px}
  .tl-nut{flex-basis:56px}
  .tl-bong-hop{max-width:208px}
  .tl-bong{font-size:12.5px;padding:11px 30px 11px 13px}
}
/* Cuộn tới đáy trang thì nút nổi đè lên số điện thoại ở dòng cuối chân trang → chừa chỗ bên phải */
@media(max-width:1300px){body:has(#tro-ly) .foot-end{padding-right:72px}}
@media(max-width:768px){body:has(#tro-ly) .foot-end{padding-right:62px}}
@media(prefers-reduced-motion:reduce){
  .tl-nut{animation:none}
  .tl-song{animation:none;opacity:0}
}
@media print{.tl-noi{display:none}}
/* Trong hộp, luật ".hop-dk label" (khối chữ đậm) đè mất dáng chip — trả lại dáng chip */
.hop-dk .chips-in label{display:inline-flex;margin:0;font-size:14px;font-weight:600;color:var(--ink)}
/* Bản vẽ đặt cạnh nhau: KHÔNG cắt theo tỉ lệ 3:2 như ảnh thường — cắt là mất tiêu đề, chú giải */
.anh-doi .kp-ban-ve img{aspect-ratio:auto;object-fit:fill}
.anh-doi .kp-ban-ve{align-self:start}

/* ============================================================
   31. MỤC "NGƯỜI VIẾT TRANG NÀY" TRÊN TRANG DỰ ÁN

   Ba cam kết thành ba thẻ nền nhạt (kiểu sếp chọn 04/10/2026), dưới là
   hàng nút dẫn sang kênh YouTube, Trang Facebook, TikTok.
   ============================================================ */
.kp-cam-ket{list-style:none;display:grid;gap:10px;margin:20px 0 0;padding:0}
/* Không dùng display:grid/flex cho <li>: thẻ <b> bên trong sẽ tách thành ô riêng */
.kp-cam-ket li{
  position:relative;padding:14px 16px 14px 48px;border-radius:12px;
  background:var(--tint);border:1px solid var(--tint-line);
  font-size:15px;line-height:1.62;color:var(--ink)
}
.kp-cam-ket li::before{
  content:"✓";position:absolute;left:15px;top:15px;
  color:#fff;background:var(--brand);width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900
}
.kp-cam-ket b{color:var(--navy);font-weight:800}
.kp-cam-on{margin-top:16px;font-size:15.5px;font-weight:700;color:var(--navy)}

.kp-kenh{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.kp-kenh a{
  display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;
  background:#fff;border:1px solid var(--hair);border-radius:999px;
  font-size:14.5px;font-weight:800;color:var(--navy);text-decoration:none;
  transition:transform .15s,box-shadow .15s,border-color .15s
}
.kp-kenh a:hover{transform:translateY(-2px);border-color:var(--line-hard);box-shadow:0 8px 20px rgba(14,42,49,.12);color:var(--navy)}
.kp-kenh a:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}
.kp-kenh svg{width:22px;height:22px;flex:0 0 22px;display:block}
.kp-kenh span{white-space:nowrap}
.kp-kenh i{font-style:normal}
.kp-kenh .kp-kenh-phu{background:transparent;border-color:var(--tint-line);color:var(--brand-deep)}
@media(max-width:480px){
  .kp-kenh a{flex:1 1 calc(50% - 5px);justify-content:center;padding:0 12px}
  .kp-kenh i{display:none}
}
@media(prefers-reduced-motion:reduce){.kp-kenh a{transition:none}.kp-kenh a:hover{transform:none}}

/* ============================================================
   32. GIAO DIỆN MÁY TÍNH CỦA TRANG DỰ ÁN (04/10/2026)
   ============================================================ */

/* --- Mục "Người viết trang này" ---
   Khung .split mặc định chia đôi 50/50 và căn giữa theo chiều dọc. Đoạn giới thiệu
   giờ dài, nên trên máy tính ảnh bị trôi xuống giữa, cạnh đó là một dải trắng lớn.
   Ở đây cho ảnh một cột hẹp vừa khổ ảnh, chữ lấy phần còn lại, cả hai căn theo đỉnh. */
.kp-toi-anh{max-width:320px}
.kp-toi-anh img{aspect-ratio:1/1;object-fit:contain;background:#fff}
@media(min-width:869px){
  .split.kp-toi{grid-template-columns:340px minmax(0,1fr);gap:54px;align-items:start}
  .kp-toi-anh{max-width:none}
  .split.kp-toi .lead{max-width:none}
}

/* --- Thanh dự án ---
   Điện thoại vuốt ngang được, chuột thì không. Nên trên máy tính thanh này rộng hơn
   khung chữ, các mục xếp sít lại để hiện đủ cả 8 mục. */
@media(min-width:981px){
  .thanh-du-an .ml-in{max-width:1400px}
  .thanh-du-an .tda-muc{gap:2px}
  .thanh-du-an .tda-muc a{padding:8px 12px}
  /* Tên dự án cũng là thẻ <a> nên dính luật đệm 15px của ".muc-luc a" — bỏ đệm trái cho đỡ phí chỗ */
  .thanh-du-an .tda-ten{padding-left:0}
}
@media(min-width:981px) and (max-width:1439px){
  .tda-tinh{display:none}
}
@media(min-width:981px) and (max-width:1340px){
  /* Laptop 1280 (kể cả màn 1920 đặt cỡ chữ 150%): sít thêm chút nữa là vừa đủ 8 mục */
  .thanh-du-an .ml-in{gap:12px}
  .thanh-du-an .tda-muc a{font-size:13px;padding:8px 10px}
  .thanh-du-an .tda-ten{padding-right:6px}
}
/* Màn hình máy tính hẹp hơn nữa thì vẫn tràn: hai nút mũi tên do đoạn JS ở chân trang
   chèn vào (chỉ trên máy dùng chuột), bấm để kéo dải mục. */
.tda-mui{
  flex:0 0 30px;width:30px;height:30px;padding:0 0 2px;border-radius:50%;
  border:1px solid var(--hair);background:#fff;color:var(--navy);
  font-family:inherit;font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center
}
.tda-mui:hover{background:var(--tint);border-color:var(--tint-line)}
.tda-mui:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}
.tda-mui[hidden]{display:none}
.tda-mui.tda-trai{margin-right:-8px}
.tda-mui.tda-phai{margin-left:-8px}

/* ============================================================
   33. BẢNG NHIỀU CỘT SỐ (bảng cơ cấu đất trang King Park)

   Luật chung của .tbl trên điện thoại xếp mỗi ô thành một dòng — hợp với bảng hai cột
   "nhãn – giá trị". Bảng bốn cột số mà xếp vậy thì con số bị đẩy ra ngoài màn hình:
   khách chỉ thấy tên từng loại đất kèm một khoảng trắng, và bảng dài tới sáu màn hình
   (lỗi phát hiện 04/10/2026). Bảng mang lớp tbl-so thì giữ nguyên dạng bảng, thu chữ
   và lề cho vừa bề ngang điện thoại.
   ============================================================ */
.tbl-so{min-width:560px}
.tbl-so th:first-child{width:48%}
.tbl-so th:not(:first-child),.tbl-so td:not(:first-child){text-align:right}
.tbl-so td:not(:first-child){font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-so td.m0{font-weight:800}
.tbl-so td.m1{font-weight:700;padding-left:32px}
.tbl-so td.m2{font-weight:500;color:var(--muted);padding-left:46px}
/* Nền trắng, không kẻ sọc: bảng giấu bớt dòng thì sọc xen kẽ lệch nhịp. Dòng đầu bảng nền xám nhạt,
   dòng tổng nền xanh nhạt. Khung bo góc đặt ở lớp bọc vì bảng gộp viền không bo góc được. */
.kp-bang-boc{border:1px solid var(--hair);border-radius:14px;background:#fff}
.tbl.tbl-so{border:0;border-radius:0}
.tbl.tbl-so tr:nth-child(odd){background:transparent}
.tbl.tbl-so tr:first-child{background:var(--bg-soft)}
.tbl.tbl-so tr:nth-child(2){background:var(--tint)}
/* Chỉ chỉnh lề trên dưới — lề trái là chỗ thụt dòng của m1, m2, đụng vào là mất cấp bậc */
.tbl.tbl-so th,.tbl.tbl-so td{padding-top:12px;padding-bottom:12px}
@media(max-width:600px){
  .tbl.tbl-so{min-width:0}
  .tbl.tbl-so th,.tbl.tbl-so td{display:table-cell;width:auto;padding:10px 5px;font-size:12.5px;line-height:1.4}
  .tbl.tbl-so th{font-size:10px;letter-spacing:.02em;vertical-align:bottom}
  .tbl.tbl-so th:first-child,.tbl.tbl-so td:first-child{padding-left:10px}
  .tbl.tbl-so th:last-child,.tbl.tbl-so td:last-child{padding-right:10px}
  .tbl.tbl-so td.m1{padding-left:18px}
  .tbl.tbl-so td.m2{padding-left:26px}
}

/* ============================================================
   34. ĐIỆN THOẠI — hai chỗ chỉnh sau khi soi lại ngày 04/10/2026
   ============================================================ */
@media(max-width:868px){
  /* Ảnh chân dung là ảnh toàn thân, dựng đứng. Trên điện thoại nó cao gần hết màn hình,
     khách kéo tới chỉ thấy thân áo với ống quần rồi mới tới tên. Cắt lấy nửa thân trên
     (ô vuông, bám mép trên) để khuôn mặt và tên nằm chung một màn hình. */
  .kp-toi-anh{max-width:none}
  .kp-toi-anh img{aspect-ratio:1/1;object-fit:contain;background:#fff}
}
@media(max-width:768px){
  /* Vòng sóng quanh nút nổi: nhỏ và nhạt hơn, đỡ che chữ ở mép phải màn hình */
  .tl-song{animation-name:tl-song-nho}
}
@keyframes tl-song-nho{0%{transform:scale(1);opacity:.42}100%{transform:scale(1.5);opacity:0}}
/* Dòng "Chạm để mở bản đồ toàn màn hình" chỉ hiện khi bản đồ đã tải xong —
   hiện sớm hơn thì khách chạm vào mà chưa có gì xảy ra */
.kp-bd:not(.san-sang) .kp-bd-cham{display:none}


/* ============================================================
   35. MỤC LOẠI HÌNH (king-park/loai-hinh.php) — làm lại 04/10/2026

   Thẻ từng loại nhà: vạch màu + tên, số lớn, các dòng chi tiết, ghi chú, nhãn nguồn.
   Màu vạch lấy theo màu nét kẻ của chính bản vẽ QH-03: liền kề cam, biệt thự xanh ô-liu,
   chung cư hỗn hợp vàng nâu — khách nhìn thẻ rồi nhìn bản vẽ là nhận ra ngay.
   ============================================================ */
:root{
  --kp-lk5:#C96A0B;--kp-lk6:#E79A2E;--kp-lk7:#F3C878;
  --kp-bt:#8E8B2A;--kp-hh:#A87C22;--kp-db:#9AA3A7;--kp-do:#6D4AC7
}
.kp-lh-td{margin:0;font-size:19px;font-weight:800;color:var(--navy)}
.kp-lh{display:grid;gap:16px;margin-top:16px}
.kp-lh>*{min-width:0}
@media(min-width:700px){.kp-lh{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.kp-lh{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.kp-lh-the{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);
  border-radius:16px;padding:22px 22px 18px;transition:box-shadow .18s,transform .18s
}
.kp-lh-the:hover{box-shadow:0 14px 34px rgba(14,42,49,.10);transform:translateY(-2px)}
.kp-lh-dau{display:flex;gap:12px;align-items:center}
.kp-lh-vach{flex:0 0 10px;width:10px;height:42px;border-radius:6px;background:var(--kp-mau,var(--brand))}
.kp-lh-nhom{margin:0 0 3px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kp-lh-the h3{margin:0;font-size:18px;font-weight:800;color:var(--navy);line-height:1.3}
.kp-lh-so{margin:16px 0 0;line-height:1.1}
.kp-lh-so b{font-size:34px;font-weight:900;color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kp-lh-so span{margin-left:4px;font-size:14px;font-weight:700;color:var(--muted)}
.kp-lh-kem{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--muted)}
.kp-lh-dong{margin:14px 0 0}
.kp-lh-dong>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 0;border-top:1px dashed #D9DEE0;font-size:14.5px;line-height:1.45
}
.kp-lh-dong dt{min-width:0;font-weight:600;color:var(--ink)}
.kp-lh-dong dt i{font-style:normal;font-weight:500;color:var(--muted);white-space:nowrap}
.kp-lh-dong dt i::before{content:"· "}
.kp-lh-dong dd{margin:0;font-weight:800;color:var(--navy);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Ba thẻ số chính thức: vế phải là cả một cụm chữ, cho phép xuống dòng */
.kp-lh.ba .kp-lh-dong dd{white-space:normal;max-width:60%;font-weight:700}
.kp-lh-ghi{margin:0;padding:12px 0 0;border-top:1px dashed #D9DEE0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.kp-lh-chu{margin:14px 0 0;max-width:88ch;font-size:13.5px;line-height:1.65;color:var(--muted)}
.kp-lh-chu b{color:var(--ink)}
.kp-lh-the.lk,.kp-lh-the.lk5{--kp-mau:var(--kp-lk5)}
.kp-lh-the.lk6{--kp-mau:var(--kp-lk6)}
.kp-lh-the.lk7{--kp-mau:var(--kp-lk7)}
.kp-lh-the.bt{--kp-mau:var(--kp-bt)}
.kp-lh-the.hh{--kp-mau:var(--kp-hh)}
.kp-lh-the.db{--kp-mau:var(--kp-db)}
.kp-lh-the.do{--kp-mau:var(--kp-do)}

/* Nhãn nguồn ở chân thẻ */
.kp-ng-hang{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.kp-lh-the .kp-ng-hang{margin-top:auto;padding-top:14px}
.kp-ng{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:#EEF1F1;color:#44524F;font-size:12px;font-weight:700;line-height:1.35
}
.kp-ng::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:currentColor}
.kp-ng.duyet{background:var(--tint);color:var(--brand-deep)}
.kp-ng.tk{background:#FEF3C7;color:#92400E}
.kp-ng.do{background:#EDE9FE;color:#5B21B6}
.kp-ng.bao{background:#E0ECFF;color:#1E40AF}
.kp-ng.gt{background:#F1EFEA;color:#57534E}
.kp-ng.anh{background:#DCFCE7;color:#166534}

/* Thanh tỉ lệ số lô */
.kp-tyle{margin-top:18px;padding:18px 20px 16px;background:#fff;border:1px solid var(--hair);border-radius:16px}
.kp-tyle-thanh{display:flex;gap:2px;height:18px;border-radius:999px;overflow:hidden}
.kp-tyle-thanh span{display:block;min-width:4px}
.kp-tyle-thanh .lk5,.kp-tyle-chu i.lk5{background:var(--kp-lk5)}
.kp-tyle-thanh .lk6,.kp-tyle-chu i.lk6{background:var(--kp-lk6)}
.kp-tyle-thanh .lk7,.kp-tyle-chu i.lk7{background:var(--kp-lk7)}
.kp-tyle-thanh .bt,.kp-tyle-chu i.bt{background:var(--kp-bt)}
.kp-tyle-thanh .db,.kp-tyle-chu i.db{background:var(--kp-db)}
.kp-tyle-chu{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;padding:0;font-size:13.5px;color:var(--ink)}
.kp-tyle-chu li{display:flex;align-items:center;gap:7px}
.kp-tyle-chu i{flex:0 0 11px;width:11px;height:11px;border-radius:3px}
.kp-tyle-chu b{color:var(--navy);font-weight:800;font-variant-numeric:tabular-nums}
.kp-tyle-chu span{color:var(--muted);font-variant-numeric:tabular-nums}

/* Bảng cơ cấu đất: chỉ hiện sẵn mười dòng chính; các dòng còn lại (lớp "phu") mở ra khi khách
   bấm "Hiện đủ". Áp dụng cho cả máy tính lẫn điện thoại — sếp dặn 04/10/2026: "xoá bớt, chưa cần
   mô tả nhiều". Trước đó chỉ điện thoại mới thu gọn, máy tính hiện cả 33 dòng, dài ba màn hình. */
.kp-bang-o{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.kp-bang-o:not(:checked)~.kp-bang-boc tr.phu{display:none}
.kp-bang-nhan{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;padding:0 18px;
  border:1px solid var(--tint-line);border-radius:999px;background:var(--tint);
  color:var(--brand-deep);font-size:13.5px;font-weight:800;cursor:pointer
}
.kp-bang-o:checked~.kp-bang-nhan .a,.kp-bang-o:not(:checked)~.kp-bang-nhan .b{display:none}
.kp-bang-o:focus-visible~.kp-bang-nhan{outline:2px solid var(--brand-deep);outline-offset:2px}
@media(max-width:600px){
  .kp-lh-the{padding:18px 18px 16px}
  .kp-lh-so b{font-size:30px}
  .kp-lh-dong>div{font-size:14px;gap:10px}
  .kp-tyle{padding:16px}
  .kp-tyle-chu{gap:7px 16px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.kp-lh-the{transition:none}.kp-lh-the:hover{transform:none}}

/* ============================================================
   36. MỤC TIỆN ÍCH (king-park/loai-hinh.php) — làm lại 04/10/2026
   Trái: bảng diện tích trong ranh. Phải: ba thẻ giải thích.
   Dưới: bốn thẻ quanh dự án, rồi ba mốc ngày của Bắc Ninh.
   ============================================================ */
.kp-ti{display:grid;gap:18px;align-items:start}
.kp-ti>*{min-width:0}
@media(min-width:920px){.kp-ti{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px}}
.kp-ti-bang{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:24px 24px 20px;box-shadow:0 10px 24px rgba(14,42,49,.05)}
.kp-ti-bang h3{margin:0 0 4px;font-size:19px;font-weight:800;color:var(--navy)}
.kp-ti-bang dl{margin:0}
.kp-ti-bang dl>div{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:13px 0;border-bottom:1px solid var(--hair)}
.kp-ti-bang dl>div:last-child{border-bottom:0}
.kp-ti-bang dt{min-width:0;font-size:15px;font-weight:600;color:var(--ink)}
.kp-ti-bang dt span{display:block;margin-top:3px;font-size:13px;font-weight:500;line-height:1.55;color:var(--muted)}
.kp-ti-bang dd{margin:0;font-size:15.5px;font-weight:800;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.kp-ti-chu{margin:10px 0 0;padding-top:12px;border-top:1px dashed #D9DEE0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.kp-ti-chu b{color:var(--ink)}
.kp-ti-phai{display:grid;gap:16px}
.kp-ti-the{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--hair);border-radius:16px;padding:22px 22px 18px}
.kp-ti-the h3{margin:0 0 8px;font-size:17.5px;font-weight:800;color:var(--navy);line-height:1.35;text-wrap:balance}
.kp-ti-the p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink)}
.kp-ti-the p+p{margin-top:10px}
.kp-ti-the .kp-ng-hang{margin-top:auto;padding-top:14px}
.kp-ti-the.vang{background:#FBF4E4;border-color:#EBD9A8}
.kp-ti-the.xanh{background:#EAF6F5;border-color:var(--tint-line)}
.kp-quanh{display:grid;gap:16px;margin-top:16px}
@media(min-width:760px){.kp-quanh{grid-template-columns:1fr 1fr}}
.kp-so-lon{display:grid;gap:16px;margin-top:16px}
@media(min-width:860px){.kp-so-lon{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kp-so-lon .kp-sl-so{
  margin:0 0 8px;font-size:32px;font-weight:900;line-height:1.1;letter-spacing:-.02em;
  color:var(--brand-deep);font-variant-numeric:tabular-nums
}
@media(max-width:600px){
  .kp-ti-bang{padding:20px 18px 16px}
  .kp-ti-bang dl>div{gap:12px}
  .kp-ti-bang dt{font-size:14.5px}
  .kp-ti-bang dd{font-size:15px}
  .kp-ti-the{padding:18px 18px 16px}
  .kp-so-lon .kp-sl-so{font-size:28px}
}

/* ============================================================
   37. VIDEO VỀ DỰ ÁN (king-park/video.php) — nền tối, lấy từ kênh YouTube
   Video dài: khung 16:9 phát ngay trên trang. Shorts: ô vuông dẫn sang YouTube.
   Ảnh bìa Shorts của kênh là ảnh vuông nằm giữa khung 4:3, nên cắt vuông là vừa khít.
   ============================================================ */
.kp-vid-chinh{display:grid;gap:22px;align-items:center}
.kp-vid-chinh>*{min-width:0}
@media(min-width:869px){.kp-vid-chinh{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px}}
.kp-vid-chinh .vid{display:block;margin-top:0}
.kp-vid-nhan{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.kp-vid-chu h3{margin:0;font-size:clamp(19px,2.2vw,24px);font-weight:800;line-height:1.35;color:#fff;text-wrap:balance}
.kp-vid-chu p{margin:12px 0 18px;font-size:15px;line-height:1.7;color:#B7C7CB}
.kp-vid-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:30px}
@media(min-width:760px){.kp-vid-luoi{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.kp-vid-o{
  display:flex;flex-direction:column;min-width:0;border-radius:14px;overflow:hidden;
  background:var(--navy-2);border:1px solid rgba(255,255,255,.10);
  color:#fff;text-decoration:none;transition:transform .18s,border-color .18s
}
.kp-vid-o:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.34);color:#fff;text-decoration:none}
.kp-vid-o:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kp-vid-anh{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#000}
.kp-vid-anh img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.kp-vid-o:hover .kp-vid-anh img{transform:scale(1.06)}
.kp-vid-anh::after{
  content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(245,166,35,.96) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow:0 4px 14px rgba(0,0,0,.4)
}
.kp-vid-ten{
  padding:12px 14px 4px;font-size:14px;font-weight:700;line-height:1.42;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden
}
.kp-vid-ngay{margin-top:auto;padding:4px 14px 14px;font-size:12px;color:#9FB4B8}
@media(max-width:868px){
  /* Màn hẹp: khối chữ rơi xuống dưới khung video, mà tên video đã nằm ngay dưới khung rồi —
     giấu bản lặp, chỉ giữ câu dẫn và nút */
  .kp-vid-chu .kp-vid-nhan,.kp-vid-chu h3{display:none}
  .kp-vid-chu p{margin-top:0}
}
@media(max-width:759px){
  /* Điện thoại: sáu ô là đủ ba hàng, hai ô cuối giấu đi — còn nút xem tất cả ở dưới */
  .kp-vid-luoi .kp-vid-o:nth-child(n+7){display:none}
  .kp-vid-ten{font-size:13.5px;padding:10px 12px 4px}
  .kp-vid-ngay{padding:4px 12px 12px}
}
@media(prefers-reduced-motion:reduce){
  .kp-vid-o,.kp-vid-anh img{transition:none}
  .kp-vid-o:hover{transform:none}
  .kp-vid-o:hover .kp-vid-anh img{transform:none}
}

/* ============================================================
   38. MỤC TỔNG QUAN TRANG KING PARK — làm gọn 04/10/2026
   Trước là bảng 13 dòng dài ba màn hình máy tính, mỗi dòng kèm một dòng "nguồn:".
   Nay: ba thẻ theo nhóm (tên gọi và vị trí · quy mô và loại hình · pháp lý và tiến độ),
   nguồn thành nhãn nhỏ nằm ngang hàng với tên dòng. Thẻ pháp lý là dòng thời gian.
   Khối "các nguồn ghi khác nhau" gom vào một khung ba cột.
   ============================================================ */
.kp-hs{display:grid;gap:16px}
.kp-hs>*{min-width:0}
@media(min-width:760px){.kp-hs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:760px) and (max-width:1039.98px){
  /* Hai cột mà có ba thẻ: thẻ pháp lý trải hết bề ngang, dòng thời gian quay ngang cho khỏi trống */
  .kp-hs-the.co-moc{grid-column:1/-1}
  .kp-hs-the.co-moc .kp-moc{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 18px}
  .kp-hs-the.co-moc .kp-moc li{padding:22px 0 0}
  .kp-hs-the.co-moc .kp-moc li::before{top:0}
  .kp-hs-the.co-moc .kp-moc li::after{left:15px;right:-14px;top:5px;bottom:auto;width:auto;height:1.5px}
}
@media(min-width:1040px){.kp-hs{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
/* Thẻ xếp cột dọc: ba thẻ cao bằng nhau thì hàng nhãn nguồn bám đáy thẻ */
.kp-hs-the{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--hair);border-radius:16px;padding:20px 22px;
  box-shadow:0 10px 24px rgba(14,42,49,.05)
}
.kp-hs-dau{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.kp-hs-dau h3{margin:0;font-size:17px;font-weight:800;color:var(--navy);line-height:1.3}
.kp-hs-ds{margin:0}
.kp-hs-ds>div{padding:12px 0;border-bottom:1px dashed #D9DEE0}
.kp-hs-ds>div:last-child{padding-bottom:0;border-bottom:0}
.kp-hs-ds dt{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;
  margin-bottom:4px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)
}
.kp-hs-ds dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.kp-hs-ds dd b{color:var(--navy)}
.kp-hs-ds dd small,.kp-moc small{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--muted)}
/* Ranh giới bốn phía: cột trái là hướng, cột phải là thứ giáp ranh */
.kp-hs-4{display:grid;gap:4px}
.kp-hs-4>span{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px}
.kp-hs-4 b{font-weight:700;white-space:nowrap}
/* Nhãn nguồn cỡ nhỏ — cùng họ với hàng nhãn nguồn của mục Loại hình */
/* position:relative để chữ ẩn .kp-an bám theo nhãn. Thiếu nó, chữ ẩn bám theo cả trang: thẻ nằm
   ngoài mép phải trong hàng vuốt ngang sẽ kéo cả trang rộng ra (lỗi gặp 04/10/2026). */
.kp-ng.nho{position:relative;padding:2px 9px;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none}
.kp-ng.hs{background:var(--tint);color:var(--brand-deep)}
/* Chữ chỉ dành cho máy đọc màn hình */
.kp-an{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Dòng thời gian trong thẻ pháp lý: chấm đặc là mốc lớn, chấm nét đứt là việc chưa có */
.kp-moc{list-style:none;margin:14px 0 0;padding:0}
.kp-moc li{position:relative;padding:0 0 14px 24px}
.kp-moc li:last-child{padding-bottom:0}
.kp-moc li::before{
  content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;
  background:#fff;border:2px solid var(--brand)
}
.kp-moc li::after{content:"";position:absolute;left:5px;top:19px;bottom:-1px;width:1.5px;background:var(--tint-line)}
.kp-moc li:last-child::after{display:none}
.kp-moc li.chinh::before{background:var(--brand)}
.kp-moc li.cho::before{border-style:dashed;border-color:#AEBBBE}
.kp-moc-ngay{display:block;font-size:12px;font-weight:800;line-height:1.5;color:var(--brand-deep);font-variant-numeric:tabular-nums}
.kp-moc li.cho .kp-moc-ngay{color:var(--muted)}
.kp-moc p{margin:1px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.kp-moc p b{color:var(--navy)}
.kp-hs-xem{align-self:flex-start;margin:14px 0;font-size:13.5px;font-weight:700;line-height:1.5;color:var(--brand-deep)}
.kp-hs-xem::after{content:" →"}
.kp-hs-the .kp-ng-hang{margin-top:auto;padding-top:12px;border-top:1px dashed #D9DEE0}

/* Các chỗ nguồn ghi khác nhau: vạch xám là số nguồn kia ghi, vạch xanh là số trang này dùng */
.kp-venh{margin-top:20px;padding:20px 22px;background:var(--bg-soft);border:1px solid var(--hair);border-radius:16px}
.kp-venh-dau h3{margin:0;font-size:17px;font-weight:800;color:var(--navy);line-height:1.3}
.kp-venh-dau p{margin:4px 0 0;max-width:84ch;font-size:14px;line-height:1.6;color:var(--muted)}
.kp-venh-luoi{display:grid;margin-top:14px}
.kp-venh-o{min-width:0;padding:14px 0;border-top:1px solid var(--hair)}
.kp-venh-o:last-child{padding-bottom:0}
@media(min-width:860px){
  .kp-venh-luoi{grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair)}
  .kp-venh-o{padding:16px 22px 0;border-top:0;border-left:1px solid var(--hair)}
  .kp-venh-o:first-child{padding-left:0;border-left:0}
  .kp-venh-o:last-child{padding-right:0}
}
.kp-venh-ten{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-deep)}
.kp-venh-o dl{display:grid;gap:9px;margin:0}
.kp-venh-o dl>div{padding-left:11px;border-left:3px solid #CBD5D8}
.kp-venh-o dl>div.b{border-left-color:var(--brand)}
.kp-venh-o dt{font-size:12px;font-weight:700;line-height:1.4;color:var(--muted)}
.kp-venh-o dd{margin:1px 0 0;font-size:15px;font-weight:800;line-height:1.4;color:var(--navy)}
.kp-venh-o dl>div.a dd{font-weight:700;color:var(--ink)}
.kp-venh-y{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
@media(max-width:600px){
  .kp-hs-the{padding:18px 16px}
  .kp-venh{padding:18px 16px}
}

/* ============================================================
   39. ĐIỆN THOẠI: HÀNG THẺ VUỐT NGANG (trang King Park) — 04/10/2026
   Sếp dặn "làm cả giao diện trên điện thoại". Trên điện thoại các nhóm thẻ và nhóm ảnh xếp dọc,
   mỗi nhóm dài một tới ba màn hình; cả trang gần 50 màn hình. Khối nào mang lớp kp-vuot thì
   dưới 640px thành MỘT hàng vuốt ngang: thẻ sau ló ra một mép để khách biết còn nữa, dãy chấm
   bên dưới báo đang ở cột thứ mấy (dãy chấm do đoạn mã trong footer.php thêm vào).
   Máy tính không đổi gì: vẫn là lưới như cũ. Không khối nào bị bỏ bớt nội dung.
   ============================================================ */
:root{--kp-le:20px}
@media(max-width:400px){:root{--kp-le:16px}}
.kp-vuot-cham{display:none}
@media(max-width:639px){
  /* position:relative: thứ gì đặt tuyệt đối bên trong thẻ cũng bị khung cuộn này cắt,
     không lọt ra làm trang rộng hơn màn hình */
  .kp-vuot{
    position:relative;
    display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:85%;gap:12px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-left:calc(-1*var(--kp-le));margin-right:calc(-1*var(--kp-le));
    padding:2px var(--kp-le) 4px;scroll-padding-left:var(--kp-le);
    scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .kp-vuot::-webkit-scrollbar{display:none}
  /* Bóng đổ bị khung cuộn cắt cụt nên bỏ — thẻ nào cũng đã có viền */
  .kp-vuot>*{scroll-snap-align:start;min-width:0;box-shadow:none}
  .kp-vuot>*:hover{transform:none;box-shadow:none}

  /* Dải thông số đầu trang: hai thẻ chồng nhau thành một cột, vuốt theo từng cặp */
  .kp-vuot.kp-vuot-doi{grid-template-rows:repeat(2,auto);grid-auto-columns:82%;gap:10px}
  /* Ô video nhỏ: thấy hơn hai ô một lúc, và hiện đủ cả tám ô thay vì giấu hai ô cuối */
  .kp-vid-luoi.kp-vuot{grid-auto-columns:46%}
  .kp-vid-luoi.kp-vuot .kp-vid-o:nth-child(n+7){display:flex}
  /* Ba chỗ vênh nằm trong khung xám: lề tính theo khung, mỗi chỗ thành một thẻ trắng */
  .kp-venh .kp-vuot{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;scroll-padding-left:16px}
  .kp-venh .kp-vuot .kp-venh-o{padding:14px;border:1px solid var(--hair);border-radius:12px;background:#fff}

  /* Mỗi chấm là một nút bấm được; vùng bấm rộng hơn cái chấm nhìn thấy cho dễ chạm */
  .kp-vuot-cham{display:flex;justify-content:center;margin-top:4px}
  .kp-vuot-cham button{
    display:flex;align-items:center;justify-content:center;min-width:20px;height:28px;padding:0 4px;
    border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent
  }
  .kp-vuot-cham button:focus-visible{outline:2px solid var(--brand-deep);outline-offset:-5px;border-radius:9px}
  .kp-vuot-cham i{display:block;width:6px;height:6px;border-radius:999px;background:#C9D3D6;transition:width .2s,background-color .2s}
  .kp-vuot-cham button.bat i{width:18px;background:var(--brand)}
  .dark .kp-vuot-cham i{background:rgba(255,255,255,.28)}
  .dark .kp-vuot-cham button.bat i{background:var(--brand)}
}
@media(max-width:639px) and (prefers-reduced-motion:reduce){.kp-vuot-cham i{transition:none}}